Índice
Sintaxis de los estilos
Los estilos se declaran de la siguiente forma:
estilo1{ formato1: valor1; formato2: valor2; formato3: valor3; }
Por ejemplo, se pueden declarar estilos para cada etiqueta HTML. Para el caso de cambiar el tipo de letra y el color de fondo de la etiqueta BODY, la sintaxis a emplear sería:
body{ background-color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
}
Lugar de declaración del estilo
Declaración en el head del documento
Los estilos se puede declaran en el HEAD, mediante la etiqueta STYLE, afectando el estilo sólo a ese documento html:
<STYLE> estilo1{ formato1:valor1; formato2:valor2; formato3:valor3; } </STYLE>
Declaración en una hoja externa
Lo normal y más útil es declarar los estilos en una hoja de estilos externa, para que así pueda aplicarse a todas las páginas del sitio. Esa hoja se vincularía, también en el HEAD, de la siguiente manera:
<link href="mi_hoja_de_estilos.css" rel="stylesheet" type="text/css" />
Al hacer cualquier cambio en la hoja de estilos afectaría a todas las páginas del sitio en las que la hoja está vinculada.
Declaración en un parámetro de una etiqueta HTML
Los estilos se pueden declarar también mediante un parámetro que se puede utilizar en las etiquetas HTML. El parámetro en cuestión es "style". Por ejemplo, para cambiar el tipo de letra que se encuentra dentro de un párrafo, la declaración del estilo sería:
<p style="font-family: Courier New; font-size: 2pt; color: red;"> Este texto tiene un estilo aplicado individualmente
</p>
Este cambio de estilo sólo afectaría al contenido de dicho párrafo, y prevalecería su aplicación aunque hubiésemos creado un estilo para el mismo párrafo con alguna de las otras dos declaraciones.
Formas de aplicación de CSS
Aplicación global o de etiqueta
Cuando redefinimos el estilo global que tendrá una etiqueta de HTML. Para crear el estilo basta con escribir el nombre la etiqueta:
body{
font-family: Courier New;
color: blue; }
Aplicación por clases
Podemos crearnos esilos personalizados definiéndolos en la hoja de estilos mediante el nombre del estilo personalizado precedido por un punto.
.miestilo{ font-family: Courier New; color: blue; }
El estilo se aplica posteriormente en las etiquetas HTML con el parámetro class. Por ejemplo, en un párrafo:
<p class="miestilo"> Este párrafo lleva miestilo </p>
Aplicación por identificador
Cualquier etiqueta HTML puede llevar un identificador (id): el nombre que queramos, con la condición que sea único. Por ejemplo, para la etiqueta DIV:
<div id="nombreIdentificador"> aquí va el contenido de la capa </div>
Podremos crear un estilo para ese identificador medidante la almohadilla # seguida del nombre del identificador:
#nombreIdentificador{ font-family: Courier New; color: blue; }
Aplicación compuesta
Sería la aplicación que mezcla las 3 formas de aplicación anteriores. Por ejemplo, podríamos definir un estilo compuesto del siguiente modo:
miEstiloGlobal #miEstiloDeId .miEstiloDeClase
Categorías de los estilos
Tipo
- font-family
- font-size
- font-weight
- font-style
- color
- text-decoration
Fondo
- background-color
- background-image
- background-repeat
- background-position
Bloque
- word-spacing
- letter-spacing
- vertical-align
- text-align
- display
Cuadro
- width
- height
- float
- margin
- padding
Borde
- border-style
- border-width
- border-color
Lista
- list-style-type
- list-style-image
- list-style-Position
Posición
- position
- visibility
- z-index
- overflow
- placement
- clip
Extensiones
- page-break-before
- page-break-after
- cursor
Pseudo clases, pseudo elementos y selectores
Con estos estilos podemos realizar ciertos efectos y dar estilos de una forma más fácil a distintos elementos del contenido HTML. También podemos dar estilo a las etiquetas en función del valor de sus atributos.
Pseudo clases
| Selector | Ejemplo | Descripción del ejemplo |
|---|---|---|
| :link | a:link | Aspecto de los enlaces en resposo |
| :visited | a:visited | Aspecto de los enlaces visitados |
| :active | a:active | Aspecto de los enlaces activos |
| :hover | a:hover | Aspecto de los enlaces al pasar el ratón por encima |
| :focus | input:focus | Aspecto del <input> que tiene el foco |
| :first-child | p:first-child | Aspecto del primer hijo de su padre |
| :last-child | p:last-child | Aspecto del último hijo de su padre |
| :lang(language) | p:lang(it) | Apecto del párrafo cuyo atributo lang empieza por it |
Pseudo elementos
| Selector | Ejemplo | Descripción del ejemplo |
|---|---|---|
| ::after | p::after | Inserta contenido después de cada elemento <p> |
| ::before | p::before | Inserta contenido después de cada elemento <p> |
| ::first-letter | p::first-letter | Selecciona la primera letra de cada elemento <p> |
| ::first-line | p::first-line | Selecciona la primera línea de cada elemento <p> |
| ::selection | p::selection | Selecciona la porción de un elemento que a su vez ha sido seleccionada por el usuario |
Fuente:
http://www.w3schools.com/css/css_pseudo_classes.asp
Selectores
Echar un vistazo a:
https://www.w3schools.com/cssref/css_selectors.asp
Hojas de estilo alternativas
Se pueden cargar varias hojas de estilo alternativas, aunque será el usuario quien deben seleccionarlas en su navegador.
También se podría cambiar de una hoja a otra mediante alguna función de JavaScript.
La hoja alternativa se indica en la etiqueta <link>, y en los atributos rel (indicando alternate stylesheet) y title de esta etiqueta. Por ejemplo:
<link rel="stylesheet" href="hojaPrincipal.css" title="Normal"> <link rel="alternate stylesheet" href="altoContrate.css"
title="Alto contraste">
Más información (en inglés):
http://alistapart.com/article/alternate