Un lenguaje que permite asociar estilos de composición a documentos estructurados, como HTML y...
-
Upload
sosimo-mascarenas -
Category
Documents
-
view
219 -
download
0
Transcript of 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