Css Estilo
Enviado por diazjk • 3 de Diciembre de 2013 • 1.637 Palabras (7 Páginas) • 347 Visitas
Sintaxis de estilo (CSS)
US ES DE FR IT BR
Noviembre 2013
Definición de un estilo
Al definir un estilo se utilizan reglas de texto simples para describir el aspecto de los elementos de la página. Una regla CSS se caracteriza por dos elementos principales:
• Un selector de tipo para especificar a qué etiquetas del documento se aplica el estilo.
• Una declaración de estilo, que se define entre paréntesis, para especificar qué estilo aplicar a las etiquetas seleccionadas. A su vez, la declaración está compuesta por:
• una o más propiedades, seguidas por el carácter ":" (dos puntos)
• uno o más valores asociados a cada propiedad, entre comillas y separados por comas si hay múltiples valores, y todos seguidos por un punto y coma.
Por lo tanto, la sintaxis es:
La siguiente sintaxis define, a forma de ejemplo, el estilo a aplicar a hipervínculos (etiqueta <A>), específicamente fuente Verdana de 18 píxeles de tamaño, en negrita y en color amarillo:
A {
font-family: Verdana;
font-size: 18px;
font-style: bold;
color: yellow
}
Selectores de tipo
Los "selectores de tipo" (o "selectores de elementos de tipo") son las palabras que están delante de los paréntesis y que indican las etiquetas a las que se aplica el estilo que aparece entre paréntesis.
Para definir el estilo de una etiqueta HTML en particular, sólo debe usarse el nombre de la etiqueta (sin los caracteres < y >). Por ejemplo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
tag {properties}
-->
</STYLE>
</HEAD>
<BODY>
<tag> ... </tag>
...
</BODY>
</HTML>
Selectores múltiples
También se puede aplicar un estilo a múltiples etiquetas al separar los nombres de las mismas con una coma (,). La sintaxis de tal selector, denominado selector múltiple, es:
type-selector1, type-selector2 { /* style */ }
Selector universal
A través del selector universal ("*") se puede definir un estilo que se aplicará a todos los elementos HTML. La sintaxis del selector universal es:
* { /* style */ }
El selector universal generalmente no se implementa en navegadores.
Selectores anidados
Se puede seleccionar una etiqueta dentro de un contexto dado, es decir, según los elementos que se encuentran alrededor, mediante selectores contextuales.
Existen varios tipos de selectores contextuales:
• El selector anidado se usa para crear una regla que se aplica solamente cuando el elemento Y está anidado dentro del elemento X. Su sintaxis es:
selector_X selector_Y { /* style; */ }
Para el siguiente código HTML:
<p> <i>Nota</i>, esto es una <b>advertencia</b> </p>
<b> Leer detenidamente </b>
La siguiente regla sólo afecta a la palabra "advertencia" (la única rodeada por etiquetas <B> que están a su vez anidadas dentro de un grupo de etiquetas <P>):
P B { font-weight: bold; color: red; }
• El selector de hermanos adyacentes se usa para crear una regla que se aplica solamente cuando el elemento Y le sigue inmediatamente al elemento X. Su sintaxis es:
selector_X + selector_Y { /* style; */ }
Para el siguiente código HTML:
<p> <i>Nota</i>, esto es una <b>advertencia</b> </p>
<b> Leer detenidamente </b>
La siguiente regla sólo afecta a la palabra "advertencia" (la única rodeada por etiquetas <B> que a su vez siguen al grupo de etiquetas <l>):
I + B { font-weight: bold; color: red; }
• El selector de hijo se usa para crear una regla que solamente se aplica cuando el elemento Y es descendiente del elemento X. La regla no se aplica si Y se encuentra dentro de una o más etiquetas intermediarias. Su sintaxis es:
selector_X > selector_Y { /* style; */ }
Para el siguiente código HTML:
<p> <b><i> Nota </i></b>, esto es una <i><b> advertencia </b></i> </p>
<b> Leer detenidamente </b>
La siguiente regla sólo afecta al elemento "<i> Nota </i>" (la única rodeada por etiquetas <B> que están a su vez dentro de un grupo de etiquetas <P>):
P > B { font-weight: bold; color: red; }
Propiedades de estilo
Lección 7: Identificación y agrupación de elementos (class e id)
A veces querrás aplicar un estilo especial a un elemento concreto o a un grupo concreto de elementos. En esta lección examinaremos cómo usar los atributos class e id para especificar propiedades para los elementos seleccionados.
¿Como se puede dar color a un título concreto de forma diferente a los otros títulos de tu sitio web? ¿Cómo se
...