TGP 2007

1. TGP 2007 CSS – Hojas de Estilo en Cascada

2. ¿CSS – Que son ? • 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

3. CSS – Ventajas e Inconvenientes • 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

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

5. 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; }

6. 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

7. 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.

8. ¿ 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

9. 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

10. Accesibilidad • 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

11. 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)

12. 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>

13. Sintaxis Básica • ●Elementos • – H T M L : d i v , s p a n , p , t a b l e . . . • – C S Ss 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 > . . . )

14. ●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 ; }

15. 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 ; }

16. Se l e c t o r e s ( y I II ) : 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

17. ●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 ) )

18. 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

19. ●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 ; }

20. Selectores • 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

21. Pseudoelementos y pseudoclases • – Los pseudoelementos y pseudoclasespemiten • 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

22. 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>

23. 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 ; }

24. R e c o m e n d a c i o n e s ( y I II ) • – 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 ww . 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

25. Conclusiones • 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