Existen múltiples opciones a la hora de editar CSS; en su estructura y en su forma de implementarla.
En su estructura, a los fines de la brevedad utilizaremos
sólo dos opciones de estilos CSS:
redefiniciones de etiquetas HTML
y estilos personales, llamados clases
(class). Las redefiniciones se aplican de manera automática
a todo elemento homónimo en el HTML,
sin necesidad de una referencia especial. Las clases, en cambio, requieren de
un atributo class que identifique al elemento individualmente. Si definimos
una clase llamada .especial, y la queremos aplicar a un elemento específico <span> dentro del código
html, deberemos definir un atributo class para <span>
de la siguiente forma:
sólo dos opciones de estilos CSS:
redefiniciones de etiquetas HTML
y estilos personales, llamados clases
(class). Las redefiniciones se aplican de manera automática
a todo elemento homónimo en el HTML,
sin necesidad de una referencia especial. Las clases, en cambio, requieren de
un atributo class que identifique al elemento individualmente. Si definimos
una clase llamada .especial, y la queremos aplicar a un elemento específico <span> dentro del código
html, deberemos definir un atributo class para <span>
de la siguiente forma:
<span class="especial">Contenido
aquí</span>Notar que no es necesario incluir el punto
(.) que en CSS identifica a la clase, sólo el texto de su nombre, entre comillas.
(.) que en CSS identifica a la clase, sólo el texto de su nombre, entre comillas.
En la forma de implementarlos, hay cuatro
opciones:
opciones:
1)
Incrustar las definiciones de estilo dentro del documento HTML,
en <head>, por medio de
la etiqueta <style type=”text/css”>;
por Ej.:
Incrustar las definiciones de estilo dentro del documento HTML,
en <head>, por medio de
la etiqueta <style type=”text/css”>;
por Ej.:
<head>
<title>Ejemplo de estilos CSS incorporados al documento HTML</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style type="text/css">
<!--
body { font-family: arial, helvetica, sans-serif; color: #000000; margin:
0px; }
h2 { font-size: 22px; font-weight: bold; color: #ff0000; text-decoration:
underline;
text-align: center; }
h3 { font-size: 17px; font-weight: bold; color: #ff3300; text-decoration:
underline;
text-align: center; }
</style>
</head>
2)
Vincular el documento HTML a la
hoja de estilos, por medio del siguiente código (siempre en <head>,
y se estila, aunque no hay ninguna ley al respecto, situarla después de los <meta> y los<script>):
Vincular el documento HTML a la
hoja de estilos, por medio del siguiente código (siempre en <head>,
y se estila, aunque no hay ninguna ley al respecto, situarla después de los <meta> y los<script>):
<link rel=stylesheet type="text/css"
href="url" title="titulo">(notar que ésta es una etiqueta “vacía”, que no requiere cierre);
3) O bien, importarla con el siguiente código:
<style type="text/css">
<!--
@import url(url/nombre_de_documento.css);
-->
</style> La cuarta y última opción es adjuntar
el estilo dentro del HTML como
un atributo, pero esta opción no es recomendable porque va en contra de uno
de los principales objetivos de las CSS:
separar la estructura de la presentación. Este método es análogo al que se usaba
en versiones anteriores de HTML,
por ejemplo con la etiqueta <font> (hoy, etiqueta “deprecada” -deprecated-, o no perteneciente
a la especificación HTML 4.0,
en favor de los estándares):
el estilo dentro del HTML como
un atributo, pero esta opción no es recomendable porque va en contra de uno
de los principales objetivos de las CSS:
separar la estructura de la presentación. Este método es análogo al que se usaba
en versiones anteriores de HTML,
por ejemplo con la etiqueta <font> (hoy, etiqueta “deprecada” -deprecated-, o no perteneciente
a la especificación HTML 4.0,
en favor de los estándares):
<body> <p style="color: blue">Texto aquí</p> </body>
Utilizaremos el método de vincular la
hoja de estilos (no nos extenderemos sobre el por qué). Esto significa que editaremos
un documento de texto, de extensión .css,
conteniendo las reglas de los estilos, separadamente del documento HTML.
Nos evitará tener que escribirlos para cada una de las páginas del sitio si
decidiéramos incrustarlos en ellas. Sencillamente, definimos todos los estilos
para el sitio en, por ejemplo, “nombre_del_sitio.css” y la vinculamos
a todas las páginas por medio de la sencilla etiqueta <link rel=stylesheet…>,
etc.
hoja de estilos (no nos extenderemos sobre el por qué). Esto significa que editaremos
un documento de texto, de extensión .css,
conteniendo las reglas de los estilos, separadamente del documento HTML.
Nos evitará tener que escribirlos para cada una de las páginas del sitio si
decidiéramos incrustarlos en ellas. Sencillamente, definimos todos los estilos
para el sitio en, por ejemplo, “nombre_del_sitio.css” y la vinculamos
a todas las páginas por medio de la sencilla etiqueta <link rel=stylesheet…>,
etc.
No hay comentarios:
Publicar un comentario