Fundamentos de CSS

Para que sirve el CSS?

Cascading Style Sheet («Hoja de estilos en cascada»)

Funcionamiento básico Antes de CSS

<!DOCTYPE html> <html>

<head></head> <body> <p><font color="gray" face="Verdana" size="2"> Primer párrafo a formatear </font></p> <p><font color="gray" face="Verdana" size="2"> Segundo párrafo a formatear </font></p> </body>

</html>

Funcionamiento básico Después de CSS


<head> <style> p { color: gray; font-family: Verdana; font-size: medium; } </style> </head> <body> <p>Primer párrafo a formatear</p> <p>Segundo párrafo a formatear</p> </body>

</html>

Beneficios del CSS

•  Separar la presentación del contenido. •  Código mas “limpio”. Mas legible. •  Rehusó del código. Se escribe menos. •  Control de la presentación de muchos

documentos desde una única hoja de estilo. •  Aplicación de diferentes presentaciones a

diferentes tipos de medios (pantalla, impresión, etc.)

Incluir CSS en los elemento HTML Como incluir CSS

<!DOCTYPE html > <html>

<head></head> <body> <p style="color: black; font-family: Verdana;"> Un párrafo de texto. </p> </body>

</html>

Incluir CSS en el mismo documento HTML Como incluir CSS

<!DOCTYPE html > <html>

<head> <style>p{ color: black; font-family: Verdana; } </style> </head> <body> <p>Un párrafo de texto. </p> </body>

</html>

Incluir CSS en otro documento Como incluir CSS <!DOCTYPE html > <html>

<head> <link rel="stylesheet" type="text/css" href="/css/estilos.css" /> </head> <body> <p>Un párrafo de texto. </p> </body>

</html>

Sintaxis básica

Digamos que queremos un fondo rojo Usando HTML Usando CSS

<body bgcolor="#FF0000">

