un lenguaje que permite asociar estilos de composición a documentos estructurados, como html y...

Un lenguaje que permite asociar estilos de composición a documentos estructurados, como HTML y aplicaciones XML

Un conjunto de propiedades y valores que definen la presentación de las páginas (visual, impresa, sonora o táctil)

Un método para separar el contenido de los documentos de su forma de presentación

Una recomendación del WWW Consortium (Cascading Style Sheets) › CSS1: octubre 1996 › CSS2: mayo 1998

Ventajas› E s t i l o s m á s r i c o s q u e H T M L , c o n m á s e f e c t o s ( p o n e r b o r d

e s a c u a l q u i e r e l e m e n t o , i m á g e n e s d e f o n d o . . . )› M á s r á p i d o y f á c i l d e d e f i n i r y m o d i f i c a r :

● H T M L : < h 1 > < f o n t c o l o r = ” b l u e ” > A z u l < / f o n t > < / h 1 > e n c a d a e l e m e n t o < H 1 >

● C S S : h 1 { c o l o r : b l u e ; } u n a ú n i c a v e z – U n a ú n i c a h o j a d e e s t i l o s p a r a d e f i n i r e l e s t i l o d

e m ú l t i p l e s p á g i n a s - > m a n t e n e r u n e s t i l o c o n s i s t e n t e e n t o d o u n s i t i o w e b

– F l e x i b i l i d a d : d i s t i n t o s e s t i l o s s e l e c c i o n a b l e s p o r e l l e c t o r , i n c l u i d o u n o d e f i n i d o p o r é l m i s m o ( r e a d e r s t y l e s h e e t )

– R e d u c e t a m a ñ o d e l o s d o c u m e n t o s - > m a y o r v e l o c i d a d d e d e s c a r g a

● I n c o n v e n i e n t e : s ó l o l o s o p o r t a n n a v e g a d o r e s c o n v e r s i ó n > 4

Las CSS constituyen una valiosa herramienta de diseño

Facilitan la tarea de edición y mantenimiento de los sitios en la Web

Facilitan el acceso a la información a todas las personas

Se complementan con otros lenguajes para lograr una mejor comunicación

Permiten estar mejor preparados para los cambios que se producirán

