Portales - Ud5 - Hojas de Estilo Css

5 Unidad Didctica
Hojas de estilo en Cascada

CSS
Eduard Lara
NDICE
5.1 El Origen de CSS

5.2 Hojas de estilo y sus clases
5.3 Las reglas de estilo
5.4 Presentacin con estilos
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 versin 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 homogneo a todo un sitio web. Permite
modificar el estilo de numerosos elementos,
cambiando unas pocas lneas de cdigo.
Actualmente CSS ofrece muchas mas
posibilidades que las que jams tuvo HTML:
cambiar el tamao, grosor, y altura de lnea,
colores de fondo y primer plano, espaciado y
alineamiento del texto, decidir subrayado,
tachado o parpadeante, convertirlo en maysculas,
o minsculas, etc.
4
5.2 LAS HOJAS DE ESTILO

Y SUS CLASES
CSS sirve para dotar de estilo a los elementos
que componen una pgina web.
Una hoja de estilo es un conjunto de reglas
de estilo que definen el formato de los
elementos de la pgina 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

Y SUS CLASES
Existen 3 maneras de dotar de estilo CSS a
una pgina web:
1) Aplicar estilos de forma local.
Se escribe el cdigo 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

Y SUS CLASES
2) Hojas de estilo internas.
Suelen usarse cuando se pretende aplicar el
estilo slo a la pgina donde se ubica.
<head><style type="text/css> Codigo CSS
</style></head>
Se puede ubicar en cualquier parte de la pgina,
pero suele hacerse dentro de la cabecera.
Se pueden definir tantas hojas de estilo como se
desee en un pgina. En caso de conflicto entre
ellas se aplica la norma de la precedencia.
7

Y SUS CLASES
3) Hojas de estilo externas.
Dan aspecto comn a varias pginas de un portal.
Los estilos se definen en una hoja de estilo
externa, y todas las pginas del portal la consultan.
Mediante la etiqueta link se vincula una hoja de
estilos a una pgina 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

Y SUS CLASES
Ejemplo:
Pgina 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 pgina </body>
</html>
Para que funcione este ejemplo, la hoja de estilo y

la pgina HTML deben estar en la misma carpeta.
9
5.2 PRCTICA
1) Acudir a http://www.w3.org/Style/CSS, donde
existe un listado actualizado de los programas
vlidos para tratar CSS (editores, conversores).
2) Visualizar los siguientes programas especficos
para el tratamiento CSS:
-Style Master
-TopStyle
-CSSED
Permiten obtener una vista previa del estilo
creado, o trabajar sobre plantillas predefinidas
10
5.2 PRCTICA
3) Validaciones cdigo CSS
Acudir a http://jigsaw.w3.org/css-validator/, una
pgina oficial de W3C que permite comprobar si el
cdigo que se ha generado es correcto o no.
4) Consultar la pgina 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
ms caractersticas 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 declaracin 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 pgina afectada por la
regla, adquieren el color rojo.
Pregunta: Y si slo deseamos dar un estilo a unos
determinados prrafos y no a todos?
Selectores especficos: 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
seleccin ms ajustada de los elementos:
Documento html <p id=despedida>
La regla de estilo necesaria para hacer referencia al
prrafo despedida, sera:
Hoja de estilo p#despedida { font-size:14px;}
Slo el prrafo despedida tendr un tamao de 14
pxeles.
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
SELECCIN
Existen cinco tipos de selectores o criterios de seleccin
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 carcter asterisco (*) es un selector universal. Las
propiedades que se encuentren especificadas bajo ste
afectarn a todos los elementos.
16
5.4 CRITERIOS DE
SELECCIN
1.Selector por tipo o nombre de elemento
Es el criterio ms general y sencillo por su
sintaxis. Aplica un determinado formato a todos
los elementos seleccionados sin distincin de
clases, identificadores, contextos, etctera.
p { color:red;}
Suelen aplicarse ms los otros mtodos, ya que
son ms especficos, y permiten afinar ms.
17
5.4 CRITERIOS DE
SELECCIN
2.Selector por el contexto del elemento
a. Ascendente. Es el elemento que contiene al que
se desea formatear. Puede haber ms 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

