UD5 - Hojas de estilo CSS - Pagina Personal de Eduard Lara
Anuncio
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;}
<div>
<h1><p> Este es un parrafo</p></h1>
</div>
Ascendente
Etiqueta a formatear
Etiqueta a formatear
Espacio en blanco
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;}
<div>
Padre
<p> Este es un parrafo</p>
</div>
Padre
Hijo
Etiqueta hija
Símbolo “Mayor que”
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
Selector de clase
p#dos { color:#00FF00;}
p.uno {text-align:center;}
nombre elemento+”#”+id
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
5.4 CRITERIOS DE
SELECCIÓN
Pseudoclase
:link
:visited
:hover
:active
.
:focus
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
5.5 LAS PROPIEDADES Y
SUS VALORES
Propiedades de texto
Son propiedades que afectan a la presentación visual de
caracteres, espacios, palabras y párrafos.
text-transform
uppercase|lowercase|capitalize|none
vertical-align
baseline|sub|super|top|text-top|middle|
mottom|text-bottom | %
text-align
left | right | center | justify
text-indent
XX unidad | %, (Por defecto su valor es 0)
line-height
normal | XX unidad | %
text-decoration
underline|overline|line-trough|blink| none
letter-spacing
normal | XX unidad
word-spacing
normal | XX unidad
33
5.5 LAS PROPIEDADES Y
SUS VALORES
Propiedades de las fuentes
Con estas propiedades controlamos el estilo de una
fuente, su tamaño, su familia, su grosor, etc.
font-family
Verdana| Arial| Helvetica| Sans-Serif
font-style
normal | italic | oblique
font-variant
normal | small-caps
font-weight
lighter | normal | bold | bolder | 100 | 200 | 300 |
...... | 900
font-size
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
Valor HEX|RGB(R%,G%,B%)|name;
background-color
transparent | Nombre Color | Valor HEX | Rgb
(R%,g%,B%) | Rgb(R, G,B)
background-image
none | url(dirección)
background-repeat
repeat | repeat-x | repeat-y | no-repeat
backgroundattachment
scroll | fixed
background-position
XX unidad | % | top | center | bottom |left |right
background
transparent | color | url | repeat |scroll | position
35
5.5 LAS PROPIEDADES Y
SUS VALORES
CAJAS
margin
border
border-style
margin-top
border-top
border-top-style
margin-right
border-bottom
border-right-style
margin-bottom
border-right
border-bottom-style
margin-left
border-left
border-left-style
padding
border-color
border-width
padding-top
border-top-color
border-top-width
padding-right
border-right-color
border-right-width
padding-bottom
border-bottom-color
border-bottom-width
padding-left
border-left-color
border-left-width
36
5.5 LAS PROPIEDADES
Y SUS VALORES
POSICIONAMIENTO
DIMENSIONES
PAGINACIÓN
Display
Width
Size
Position
min-width
Marks
Top/Right/Bottom/Left
max-width
page-break-before
Float
Height
page-break-after
Clear
min-height
page-break-inside
z-index
max-height
page
direction
line-height
orphans
unicode-bidi
vertical-align
widows
Overflow
Clip
Visibility
37
5.5 LAS PROPIEDADES Y SUS
VALORES
LISTAS
TABLAS
INTERFAZ
list-style
caption-side
cursor
list-style-type
table-layout
outline
list-style-image
Border-collapse
outline-width
list-style-position
border-spacing
outline-style
empty-cells
outline-color
speak-header
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