Las hojas de estilo se componen de reglas – Cada regla consta de dos partes: !Un selector !Una declaración formada por un par propiedad y valor. body { background-color: #CCCCCC; color: #FF0000; } p.der { text-align: right; color: #00FFFF; } ul { list-style-type: circle; } .arial { font-family: Arial; font-size: 10pt; }

Elementos genéricos – Se utilizan para dar estilos distintos a diferentes partes de un mismo elemento ! de bloque: div ! de lín Como consecuencia se utilizan en muchas ocasiones para crear elementos

dinámicos en la presentación del documento.ea: span

Métodos para especificar estilos en documentos XHTML – Utilizando documentos independientes de hojas de estilo y relacionando éste con el documento XHTML mediante un elemento link. – Utilizando estilos incrustados en el documento XHTML mediante el elemento de cabecera style. – Utilizando estilos en línea que se aplican a elemento específicos que incluyen el atributo style.

¿ C ó m o c o n j u g a r l o c o n H T M L ? – H T M L - > e s t r u c t u r a i n t e r n a , C S S - > e s t r u c t u r a v i s u a l < h t m l > < h e a d > < t i t l e > T í t u l o d e l a p á g i n a < / t i t l e > < l i n k r e l = " s t y l e s h e e t " t y p e = " t e x t / c s s " h r e f = " e s t i l o s 1 . c s s " m e d i a = " a l l " / > < s t y l e t y p e = " t e x t / c s s " > @ i m p o r t u r l ( e s t i l o s 2 . c s s ) ; h 1 { c o l o r : r e d ; } b o d y { b a c k g r o u n d : y e l l o w ; } < / s t y l e > < / h e a d > < b o d y > < h 1 > I n t r o d u c c i ó n < / h 1 > < p s t y l e = " c o l o r : b l a c k ; " > V e a m o s c ó m o i n c l u i r e s t i l o s c o n C S S e n u n d o c u m e n t o H T M L < / p > < / b o d y > </html> h o j a d e e s t i l o s e x t e r n a e s t i l o e n l í n e a ( i n l i n e ) h o j a d e e s t i l o s d e d o c u m e n t o

Mantenibilidad: simplifican la edición y mantenimiento de los documentos

Simplicidad: lenguaje legible y propiedades independientes

Flexibilidad: amplias posibilidades de uso Riqueza: abundantes efectos de

procesamiento Rendimiento: codificación compacta Independencia del vendedor, la

plataforma y el dispositivo Combinación con otros lenguajes Mayor accesibilidad de las páginas

Avanzado manejo de fuentes tipográficas Control preciso de los espacios y el

posicionamiento de elementos La regla !important brinda prioridad a los

usuarios con requerimientos especiales El valor inherit (heredado) permite reglas

compactas y estilos más consistentes Completo soporte de medios

Compuestas por reglas de estilo. Ejemplo: H1 { color: blue }

Cada regla consta de › Un selector (H1) › Una declaración (color: blue) compuesta

de Una propiedad (color) Un valor (blue)

En un archivo de texto externo › <LINK rel="stylesheet" href="estilos.css"

type="text/css"> En el encabezado de la página

(<HEAD>) › <STYLE type="text/css">

H1 { color: blue }</STYLE>

En los atributos de los elementos › <H1 style="color: blue">Título</H1>

●Elementos – H T M L : d i v , s p a n , p , t a b l e . . . – C S S s e b a s a e n e l l o s p a r a d e f i n i r y m o s t r a r l o s e s

t i l o s – P a r a C S S , c a d a e l e m e n t o g e n e r a u n a c a j a e n c u y

o i n t e r i o r e s t á e l c o n t e n i d o d e l e l e m e n t o – E l e m e n t o s r e e m p l a z a d o s y n o r e e m p l a z a d o s : ● R e e m p l a z a d o s : < i m g s r c = ” f o t o . j p g ” / > ● N o r e e m p l a z a d o s : < s p a n > H o l a < / s p a n > – E l e m e n t o s d e b l o q u e y e n l í n e a : ● D e b l o q u e ( b l o c k - l e v e l ) : c a j a c o n s a l t o s d e l í n e

a a n t e s y d e s p u é s d e l e l e m e n t o ( < p > , < d i v > . . . ) ● E n l í n e a ( l i n e - l e v e l ) : c a j a d e n t r o d e u n a l í n e a d

e t e x t o , s i n r o m p e r s u f l u j o ( < a > , < s p a n > . . . )

●Selectores – D e f i n e n q u é p a r t e d e l d o c u m e n t o s e v e r á a f e c t a

d a p o r e l e s t i l o –Reglas: – V a r i a s d e c l a r a c i o n e s p a r a u n m i s m o s e l e c t o r : B

l o q u e d e d e c l a r a c i o n e s – A l g u n a s p r o p i e d a d e s a d m i t e n v a l o r e s f o r m a d o

s p o r v a r i a s k e y w o r d s ( s e p a r a d a s p o r e s p a c i o s ) h 2 { c o l o r : b l u e ; } propiedad valor declaración selector h 2 { c o l o r : b l u e ; b a c k g r o u n d c o l o r : b l a c k ; f o n t s i z e : 1 2 p t ; } h 2 { f o n t : i t a l i c 1 2 p t s a n s s e r i f ; }

e l e c t o r e s ( I I ) – S e p u e d e n a g r u p a r : – S e l e c t o r u n i v e r s a l ( C S S 2 ) : r e p r e s e n t a a t o d o s l o s e l e m e n

t o s q u e a p a r e c e n e n e l d o c u m e n t o : * { c o l o r : b l u e } – T i p o s d e s e l e c t o r e s : ● S i m p l e s - > e q u i v a l e n a l e l e m e n t o H T M L ● C l a s s - > v a l o r d e l a t r i b u t o c l a s s e n H T M L ● I D - > v a l o r d e l a t r i b u t o i d e n H T M L ● D e a t r i b u t o ( C S S 2 ) - > a t r i b u t o , s i n i m p o r t a r s u v a l o r ● D e s c e n d e n t e s - > e l e m e n t o s a n i d a d o s ● H i j o s - > e l e m e n t o s d e s c e n d i e n t e s d i r e c t o s d e o t r o s h 1 { c o l o r : b l u e ; } h 2 { c o l o r : b l u e ; } h 3 { c o l o r : b l u e ; } h 4 { c o l o r : b l u e ; } h 1 , h 2 , h 3 , h 4 { c o l o r : b l u e ; }

Se l e c t o r e s ( y I I I ) : t i p o s d e s e l e c t o r e s –Class: ● e n u n d o c u m e n t o , v a r i o s e l e m e n t o s c o

n u n a m i s m a c l a s e ● t o d o s l o s e l e m e n t o s c o n u n a c l a s e : . n o

t a { c o l o r : b l u e ; } – I D : u n ú n i c o e l e m e n t o c o n u n a d e t e

r m i n a d a I D e n t o d o e l d o c u m e n t oTipoHTMLCSSSimple<p></p>p {color: blue;}ClassIDAtributoDescendente<p><em><strong></strong></em></p>p strong {color: blue;}Hijo<p><em><strong></strong></em></p>p > em {color: blue;}<p class=”nota”></p>p.nota {color: blue;}<p id=”nota”></p>#nota {color: blue;}<p class=”nota”></p>p[class] {color: blue

●Unidades – A f e c t a n a l o s v a l o r e s d e c o l o r , t a m a ñ o , d i s t a n c i a s . . . – D e p e n d i e n d o d e l a p r o p i e d a d , l o s v a l o r e s p u e d e n e s t a r a c

o t a d o s – N ú m e r o s : e n t e r o s ( 2 ) o r e a l e s ( 1 2 . 5 ) , p o s i t i v o s o n e

g a t i v o s – P o r c e n t a j e s ( 8 0 % ) , r e l a t i v o s a o t r o v a l o r ( p . e j , d e l

p a d r e ) – C o l o r e s : ● P o r n o m b r e ( b l u e , g r e e n , y e l l o w , p u r p l e . . . ) ● P o r R G B : – r g b ( 1 0 0 % , 4 0 % , 0 % ) o r g b ( 2 5 5 , 1 0 2 , 0 ) – h e x a d e c i m a l : l a r g o ( # F F 0 6 C A ) o c o r t o ( # F A 0 = # F F A A 0 0 ) – C o l o r e s W e b - S a f e : m ú l t i p l o s d e 2 0 % , 5 1 o 3 3 ( h e x ) ( e j , r g b

( 4 0 % , 8 0 % , 6 0 % ) , r g b ( 2 0 4 , 0 , 1 5 3 ) , # C C 3 3 9 9 , # 0 6 F ) – U R L s : a b s o l u t a s ( u r l ( h t t p : / / l o c a l h o s t / f o t o s / f o t o

1 . j p g ) ) o r e l a t i v a s ( u r l ( f o t o s / f o t o 1 . j p g ) )

