Portales - Ud5 - Hojas de Estilo Css

1
5 Unidad Didctica
Hojas de estilo en Cascada
CSS
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 Presentacin 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 versin 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 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.
5
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).
6
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>
7
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.
8
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.
9
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.
10
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
11
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
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 declaracin que establece la propiedad y
valor a aplicar sobre el elemento.
Selector {propiedad1:valor1;}
Selector {propiedad1:valor1;propiedad2:valor2;}
13
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
14
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.
15
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
16
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.
17
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.
18
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.
Se formatea de color rojo los elementos p que
estn dentro de div
<div>
<h1><p> Este es un parrafo</p></h1>
</div>
Sintaxis CSS:
div p {color:#00FF00;}
Ascendente
Etiqueta a formatear Etiqueta a formatear Ascendente
Espacio en blanco
19
5.4 CRITERIOS DE
SELECCIN
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 prrafos hijos de div
div p:first-child {color:#00FF00;} Slo el 1 prrafo hijo
<div>
<p> Este es un parrafo</p>
</div>
Sintaxis CSS:
div > p {color:#00FF00;}
Padre
Etiqueta hija
Hijo Padre
Smbolo Mayor que
20
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 (+):
div + p { color:#00FF00;}
Se trata de cualquier elemento p inmediatamente
despus del elemento del tipo div
hermano
precedente
hermano
seleccionado
21
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.
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 clase Selector de identificador
22
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
23
5.4 CRITERIOS DE
SELECCIN
Vnculos que estn siendo seleccionados
mediante el teclado.
:focus
Vnculos sobre los que se est haciendo
clic.
:active
Vnculos sobre los que est el cursor del
ratn. Dejar de estarlo cuando el ratn
salga de esa posicin.
:hover
Vnculos ya visitados. :visited
Vnculos que todava no se ha visitado. :link
Significado Pseudo-
clase
.
24
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.
25
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.
26
5.4 CRITERIOS DE
SELECCIN
El elemento posterior. :after
El elemento anterior :before
La primera lnea del elemento al
que pertenece.
:first-line
El primer carcter del elemento
al que pertenece.
:first-letter
Significado Pseudo-
elemento
27
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
28
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.
29
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.
div p.portada[ id] { color:#00FF00;}
Contexto Elemento
Clase o id
Regla CSS Atributo
30
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>
31
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*/}
32
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
33
SUS VALORES
Propiedades de texto
Son propiedades que afectan a la presentacin visual de
caracteres, espacios, palabras y prrafos.
normal | XX unidad word-spacing
normal | XX unidad letter-spacing
underline|overline|line-trough|blink| none text-decoration
normal | XX unidad | % line-height
XX unidad | %, (Por defecto su valor es 0) text-indent
left | right | center | justify text-align
baseline|sub|super|top|text-top|middle|
mottom|text-bottom | %
vertical-align
uppercase|lowercase|capitalize|none text-transform
34
SUS VALORES
Propiedades de las fuentes
Con estas propiedades controlamos el estilo de una
fuente, su tamao, su familia, su grosor, etc.
XX units | % | larger | smaller | xx-small | x-small |
medium | large | x-large | xx-large
font-size
lighter | normal | bold | bolder | 100 | 200 | 300 |
...... | 900
font-weight
normal | small-caps font-variant
normal | italic | oblique font-style
Verdana| Arial| Helvetica| Sans-Serif font-family
35
SUS VALORES
Propiedades de los colores y fondos
Son las propiedades que permiten fijar el color del
primer plano y fondo de un elemento.
transparent | color | url | repeat |scroll | position background
XX unidad | % | top | center | bottom |left |right background-position
scroll | fixed background-
attachment
repeat | repeat-x | repeat-y | no-repeat background-repeat
none | url(direccin) background-image
transparent | Nombre Color | Valor HEX | Rgb
(R%,g%,B%) | Rgb(R, G,B)
background-color
Valor HEX|RGB(R%,G%,B%)|name; color
36
SUS VALORES
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
border
border-top
border-bottom
border-right
border-left
border-color
border-top-color
border-right-color
border-bottom-color
border-left-color
margin
margin-top
margin-right
margin-bottom
margin-left
padding
padding-top
padding-right
padding-bottom
padding-left
CAJAS
37
5.5 LAS PROPIEDADES
Y SUS VALORES
Size
Marks
page-break-before
page-break-after
page-break-inside
page
orphans
widows
Width
min-width
max-width
Height
min-height
max-height
line-height
vertical-align
Display
Position
Top/Right/Bottom/Left
Float
Clear
z-index
direction
unicode-bidi
Overflow
Clip
Visibility
PAGINACIN DIMENSIONES POSICIONAMIENTO
38
5.5 LAS PROPIEDADES Y SUS
VALORES
cursor
outline
outline-width
outline-style
outline-color
caption-side
table-layout
Border-collapse
border-spacing
empty-cells
speak-header
list-style
list-style-type
list-style-image
list-style-position
INTERFAZ TABLAS LISTAS
39
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;}
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 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.
41
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.
42
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;}
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 tambin
azul dado que la propiedad color se hereda;
El borde rojo no se hereda.
43
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.
44
5.6 PRECEDENCIA
Ubicacin
Entre dos reglas con idntica especificidad, la
ltima ser la que se aplique.
Reglas locales > Reglas internas > Reglas externas
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.
+ Prioridad
45
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
46
5.7 PRESENTACIN DE
ESTILOS. LAS CAPAS
rea de contenido
padding border
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).
margin
47
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.

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

1

You might also like