Apuntes CSS

Apuntes CSS

INTRODUCCIÓN A CSS

CSS son las siglas de Cascade Style Sheets, es decir, hojas de estilo en cascada, y es una codificación que permite asignar estilo a los documentos HTML.

1
Capítulo

Asignación de estilo por el autor del documento
Cuando un autor crea un documento, tiene dos opciones: • • Codificar cada detalle del estilo en cada elemento HTML Marcar cada elemento simplemente con un identificador que haga referencia al estilo.

Esta segunda opción es la mejor y es la que utilizan los CSS, ya que se requiere menos código y el mantenimiento es mas sencillo. De esta forma, se independiza la parte de la estructura del documento HTML de su aspecto visual, entre contenido y presentación. Una de las ventajas de este enfoque es que podemos tener un mismo contenido preparado para ser presentado en diferentes medios con sólo cambiar la hoja de estilo.

Modos de definir los estilos
Los estilos se pueden definir mediante diversos mecanismos: • • • Mediante una hoja de estilo interna (dentro del bloque <HEAD>) Mediante una hoja de estilo externa (con la etiqueta <LINK>) Mediante una definición en línea (dentro de la propia etiqueta que queremos formatar).

Hoja de estilo interna El modo de definir mediante un bloque <STYLE> dentro del propio documento HTML, incluido dentro del bloque <HEAD>, tiene este aspecto:
… <head>

Página 2

font-style: italic. automáticamente todos los documentos que hagan referencia a ese archivo se mostrarán en los navegadores con la nueva presentación. por ejemplo: … p.”>…</div> … Página 3 . font-style: italic. Definición en línea Se denomina en línea porque el estilo se define dentro de la propia etiqueta HTML. por ejemplo: … <div style=”width: 300px. El enlace de definiciones CSS mediante etiquetas <LINK> es el modo preferible para incluir estilos en un documento HTML porque es el que más separa el contenido puro de lo que son los detalles de la presentación estética.cabecera {font-weight: bold.Apuntes CSS <style type=”text/css”> p. font-size: xx-large. font-size: xx-large.} Cuando se modifica el estilo definido dentro de ese archivo.css” /> … Dentro de ese archivo referenciado en el atributo href se incluyen las definiciones de los estilos. } </style> … Hoja de estilo externa El estilo se puede definir en un documento independiente que se enlaza al documento HTML mediante una etiqueta <LINK>: … <head> <link rel=”stylesheet” type=”text/css” href=”miestilo01.cabecera … {font-weight: bold.

el estilo que utilizará el navegador es el definido en línea.png”) ! important. Cuando el agente del usuario (el software del navegador) se encuentra con múltiples definiciones de un mismo estilo.”> </ul> … En este caso. Por ejemplo.css” sobre la de “empresa. ¿Por qué se denomina hoja de estilo en cascada? Esta denominación proviene del hecho que las definiciones de CSS en un documento HTML pueden ser múltiples y una definición puede reemplazar a una definición previa. por tanto. precederá la definición <UL> de “comercial. ya que tiene precedencia sobre los dos anteriores (“empresa. ¿Qué sucederá cuando además la etiqueta HTML tiene definido un estilo en línea? Siguiendo con el ejemplo anterior.css” y “comercial.Apuntes CSS Esta opción es la menos preferible de las tres. aplica una serie de reglas de precedencia.} Página 4 . aunque es aceptable para casos de documentos pequeños o para hacer pruebas puntuales.css” /> </head> … Supongamos que ambos CSS tienen un estilo definido para la etiqueta <UL>.css”. supongamos que el cuerpo del HTML aparece la siguiente definición: … <ul style=”background-color: #00ff00.css”).css” /> <link rel=”stylesheet” type=”text/css” href=”comercial. el navegador aplicará el estilo de la <UL> definida en último lugar. puede utilizar la notación ! important … ul … {list-style-image:url(“img/empresa01. cuando el creador de un estilo considera que alguna definición no debe ser reemplazada por otra de mayor prioridad. lo que permite reemplazar un estilo ya definido previamente con una nueva definición. Sin embargo. En este caso particular. supongamos el siguiente código: … <head> <link rel=”stylesheet” type=”text/css” href=”empresa.

