Descargar la presentación
La descarga está en progreso. Por favor, espere
Publicada porSosimo Mascarenas Modificado hace 9 años
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
Presentaciones similares
© 2024 SlidePlayer.es Inc.
All rights reserved.