css
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 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:
Ejemplo:
1 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:
1
2
3
4
9
10
11
12
13
14...
15
16
Selectores multiples
Aplicar un estilo a múltiples etiquetas al separar los nombres de las mismas con una coma (,). La sintaxis es:
type-selector1, type-selector2 { /* style */ }
Selector universal
Através del selector universal ("*").Se define un estilo que se aplicará a todos los elementos HTML. La sintaxis es:
* { /* style */ }
El selector universal generalmente no se implementa en navegadores.
Selectores anidados
Seleccionar una etiqueta dentro de un contexto dado, es decir, según los elementos que se encuentran alrededor, mediante selectores contextuales.
Existen varios tipos deselectores 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:
Nota, esto es una advertencia
Leer detenidamente
La siguiente regla sólo afecta a la palabra "advertencia" (la única rodeada poretiquetas que están a su vez anidadas dentro de un grupo de etiquetas
):
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:
Nota, esto es una advertencia
Leer detenidamente
La siguiente regla sólo afecta a la palabra "advertencia" (la única rodeada por etiquetas que a su vez siguen al grupo de etiquetas
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ásetiquetas intermediarias. Su sintaxis es:
selector_X > selector_Y { /* style; */ }
Para el siguiente código HTML:
Nota , esto es una advertencia
Leer detenidamente
La siguiente regla sólo afecta al elemento " Nota " (la única rodeada por etiquetas que están a su vez dentro de un grupo de etiquetas
):
P > B { font-weight: bold;color: red; }
Propiedades de estilo Comentarios
Es posible (y se recomienda) documentar las hojas de estilo a través de la incorporación de comentarios que aportan información adicional (una razón para elegir un estilo u otro, el tipo de documento al que se va a aplicar, el contexto, etc.). Los comentarios CSS están marcados con los signos /* y */:
...
Regístrate para leer el documento completo.