domingo, 19 de junio de 2011

CSS para novatos parte 1: Tipos de implementaciones CSS

Aunque muchos lo digan, CSS ni es tan fácil, ni puede dominarse solamente conociendo todas sus reglas, de otra forma no habría tantos sitios de soporte y ayuda para solucionar problemas específicos. Pero todo requiere requisitos previos, no puedes solamente empezar desde cero, deberías tener nociones básicas de html que es de lo más básico, a qui no te enseñaremos eso, como sea indicaremos donde va cada cosa.

En este tutorial no aprenderás todas y cada una de las propiedades CSS, sino a manejarlas de forma básica, de momento no veremos ni Sub-clases, ni seudo-elementos, porque puede ser confuso si no se experimenta primero con Selectores, Selectores de Clase y Selectores de ID.

Que es CSS o Hojas de estilos por cascada

Existen tres formas de implementar CSS en una página web:

1. En la misma página como el estilo general ya sea en <head> y </head> o en <body> y </body>:
<style><!-- estilo --></style>
2. Directamente en una etiqueta HTML dentro de <body> y </body>.
<etiqueta style="-- estilo --"> -- Contenido -- </etiqueta>
3. Como archivo independiente de extension .css únicamente en <head> y </head>
<link type='text/css' rel='stylesheet' href='http://tusitio.com/estilo.css' />
Para ubicar la posición correcta dentro una web
La estructura de una página web funciona de la siguiente manera:

<html>
<head>
-- códigos javascript, estilos y elementos no visibles --
</head>
<body>
-- Tablas, Div, object, imagenes, texto, algunos tipos de scripts, todo lo que será visible dentro de la página --
</body>
</html>

Caso 1
Para el primer caso, usualmente iría en las etiquetas <head> y </head> Si va dentro de body en casos muy especiales como en un tutorial de CSS o HTML tendría que venir comentado todo el contenido para que no aparezca visible, esto es encerrándo el código dentro de <!-- y -->, debe además agregarse type='text/css' en la etiqueta <style>

Ejemplo:
<head>
<style type='text/css'>
<!--
.p {color:#c00;}
-->
</style>
</head>

o (no recomendable):

<body>
<div>
<style>
<!--
p {color:#c00;padding:6px 10px;}
-->
</style>
</div>
</body>


Caso 2
Dentro de una etiqueta html podemos asignar directamente CSS propiedades, pero se debe estar conscientes que por ejemplo; vínculos u otros elementos que requieran el uso de sub-clases y sub-elementos por ejemplo a:link, a:hover y a:visited, solamente se podrán crear dentro de un archivo CSS o declarados en <style> y </style>.

Ejemplo
<div style="width:500px;height:200px;background:#000;">
<p style="margin-top:0;margin-left:15px;">
Esto es un texto</p>
<img style="border:1px solid #f0c;" src="imagen.jpg" />
</div>
Casi todas las etiquetas son susceptibles de CSS, salvo aquellas invisibles como <tbody>, <thead> y <tfoot> creadas por Microsoft para marcar las áreas relevantes dentro de una tabla, ni en <script> o cualquier etiqueta en el área <head> </head>, en <object> que es usado para embeber objetos está parcialmente soportado, no todas las propiedades son aceptadas, depende del navegador.

Caso 3
Podemos hacer un archivo CSS con un archivo de texto que le cambiamos la extensión a .css y escribimos las reglas dentro de este archivo y luego cargarlo mediante la etiqueta <link />, siempre dentro de <head> y </head>

Ejemplo (deben agregarse los atributos type='text/css' rel='stylesheet' dentro <link />):

<head>
<link type='text/css' rel='stylesheet' href='http://tusitio.com/estilo.css' />
</head>

►Continua en: CSS para novatos parte 2: Creación de reglas: Estructura y tipos

Comentarios y Consultas

Los mensajes son moderados serán revisados antes de publicarse.

Este no es un foro de adolescentes, no uses letras en vez de palabras completas como "q" en vez de "que", ni escribas tus mensajes en mayúsculas, se respetuoso con los demás, si no estás de acuerdo no comentes.

Una cosa es que no te guste una crítica, otra que uses un lenguaje inapropiado para demostrarlo. No me siento en la obligación de publicar ningún mensaje en específico o de leerlo entero si usas palabras altisonantes.

Termina la serie Grimgar de Fantasía y Cenizas

Grimgar de Fantasía y Cenizas (2016)Llegó a su fin Grimgar de Fantasía y Cenizas luego de doce episodios.

[Leer artículo...]

One Punch Man OVA 4 (2016): Review y crítica

One Punch Man OVA 4 (2016): Review y críticaY llega una nueva adaptación de personajes del universo marvel, una divertida aventura espacial.

[Leer artículo...]

Gate: Segunda temporada (2016): Episodio 12 Final: Reseña y crítica

Gate: Segunda temporada (2016): Episodio 12 Final: Reseña y críticaLas aventuras de Itami y sus amigos llega a su fin con el rescate de Piña de las manos de Zorzal.

[Leer artículo...]

Desaparecida: Boku Dake ga Inai Machi (2016) Episodio 12 Final - Reseña y crítica del anime

Desaparecida: Boku Dake ga Inai Machi (2016)Satoru descubre al culpable de la trama, es el momento de enfrentarse y tendrá que dar todo de sí para cambiar su suerte.

[Leer artículo...]

  © Cgnauta | CGsign blog | [Ver Licencia de uso] | Matius Lenin, Creative Commons, algunos derechos reservados

Regresar ARRIBA  

Vistas desde Mayo 2009

▼/▲ Archivo del Blog

Visitas totales

Información

IBSN: Internet Blog Serial Number 01-77-94-2008

Esta plantilla es creada y diseñada por Matius Lenin para CGnauta blog. Con Scripts de JQuery bajo licencia GNU/GPL. CGnauta es una marca registrada propiedad de Matius Lenin.

Anexos

Bitacoras.com