5º Unidad Didáctica Hojas de estilo en Cascada CSS Eduard Lara 1
ÍNDICE 5.1 El Origen de CSS 5.2 Hojas de estilo y sus clases 5.3 Las reglas de estilo 5.4 Presentación con estilos 2
5.1 EL ORIGEN DE CSS En HTML se unen contenidos e instrucciones de formato en un único documento. Los desarrolladores se quejaban de lo complejo que resultaba tener ambas cosas mezcladas. W3C decidió crear un sistema para separar las instrucciones de formato del resto de elementos. En la versión HTML 4, se define el lenguaje CSS (Cascading Style Sheets), para dotar de formato a los elementos HTML. 3
5.1 EL ORIGEN DE CSS Gran utilidad de CSS: Permite aplicar un formato homogéneo a todo un sitio web. Permite modificar el estilo de numerosos elementos, cambiando unas pocas líneas de código. Actualmente CSS ofrece muchas mas posibilidades que las que jamás tuvo HTML: cambiar el tamaño, grosor, y altura de línea, colores de fondo y primer plano, espaciado y alineamiento del texto, decidir subrayado, tachado o parpadeante, convertirlo en mayúsculas, o minúsculas, etc. 4
5.2 LAS HOJAS DE ESTILO Y SUS CLASES CSS sirve para dotar de estilo a los elementos que componen una página web. Una hoja de estilo es un conjunto de reglas de estilo que definen el formato de los elementos de la página html, a la que se encuentra «vinculada». Mediante la regla de estilo se identifica el elemento HTML que se desea seleccionar y la apariencia que se le quiere dar (por ejemplo, que todas las fotos lleven un marco de color rojo). 5
5.2 LAS HOJAS DE ESTILO Y SUS CLASES Existen 3 maneras de dotar de estilo CSS a una página web: 1) Aplicar estilos de forma local. Se escribe el código CSS dentro de cada etiqueta HTML mediante el atributo STYLE. No es necesario poner el selector ya que se entiende que el elemento afectado es aquel en el que está ubicado el estilo. <p style="color:green;">hola</p> 6
5.2 LAS HOJAS DE ESTILO Y SUS CLASES 2) Hojas de estilo internas. Suelen usarse cuando se pretende aplicar el estilo sólo a la página donde se ubica. <head><style type="text/css > Codigo CSS </style></head> Se puede ubicar en cualquier parte de la página, pero suele hacerse dentro de la cabecera. Se pueden definir tantas hojas de estilo como se desee en un página. En caso de conflicto entre ellas se aplica la norma de la precedencia. 7
5.2 LAS HOJAS DE ESTILO Y SUS CLASES 3) Hojas de estilo externas. Dan aspecto común a varias páginas de un portal. Los estilos se definen en una hoja de estilo externa, y todas las páginas del portal la consultan. Mediante la etiqueta link se vincula una hoja de estilos a una página web en su cabecera, : <link rel="stylesheet" type="text/css" href="url.css"> url.css es el nombre de la hoja con su correspondiente URL si fuera necesario. 8
5.2 LAS HOJAS DE ESTILO Y SUS CLASES Ejemplo: Página web vinculada a una hoja de estilo externa. <html> <head> <title> Ejemplo </title> <link rel="stylesheet type="text/css" href="st.css > </head> <body> Contenido de la página </body> </html> Para que funcione este ejemplo, la hoja de estilo y la página HTML deben estar en la misma carpeta. 9
5.2 PRÁCTICA 1) Acudir a http://www.w3.org/style/css, donde existe un listado actualizado de los programas válidos para tratar CSS (editores, conversores). 2) Visualizar los siguientes programas específicos para el tratamiento CSS: -Style Master -TopStyle -CSSED Permiten obtener una vista previa del estilo creado, o trabajar sobre plantillas predefinidas 10
5.2 PRÁCTICA 3) Validaciones código CSS Acudir a http://jigsaw.w3.org/css-validator/, una página oficial de W3C que permite comprobar si el código que se ha generado es correcto o no. 4) Consultar la página oficial de W3C, y realizar un resumen acerca de las últimas noticias sobre los navegadores web y su compatibilidad con las especificaciones CSS. Qué navegadores aceptan más características de CSS? Opera, Firefox, IExplorer 11
5.3 LAS REGLAS DE ESTILO Una hoja de estilo se compone de una o varias reglas de estilo, que son las declaraciones de los formatos que son aplicados a los elementos html. Una regla de estilo tiene dos componentes: El selector, que selecciona el elemento sobre el que actuará la regla. La declaración que establece la propiedad y valor a aplicar sobre el elemento. Selector {propiedad1:valor1;} Selector {propiedad1:valor1;propiedad2:valor2;} 12
5.3 LAS REGLAS DE ESTILO El selector Determina los elementos sobre los que se aplica una regla de estilo: p {color:red;} Todos los elementos p de la página afectada por la regla, adquieren el color rojo. Pregunta: Y si sólo deseamos dar un estilo a unos determinados párrafos y no a todos? Selectores específicos: Identificador, clase, pseudo-clase y pseudo-elemento 13
5.3 LAS REGLAS DE ESTILO Selector identificador Los elementos html disponen de un atributo llamado identificador (id), el cual permite hacer una selección más ajustada de los elementos: Documento html <p id= despedida > La regla de estilo necesaria para hacer referencia al párrafo despedida, sería: Hoja de estilo p#despedida { font-size:14px;} Sólo el párrafo despedida tendrá un tamaño de 14 píxeles. 14
5.3 LAS REGLAS DE ESTILO Selector de Clase El atributo class agrupa los elementos por clases o grupos, que son seleccionados desde CSS. <img src= casa.jpg class= fotos > Un elemento puede pertenecer a varias clases a la vez. Se especifican separadas por espacios. <img src= casa.jpg class= fotos casas > Acceso al estilo de la clase, mediante. : img.fotos {border-width: 1px;} img clase fotos.casas {border-width: 3px;} clase casas 15
5.4 CRITERIOS DE SELECCIÓN Existen cinco tipos de selectores o criterios de selección para elegir los elementos de una regla. 1.Selector por tipo o nombre de elemento. 2.Selector por contexto del elemento. 3.Selector por clase o identificador del elemento. 4.Selector por la pseudo-clase del elemento. 5.Selector por los atributos del elemento. 6.Selector por pseudo-elementos El carácter asterisco (*) es un selector universal. Las propiedades que se encuentren especificadas bajo éste afectarán a todos los elementos. 16
5.4 CRITERIOS DE SELECCIÓN 1.Selector por tipo o nombre de elemento Es el criterio más general y sencillo por su sintaxis. Aplica un determinado formato a todos los elementos seleccionados sin distinción de clases, identificadores, contextos, etcétera. p { color:red;} Suelen aplicarse más los otros métodos, ya que son más específicos, y permiten afinar más. 17
5.4 CRITERIOS DE SELECCIÓN 2.Selector por el contexto del elemento a. Ascendente. Es el elemento que contiene al que se desea formatear. Puede haber más de un elemento entre uno y otro. Ascendente Sintaxis CSS: div p {color:#00ff00;} Ascendente Espacio en blanco Etiqueta a formatear <div> <h1><p> Este es un parrafo</p></h1> </div> Etiqueta a formatear Se formatea de color rojo los elementos p que estén dentro de div 18
5.4 CRITERIOS DE SELECCIÓN 2.Selector por el contexto del elemento b. Padre. Es el elemento que contiene de forma directa al que se desea formatear, que es el hijo. Sintaxis CSS: div > p {color:#00ff00;} Padre Hijo Símbolo Mayor que <div> Padre <p> Este es un parrafo</p> </div> Etiqueta hija Se formatea de color rojo todos párrafos hijos de div div p:first-child {color:#00ff00;} Sólo el 1º párrafo hijo 19
5.4 CRITERIOS DE SELECCIÓN 2.Selector por el contexto del elemento c. Hermano. Es el elemento que precede directamente (adyacente), dentro del mismo elemento padre, al que se desea formatear. Para seleccionar elementos en función del hermano, se utiliza el símbolo de la suma (+): hermano precedente hermano seleccionado div + p { color:#00ff00;} Se trata de cualquier elemento p inmediatamente después del elemento del tipo div 20
5.4 CRITERIOS DE SELECCIÓN 3.Selector por clase o identificador Forma de selección más utilizada. Permite afinar más que la selección por nombre de elemento. Selector de identificador p#dos { color:#00ff00;} nombre elemento+ # +id Selector de clase p.uno {text-align:center;} nombre elemento+. +clase Si se omite el nombre del elemento, se seleccionan todos los que pertenezcan a dicha clase o id..primera { text-align:left;} Afecta todos elementos de la clase primera 21
5.4 CRITERIOS DE SELECCIÓN 4.Selector por la pseudo-clase del elemento Las pseudo-clases clasifican a los elementos basándose en su estado, es decir, en función de los eventos que les hayan ocurrido: cursor del ratón encima, etc. si se han visitado, si el usuario está pasando por encima con el cursor del ratón, etc. Los elementos más utilizados son los referentes a los vínculos (etiqueta a) y al primer hijo (:first-child). a:link { color:red;} Afecta vínculos no visitados a:visited{ color:blue;} Afecta vínculos ya visitados 22
:link Pseudoclase :visited :hover :active :focus. 5.4 CRITERIOS DE SELECCIÓN Significado Vínculos que todavía no se ha visitado. Vínculos ya visitados. Vínculos sobre los que está el cursor del ratón. Dejará de estarlo cuando el ratón salga de esa posición. Vínculos sobre los que se está haciendo clic. Vínculos que están siendo seleccionados mediante el teclado. 23
5.4 CRITERIOS DE SELECCIÓN 5.Selector por los atributos del elemento Este tipo de selectores se utilizan cuando se desea aplicar formato a aquellos elementos que tienen un determinado atributo o un valor de atributo dado. La forma de declararlo es elemento[ atributo]. td[ fgcolor] { color:#003333;} Selecciona todas las celdas de una tabla (td) que tengan el atributo fgcolor. 24
5.4 CRITERIOS DE SELECCIÓN 6.Selector de pseudo-elementos Son partes de elementos de una página a los que HTML no otorga identidad propia y, por tanto, no pueden ser seleccionados por dicho lenguaje. Sin embargo, las reglas de estilo CCS sí que permiten identificarlos y formatearlos de manera distinta al resto de elementos (por ejemplo, la primera letra o la primera línea de cada párrafo) p:first-letter { color:red;} Se indica de color rojo, la primera letra de cada párrafo. 25
5.4 CRITERIOS DE SELECCIÓN Pseudoelemento :first-letter :first-line :before :after Significado El primer carácter del elemento al que pertenece. La primera línea del elemento al que pertenece. El elemento anterior El elemento posterior. 26
5.4 CRITERIOS DE SELECCIÓN Agrupación de selectores Se aplica cuando se desea las mismas reglas de estilo a más de un elemento. Para ello, se indican los selectores separados por una coma (,). td, p { color:#00ff00;} Se formatean los elementos td y p con las mismas propiedades 27
5.4 CRITERIOS DE SELECCIÓN Combinación de selectores Los criterios de selección anteriores, pueden combinarse para obtener así una selección de elementos más fina. div p.portada[ id] { color:#00ff00;} Se seleccionan los elementos p que estén dentro de elementos div, que pertenezcan a la clase portada y que tengan el atributo id. 28
5.4 CRITERIOS DE SELECCIÓN Indicaciones para combinar selectores 1.Definir el contexto del elemento deseado. 2.Definir el nombre del elemento que se quiere seleccionar o utilizar el selector universal (*). 3.Especificar la clase o id del elemento deseado. 4.Definir los atributos que puedan estar presentes. Clase o id div p.portada[ id] { color:#00ff00;} Contexto Elemento Atributo Regla CSS 29
5.4 CRITERIOS DE SELECCIÓN <HTML><HEAD> <TITLE>Esta es mi primera hoja de estilos</title> <STYLE TYPE="text/css"> P B{color:blue} LI B {color:red} </STYLE> </HEAD> <BODY> <P> Aquí aparece en <B> azul </B></P> <P>En cambio en la siguiente lista</p> <UL> <LI>Aparece en <B>rojo</B></LI> </UL> </BODY> </HTML> 30
5.4 CRITERIOS DE SELECCIÓN Comentarios en el código CSS Para añadir comentarios a las hojas de estilo, tanto internas como externas, se usan la misma forma del lenguaje C: /* Etiqueta inicio de comentario */ Etiqueta final de comentario /* Esta regla de estilo define la fuente de la clase prov*/.prov { font-size: 9px; color: #FFE2A8;/*Este color queda mejor que el #FF0044*/} 31
5.5 LAS PROPIEDADES Y SUS VALORES Selector {propiedad1:valor1;propiedad2:valor2;} Todas estas propiedades están divididas en 5 grandes grupos: Propiedades de texto Propiedades de las fuentes Propiedades de los colores y fondos Propiedades de márgenes y padding Propiedades de los bordes 32
Propiedades de texto 5.5 LAS PROPIEDADES Y SUS VALORES Son propiedades que afectan a la presentación visual de caracteres, espacios, palabras y párrafos. text-transform vertical-align text-align text-indent line-height text-decoration letter-spacing word-spacing uppercase lowercase capitalize none baseline sub super top text-top middle mottom text-bottom % left right center justify XX unidad %, (Por defecto su valor es 0) normal XX unidad % underline overline line-trough blink none normal XX unidad normal XX unidad 33
Propiedades de las fuentes 5.5 LAS PROPIEDADES Y SUS VALORES Con estas propiedades controlamos el estilo de una fuente, su tamaño, su familia, su grosor, etc. font-family font-style font-variant font-weight font-size Verdana Arial Helvetica Sans-Serif normal italic oblique normal small-caps lighter normal bold bolder 100 200 300... 900 XX units % larger smaller xx-small x-small medium large x-large xx-large 34
5.5 LAS PROPIEDADES Y SUS VALORES Propiedades de los colores y fondos Son las propiedades que permiten fijar el color del primer plano y fondo de un elemento. color background-color background-image background-repeat backgroundattachment background-position background Valor HEX RGB(R%,G%,B%) name; transparent Nombre Color Valor HEX Rgb (R%,g%,B%) Rgb(R, G,B) none url(dirección) repeat repeat-x repeat-y no-repeat scroll fixed XX unidad % top center bottom left right transparent color url repeat scroll position 35
5.5 LAS PROPIEDADES Y SUS VALORES margin margin-top margin-right margin-bottom margin-left padding padding-top padding-right padding-bottom padding-left CAJAS border border-top border-bottom border-right border-left border-color border-top-color border-right-color border-bottom-color border-left-color border-style border-top-style border-right-style border-bottom-style border-left-style border-width border-top-width border-right-width border-bottom-width border-left-width 36
5.5 LAS PROPIEDADES Y SUS VALORES POSICIONAMIENTO Display Position Top/Right/Bottom/Left Float Clear z-index direction unicode-bidi Overflow Clip Visibility DIMENSIONES Width min-width max-width Height min-height max-height line-height vertical-align PAGINACIÓN Size Marks page-break-before page-break-after page-break-inside page orphans widows 37
5.5 LAS PROPIEDADES Y SUS VALORES LISTAS list-style list-style-type list-style-image list-style-position TABLAS caption-side table-layout Border-collapse border-spacing empty-cells speak-header INTERFAZ cursor outline outline-width outline-style outline-color 38
ACCESO RÁPIDO P { font-style: italic; font-variant: small-caps; font-weight: bold; font-size:1em; font-height:140%; font-family: Arial, sans-serif;} P { font: italic small-caps bold 1em/140% Arial, sans-serif;} 39
5.6 PRECEDENCIA Por qué el nombre de hojas de estilo en cascada? Porque se usan unas sobre otras, sumando reglas y son aplicadas todas a un mismo documento. Si hay dos hojas que proponen distintas reglas para un mismo elemento Cuál de ellas debe ser interpretada? Este conflicto se resuelve en CSS según el «principio de la cascada». Éste decidirá cómo resolver conflictos generados por problemas de herencia, especificidad o ubicación. 40
5.6 PRECEDENCIA Herencia Las etiquetas de un documento HTML están organizadas de manera que unas engloban a otras. Esta permite definir una relación padre-hijo. Hay estilos CSS definidos para etiquetas padres que serán heredados por las etiquetas hijas. body {font-family:arial; color:blue;} Todo el documento estará con una fuente Arial de color azul. 41
5.6 PRECEDENCIA Herencia El mecanismo de herencia de estilos siempre funciona a menos que un elemento hijo tenga definido su propio estilo. h1 {color:#0000ff; border-color:#ff0000;} Cualquier elemento dentro de h1 será también azul dado que la propiedad color se hereda; El borde rojo no se hereda. Para forzar la herencia, se le asigna el valor inherit a la propiedad que queremos que herede del padre: {border:inherit;} 42
5.6 PRECEDENCIA Especificidad Cuando dos reglas afectan al mismo elemento, prevalece la más específica. h1 {color:#0000ff;} h1.inicial {color:#ff0000;} Más específica Preferencia selectores Selector id > selector class > selector simple (sin atributos) > Regla heredada Las reglas heredadas son consideradas como las más generales de todas. 43
5.6 PRECEDENCIA Ubicación Entre dos reglas con idéntica especificidad, la última será la que se aplique. Reglas locales > Reglas internas > Reglas externas + Prioridad Las reglas aplicadas localmente se consideran que aparecen después que las definidas en una hoja de estilo interna y, por lo tanto, tienen más relevancia que éstas. 44
5.7 PRESENTACIÓN DE ESTILOS. LAS CAPAS El uso de capas (generadas con etiquetas div), permite mejorar la estructura de una página web. Son divisiones o secciones lógicas del documento, utilizadas para definir estilos de una forma independiente del resto de elementos. Div Divide el documento en grandes secciones Span Especifica pequeñas porciones del texto 45
5.7 PRESENTACIÓN DE ESTILOS. LAS CAPAS La capa no es una simple división, sino un cuadro. Se compone de un área de contenido, el espacio alrededor de esa área (padding o relleno), el lado exterior del relleno (border o borde) y el espacio invisible alrededor del borde (margin o margen). Área de contenido margin padding border 46
5.7 PRESENTACIÓN DE ESTILOS. LAS CAPAS Las capas permiten identificar los distintos elementos y colocarlos siguiendo un orden lógico. A través de las propiedades adecuadas, se puede determinar: - La posición de la capa respecto su elemento padre o a la ventana del navegador: Si las capas se solapan, es necesario especificar el orden en que lo hacen. - La apariencia de la capa: Su relleno, borde, márgenes, tamaño, alineación o color. 47