5º Unidad Didáctica Hojas de estilo en Cascada...

1

5º Unidad Didáctica

Hojas de estilo en CascadaCSS

Eduard Lara

2

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

ÍNDICE

3

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.

4

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.

5

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).

6


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>

7


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.

8


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.

9


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.

10

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

11

5.2 PRÁCTICA

3) Validaciones código CSSAcudir 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

12

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;}

13


El selectorDetermina 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

14


Selector identificadorLos 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.

15


Selector de ClaseEl 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

16

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.

17


1.Selector por tipo o nombre de elementoEs 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.

18


2.Selector por el contexto del elementoa. Ascendente. Es el elemento que contiene al que se desea formatear. Puede haber más de un elemento entre uno y otro.

Se formatea de color rojo los elementos p que estén dentro de div

<div><h1><p> Este es un parrafo</p></h1>

</div>

Sintaxis CSS:div p {color:#00FF00;}

Ascendente

Etiqueta a formatearEtiqueta a formatearAscendenteEspacio en blanco

19


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.

Se formatea de color rojo todos párrafos hijos de div

div p:first-child {color:#00FF00;} Sólo el 1º párrafo hijo

<div> <p> Este es un parrafo</p>

</div>

Sintaxis CSS:div > p {color:#00FF00;}

Padre

Etiqueta hijaHijoPadreSímbolo “Mayor que”

20


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 (+):

div + p { color:#00FF00;}Se trata de cualquier elemento p inmediatamente después del elemento del tipo div

hermano precedente

hermano seleccionado

21


3.Selector por clase o identificadorForma de selección más utilizada. Permite afinar más que la selección por nombre de elemento.

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

p.uno {text-align:center;}nombre elemento+”.”+clase

p#dos { color:#00FF00;}nombre elemento+”#”+id

Selector de claseSelector de identificador

22


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 visitadosa:visited{ color:blue;} Afecta vínculos ya visitados

23


Vínculos que están siendo seleccionados mediante el teclado.

:focus

Vínculos sobre los que se está haciendo clic.

:active

Vínculos sobre los que está el cursor del ratón. Dejará de estarlo cuando el ratón salga de esa posición.

:hoverVínculos ya visitados.:visitedVínculos que todavía no se ha visitado.:link

SignificadoPseudo-clase

.

24


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.

25


6.Selector de pseudo-elementosSon 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.

26


El elemento posterior.:afterEl elemento anterior:before

La primera línea del elemento al que pertenece.

:first-line

El primer carácter del elemento al que pertenece.

:first-letter

SignificadoPseudo-elemento

27


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

28


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.

29


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.

div p.portada[ id] { color:#00FF00;}

Contexto Elemento

Clase o id

Regla CSSAtributo

30


<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>

31


Comentarios en el código CSSPara 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*/}

32

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

36


border-styleborder-top-styleborder-right-styleborder-bottom-styleborder-left-styleborder-widthborder-top-widthborder-right-widthborder-bottom-widthborder-left-width

borderborder-topborder-bottomborder-rightborder-leftborder-colorborder-top-colorborder-right-colorborder-bottom-colorborder-left-color

marginmargin-topmargin-rightmargin-bottommargin-leftpaddingpadding-toppadding-rightpadding-bottompadding-left

CAJAS

37


SizeMarkspage-break-beforepage-break-afterpage-break-insidepageorphanswidows

Widthmin-widthmax-widthHeightmin-heightmax-heightline-heightvertical-align

DisplayPositionTop/Right/Bottom/LeftFloatClearz-indexdirectionunicode-bidiOverflowClipVisibility

PAGINACIÓNDIMENSIONESPOSICIONAMIENTO

38

5.5 LAS PROPIEDADES Y SUSVALORES

cursoroutlineoutline-widthoutline-styleoutline-color

caption-sidetable-layoutBorder-collapseborder-spacingempty-cellsspeak-header

list-stylelist-style-typelist-style-imagelist-style-position

INTERFAZTABLASLISTAS

39

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;}

40

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.

41

5.6 PRECEDENCIA

HerenciaLas 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.

42

5.6 PRECEDENCIA

HerenciaEl mecanismo de herencia de estilos siempre funciona a menos que un elemento hijo tenga definido su propio estilo.

h1 {color:#0000FF; border-color:#FF0000;}

Para forzar la herencia, se le asigna el valor inherit a la propiedad que queremos que herede del padre: {border:inherit;}

Cualquier elemento dentro de h1 será también azul dado que la propiedad color se hereda;

El borde rojo no se hereda.

43

5.6 PRECEDENCIA

EspecificidadCuando dos reglas afectan al mismo elemento, prevalece la más específica.h1 {color:#0000FF;}h1.inicial {color:#FF0000;} Más específica

Preferencia selectoresSelector id > selector class > selector simple (sin atributos) > Regla heredada

Las reglas heredadas son consideradas como las más generales de todas.

44

5.6 PRECEDENCIA

UbicaciónEntre dos reglas con idéntica especificidad, la última será la que se aplique.

Reglas locales > Reglas internas > Reglas externas

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.

+ Prioridad

45

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

46


Área de contenido

padding border

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).

margin

47


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.

5º Unidad Didáctica Hojas de estilo en Cascada...

Documents

Transcript of 5º Unidad Didáctica Hojas de estilo en Cascada...