Tercer periodo, 5to miltimedia, año 2019-20, #4, Uso De Css.
Uso De Css.
Sintaxis
CSS tiene una sintaxis simple y usa un conjunto de palabras clave en inglés para especificar los nombres de varias propiedades de estilo.
Una hoja de estilos consiste en una serie de reglas. Cada regla, o conjunto de reglas consisten en uno o más selectores, y un bloque de declaración.
Selectores
Los selectores declaran qué etiquetas se le aplican a los estilos que coincidan con la etiqueta o atributo señalados en la regla.
Los selectores pueden aplicarse a:
- Todos los elementos de un tipo, como los párrafos
<p>
. - Elementos seguidos de un atributo, en particular:
- id: identificador, un identificador único para la etiqueta.
- class: clase, un identificador para anotar múltiples elementos.
Las clases y los identificadores son sensibles a las mayúsculas, comienzan con letras, y pueden incluir caracteres alfanuméricos y guiones bajos. Una clase se aplica a cualquier número de elementos. Un identificador se aplica a un solo elemento.
Las pseudoclases son usadas en los selectores CSS para permitir el formateo usando información que no está incluida en el documento. Un ejemplo de una pseudoclase muy usada es
:hover
, que identifica el contenido que está siendo apuntado por un puntero, como el cursor del ratón. Este nombre se añade al selector, de esta manera: a:hover
o #elementid:hover
. Una pseudoclase clasifica elementos, como :link
o :visited
, mientras que un pseudoelemento hace una selección de elementos parciales, como ::first-line
o ::first-letter,
Los selectores pueden ser combinados de muchas maneras para obtener una mayor flexibilidad y precisión. Múltiples selectores pueden ser unidos en una misma línea para especificar elementos por su ubicación, tipo de elemento, identificador, clase, o cualquier combinación de estos. El orden de los selectores es importante. Por ejemplo, div.myClass {color: red;}
aplica a todos los elementos <div>
con la clase myClass, mientras que.myClass div {color: red;}
aplica a todos los elementos <div>
que estén dentro de cualquier elemento con la clase myClass.
Bloque de declaraciones
Un bloque de declaraciones consiste en una lista de declaraciones unidas. Cada declaración consiste en una propiedad, dos puntos (
:
), y un valor. Si hay muchas declaraciones en un bloque, un punto y coma (;
) es insertado para separar cada declaración.
Las propiedades son insertadas en el estándar CSS. Cada propiedad tiene un conjunto de posibles valores. Algunas propiedades afectan a cualquier elemento, otras solo a un grupo particular de elementos. Los valores pueden ser palabras clave, como "center" o "inherit", o valores numéricos, como 200px (200 píxeles) o 80% (80 por ciento del ancho de la ventana). Los valores de colores son especificados por medio de una palabra clave (ej. "red"), de valores hexadecimales (ej. #FF0000, pudiéndose abreviar como #F00), valores RGB en una escala del 0 al 255 (ej.
rgb(255, 0, 0)
), valores RGBA igual que los valores RGB pero con soporte para el canal alfa de transparencias (ej. rgba(255, 0, 0, 0.8)
), y valores HSL o HSLA (ej. hsl(000, 100%, 50%)
, hsla(000, 100%, 50%, 80%)
).
Comentarios
Publicar un comentario