1. CSS
Hoja de Estilo en Cascada
Prof. Ramiro Estigarribia
ramiroec@gmail.com
Link a la presentación
2. Es un lenguaje para definir la presentación visual del sitio web.
Permite a los desarrolladores controlar el estilo y el formato de
múltiples páginas al mismo tiempo.
En lugar de definir el tipo de Letra/Color para cada parte, permite
hacer para todo el sitio.
Tryit Editor v3.6 - My First CSS Example
¿Qué es CSS?
3. body {
padding-left: 11em;
font-family: arial;
color: red;
background-color: blue;
}
En este ejemplo se define el tipo de letra por defecto de una
página: tamaño 11, arial, color rojo, fondo azul.
Lista de colores: HTML Color Names
Ejemplo de uso: estilo.css
4. 1. Estilo inline: Combinar código CSS con HTML.
Se agrega la etiqueta <style> a las partes.
2. Estilo en la cabecera de la página: Se coloca en la
cabecera utilizando la etiqueta <style type=text/css>
3. Separación real del código HTML y CSS:
La etiqueta <link> sirve para informar que tenemos un
código CSS3 en un fichero externo.
Diferentes formas de incluir CSS
5. Se define con la propiedad style y es la forma más simple
pero menos recomendada.
El problema es que el código se repite muchas veces, en
lugar de hacer asignaciones genéricas.
1.Estilo inline
<h1 style=color:red;background-color:yellow>
Este mensaje es de color rojo sobre fondo amarillo.
</h1>
6. Permite definir estilos al inicio del código, que se aplican a las
distintas marcas HTML de la página.
2.Estilo en la cabecera de la página.
<style type=text/css>
h1 {color:red}
h2 {color:green}
h3 {color:blue}
</style>
<h1>rojo</h1>
<h2>verde</h2>
<h3>azul</h3>
7. La ventaja es que podemos aplicar las mismas reglas a
varias las páginas un sitio web.
Al programador le resulta más ordenado tener código HTML y
CSS separado.
3.CSS en archivo externo.
8. 3.CSS en archivo externo.
Archivo: prueba.html
<link rel=StyleSheet href=estilo.css>
</head>
<body>
<h1>Estilo en archivo externo.</h1>
<p>Un archivo separado.</p>
</body>
Archivo: estilo.css
body {
background-color:yellow;
color:blue;
font-family:arial;
}
9. Cuando se establece CSS en un elemento, sus descendientes
heredan de forma automática.
¿Cómo funciona la Herencia?
<style type=text/css>
body {
color:blue;
font-family:arial;
}
</style>
<p>Texto de Prueba</p>
10. Si existen 2 reglas iguales, tiene prioridad la más específica.
¿Cómo es la prioridad en la Herencia?
<style type=text/css>
body { color:black; }
h1 { color:red; }
p { color:green; }
</style>
<body>
<h1>Primero</h1>
<p>Texto de Prueba</p>
</body>
11. Es una regla CSS que puede ser utilizada muchas veces.
¿Qué son las Clases en CSS?
Archivo: prueba.html
<link rel=StyleSheet href=estilo.css>
<body>
<h1 class=resaltado>Titulo</h1>
<p class=resaltado>Es un texto
resaltado.</p>
</body>
Archivo: estilo.css
.resaltado{
color:black;
background-color:yellow;
font-style:italic; }
12. En lugar de usar class, se puede definir un identificador: id
Clase utilizando identificador: id
Archivo: prueba.html
<link rel=StyleSheet href=estilo.css>
<div id="prueba">
<h1 class=resaltado>Titulo</h1>
<p class=resaltado>Es un texto
resaltado.</p>
</div>
Archivo: estilo.css
#prueba{
color:black;
background-color:yellow;
}
13. Para aprender más sobre CSS un buen curso gratis es:
Learn CSS | Sololearn
Curso adicional recomendado.