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 (CascadingStyleSheets), 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.
<div>
<h1><p> Este es un parrafo</p></h1>
</div>
div p {color:#00FF00;}
Sintaxis CSS:
Ascendente
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>
Padre
div > p {color:#00FF00;}
<p> Este es un parrafo</p>
Padre
Hijo
Símbolo “Mayor que”
</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
Pseudo-
clase
:link
: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
Crear cuenta
Comentarios de: UD5 - Hojas de estilo CSS (0)
No hay comentarios