1 Cascading Style Sheets (CSS) David Pinto
2 Web Standards XHTML 1.0 or higher XHTML 1.0 or higher CSS Level 1 & CSS Level 2 CSS Level 1 & CSS Level 2 DOM Level 1 & DOM Level 2 DOM Level 1 & DOM Level 2 ECMAScript 262 (current JavaScript) ECMAScript 262 (current JavaScript) Web Recommendations Standards
3 XHTML XHTML 1.0 Transitional XHTML 1.0 Transitional XHTML 1.0 Strict XHTML 1.0 Strict XHTML 1.1 XHTML 1.1 XHTML 2.0 (W3C Working Draft) XHTML 2.0 (W3C Working Draft) No más desarrollo en HTML!
4 Cascading Style Sheets Los estilos definen cómo desplegar la información (elementos HTML/XHTML/XML) Los estilos definen cómo desplegar la información (elementos HTML/XHTML/XML) Fueron agregados a HTML 4.0 para solucionar un problema Fueron agregados a HTML 4.0 para solucionar un problema Los archivos externos de estilo separan presentación de información y ahorran mucho trabajo Los archivos externos de estilo separan presentación de información y ahorran mucho trabajo Se usan archivos.css Se usan archivos.css Permite el cambio de apariencia y presentación con solo editar un archivo Permite el cambio de apariencia y presentación con solo editar un archivo
5 CSS: Motivación El concepto de piel (skin) El concepto de piel (skin) Diseño que se coloca por encima de la estructura (esqueleto). Diseño que se coloca por encima de la estructura (esqueleto). Ejemplo: Teléfonos Ejemplo: Teléfonos Estructura: Estructura: Modelo del teléfono Modelo del teléfono Piel: Piel: Placas de colores Placas de colores
6
7 CSS: Motivación http://www.csszengarden.com http://www.csszengarden.com
8 CSS: Motivación http://www.csszengarden.com http://www.csszengarden.com
9 CSS: Motivación http://www.csszengarden.com http://www.csszengarden.com
10 CSS: Motivación http://www.csszengarden.com http://www.csszengarden.com
11 CSS: Motivación http://www.csszengarden.com http://www.csszengarden.com
12 CSS: Ejemplo (Probar este ejemplo) Archivo HTML This header is 36 pt This header is 36 pt This header is blue This header is blue This paragraph has a left margin of 50 pixels This paragraph has a left margin of 50 pixels Archivo CSS body {background-color: yellow} h1 {font-size: 36pt} h2 {color: blue} p {margin-left: 50px} Archivo CSS body {background-color: blue} h1 {font-size: 12pt} h2 {color: yellow} p {margin-left: 5px}
13 CSS: Sintaxis Tres partes: Tres partes: Un selector Un selector Una propiedad Una propiedad Un valor Un valor Sintaxis: Sintaxis: selector {property:value} selector {property:value}
14 CSS: Sintaxis Uso: Uso: body {color:black} body {color:black} p {font-family:"sans serif"} p {font-family:"sans serif"} p {text- align:center;color:red} p {text- align:center;color:red} Uso: Uso: p { text-align:center; color:black; font-family:arial } h1,h2,h3,h4,h5,h6 { color:green }
15 CSS: El selector class Se pueden definir diferentes estilos para el mismo elemento Definición: Definición: p.right {text-align:right} p.right {text-align:right} p.center {text-align:center} p.center {text-align:center} Uso: Uso: This paragraph will be right- aligned. This paragraph will be right- aligned. This paragraph will be center- aligned. This paragraph will be center- aligned. This is a paragraph. This is a paragraph.
16 CSS: El selector class Se puede omitir el elemento para indicar que se aplicará para cualquier elemento Definición: Definición:.center {text-align:center}.center {text-align:center} Uso: Uso: This heading will be center- aligned This heading will be center- aligned This paragraph will also be center-aligned. This paragraph will also be center-aligned.
17 CSS: Otros Definición: Definición: input[type="text"] {background-color:blue} input[type="text"] {background-color:blue} Comentarios: Comentarios: /* Este es un comentario */ p { text-align:center; /* Este es otro comentario */ color:black; font-family:arial }
19 CSS: Modo de referencia Archivos HTML / XHTML Archivos HTML / XHTML Referencia externa: Referencia externa: Referencia interna: Referencia interna: hr {color:sienna} p {margin-left:20px} body {background-image:url("images/back40.gif")} hr {color:sienna} p {margin-left:20px} body {background-image:url("images/back40.gif")} Referencia en línea: Referencia en línea: This is a paragraph. This is a paragraph.
20 CSS: Modo de referencia Archivos XML Archivos XML XML Tutorial XML Tutorial http://www.mytutorial.com/xml/tutorial HTML Tutorial HTML Tutorial http://www. mytutorial.com/html/tutorial http://www. mytutorial.com/html/tutorial
21 CSS: Precedencia de valores Valores por default del navegador Valores por default del navegador Hoja de estilo externa Hoja de estilo externa Hoja de estilo interna (en la sección de encabezado) Hoja de estilo interna (en la sección de encabezado) Estilo en línea (dentro de un elemento) Estilo en línea (dentro de un elemento)
22 CSS: Background Propiedades usadas para el efecto background Propiedades usadas para el efecto background background-color background-color background-image background-image background-repeat background-repeat background-attachment background-attachment background-position background-position
23 CSS: background-color body {background-color:#b0c4de} body {background-color:#b0c4de} h1 {background-color:#6495ed} h1 {background-color:#6495ed} p {background-color:#e0ffff} p {background-color:#e0ffff} div {background-color:#ffffff} div {background-color:#ffffff} Modos de referencia para el color: Modos de referencia para el color: nombre - "red“, “white”, “blue”, etc nombre - "red“, “white”, “blue”, etc RGB - un valor como "rgb(255,0,0)" RGB - un valor como "rgb(255,0,0)" Hex – un valor como "#ff0000" Hex – un valor como "#ff0000"
24 CSS: background-image body {background- image:url(‘imagen.gif')} body {background- image:url(‘imagen.gif')} body {background- image:url('imagen.jpg')} body {background- image:url('imagen.jpg')} body { background- image:url(‘img/imagen.png'); } body { background- image:url(‘img/imagen.png'); }
25 CSS: background-repeat body { background-image:url('gradient2.png'); background-repeat:repeat-x; } body { background-image:url('gradient2.png'); background-repeat:repeat-x; } body { background-image:url('img_tree.png'); background-repeat:no-repeat; } body { background-image:url('img_tree.png'); background-repeat:no-repeat; }
26 CSS: background-repeat background-position body { background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:top right; } body { background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:top right; } Versión resumida: Versión resumida: body {background:#ffffff url('img_tree.png') no-repeat top right} Se requiere un orden: background-color background-color background-image background-image background-repeat background-repeat background-attachment background-attachment background-position background-position
27 CSS: background-attachment body{background-image:url('smiley.gif');background-repeat:no-repeat;background-attachment:fixed}
28 CSS: Propiedades de background
29 CSS: Ejercicio Crear un archivo de estilo para el documento XML de la práctica 10. Crear un archivo de estilo para el documento XML de la práctica 10. Usar propiedades de background. Usar propiedades de background.
30 CSS: Texto Color del texto Color del texto body {color:blue} body {color:blue} h1 {color:#00ff00} h1 {color:#00ff00} h2 {color:rgb(255,0,0)} h2 {color:rgb(255,0,0)} Alineación Alineación h1 {text-align:center} h1 {text-align:center} p.date {text-align:right} p.date {text-align:right} p.main {text-align:justify} p.main {text-align:justify}
31 CSS: Texto Decoración Decoración h1 {text-decoration:overline} h1 {text-decoration:overline} h2 {text-decoration:line-through} h2 {text-decoration:line-through} h3 {text-decoration:underline} h3 {text-decoration:underline} h4 {text-decoration:blink} h4 {text-decoration:blink} a {text-decoration:none} a {text-decoration:none} Transformación Transformación p.uppercase {text-transform:uppercase} p.uppercase {text-transform:uppercase} p.lowercase {text-transform:lowercase} p.lowercase {text-transform:lowercase} p.capitalize {text-transform:capitalize} p.capitalize {text-transform:capitalize} Identación Identación p {text-indent:50px} p {text-indent:50px}
32 CSS: Propiedades de texto
33 CSS: Font p{font-family:"Times New Roman",Georgia,Serif} p{font-family:"Times New Roman",Georgia,Serif}
34 CSS: Font font-style font-style p.normal {font-style:normal} p.normal {font-style:normal} p.italic {font-style:italic} p.italic {font-style:italic} p.oblique {font-style:oblique} p.oblique {font-style:oblique} Tres tipos: Tres tipos: normal – El texto se muestra de manera normal normal – El texto se muestra de manera normal italic – El texto se muestra en itálica italic – El texto se muestra en itálica oblique – El texto está inclinado (similar a itálica, pero es soportado menos) oblique – El texto está inclinado (similar a itálica, pero es soportado menos)
35 CSS: Font font-size -> default = (16px=1em) font-size -> default = (16px=1em) h1 {font-size:40px} h1 {font-size:40px} h2 {font-size:30px} h2 {font-size:30px} p {font-size:14px} p {font-size:14px} h1 {font-size:2.5em} /* 40px/16=2.5em */ h1 {font-size:2.5em} /* 40px/16=2.5em */ h2 {font-size:1.875em} /* 30px/16=1.875em */ h2 {font-size:1.875em} /* 30px/16=1.875em */ p {font-size:0.875em} /* 14px/16=0.875em */ p {font-size:0.875em} /* 14px/16=0.875em */ body {font-size:100%} body {font-size:100%} h1 {font-size:2.5em} h1 {font-size:2.5em} h2 {font-size:1.875em} h2 {font-size:1.875em} p {font-size:0.875em} p {font-size:0.875em}
36 CSS: Propiedades de font
37 CSS: Ejercicio Modificar el archivo CSS del ejercicio anterior e incluir estilo para diferentes elementos de texto. Modificar el archivo CSS del ejercicio anterior e incluir estilo para diferentes elementos de texto.
38 CSS: El modelo de la caja width:250px; padding:10px; border:5px solid gray; margin:10px; 250px (width) + 20px (padding) + 10px (border) + 20px (margin) = 300px width:220px; padding:10px; border:5px solid gray; margin:0px;
39 CSS: El modelo de la caja en ciertos navegadores div.ex { width:220px; padding:10px; border:5px solid gray; margin:0px; } div.ex { width:220px; padding:10px; border:5px solid gray; margin:0px; }
40 CSS: Border p.one { border-style:solid; border-width:5px; } p.two { border-style:solid; border-width:medium; } p.one { border-style:solid; border-width:5px; } p.two { border-style:solid; border-width:medium; } p { border-top-style:dotted; border-right-style:solid; border-bottom- style:dotted; border-left-style:solid; } p { border-top-style:dotted; border-right-style:solid; border-bottom- style:dotted; border-left-style:solid; } p.one { border-style:solid; border-color:red; } p.two { border-style:solid; border-color:#98bf21; } p.one { border-style:solid; border-color:red; } p.two { border-style:solid; border-color:#98bf21; } border-style:dotted solid; border-style:dotted solid; border-style:dotted solid double dashed; border-style:dotted solid double dashed; border-style:dotted solid double; border-style:dotted solid double; border-style:dotted solid; border-style:dotted solid; border-style:dotted; border-style:dotted;
41 CSS: Border (versión corta) border:5px solid red; border:5px solid red; Orden de los valores de la propiedad border Orden de los valores de la propiedad border border-width border-width border-style border-style border-color border-color
42
43 CSS: Outlines
44 CSS: Márgenes margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; p.ex1 {margin-top:2cm} p.ex1 {margin-top:2cm} p.bottommargin {margin-bottom:25% p.bottommargin {margin-bottom:25% En corto: En corto: margin:100px 50px; margin:100px 50px; { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.es/17/3385211/slides/slide_44.jpg", "name": "CSS: Márgenes margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; p.ex1 {margin-top:2cm} p.ex1 {margin-top:2cm} p.bottommargin {margin-bottom:25% p.bottommargin {margin-bottom:25% En corto: En corto: margin:100px 50px; margin:100px 50px;", "description": "CSS: Márgenes margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; p.ex1 {margin-top:2cm} p.ex1 {margin-top:2cm} p.bottommargin {margin-bottom:25% p.bottommargin {margin-bottom:25% En corto: En corto: margin:100px 50px; margin:100px 50px;", "width": "800" } 45 CSS: Márgenes { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.es/17/3385211/slides/slide_45.jpg", "name": "CSS: Márgenes", "description": "CSS: Márgenes", "width": "800" } 46 CSS: Padding La propiedad padding limpia una área alrededor del contenido de un elemento (dentro del borde). Se encuentra afectado por el color de fondo del elemento. La propiedad padding limpia una área alrededor del contenido de un elemento (dentro del borde). Se encuentra afectado por el color de fondo del elemento. padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px padding:25px 50px 75px 100px; padding:25px 50px 75px 100px; padding:25px 50px 75px; padding:25px 50px 75px; padding:25px 50px; padding:25px 50px; padding:25px; padding:25px; { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.es/17/3385211/slides/slide_46.jpg", "name": "CSS: Padding La propiedad padding limpia una área alrededor del contenido de un elemento (dentro del borde).", "description": "Se encuentra afectado por el color de fondo del elemento. La propiedad padding limpia una área alrededor del contenido de un elemento (dentro del borde). Se encuentra afectado por el color de fondo del elemento. padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px padding:25px 50px 75px 100px; padding:25px 50px 75px 100px; padding:25px 50px 75px; padding:25px 50px 75px; padding:25px 50px; padding:25px 50px; padding:25px; padding:25px;.", "width": "800" } 47 CSS: Padding { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.es/17/3385211/slides/slide_47.jpg", "name": "CSS: Padding", "description": "CSS: Padding", "width": "800" } 48 CSS: Ejercicio Crear una página simple en HTML que contenga elementos de tipo párrafo ( ). Crear una página simple en HTML que contenga elementos de tipo párrafo ( ). Experimentar en la hoja de estilos con el modelo de caja, usando diferentes elementos. Experimentar en la hoja de estilos con el modelo de caja, usando diferentes elementos. Incluir una imagen (dentro de la hoja de estilo) que no se desplace, a pesar de que el usuario si lo haga en la página HTML. Incluir una imagen (dentro de la hoja de estilo) que no se desplace, a pesar de que el usuario si lo haga en la página HTML. { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.es/17/3385211/slides/slide_48.jpg", "name": "CSS: Ejercicio Crear una página simple en HTML que contenga elementos de tipo párrafo ( ).", "description": "Crear una página simple en HTML que contenga elementos de tipo párrafo ( ). Experimentar en la hoja de estilos con el modelo de caja, usando diferentes elementos. Experimentar en la hoja de estilos con el modelo de caja, usando diferentes elementos. Incluir una imagen (dentro de la hoja de estilo) que no se desplace, a pesar de que el usuario si lo haga en la página HTML. Incluir una imagen (dentro de la hoja de estilo) que no se desplace, a pesar de que el usuario si lo haga en la página HTML..", "width": "800" } 49 CSS: list-style-type (listas no ordenadas) Listas no ordenadas Listas no ordenadas ul.circle {list-style-type:circle} ul.circle {list-style-type:circle} ul.square {list-style-type:square} ul.square {list-style-type:square}
50 CSS: list-style-type (listas ordenadas) Listas ordenadas Listas ordenadas ol.upper-roman {list-style-type:upper-roman} ol.upper-roman {list-style-type:upper-roman} ol.lower-alpha {list-style-type:lower-alpha} ol.lower-alpha {list-style-type:lower-alpha}
51 CSS: list-style-type ul.inside {list-style-position:inside} ul.outside {list-style-position:outside} ul.inside {list-style-position:inside} ul.outside {list-style-position:outside} ul { list-style-image:url('arrow.gif'); } ul { list-style-image:url('arrow.gif'); } ul { list-style-type:none; padding:0px; margin:0px; } ul { list-style-type:none; padding:0px; margin:0px; } li { background-image:url(arrow.gif); background-repeat:no-repeat; background-position:0px 5px; padding-left:14px; }
52 CSS: list-style-type
53 CSS: Ejercicio Pruebe el uso de viñetas. Predefinidas y con archivos de imágenes. Pruebe el uso de viñetas. Predefinidas y con archivos de imágenes. Pruebe al menos tres tipos de numeración en las listas ordenadas. Pruebe al menos tres tipos de numeración en las listas ordenadas.
54 CSS: Tables table.ex1 {table-layout:auto} table.ex2 {table-layout:fixed} 1000000000000000000000000000 1000000000000000000000000000 10000000 10000000 1000000000000000000000000000 1000000000000000000000000000 10000000 10000000
55 CSS: Tables
56 CSS: Div DIVs pueden ser una alternativa a DIVs pueden ser una alternativa a DIVs son un contenedor comouna celda de una tabla DIVs son un contenedor comouna celda de una tabla CSS puede posicionar a los DIV CSS puede posicionar a los DIV xxx xxx #article{width:250px;padding:5px;float:right;}
57
58 CSS: Dimensiones img.normal {height:auto} img.big {height:50%} img.small {height:10%}
59 CSS: Display Hidden Hidden h1.hidden {visibility:hidden} h1.hidden {visibility:hidden} h1.hidden {display:none} h1.hidden {display:none} Block vs Inline Ejemplos de elementos bloque Ejemplos de elementos bloque Ejemplos de elementos Inline Ejemplos de elementos Inline
60 CSS: Display (block vs inline) li {display:inline} li {display:inline} span {display:block} span {display:block} p {display: inline} A display property with a value of "inline" results in A display property with a value of "inline" results in no distance between two elements. no distance between two elements.
61 CSS: Display (block vs inline) Ver ejemplo… a{float:left;width:6em;text-decoration:none;color:white;background-color:purple; padding:0.2em 0.6em; border-right:1px solid white; } a:hover {background- color:#ff3300} li {display:inline} ul{float:left;width:100%;padding:0;margin:0;list-style-type:none;}
62 CSS: Display
63 CSS: Posicionamiento Fijo: Fijo: p.pos_fixed { position:fixed; top:30px; right:5px; } Relativo y absoluto: Relativo y absoluto: h2.pos_left { position:relative; left:-20px; } h2.pos_right { position:relative; left:20px; } h2 { position:absolute; left:100px; top:150px; } Traslape: Traslape: img { position:absolute; left:0px; top:0px; z-index:-1 }
64
65 CSS: Float La propiedad float permite que un elemento “flote” horizontalmente. De manera que los otros elementos que le siguen se ajusten de acuerdo al valor del float. La propiedad float permite que un elemento “flote” horizontalmente. De manera que los otros elementos que le siguen se ajusten de acuerdo al valor del float. Ejemplo: Ejemplo: img { float:right; } Galería de imágenes: Galería de imágenes:.thumbnail { float:left; width:110px; height:90px; margin:5px; } Desactivar el flotado de los elementos (circundantes): Desactivar el flotado de los elementos (circundantes):.text_line { clear:both; }
66 CSS: Float
67 CSS: Pseudo-Classes Clases predefinidas y se puede establecer efectos especiales Clases predefinidas y se puede establecer efectos especiales a:link {color:#FF0000} /* unvisited link */ a:link {color:#FF0000} /* unvisited link */ a:visited {color:#00FF00} /* visited link */ a:visited {color:#00FF00} /* visited link */ a:hover {color:#FF00FF} /* mouse over link */ a:hover {color:#FF00FF} /* mouse over link */ a:active {color:#0000FF} /* selected link */ a:active {color:#0000FF} /* selected link */ a.red:visited {color:#FF0000} CSS Syntax a.red:visited {color:#FF0000} CSS Syntax
68 CSS: Pseudo-elementos :after Agrega contenido después de un elemento :after Agrega contenido después de un elemento :after :before Agrega contenido antes de un elemento :before Agrega contenido antes de un elemento :before :first-letter Establece el estilo para el primer carácter de un texto :first-letter Establece el estilo para el primer carácter de un texto :first-letter :first-line Establece el estilo para la primera línea de un texto :first-line Establece el estilo para la primera línea de un texto :first-line
69 CSS: Pseudo-elementos (:first-line) Ejemplos: Ejemplos: p:first-line { color:#ff0000; font-variant:small-caps; } p:first-line { color:#ff0000; font-variant:small-caps; } Propiedades: Propiedades: font properties font properties color properties color properties background properties background properties word-spacing word-spacing letter-spacing letter-spacing text-decoration text-decoration vertical-align vertical-align text-transform text-transform line-height line-height clear clear
70 CSS: Pseudo-elementos (:first-letter) Ejemplos: Ejemplos: p:first-letter { color:#ff0000; font-size:xx-large; } p:first-letter { color:#ff0000; font-size:xx-large; } Propiedades: Propiedades: font properties font properties color properties color properties background properties background properties margin properties margin properties padding properties padding properties border properties border properties text-decoration text-decoration vertical-align (only if "float" is "none") vertical-align (only if "float" is "none") text-transform text-transform line-height line-height float float clear clear
71 CSS: Pseudo-elementos Ejemplos: Ejemplos: p.article:first-letter {color:#ff0000} A paragraph in an article p.article:first-letter {color:#ff0000} A paragraph in an article p:first-letter { color:#ff0000; font-size:xx-large; } p:first-line { color:#0000ff; font-variant:small-caps; } p:first-letter { color:#ff0000; font-size:xx-large; } p:first-line { color:#0000ff; font-variant:small-caps; } h1:after { content:url(smiley.gif); } h1:after { content:url(smiley.gif); } CSS 2
72 W3C CSS 3 recommendation Transparencia: Firefox -- opacity:x [0.0 – 1.0] Firefox -- opacity:x [0.0 – 1.0] IE -- filter:alpha(opacity=x) [0 – 100] IE -- filter:alpha(opacity=x) [0 – 100] NOTA: Entre más bajo el valor, más transparente. Ejemplos: Ejemplos:
73 Tipos de dispositivos
74 @media screen { p.test {font-family:verdana,sans-serif;font-size:14px} } @media print { p.test {font-family:times,serif;font-size:10px} } @media screen,print { p.test {font-weight:bold} }.... @media screen { p.test {font-family:verdana,sans-serif;font-size:14px} } @media print { p.test {font-family:times,serif;font-size:10px} } @media screen,print { p.test {font-weight:bold} }....
75 Ejercicios Diseñar un estilo css para su proyecto de libros. Diseñar un estilo css para su proyecto de libros.