Embed Size (px)
Citation preview
Conceptos básicos
de CSS
Patricio Mas
@patriciomas
Introducción
• Definición
• Historia
• Sintaxis
• Selectores
• Propiedades
• Especificidad
• Inserción
CSS
body{
background-color: yellow;
padding: 20px;
}
a{
color: #FF000;
text-decoration: none;
}
#ejemplo1{
font-family: “Impact”, Sans-serif;
color: brown;
}
.ejemplo2{
text-align: right;
font-style: italic;
}
Definición
• CSS o Cascading Style Sheets es un lenguaje de
hojas de estilo que sirve para describir la forma en
que se dibuja un documento escrito en lenguaje
markup (HTML, XHTML, XML, ect) .
• Se compone de reglas que se aplican en orden de
prioridad.
Historia
• EL objetivo del HTML es entregar indicaciones sobre
el contenido.
• Sin embargo, la versión HTML 3.2 introdujo la
posibilidad de agregar estilos visuales a la
presentación del contenido (bgcolor, center, font,
align, width...).
• Esto generó soluciones de diseño pero problemas
de mantención.
Historia
• 1994: Primera propuesta de
Håkon Wium Lie
• Trabajabó con Tim Berners Lee en
CERN
• 1996: En W3C, junto a Bert Bos
desarrollan la primera
recomendación: CSS1
Sintaxis
• Una regla de CSS consiste en un Selector y un
bloque de Declaración.
• La Declaración consta de Propiedades y sus
respectivos Valores, separados por punto y coma.
p { color : red ; }
Selector Declaración
Propiedad Valor
Selectores
• Se aplican estilos sobre elementos
ocupando estos 3 tipos de selectores:
– element
– id
– class
element Selector
• Se puede seleccionar por el nombre del elemento.
• Todos los elementos indicados recibirán las mismas reglas.
a{
color: #FF000;
text-decoration: none;
}
<a href=“http://google.com/”>Link</a>
HTML
CSS
Bienvenidos¡Hola!
Link
Navegador
id Selector
• El selector id usa dicho atributo de un elemento HTML para
asignar reglas.
• Deben ser únicos dentro de una página.
• Se escriben con un gato (hash) #.
#ejemplo1{
font-family: “Impact”, Sans-serif;
color: brown;
}
<p id=“ejemplo1”>¡Hola!</p>
HTML
Bienvenidos¡Hola!
Link
Navegador
CSS
class Selector
• El selector class usa dicho atributo de un elemento HTML para
asignar reglas.
• Puede haber más de uno en cada página.
• Se escriben con un punto . .
.ejemplo2{
text-align: right;
font-style: italic;
}
<h1 class=“ejemplo2”>Bienvenidos</h1>
HTML
Bienvenidos¡Hola!
Link
Navegador
CSS
Ejemplos Propiedades
Básicos
• background-color
• border
• display
• float
• width
• height
• text-align
• text-decoration
Nuevos en CSS3
• background-size
• opacity
• border-radius
• text-shadow
• animation
• transition
Ver todos en WebPlatform
Orden en cascada
Las reglas en una hoja de estilos se
aplicarán según dos criterios:
– El orden en el aparecen en la hoja.
– Según su valor de especificidad.
Orden de aparición
Las últimas reglas reemplazarán las primeras.
Todos los párrafos del HTML serán amarillos.
p{
color: red;
}
p{
color: yellow;
}
Especificidad
El valor de especificidad es en “cascada”:
Inline “Style”
id
class
element
#caja p {
color: red;
}
p {
color: yellow;
}
El párrafo con id #caja tendrá letras rojas.
Especificidad
No es necesario sobre-especificar:
html body div#caja p{
color: red;
}
Sólo es necesario con lo mínimo que cumpla:
#caja p{
color: red;
}
Inserción
Hay 4 fuentes de estilos en un HTML,
donde la última tiene mayor prioridad:
1. Predeterminadas en el navegador
2. Archivo CSS externo
3. Reglas CSS internas
4. Inline “styles”
Predeterminadas en el navegador
• Cada navegador interpreta los elementos del HTML
y le aplica estilos predeterminados para ordenar y
jerarquizar el contenido visualmente.
<!DOCTYPE html>
<html>
<head>
<title>Página HTML</title>
</head>
<body>
<h1>Bienvenidos</h1>
<p>¡Hola!</p>
<a href=“http://www.google.com”>Google</a>
</body>
</html>
Bienvenidos¡Hola!
HTML Navegador
Archivo CSS externo
• Se puede crear una hoja de estilos con cualquier
editor de texto.
• Se debe guardar con la extensión .css .
• Se inserta un elemento <link> dentro de la sección
head .
• Se especifica su ubicación con el valor del atributo
href.
<head>
<link rel="stylesheet" type="text/css" href=”css/mystyle.css">
</head>
Reglas CSS internas
• Se pueden insertar las reglas en el HTML.
• Se escriben dentro de un elemento <style> que a su
vez está dentro de la sección head.
<head>
<style>
a{
color: #FF000;
text-decoration: none;
}
</style>
</head>
Inline “styles”
• Aunque no se recomienda, se puede
aplicar estilos a un elemento
ocupando su atributo “Style”.
<p style=“text-align: left;”>Hello World!</p>