body {background-color: #FF0000;}

Regla CSS

•  Selector: Define a que elemento o grupo de elementos a los que se aplica le regla.

•  Propiedad: Identifica el aspecto visual a modificar.

•  Valor: Específica que estilo se le va a aplicar a la propiedad

Sintaxis de CSS

Todas las reglas CSS tienen la misma sintaxis: Los comentarios son Delimitados por /* … */

selector { propiedad1:valor; propiedad2:valor; .. propiedadN:valor; }

/* encabezados nivel 1 */ h1 { font-size: 42px; color: pink; font-family: ‘Arial'; }

Tipos de Selectores CSS

•  Selector de Elemento: h2{} •  Selector de Clase: .miClase{} •  Selector de Identificador: #esteId{}

Selector de Elemento CSS

Si se desea poner varias reglas hay que sepáralas por el caracter “;”. O de forma mas clara

p{color: blue;text-align:center}

p{ color: blue; text-align:center

}

Selector de Elemento CSS

Se pueden aplicar a múltiples selectores

div, p, a{ color: blue; text-align:center

}

Todos los Tipos de Selectores Tipos de Selectores

h2{ font-size:24px;

} .azul{

color:blue; } #alerta{

background-color:red; color:white;

}

Selectores compuestos Tipos de Selectores

h2.azul{ font-size:24px;

} h2.alerta{

background-color:red; color:white;

}

Ejemplos de selectores

* Devuelve todos los elementos

h2 Devuelve cualquier elemento <h2>

.azul Devuelve todos los elementos de la clase “azul”

#azul Devuelve todos los elementos del elemento <azul>

h2.azul Devuelve cualquier elemento <h2> de la clase “azul”

h2#azul Devuelve cualquier elemento <h2> con el iden<ficador “azul”

sec<on, h2 Devuelve cualquier elemento <h2> y <sec<on>

sec<on h2 Devuelve cualquier elemento <h2> que este dentro de un <sec<on>

sec<on > h2 Devuelve cualquier elemento <h2> que este dentro e inmediatamente debajo del elemento <sec<on>

sec<on + h2 Devuelve cualquier elemento <h2> inmediatamente posterior al elemento padre <sec<on>

sec<on ~ h2 Devuelve cualquier elemento <h2> posterior al elemento padre <sec<on>

Selector CSS *


<head> <style>*{background-color:yellow;}</style> </head> <body>

<h1>Welcome to My Homepage</h1> <div class="intro">

<p id="firstname">My name is Donald.</p> <p id="hometown">I live in Duckburg.</p>

</div> <p>My best friend is Mickey.</p>

</body> </html>

Selector CSS de Elemento


<head> <style>p{background-color:yellow;} </style>

</head> <body>

<h1>Welcome to My Homepage</h1> <div>

<p id="firstname">My name is Donald.</p> <p id="hometown">I live in Duckburg.</p>


</body> </html>

Selector CSS de Clase


<head> <style>.intro {background-color:yellow;} </style>

</head> <body>

<h1>Welcome to My Homepage</h1> <div class="intro"> <p>My name is Donald.</p> <p>I live in Duckburg.</p> </div> <p>My best friend is Mickey.</p>

</body> </html>

Selector CSS de Identificador


<head> <style>#firstname{ background-color:yellow;} </style>

</head> <body>

<h1>Welcome to My Homepage</h1> <div class="intro"> <p id="firstname">My name is Donald.</p> <p id="hometown">I live in Duckburg.</p> </div> <p>My best friend is Mickey.</p>

</body> </html>

Selector CSS elemento, elemento


<head> <style>h1,p{background-color:yellow;}</style> </head> <body>


<p>My name is Donald.</p> <p>I live in Duckburg.</p>


</body> </html>

Selector CSS elemento elemento


<head> <style>div p{background-color:yellow;}</style>

</head> <body>


<h2>My name is Donald</h2> <p>I live in Duckburg.</p>


</body> </html>

Selector CSS elemento > elemento


<head> <style> div>p {background-color:yellow;}</style> </head> <body>



</div> <div> <span> <p>I will not be styled.</p> </span> </div> <p>My best friend is Mickey.</p>

</body> </html>

Selector CSS elemento + elemento


<head> <style> div+p{ background-color:yellow; } </style> </head> <body>



</div> <p>My best friend is Mickey.</p> <p>I will not be styled.</p>

</body> </html>

Selector CSS elemento ~ elemento


<head> <style> p~ul{background:#ff0000;} </style> </head> <body>

<div>A div element.</div> <ul><li>Coffee</li></ul> <p>The first paragraph.</p> <ul> <li>Coffee</li></ul> <h2>Another list</h2> <ul><li>Coffee</li></ul>

</body> </html>

26

<!DOCTYPE html> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Ejercicio de selectores</title> <style type="text/css"> /* Todos los elementos de la pagina */{ font: 1em/1.3 Arial, Helvetica, sans-serif; } /* Todos los parrafos de la pagina */{ color: #555; } /* Todos los párrafos contenidos en #primero */{ color: #336699; } /* Todos los enlaces la pagina */{ color: #CC3300; } /* Los elementos "em" contenidos en #primero */{ background: #FFFFCC; padding: .1em; } /* Todos los elementos "em" de clase "especial" en toda la pagina */{ background: #FFCC99; border: 1px solid #FF9900; padding: .1em; } /* Elementos "span" contenidos en .normal */{ font-weight: bold; } </style> </head>

hEp://librosweb.es/css/capitulo_15.html

27

<body> <div id="primero"> <p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing elit</a>. Praesent blandit nibh at felis. Sed nec diam in dolor vestibulum aliquet. Duis ullamcorper, nisi non facilisis molestie, <em>lorem sem aliquam nulla</em>, id lacinia velit mi vestibulum enim.</p> </div> <div class="normal"> <p>Phasellus eu velit sed lorem sodales egestas. Ut feugiat. <span><a href="#">Donec porttitor</a>, magna eu varius luctus,</span> metus massa tristique massa, in imperdiet est velit vel magna. Phasellus erat. Duis risus. <a href="#">Maecenas dictum</a>, nibh vitae pellentesque auctor, tellus velit consectetuer tellus, tempor pretium felis tellus at metus.</p> <p>Cum sociis natoque <em class="especial">penatibus et magnis</em> dis parturient montes, nascetur ridiculus mus. Proin aliquam convallis ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc aliquet. Sed eu metus. Duis justo.</p> <p>Donec facilisis blandit velit. Vestibulum nisi. Proin volutpat, <em class="especial">enim id iaculis congue</em>, orci justo ultrices tortor, <a href="#">quis lacinia eros libero in eros</a>. Sed malesuada dui vel quam. Integer at eros.</p> </div> </body> </html>

Selectores de atributos

Input[type] Selecciona cualquier <input> con el atributo type

Input[foo~=“red”] Selecciona cualquier <input> donde el atribuEo foo contenga un valor llamado red

Input[type^=“sub”] Selecciona cualquier <input> con el atributo type que comience con “sub”

Input[type$=“mit”] Selecciona cualquier <input> con el atributo type que termine con “mit”

Input[type*=“ubmit”] Selecciona cualquier <input> con el atributo type que contenga con “ubmit”

Input[type|=“en”] Selecciona cualquier <input> con el atributo type que <ene exactamente “en” o comienza con “en-‐”

Selector CSS [atributo]


<head> <style>a[target]{background-color:yellow;}</style> </head> <body> <p>The links with a target attribute gets a yellow background:</p> <a href="http://www.w3schools.com">w3schools.com</a> <a href="http://www.disney.com" target="_blank">disney.com</a> <a href="http://www.wikipedia.org"

target="_top">wikipedia.org</a> </body>

</html>

Selector CSS [atributo~=value]


<head> <style>[title~=flower]{border:5px solid yellow;}</style> </head> <body>

<p>The image with the title attribute containing the word "flower" gets a yellow border.</p> <img src="klematis.jpg" title="klematis flower" width="150" height="113" /> <img src="img_flwr.gif" title="flowers" width="224" height="162" /> <img src="landscape.jpg" title="landscape" width="160" height="120" />

</body> </html>

Selector CSS [atributo|=value]

<!DOCTYPE html> <html> <head><style>[lang|=en]{background:yellow;}</style></head>

<body> <p lang="en">Hello!</p> <p lang="en-us">Hi!</p> <p lang="en-gb">Ello!</p> <p lang="us">Hi!</p> <p lang="no">Hei!</p> <body>

</html>

Selector CSS [atributo^=value]


<head> <style> div[class^="test”]{background:#ffff00;}</style> </head> <body> <div class="first_test">The first div element.</div> <div class="second">The second div element.</div> <div class="test">The third div element.</div> <p class="test">This is some text in a paragraph.</p> </body>

</html>

Selector CSS [atributo$=value]


<head> <style> div[class$="test”]{background:#ffff00;}</style> </head> <body> <div class="first_test">The first div element.</div> <div class="second">The second div element.</div> <div class="test">The third div element.</div> <p class="test">This is some text in a paragraph.</p> </body>

</html>

Selector CSS [atributo*=value]


<head> <style>div[class*="test”]{background:#ffff00;}</style> </head> <body> <div class="test">The first div element.</div> <div class="second">The second div element.</div> <div class="firs_test_last">The third div element.</div> <p class="test">This is some text in a paragraph.</div>

</body> </html>

Herencia y Cascada

35

La herencia y la cascada mecanismo de cascada CSS gobierna como los navegadores aplican estas reglas de estilo. •  La herencia HTML determina cuales propiedades de

estilos se heredan de su padres. http://www.w3.org/TR/CSS21/propidx.html •  El mecanismo de cascada determina como son

aplicados las propiedades de los estilos cuando aparecen conflictos de reglas para los elementos.

hEp://www.w3.org/community/webed/wiki/Inheritance_and_cascade hEp://mosaic.uoc.edu/ac/le/es/m6/ud2/

Herencia

36

•  Cuando se establece el valor de una propiedad CSS en un elemento, sus elementos descendientes heredan de forma automática el valor de esa propiedad.

•  Porque es útil? •  Cómo funciona? •  Forzar la herencia. “inherit”

Herencia

37

<!DOCTYPE html> <html lang="es"> <head> <meta charset=utf-8"> <title>Herencia</title> </head> <body> <h1>Título</h1> <p>Un párrafo de texto.</p> </body> </html> inherit.html

html {font: 75% Verdana,sans-serif;} style.css

Herencia

38

<link rel="stylesheet" type="text/css" media="screen" href="styles.css">

inherit.html

html {font: 75% Verdana,sans-serif;} html { font-style: normal; font-variant: normal; font-weight: normal; font-size: 75%; line-height: normal; font-family: Verdana,sans-serif; }

style.css

75% de 16 pixels es 12 pixels Equivale a

Herencia

39

h1 { font-size: 300%; }

inherit.html

Forzar la Herencia

40

p {background: inherit;}

style.css

Forzar la Herencia

41

style.css <ul id="nav"> <li><a href="/">Inicio</a></li> <li><a href="/news/">Noticias</a></li> <li><a href="/products/">Productos</a></li> <li><a href="/services/">Servicios</a></li> <li><a href="/about/">Sobre nosotros</a></li> </ul>

Inherit.htm

#nav { background: blue; color: white; margin: 0; padding: 0; } #nav li { display: inline; margin: 0; padding: 0 0.5em; border-right: 1px solid; } #nav li a { color: inherit; text-decoration: none; }

Cascada

42

Determinar todas las declaraciones que se aplican al elemento para el medio CSS seleccionado. El método seguido por CSS para resolver las colisiones de estilos se muestra a continuación:

•  Importancia: palabra clave !important. •  Especificidad: Ordenar las declaraciones según lo

específico que sea el selector. Cuanto más genérico es un selector, menos importancia tienen sus declaraciones.

•  Orden de la Fuente: Ordenar las declaraciones según su origen (CSS de navegador, de usuario o de diseñador). Si después de aplicar las normas anteriores existen dos o más reglas con la misma prioridad, se aplica la que se indicó en último lugar.

hEp://www.w3.org/community/webed/wiki/Inheritance_and_cascade

Importancia

43

Las declaraciones contrapuestas se aplicarán en el orden siguiente: •  Hojas de Estilo de User agent •  Declaraciones normales en hojas de estilo de

usuario •  Declaraciones normales en hojas de estilo de

autor •  Declaraciones importantes en hojas de estilo de

usuario •  Declaraciones importantes en hojas de estilo de

autor

Especificidad

44

hEp://www.jaso^.org/Blog/post/Tu-‐es<lo-‐gana-‐a-‐mi-‐es<lo-‐Especificidad-‐en-‐reglas-‐CSS.aspx

Especificidad

45

La especificidad tiene cuatro componentes; por ejemplo a, b, c y d. El componente "a" es el más distintivo y el "d", el que menos. •  El componente "a" es bastante sencillo: es 1 para una declaración

en un atributo style; si no, es 0. •  El componente "b" es el número de selectores de id en el selector

(los que empiezan con #). •  El componente "c" es el número de selectores de atributo, incluidos

los selectores de clase y pseudoclases. •  El componente "d" es el número de tipo de elementos y

pseudoelementos del selector.

p { color: cyan; }

Probemos esto

46

style.css

<body> <h1>Título</h1> <p>Un párrafo de texto.</p> <p>Un segundo párrafo de texto.</p> </body>

Inherit.htm

Agreguemos esto a los archivos y recarguemos

#special { background-color: red; color: yellow; }

Probemos esto

47

style.css

<body> <h1>Título</h1> <p id="special" >Un párrafo de texto.</p> <p>Un segundo párrafo de texto.</p> </body>

Inherit.htm

Agreguemos esto a los archivos y recarguemos

p { background-color: yellow; color: black; }

Orden de fuente

48

style.css

Agreguemos esto al final del archivo y recarguemos

Si dos declaraciones afectan al mismo elemento, <enen la misma importancia y la misma especificidad, la señal dis<n<va final es el orden en las fuentes. La declaración que se ve más adelante en las hojas de es<lo "ganará" a las anteriores.

Question

49

¨  Include all rules for each element in the <style> attribute of the element.

¨  Include the rules for each page in a <style> element in the <head> element.

¨  Write the rules for the whole site in one or more style sheets and reference them by using a <style> element in the <head> element of each page.

¨  Write the rules for the whole site in one or more style sheets and reference them by using a <link> element in the <head> element of each page.

¨  Write the rules for the whole site in one or more style sheets and reference them by using a <stylesheet> element in the <head> element of each page.

What is the best way to apply CSS rules to HTML elements that occur in several different pages?

Fundamentos de CSS

Technology

Transcript of Fundamentos de CSS