estn dentro de div
18
5.4 CRITERIOS DE
SELECCIN
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
Smbolo Mayor que
Se formatea de color rojo todos prrafos hijos de div

div p:first-child {color:#00FF00;} Slo el 1 prrafo hijo
19
5.4 CRITERIOS DE
SELECCIN
c. Hermano. Es el elemento que precede
directamente (adyacente), dentro del mismo
elemento padre, al que se desea formatear. Para
seleccionar elementos en funcin del hermano, se
utiliza el smbolo de la suma (+):
hermano
precedente
hermano
seleccionado
div + p { color:#00FF00;}
Se trata de cualquier elemento p inmediatamente
despus del elemento del tipo div
20
5.4 CRITERIOS DE
SELECCIN
3.Selector por clase o identificador
Forma de seleccin ms utilizada. Permite afinar
ms que la seleccin 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
SELECCIN
4.Selector por la pseudo-clase del elemento
Las pseudo-clases clasifican a los elementos
basndose en su estado, es decir, en funcin de los

eventos que les hayan ocurrido: cursor del ratn
encima, etc. si se han visitado, si el usuario est
pasando por encima con el cursor del ratn, etc.
Los elementos ms utilizados son los referentes a los
vnculos (etiqueta a) y al primer hijo (:first-child).
a:link { color:red;} Afecta vnculos no visitados
a:visited{ color:blue;} Afecta vnculos ya visitados
22
5.4 CRITERIOS DE
SELECCIN
Pseudoclase
:link
:visited
:hover
:active
.
:focus
Significado
Vnculos que todava no se ha visitado.
Vnculos ya visitados.
Vnculos sobre los que est el cursor del
ratn. Dejar de estarlo cuando el ratn
salga de esa posicin.
Vnculos sobre los que se est haciendo
clic.
Vnculos que estn siendo seleccionados
mediante el teclado.
23
5.4 CRITERIOS DE
SELECCIN
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
SELECCIN
6.Selector de pseudo-elementos
Son partes de elementos de una pgina 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 lnea de cada prrafo)
p:first-letter { color:red;}
Se indica de color rojo, la primera letra de cada
prrafo.
25
5.4 CRITERIOS DE
SELECCIN
Pseudoelemento
:first-letter
:first-line
:before
:after
Significado
El primer carcter del elemento
al que pertenece.
La primera lnea del elemento al
que pertenece.
El elemento anterior
El elemento posterior.
26
5.4 CRITERIOS DE
SELECCIN
Agrupacin de selectores
Se aplica cuando se desea las mismas reglas de estilo
a ms 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
SELECCIN
Combinacin de selectores
Los criterios de seleccin anteriores, pueden
combinarse para obtener as una seleccin de
elementos ms fina.
div p.portada[ id] { color:#00FF00;}
Se seleccionan los elementos p que estn dentro de
elementos div, que pertenezcan a la clase portada y
que tengan el atributo id.
28
5.4 CRITERIOS DE
SELECCIN
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
SELECCIN
<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
SELECCIN
Comentarios en el cdigo CSS
Para aadir 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 estn divididas en 5
grandes grupos:
Propiedades de texto
Propiedades de las fuentes
Propiedades de los colores y fondos
Propiedades de mrgenes y padding
Propiedades de los bordes
32

SUS VALORES
Propiedades de texto
Son propiedades que afectan a la presentacin visual de
caracteres, espacios, palabras y prrafos.
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

SUS VALORES
Propiedades de las fuentes
Con estas propiedades controlamos el estilo de una
fuente, su tamao, 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

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(direccin)
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

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
PAGINACIN
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 RPIDO
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 Cul de ellas debe ser
interpretada?
Este conflicto se resuelve en CSS segn el
principio de la cascada. ste decidir cmo
resolver conflictos generados por problemas de
herencia, especificidad o ubicacin.
40
5.6 PRECEDENCIA
Herencia
Las etiquetas de un documento HTML estn
organizadas de manera que unas engloban a otras.
Esta permite definir una relacin padre-hijo.
Hay estilos CSS definidos para etiquetas padres
que sern 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 tambin
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 ms especfica.
h1 {color:#0000FF;}
h1.inicial {color:#FF0000;} Ms especfica
Preferencia selectores
Selector id > selector class > selector simple (sin
atributos) > Regla heredada
Las reglas heredadas son consideradas
como las ms generales de todas.
43
5.6 PRECEDENCIA
Ubicacin
Entre dos reglas con idntica especificidad, la
ltima ser la que se aplique.
Reglas locales > Reglas internas > Reglas externas
+ Prioridad
Las reglas aplicadas localmente se consideran

que aparecen despus que las definidas en una
hoja de estilo interna y, por lo tanto, tienen ms
relevancia que stas.
44
5.7 PRESENTACIN DE
ESTILOS. LAS CAPAS
El uso de capas (generadas con etiquetas div),
permite mejorar la estructura de una pgina web.
Son divisiones o secciones lgicas del documento,
utilizadas para definir estilos de una forma
independiente del resto de elementos.
Div Divide el documento en grandes secciones
Span Especifica pequeas porciones del texto
45
5.7 PRESENTACIN DE
ESTILOS. LAS CAPAS
La capa no es una simple divisin, 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 PRESENTACIN DE
ESTILOS. LAS CAPAS
Las capas permiten identificar los distintos
elementos y colocarlos siguiendo un orden lgico.
A travs de las propiedades adecuadas, se puede
determinar:
- La posicin 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,
mrgenes, tamao, alineacin o color.
47

Portales - Ud5 - Hojas de Estilo Css

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Portales - Ud5 - Hojas de Estilo Css

Uploaded by

Copyright:

Available Formats

5 Unidad Didctica

Hojas de estilo en Cascada

5.1 El Origen de CSS

5.1 EL ORIGEN DE CSS

5.1 EL ORIGEN DE CSS

5.2 LAS HOJAS DE ESTILO

5.2 LAS HOJAS DE ESTILO

5.2 LAS HOJAS DE ESTILO

5.2 LAS HOJAS DE ESTILO

5.2 LAS HOJAS DE ESTILO

Para que funcione este ejemplo, la hoja de estilo y

5.3 LAS REGLAS DE

5.3 LAS REGLAS DE

5.3 LAS REGLAS DE

5.3 LAS REGLAS DE

Se formatea de color rojo los elementos p que

<p> Este es un parrafo</p>

Smbolo Mayor que

Se formatea de color rojo todos prrafos hijos de div

Si se omite el nombre del elemento, se seleccionan

basndose en su estado, es decir, en funcin de los

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

5.5 LAS PROPIEDADES Y

5.5 LAS PROPIEDADES Y

left | right | center | justify

XX unidad | %, (Por defecto su valor es 0)

5.5 LAS PROPIEDADES Y

Verdana| Arial| Helvetica| Sans-Serif

normal | italic | oblique

lighter | normal | bold | bolder | 100 | 200 | 300 |

XX units | % | larger | smaller | xx-small | x-small |

5.5 LAS PROPIEDADES Y

Son las propiedades que permiten fijar el color del

transparent | Nombre Color | Valor HEX | Rgb

repeat | repeat-x | repeat-y | no-repeat

XX unidad | % | top | center | bottom |left |right

transparent | color | url | repeat |scroll | position

5.5 LAS PROPIEDADES Y

5.5 LAS PROPIEDADES

5.5 LAS PROPIEDADES Y SUS

El borde rojo no se hereda.

Para forzar la herencia, se le asigna el valor

Las reglas aplicadas localmente se consideran

You might also like