fundamentos de css
Post on 13-Jun-2015
461 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
<!DOCTYPE html> <html>
<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 *
<!DOCTYPE html> <html>
<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
<!DOCTYPE html> <html>
<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>
</div> <p>My best friend is Mickey.</p>
</body> </html>
Selector CSS de Clase
<!DOCTYPE html> <html>
<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
<!DOCTYPE html> <html>
<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
<!DOCTYPE html> <html>
<head> <style>h1,p{background-color:yellow;}</style> </head> <body>
<h1>Welcome to My Homepage</h1> <div>
<p>My name is Donald.</p> <p>I live in Duckburg.</p>
</div> <p>My best friend is Mickey.</p>
</body> </html>
Selector CSS elemento elemento
<!DOCTYPE html> <html>
<head> <style>div p{background-color:yellow;}</style>
</head> <body>
<h1>Welcome to My Homepage</h1> <div>
<h2>My name is Donald</h2> <p>I live in Duckburg.</p>
</div> <p>My best friend is Mickey.</p>
</body> </html>
Selector CSS elemento > elemento
<!DOCTYPE html> <html>
<head> <style> div>p {background-color:yellow;}</style> </head> <body>
<h1>Welcome to My Homepage</h1> <div>
<h2>My name is Donald</h2> <p>I live in Duckburg.</p>
</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
<!DOCTYPE html> <html>
<head> <style> div+p{ background-color:yellow; } </style> </head> <body>
<h1>Welcome to My Homepage</h1> <div>
<h2>My name is Donald</h2> <p>I live in Duckburg.</p>
</div> <p>My best friend is Mickey.</p> <p>I will not be styled.</p>
</body> </html>
Selector CSS elemento ~ elemento
<!DOCTYPE html> <html>
<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]
<!DOCTYPE html> <html>
<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]
<!DOCTYPE html> <html>
<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]
<!DOCTYPE html> <html>
<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]
<!DOCTYPE html> <html>
<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]
<!DOCTYPE html> <html>
<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?
top related