Que significan las siglas CSS?
siglas en inglés de Cascading Stylesheets
Para que se utiliza CSS?
para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado. Es muy usado para establecer el diseño visual de las páginas web, e interfaces de usuario escritas en HTML o XHTML; el lenguaje puede ser aplicado a cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS, etcétera. También permite aplicar estilos no visuales, como las hojas de estilo auditivas.
Versiones de CSS
CSS 1: publicada en 1996.
CSS 2: publicada en 1998.
CSS 2.1: publicada en 2004.
CSS 3: publicada en 2011.
CSS 4: se estima que pueda ser especificación oficial en 2019.
Versiones de HTML
HTML 2.0
HTML 3.2
HTML 4.01
HTML 5
HTML 5.1
HTML5.2
Incrustar o incluir CSS en el mismo documento html
Este método se emplea cuando se define un número pequeño de estilos o cuando se quieren incluir estilos específicos en una determinada página HTML que completen los estilos que se incluyen por defecto en todas las páginas del sitio web.
El principal inconveniente es que si se quiere hacer una modificación en los estilos definidos, es necesario modificar todas las páginas que incluyen el estilo que se va a modificar.
Los ejemplos mostrados en este libro utilizan este método para aplicar CSS al contenido HTML de las páginas. De esta forma el código de los ejemplos es más conciso y se aprovecha mejor el espacio.
Los estilos se incluyen en un archivo con extensión .css que las páginas HTML enlazan mediante la etiqueta <link>. Los atributos que deben incluir son:
rel: indica el tipo de relación que tiene el recurso enlazado y la página HTML. En CSS, se usa stylesheet.
type: indica el tipo de recurso enlazado. En CSS, es text/css.
href: indica la URL del archivo CSS que contiene los estilos. La URL puede ser relativa o absoluta.
media: indica el medio en el que se van a aplicar los estilos del archivo CSS. En principio, para este ejemplo no es importante, lo normal es poner all.
Selectores CSS
Selector universal
El selector universal, coincide con cualquier tipo de elemento. Puede ser implícita (y por lo tanto se omite) si no es el único componente del selector simple. Los dos ejemplos que se muestran aquí selectores son equivalentes:*.warning { ⋮ declarations } .warning { ⋮ declarations }
Selector Tipo Etiqueta
Un selector de elemento consta de la etiqueta o elemento que representa, seguido de las reglas de estilo que se le aplicarán. Presenta la siguiente forma:selector de elemento { reglas de estilo }
h1 {
color: red; } h2 { color: blue; } p { color: black; }
Selector descendente
Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento.
El selector del siguiente ejemplo selecciona todos los elementos <span> de la página que se encuentren dentro de un elemento <p>:
p span { color: red; }
Si el código HTML de la página es el siguiente:
<p> ... <span>texto1</span> ... <a href="">...<span>texto2</span></a> ... </p>
Selector de clase
Si se considera el siguiente código HTML de ejemplo:
<body> <p>Lorem ipsum dolor sit amet...</p> <p>Nunc sed lacus et est adipiscing accumsan...</p> <p>Class aptent taciti sociosqu ad litora...</p> </body>
¿Cómo se pueden aplicar estilos CSS sólo al primer párrafo? El selector universal (*) no se puede utilizar porque selecciona todos los elementos de la página. El selector de tipo o etiqueta (p) tampoco se puede utilizar porque seleccionaría todos los párrafos. Por último, el selector descendente (body p) tampoco se puede utilizar porque todos los párrafos se encuentran en el mismo sitio.
Selectores de ID
El selector de ID permite seleccionar un elemento de la página a través del valor de su atributo id. Este tipo de selectores sólo seleccionan un elemento de la página porque el valor del atributo id no se puede repetir en dos elementos diferentes de una misma página.
La sintaxis de los selectores de ID es muy parecida a la de los selectores de clase, salvo que se utiliza el símbolo de la almohadilla (#) en vez del punto (.) como prefijo del nombre de la regla CSS:
#destacado { color: red; } <p>Primer párrafo</p> <p id="destacado">Segundo párrafo</p> <p>Tercer párrafo</p>
Combinación de selectores básicos
CSS permite la combinación de uno o más tipos de selectores para restringir el alcance de las reglas CSS. A continuación se muestran algunos ejemplos habituales de combinación de selectores.
.aviso .especial { ... }
El anterior selector solamente selecciona aquellos elementos con un class="especial" que se encuentren dentro de cualquier elemento con un class="aviso".
Si se modifica el anterior selector:
div.aviso span.especial { ... }
No hay comentarios:
Publicar un comentario