4. esta declaración toma precedencia sobre el resto. el estándar CSS define la siguiente regla para determinar que estilo debe utilizar cuando se encuentra con casos de múltiples definiciones: 1. 3.Apuntes CSS Esta marca hace que el funcionamiento en cascada se modifique. Decisión de la precedencia 2 Capítulo Así. Si en algún nivel se utiliza la notificación ! important. especifica los elementos afectados por la declaración que se indicará a continuación. 5. Si hay deficiones de estilo en línea. éstas reemplazan a las definiciones predeterminadas del navegador. DEFINICIÓN DE ESTILOS CSS funciona con declaraciones sobre el estilo de uno o más elementos. Si no hay definiciones se utiliza la hoja de estilo estándar del navegador. éstas reemplazan a las definiciones predeterminadas del navegador. por ejemplo. o Una clase definida por el usuario. ya que ! important siempre prevalecerá sobre otras definiciones. éstas reemplazan a las definiciones anteriores. Si hay deficiones de hoja de estilo externa (<link>). Empieza por una llave de apertura “{“ y sigue con una lista de uno o más pares “propiedad: valor” finalizados cada uno por punto y coma y finalmente por una llave de cierre “}”. 2. o Nombres compuestos. Página 5 . o Un nombre de identificador. El selector puede ser: o Una etiqueta HTML. Si hay deficiones de hoja de estilo interna (<style>). • Declaración: Establece las propiedades y valores que definen el estilo. Cada declaración está compuesta de dos partes: • Selector: Es el enlace entre el documento y el estilo. etiqueta y clase.

