 Un lenguaje que permite asociar estilos de composición a documentos estructurados, como HTML y aplicaciones XML  Un conjunto de propiedades y valores.

Presentación del tema: " Un lenguaje que permite asociar estilos de composición a documentos estructurados, como HTML y aplicaciones XML  Un conjunto de propiedades y valores."— Transcripción de la presentación:

1

2  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  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 : A z u l e n c a d a e l e m e n t o  ● 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   T í t u l o d e l a p á g i n a  < 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 " / >   @ 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 ; }   I n t r o d u c c i ó n  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   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  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 ›  En el encabezado de la página ( ) › H1 { color: blue }  En los atributos de los elementos › Título

13  ●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 :  ● N o r e e m p l a z a d o s : H o l a  – 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 (,... )  ● 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 (,... )

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 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 {color: blue;}ClassIDAtributoDescendente p strong {color: blue;}Hijo p > em {color: blue;} p.nota {color: blue;} #nota {color: blue;} 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, ( 1 2 p t ), ( 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  – 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 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

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

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  –  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  – 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 e y u s e m o s y, 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 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

25  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