U n i d a d e s ( y I I ) – U n i d a d e s d e l o n g i t u d ● A b s o l u t a s ( i n , c m , m m , p t , p c ) ● R e l a t i v a s ( p x , e m , e x ) – e m : v a l o r d e l t a m a ñ o d e f u e n t e p a r a u n a f u e n t e ( e j , t

a m a ñ o d e f u e n t e 1 2 p x = > 1 e m = 1 2 p x ) ● D e f i n i r t a m a ñ o s y d i s t a n c i a s : ● D e f i n i r t a m a ñ o s d e f u e n t e s : r e l a t i v o s a l t a m a ñ o d e f u e n t

e p a d r e : – P a l a b r a s e s p e c i a l e s : n o n e , i n h e r i t . . . h 1 { f o n t s i z e : 1 2 p x ; m a r g i n : 1 e m ; } E l e l e m e n t o H 1 t e n d r á u n m a r g e n d e 1 2 p x h 1 { f o n t s i z e : 1 2 p x ; } h 1 s t r o n g { f o n t s i z e : 1 . 2 e m ; } E l e l e m e n t o e m d e H 1 t e n d r á u n t a m a ñ o d e 1 . 2 * 1 2 p x

●Fuentes – f o n t - f a m i l y : ● G e n é r i c a s : S e r i f , S a n s - s e r i f , M o n o s p a c e , C

u r s i v e , F a n t a s y ● E s p e c í f i c a s : T i m e s , V e r d a n a , A r i a l , H e l v e t i c a . . . – f o n t - w e i g h t : n o r m a l , b o l d , b o l d e r , l i g h t e r ,

1 0 0 , 2 0 0 . . . – f o n t - s i z e : s m a l l , m e d i u m , l a r g e , < t a m a ñ o >

( 1 2 p t ) , < p o r c e n t a j e > ( 1 0 0 % ) – f o n t - s t y l e : i t a l i c , o b l i q u e , n o r m a l – f o n t : r e c o p i l a t o d a s l a s a n t e r i o r e s e n u n a s o

l a p r o p i e d a d p { f o n t f a m i l y : G e o r g i a , T i m e s , S e r i f ; f o n t w e i g h t : n o r m a l ; f o n t s i z e : 1 2 p x ; f o n t s t y l e : i t a l i c ; } p { f o n t : n o r m a l i t a l i c 1 2 p x G e o r g i a , T i m e s , S e r i f ; }