h2. el selector es el elemento BODY y la declaración posee cuatro propiedades: tres con un valor asociado y la última (border) con tres valores asociados.normal {background: yellow} Un ejemplo de utilización sería: <!DOCTYPE html> <html> <head> <title>Uso básico de estilo</title> <style type=”text/css”> p {background: white} p. compartirán las propiedades especificadas. Referencia a una clase Muchas veces no queremos que todos los selectores de un tipo determinado tengan el mismo estilo y esto se puede ajustar mediante la definición de clases a nivel de selector. h3. font-size: x-large.resaltado {background: blue} p. por ejemplo: … h1. color: white} Página 6 . h4 {color: red. font-family: Arial. desde h1 a h4. } … También podríamos incluir una lista de selectores a los que se les aplicará un mismo estilo. background: blue. background: white. todos los encabezamientos.resaltado {background: blue. … BODY {color: red. border: thin dotted black. } … Con esta declaración. font-family: Helvetica. Por ejemplo: p.Apuntes CSS En el siguiente ejemplo.

resaltado </style> {background: blue} Un ejemplo de utilización sería: <!DOCTYPE html> <html> <head> <title>Uso básico de estilo</title> <style type=”text/css”> p {background: white} {background: blue. por lo tanto.resaltado p. color: white} {background: yellow} .normal </style> </head> <body> <p class=”resaltado”>Esto saldrá en fondo azul</p> <p class=”normal”>Esto saldrá en fondo amarillo</p> Esto debe salir con fondo blanco <table class=”resaltado”> <tr> <td>Dentro de la tabla.Apuntes CSS p.normal </style> </head> <body> <p class=”resaltado”>Esto saldrá en fondo azul</p> <p class=”normal”>Esto saldrá en fondo amarillo</p> Esto debe salir con fondo blanco </body> </html> {background: yellow} Definición de una clase Podemos definir también una clase sin hacer referencia a ningún selector en particular. esto permite utilizar la clase en cualquier etqieta que admita la aplicación de estilo: <style> . esto saldrá Página 7 .

tendremos que utilizar el selector universal: <style> tr * ol </style> Página 8 {background: black} . ya que es muy genérico. no debe haber etiquetas intermedias entre las especificadas.Apuntes CSS también con fondo azul</td> </tr> </table> </body> </html> Definición de estilo con identificador También es posible crear un estilo dedicado a un identificador: <style> #ident01 </style> {background: black.} Esto se complementa con una referencia en alguna etiqueta: <p id=”ident01>…</p> No se recomienda abusar de este modo de relacionar estilos con elementos del documento dado que cualquier cambio obliga modificar en varios sitios y no en uno sólo como ocurre cuando se utiliza el atributo class. La dependencia es estricta. Selector universal Es un estilo que se aplica a todas las etiquetas: <style> * </style> {background: black} Muy rara vez lo utilizaremos. Selector limitado También podemos crear un estilo que se aplicará a una etiqueta siempre y cuando de pende de otras: <style> tr td ol </style> {background:black} Esto significa que el estilo se aplicará a etiquetas <ol> que estén dentro de un bloque <td> que a su vez estén dentro de un bloque <tr>. Si queremos incluir diversas etiquetas intermedias.

cl03[border=”2”][color=”green”] {width=”100%”} Selección por jerarquia Un documento HTML está compuesto por etiquetas organizadas jerárquicamente. El elemento <html> es la reaíz de la cual depende toda la estructura. Por ejemplo: <!DOCTYPE html> <html> <head> <title>Estructura de un documento HTML</title> <style type="text/css"> .} </style> </head> <body> <div class="c1">div clase c1. . una estructura similar al árbol genealógico con ancestros y descendientes. se pueden añadir tantos atributos como se necesiten encerrados entre corchetes: table.c2 {color: red. La jerarquía sigue la misma nomenclatura que una estructura arbolada compuesta por padres.Apuntes CSS Esta codificación indica que el estilo se aplica a una etiqueta <ol> que dependa de una etiqueta <tr>. font-style: italic.c1 {font-weight: bold. hijo de body font-size: xx-large. hijos y hermanos. Limitación a un atributo de un selector Podemos acotar el alcance de un estilo a un elemento que tenga un atributo determinado con un valor específico. si se quiere definir un estilo para los elementos <table> que tengan definido un atributo border=”2”: table[border=”2”] {width=”100%”} O si se quiere solamente definir un estilo para los elementos <table> que tengan definido un atributo border=”2” y que sean de la clase denominada cl03: table. Por ejemplo.} <h1>Cabecera del grupo 1 (hijo de div clase c1)</h1> <table> <tr><td>Fila 1 Celda 1</td><td>Fila 1 Celda 2</td></tr> Página 9 . sin importar si entre una y otra hay una o más etiquetas intermedias.cl03[border=”2”] {width=”100%”} Si la coincidencia se extiende a más de un atributo. es decir.

Así mismo. los elementos <h1>.c2 > li Página 10 .c2 li Lo mismo pero expresado en relación padre-hijo se especiica de la siguiente manera: div. para asignar estilo a un elemento <li> div. para especificar relaciones entre ascentros y descendientes en CSS se listan los elementos separados por espacios. • • Tal y como vimos anteriormente. Por ejemplo. el elemento <div clase=”c1”> es hijo de la etiqueta <body>.Apuntes CSS <tr><td>Fila 2 Celda 1</td><td>Fila 2 Celda 2</td></tr> </table> <p>Párrafo del grupo 1 (hijo de div clase c1) </p> </div> <div class="c2">div clase c2. independientemente de la distancia entre ellos (por ejemplo. En este ejemplo. <table> y <p> son hermanos dado que todos son hijos de la etiqueta <div clase=”c1”>. Hermanos: Dos elementos son hermanos cuando comparten el mismo padre. el elemento <ol> es padre de la etiqueta <li>. Por ejemplo. ocurre cuando la relación es directa entre los elementos. abuelos y biznietos). todos los elementos son descendientes de la etiqueta <body> Padres e hijos: Es un caso particular del caso anterior. hijo de body <h1>Cabecera del grupo 2 (hijo de div clase c2)</h1> <ol>Lista en el grupo 2 (hijo de div clase c2) <li>Elemento 1 de la lista (hijo de ol)</li> <li>Elemento 2 de la lista (hijo de ol)</li> </ol> <p>Párrafo del grupo 2 (hijo de div clase c2) </p> </div> </body> </html> En la estructura se pueden diferenciar tres tipos de relaciones: • Ancestros y descendientes: Entre ancestros y descendientes existe una vinculación por linaje. En este ejemplo.

el estilo tomará la propiedad del elemento hijo: body {color: red.} p {color: green.} p {font-weight: bold. Cuando la misma propiedad heredale está definida a nivel de un padre y también a nivel de un elemento hijo.} {color: blue. :visited: Indica el estilo para un enlace ya visitado.} {color: red. Supongamos el siguiente ejemplo: :link :hover :visited {color: yellow.Apuntes CSS Para expresar una relación de hermanos se especifican los elementos separados por el signo ‘+’. :focus:Indica el estilo para el enlace que actualmente tiene el foco. Orden de las definiciones El orden de las definiciones es importante. el estilo va dirigido sólo a los elementos <table> y <p> que sean hermanos y que dependan de un padre <div>: div > table + p Herencia del estilo Herencia significa que un elemento adquiere parte de las propiedades de sus padres: body {color: red. :hover: Indica el estilo para un enlace en el momento en que el cursor pasa por encima.} Página 11 . Pseudo clases para la etiqueta <a> • • • • • :link: Indica el estilo para un enlace aún no visitado. Pseudo clases Pseudo clases CSS define un conjunto de pseudo clases que nos permiten asignar atributos a determinadas circunstancias de un elemento del documento.} El resultado es que la etiqueta <p> será bold y green.} El resultado es que la etiqueta <p> será bold y red. font-weight: bold. se redefine el estilo de un elemento <p> que tenga un hermano <table> table + p También podemos combinar estos mecanismos. en este ejemplo. En el caso siguiente. :active: Indica un enlace activo.

esto resulta útil porque en muchos casos el primer elemento requiere una presentación diferente del resto.Apuntes CSS Con esta definición. Página 12 . Sólo afecta a un conjunto limitado de propiedades y cabe tener en cuenta que el concepto “primera línea” depende del ancho de la ventana del navegador y si se implementan o no etiquetas de salto de línea.} {….} Pseudo clase :lang Sirve para asignar un estilo particular dependiente del lenguaje que se utiliza en el documento. • • • Por ejemplo: <!DOCTYPE html> <html> <head> <title>Uso de pseudo elementos</title> <style type=”text/css”> p. éste se mostrará en color azul y no en rojo. cuando se pase el cursor sobre un enlace ya visitado. :after: Este pseudo elemento permite añadir un contenido que se añade al final del contenido del elemento en donde se aplica. Las pseudo clases hover y focus deben especificarse después de :link y :visited Pseudo clase :first-child Sirve para asignar un estilo particular al primer hijo de un elemento. :first-letter: Permite especificar un conjunto de propiedades para la primera letra de un elemento. p:first-child {text-indent: 15px. La pseudo clase requiere que se indique el código de lenguaje: p:lang(en) p:lang(sp) {…. lo que no es el funcionamiento deseado. :before: Este pseudo elemento permite añadir un contenido que precede al contenido del elemento en donde se aplica.} Pseudo elementos CSS nos permite referirnos a partes de un documento para especificar un estilo particular: • :first-line: Permite especificar un conjunto de propiedades para la primera línea del documento.decorado:first-line {text-decoration: underline.

yo:before {content: ‘Periodista: ‘. no la vi.} p. Border: solid 2px blue.</p> FIN DEL TEXTO SIMULADO’. <br/> Una vez integrado Unnim Banc en BBVA. </p> <h1>Entrevista</h1> <p class=”yo”>¿Qué le pareció la película?</p> <p class=”el”>En realidad. con lo que la cobertura sanitaria así como los cuadros médicos permanecerán en las mismas condiciones que hasta ahora.decorado:after {content: ‘ p.} </style> </head> <body> <h1>Ejemplo de un texto simulado</h1> <p class=”decorado”> Estimado amigo.</p> <p class=”yo”>¡Pero si la comentó ayer pot TV!</p> <p class=”el”>Me lo inventé todo.A. ponemos en tu conocimiento que se mantiene la mencionada póliza colectiva hasta el 31 de diciembre de 2013.} p.decorado:first-letter {font-size: 5em.} p.el:before {content: ‘A. si bien las primas pagadas tendrán el tratamiento de rendimiento del trabajo sujeto a tributación.:’. S. de Seguros y Reaseguros.Apuntes CSS color: red.} Página 13 .L.<br/> Nos ponemos en contacto contigo en relación al seguro médico que disfrutas en virtud de la póliza colectiva contratada por parte de Unnim Banc con AEGON España.

Apuntes CSS </body> </html> Comentarios en CSS Los comentarios se incluyen entre “/*” y “*/”: … <style type=”text/css”> /* clase code: estilo para el código de programa */ . <!DOCTYPE html> <html> <head> Página 14 .} {font-family: Helvetica. font-family: Courier. font-style: normal. y dentro de la sección <head>.} Modo 2: uso de la etiqueta <link> Podemos hacer referencia a una hoja de estilo externa que estará vinculada a un documento a través del elemento <link>. serif.} </style> … Modos para asignar estilo Modo 1: etiqueta <style> La etiqueta <style> se codifica en el interior del documento al que se le quiere dar estilo. <!DOCTYPE html> <html> <head> <title>hoja de estilo interna</title> <style type=”text/css”> body h1 </style> </head> <body> </body> </html> {font-family: Arial. font-size: small. Arial. sans-serif.code {background: yellow.

font-family= Arial”. VALORES Y UNIDADES Unidades de medida Las unidades de medida se especifican de la siguiente forma: Página 15 .> No es un método recomendable.css /> </head> <body> </body> </html> 3 Capítulo Modo 3: Importando el estilo mediante la sentencia @import La sentencia @import nos permite importar definiciones de estilos ubicadas en otros archivos. excepto en las etiquetas <param> y <script> <p style=”color: red.com/estilo01. h1 </style> {font-family: Arial.storecss. Modo 4: mediante el atributo style (inline) Se define mediante el atributo style que se puede incluir en casi todas las etiquetas del cuerpo del documento. antes de cualquier definición de estilo.Apuntes CSS <title>hoja de estilo interna</title> <link rel=”stylesheet” type=”text/css” href=http://www.css”). ya que es muy específico para un determinado contenido y es difícil de mantener. <style type=”text/css”> @import url(“mas_estilos.} La sentencia @import debe aparecer en primer lugar.

mm: Milímetros. por ejemplo.width: 100px. 30: Valor. table {width: 70%} Valores de color Página 16 . . 12pc. pt: Puntos (una pulgada equivale a 72 puntos).} {height: 100px. -: Signo (opcional). -5ex.} Unidades por porcentaje El uso de porcentajes es un variante para informar el valor de una propiedad de un modo relativo a otro valor.miclase {height: 1cm. px: Píxel. Unidades de medida absolutas • • • • • in: Pulgadas (una pulgada equivale a 2. relativo a la resolución del área de visualización. em: Tamaño equivalente a la altura de la letra M (mayúscula) en fuente asociada al elemento. -2em. por ejemplo. Por ejemplo: 20px. porcentaje).Apuntes CSS height: -30%. 36pt.} p {font-size: 12pc. por ejemplo: 3cm.} Unidades de medida relativas • • • ex: Tamaño equivalente a la altura de la letra x (minúscula) de la fuente asociada al elemento. por ejemplo. por ejemplo: 3in. cm: Centímetros. pc: Picas (una pica equivale a 12 puntos).54 centímetros).clase02 {border-bottom: 5px. Por ejemplo: 2. Siendo: • • • • height: el nombre de la propiedad seguida de dos puntos. 5mm. p p. Las unidades se clasifican en absolutas o relativas. %: Métrica elegida (en este caso. Por ejemplo: 3ex. width: 2in.1em. la métrica indicada por porcentaje se refiere al valor de las propiedades del elemento padre. En este caso.

0 (opacidad máxima). purple.0 que indica la parte porcentual de cada color (por ejemplo: rgb(20%. formando una rueda de colores: • • • • • • • 0 es rojo 120 es verde 240 es azul El valor de saturación (sat) es un porcentaje: 0% significa una sombra de grises 100% es el color completo El valor de luminosidad (light) es un porcentaje: 0% significa máxima oscuridad 100% significa máxima claridad Página 17 .texto #rrggbb: Se usa un valor hexadecimal en cada par de valores (por ejemplo: #00ff00) rgb(x. El valor de alfa es un número entre 0. es decir. saturation y lightness.0)) rgb(y%. maroon. fuchsia.30%)). border-color: #00ff00. . green.texto {color: rgb(255. teal. {color: rgb(255. Hay tres maneras para informar un color RGB: • • • .255.0 (transparencia máxima) y 1. saturación y luminosidad: El valor del tono (hue) varía entre 0 y 360. black. gray.0.255.0 y 100. red. blue. white o yellow. tono.} p {color: red. También existen palabras clave para la lista ampliada de colores. Un valor RGBA se especifica como rgba(rojo.255. verde.3). olive. navy. lime.255). silver.y%): Donde cada y es un número entre 0.80%.y%.255.} Colores RGBA Son una extensión de los colores RGB.x. Colores HSL HSL son las siglas de hue.Apuntes CSS Un valor de color puede ser: • • Una palabra clave Una especificación numérica RGB Las palabras clave puden ser las de la plaeta VGA: aqua. Incluyen un cuarto parámetro que especifica el grado de opacidad del objeto. azul. alfa).x): Donde cada x es un valor entre 0 y 255 inclusive (por ejemplo: rgb(100.

saturación.0. Valores de texto y palabras clave Muchas propiedades utilizan texto simple como valores de la propiedad. Cuando dentro de la dirección URL aparecen paréntesis.50%. Un valor HSLA se especifica como hsla(tono.10%.0 (transparencia máxima) y 1.jpg”)} Una dirección relativca se interpreta como relativa respecto al archivo de hoja de estilo. luminosidad. Los estilos auditivos utilizan una combinación de síntesis de la voz y efectos de sonido para que el usuario pueda escuchar la información en vez de leerla. La presentación en este tipo de aplicaciones que se apoyan en el uso de la voz se realizan procesando el texto del documento con un programa lector de pantallas. las propiedades pauseafter o pause-before).}). que indican desde donde proviene el sonido (por ejemplo. podemos encontrar: • Ángulos: En grados o radianes.Apuntes CSS . las propiedades azimuth y elevation.0 (opacidad máxima).texto {color: hsla(120. no relativo al documento HTML. p:before p . tiempo y frecuencias que se utilizan en propiedades relacionadas con el sonido.} {font-family: “Times New Roman”. Entre estas propiedades.alfa). Esto es especialmente útil en casos de personas con problemas visuales o en aplicaciones de enseñanza de lenguas.texto {color: hsl(120.center {content: “Nota adicional”.} Valores de control de audición CSS incorpora una serie de propiedades que requieren el uso de unidades de medida de ángulo.50%. BODY {background: url(“imag. El valor alfa es un número entre 0. Times} {margin: auto.10%. Tiempo: En segundos o milisegundos (por ejemplo. espacios.5. Por ejemplo.). Valores de URL Cuando en CSS se debe informar una dirección URL se utiliza la forma url(xxx). {azimuth: 180deg. . Frecuencias: En Hz (herzios) o KHz (kiloherzios). Colores HSLA HSLA añade el canal alfa a la definición de color hsl. • • Un ejemplo de una hoja de estilo de audición: Página 18 . donde xxx es la dirección URL. aunque en realidad algunos de estos valores son directamente palabras clave. comas o comillas se deben codificar con el carácter de escape (/).).

cue-before:url(“avisoantes.au”) } 4 Capítulo HERENCIA Y CASCADA El funcionamiento de las hojas de estilo en cascada tiene uno de sus pilares en el mecanismo de la herencia. cue-after:url(“avisofin. que a veces se confunde con el mecanismo de cascada.} Página 19 . volume:50%. richness:80.Apuntes CSS h1.au”). h2. p { voice-family: female. Herencia La herencia es el mecanismo que permite asignar a los hijos algunas de las propiedades de su padre. h3. <!DOCTYPE html> <html> <head> <title>Herencia</title> <style> div </style> </head> <body> <div> {color: grey.

Estilos de usuario. Estos estilos se eligen a partir de un conjunto de hojas de estilo locales que se seleccionan en las opciones del navegador. sea definidos en la parte superior del documento. que se unifican para dar como resultado un estilo determinado. Estilos de agente de usuario Página 20 . Estilos definidos por el autor Son los estilos que el autor incluye en el propio documento. En cambio <p> y <body> no lo reciben. El origen de la definición puede ser cualquiera de los siguientes y ordenados por prioridad de elección: • • • Estilos definidos por el autor. enlazados en hojas de estilos independientes o definidos en línea (<style>. etc…) Estilos de usuario Son los estilos especificados por el usuario del documento. ya que no son hijos de <div> Cascada Se refiere a la capacidad de definir los estilos a partir de diferentes orígenes.Apuntes CSS <h1>Tabla 1</h1> <table> <tr> <td>Fila 1 Celda 1</td> <td>Fila 1 Celda 2</td> </tr> <tr> <td>Fila 2 Celda 1</td> <td>Fila 2 Celda 2</td> </tr> </table> </div> <p>Texto en negro</p> </body> </html> El elemento <div> es el que tiene el estilo definido y sus hijos reciben el mismo estilo por el mecanismo de la herencia. Estilos del agente de usuario.<link>.

si un estilo estuviese definido en las tres hojas. el archivo especificado en último término tiene prioridad sobre el anterior. <link rel=”stylesheet” type=”text/css” href=”h1.css” /> En este caso. la que se aplicará será la que se incluye en h3. Las definiciones de hojas de estilo importadas se consideran antes que las definiciones de la propia hoja de estilo.css Determinación de la prioridad de aplicación Se ordenan las definiciones por peso (importancia) y origen. 1. 5. Ordenar las definiciones por la especificidad del selector.Apuntes CSS Son los estilos aplicados de manera predeterminada cuando no hay otros estilos especificador para un elemento del documento.} Como la primera es más específica que la segunda. puede ser que nos encontremos que dos hojas tienen diferentes estilos a aplicar a un mismo elemento. se elige la última que haya aparecido. 6.css” /> <link rel=”stylesheet” type=”text/css” href=”h3. Prioridad en etiquetas LINK Cuando existen diversas hojas de estilo definidas con la etiqueta <link>. origen y especificidad. Las definiciones !important reemplazan las definiciones normales.css” /> <link rel=”stylesheet” type=”text/css” href=”h2. los más específicos reemplazan a los más generales. 3. éste se verá en verde. salvo que se utilice la palabra clave !important. En este caso. 4. Si dos definiciones tienen el mismo peso. Especificidad Supongamos que tenemos estas dos definiciones: div p {color: green. si aparece dentro de un <div > una elemento <p>. El resto de elementos de <div> se verán en azul.} div {color: blue. Cálculo de la especificidad Para determinar el nivel de especificidad de una declaración se puede utilizar el siguiente cálculo definido por W3C: Página 21 . La prioridad de aplicación de los estilos sigue el orden especificado anteriormente. Los estilos de usuario reemplazan los estilos del agente de usuario. Se ordenan las definiciones especificadas. Los estilos de autor tienen reemplazan (tienen prioridad sobre) los estilos de usuario. 2.

Apuntes CSS 1.clase1 #id1 Especificida d 000 001 002 003 013 100 El uso de un identificador genera una especificidad más alta. Contar la cantidad de nombres de elementos y pseudo elementos en el selector y asignar ese valor a las unidades del resultado. se toma la más específica. Cuando existen definiciones dobles. cada conjunto está compuesto por n grupo coordinado de glifos o caracteres. es decir. Página 22 . 2. PROPIEDADES DE FUENTES Fuentes Un tipo de fuente o letra es una familia de uno o más conjuntos de diseños de letras creadas con unidad de estilo. Contar la cantidad de identificadores de atributos en el selector y asignar este valor a las centenas del resultado. 5 Capítulo 3. El resultado indica el nivel de especificidad. la del valor más alto que corresponda al elemento analizado. mientras que la especificidad más baja la tiene el selector universal. Contar la cantidad de otros atributos y pseudo clases en el selector y asignar ese valor a las decenas del resultado. Por ejemplo: Selector * table table tr ul ol+li ul ol li.

Apuntes CSS Los elementos tienen esta descripción: Página 23 .