Selectores – Selector universal – Selectores de descendientes ! div p {margin: 0} – Selector de hijos ! body > p – Selectores de hermanos adyacentes ! h1 + h2 {margin-top : -1em} – Selectores de atributo ! h2[title] h2[title=“azul”] – Selector de clase – Selector de identificador

Pseudoelementos y pseudoclases – Los pseudoelementos y pseudoclases

pemiten aplicar estilos basándose en información que está fuera de la estructura del documento. ! Pseudoclases para enlaces (a:link, a:visited) ! Pseudoclases dinámicas (:actived, :hover

y :focus) ! Pseudoclase :first-child ! Pseudoelemento :first-line ! Pseudoelemento :first-letter

Ha c e r u n d o c u m e n t o H T M L c o r r e c t o c o n u n a b u e n a e s t r u c t u r a f a c i l i t a d a r l e e s t i l o

– E n g l o b a r l o s e l e m e n t o s d e n t r o d e o t r o s e l e m e n t o s c o n t e n e d o r e s

<body> < d i v i d = ” c o n t a i n e r ” > < d i v i d = ” c o n t e n t ” > < h 1 > . . . < / h 1 > < p > . . . < / p > < / d i v > < d i v i d = ” m e n u ” > < u l > . . . < / u l > < / d i v > < d i v i d = ” f o o t e r ” > < p > . . . < / p > < / d i v > < / d i v > </body>

U t i l i z a r c a d a e l e m e n t o e n f u n c i ó n d e s u e s t r u c t u r a , n o p a r a h a c e r e f e c t o s v i s u a l e s : H 1 , H 2 , H 3 c o m o e n c a b e z a d o s , t a b l a s p a r a c o n t e n i d o s q u e a d m i t e n t a b l a s ( e j , c a t á l o g o s . . . )

– P a r a d a r e s t i l o a t o d o u n b l o q u e d e l d o c u m e n t o , u t i l i z a r < d i v >

– Pa r a d a r e s t i l o a t o d a u n a l í n e a , u t i l i z a r < s p a n > – P a r a r e s a l t a r u n t r o z o d e t e x t o , o l v i d e m o s < b > < / b > e < i >

< / i > y u s e m o s < s t r o n g > < / s t r o n g > y < e m > < / e m > , q u e d e f i n i r e m o s d e s p u é s c o m o p r e f i r a m o s , p o r e j e m p l o :

– c o m p r o b a r q u e n u e s t r o c ó d i g o e s v á l i d o : h t t p : / / v a l i d a t o r . w 3 . o r g /

● E n c u a n t o a l C S S : – U n i d a d e s : e v i t a r l a s u n i d a d e s a b s o l u t a s , c o m o p x , y a q u e

a l g u n o s n a v e g a d o r e s n o p e r m i t e n r e d i m e n s i o n a r l a s . U s a r e m e n s u l u g a r .

s t r o n g { f o n t w e i g h t : b o l d ; } e m { f o n t s t y l e : i t a l i c ; }

R e c o m e n d a c i o n e s ( y I I I )

– F u e n t e s : e s p e c i f i c a r m á s d e u n a f a m i l i a - > s i n o e s t á i n s t a l a d a l a p r i m e r a , s e m o s t r a r á l a s e g u n d a , e t c

– S i s e e s p e c i f i c a u n c o l o r d e f r e n t e , e s p e c i f i c a r t a m b i é n u n c o l o r d e f o n d o s o b r e e l c u a l s e p a m o s q u e s e v e b i e n

– P r o b a r e l r e s u l t a d o e n d i s t i n t o s n a v e g a d o r e s y c o n d i s t i n t a s r e s o l u c i o n e s s i q u e r e m o s q u e l l e g u e a m á s g e n t e

– S i e n c o n t r a m o s a l g o b o n i t o n a v e g a n d o , e s t u d i a r s u c ó d i g o p a r a v e r c ó m o s e h a h e c h o

– C o m p r o b a r q u e n u e s t r o c ó d i g o C S S e s v á l i d o : h t t p : / / j i g s a w . w 3 . o r g / c s s - v a l i d a t o r /

●Utilidades: – E x t e n s i ó n W e b D e v e l o p e r d e F i r e f o x – W e b C h e c k e r ( C r a i g C e c i l ) h t t p : / / w w w . c r a i g c e c

i l . c o m / c h e c k y o u r s i t e . h t m

Las CSS constituyen una valiosa herramienta de diseño

Facilitan la tarea de edición y mantenimiento de los sitios en la Web

Facilitan el acceso a la información a todas las personas

Se complementan con otros lenguajes para lograr una mejor comunicación

Permiten estar mejor preparados para los cambios que se producirán