CSS BÁSICOHojas de Estilo

Iván Martínez Toro

ÍNDICE DE CONTENIDOS

� Introducción al CSS.

� ¿Cómo es CSS? Sintaxis general.

� Reglas.

� Selectores.

Class.� Class.

� Div y Span.

� Uso de las hojas de estilo.

CSS (CASCADING STYLE SHEETS)

� Nace en torno a 1995. En 1996 el W3C publica la

primera recomendación oficial “CSS nivel 1”.

� Actualmente se trabaja en la versión CSS3.

� Permite definir el aspecto visual de una página HTML o

XHTML.

� Antes de CSS la estructura de las páginas era definida

mediante tablas.

HTML + CSS

� HTML define el marcado de los contenidos, es decir, qué es un párrafo, un titular o una lista.

� CSS define el aspecto de todos los contenidos, es decir, color, tamaño y tipo de letra de los párrafos de texto, separación entre titulares y párrafos, tabulación entre los elementos de entre titulares y párrafos, tabulación entre los elementos de una lista, etc.

� Es la mejor forma de separar los contenidos de la presentación lo que conlleva las siguientes ventajas:

� Obliga a crear HTML/XHTML bien definidos (o “semánticos”).

� Mejora la accesibilidad, reduce la complejidad de su mantenimiento y permite visualizar el mismo documento en diferentes dispositivos.

…CÓMO ES CSS?

� Se trata de un fichero de texto plano que contiene “reglas”.

� Cada regla tiene dos partes:

� Selector (para seleccionar las etiquetas HTML sobre las que actúa).

� Descriptor (para decir qué hace con ellas)� Descriptor (para decir qué hace con ellas)

h1: {color:green; font-family:Verdana}

� El fichero CSS es una lista de reglas (pares selector+descriptor)

� Los selectores pueden ser una o varias etiquetas HTML.

� Los descriptores están definidos en CSS, hay una larga lista.

…CÓMO ES CSS? (II)

� Las reglas CSS:

� selector {propiedad: valor}

� selector, selector, …, selector {

propiedad: valor;

…

propiedad: valor;

}

EJEMPLOS DE REGLAS

� h1, h2, h3 { font-family: helvetica }

� h1 {

font-weight: bold;

font-size: 12pt;font-size: 12pt;

line-height: 14pt;

font-family: helvetica;

font-variant: normal;

font-style: normal;

}

EJEMPLOS DE REGLAS (II) -HTTP://WWW.W3SCHOOLS.COM/CSS/DEMO_DEFAULT.HTM

h1,h2,h3 {font-family: "lucida calligraphy", arial, 'sans serif';

} p,table,li, {

font-family: "lucida calligraphy", arial, 'sans serif'; margin-left: 10pt; } body {body {

background-color:#fffaf0; } p,li,th,td {

font-size: 75%; } h1,h2,h3,hr {

color:#483d8b;} table { border-style:outset} li {list-style: square;)}

TIPOS DE SELECTORES

� Podemos seleccionar un solo elemento HTML

� ul { list-style: disc; } (lista con círculo relleno)

� Seleccionar varios elementos HTML

� h1, h3{ font-family: verdana; } (ambos títulos con ese tipo de letra)

� Repetir selectores� Repetir selectores

� h1, h3{ font-family: verdana; }

� h1, h2, h3, hr { color: black; }

� Si un valor no coincide, la última regla es la que se tiene en cuenta.

� Utilizar el selector universal *. Se aplica a todos los elementos.

� * { color: green; }

� Si los valores no coinciden, prevalecen las reglas más específicas.

HERENCIA EN SELECTORES

h1 { color: blue ; }

body { color: black; background: url(texture.gif) white; }

� Si no se especifica una propiedad, se hereda del elemento padre:padre:

<h1>El titular <em>es</em> corto</h1>

� “es” será azul porque <h1> es azul y <em> lo hereda por ser su hijo.

� La página tendría texto negro sobre fondo blanco en el caso de que no se encuentre la imagen de fondo “texture.gif”.

SELECTORES ADYACENTES

� Seleccionando elementos adyacentes o consecutivos que están al mismo nivel (no son hijos unos de otros):

� HTML

<h1>Separa tras esta línea</h1>

<h2>Importante</h2>

<h2>Otro título</h2>

� CSS

h1 + h2 { margin-top: 11px; }

El efecto de la regla es un margen entre h1 y h2.

SELECTOR ATRIBUTO

� Se selecciona un elemento que tenga un atributo:

� Sintaxis: elemento[atributo] { … }

� Ejemplo: table[border] { … }

� Se puede seleccionar una elemento que tenga un atributo � Se puede seleccionar una elemento que tenga un atributo con un valor determinado:

� Sintaxis: elemento[atributo=“valor”] { … }

� Ejemplo: table[border = “0”] { … }

EL ATRIBUTO CLASS

� El atributo “class” permite tener diferentes estilos para elementos del mismo tipo.

� HTML

<p class = “importante”>Este párrafo aparecerá en negrita y grande</p>

<p class = “normal”>Este párrafo aparecerá sin negrita y pequeño</p>

� CSS

p.importante { font-weight: bold; font-size: 24pt; }

p.normal { font-size: 10pt; }

� Para definir una regla que aplique a cualquier elemento de una clase concreta se puede usar indiferentemente:

� .importante { font-weight: bold; font-size: 24pt; }

� *.importante { font-weight: bold; font-size: 24pt; }

EL ATRIBUTO CLASS (II)

� Ejemplo:

� CSS

*.coloreado { color: red; }

h1.coloreado { color: green; }

� HTML

<h1>no aparece de ni rojo ni verde</h1>

<h1 class = “coloreado”>aparece verde</h1>

<p class = “coloreado”>aparece rojo</p>

EL ATRIBUTO CLASS (III)

� Subconjunto del atributo “class”:

� CSS

p.importante.coloreado { color: green; }

�Regla: que sea al menos de la clase importante y coloreado.

� HTML

<p class = “importante grande coloreado”>sale verde </p>

<p class = “importante grande ”>NO sale verde</p>

LAS ETIQUETAS <DIV> Y <SPAN>

� <div> y <span> son etiquetas HTML que permiten aplicar reglas CSS a diferentes elementos:� <div> asegura que habrá una nueva línea antes y después del

bloque.

� <span> no añade líneas antes ni después, solo espacios simples.Ejemplo:Ejemplo:

� CSSdiv { background-color: #66FFFF; }

span.color { color: red; }

� HTML

<div>Este div se trata como un párafo con fondo de color pero <span class = “color”>este span aparece con letras rojas.</span></div>

EL SELECTOR ID

� Este selector se usa para aplicar estilo a un elemento concreto.

� CSS#cabecera { width: 740px; top: 0px; }

HTML� HTML

<div id = “cabecera”>Esta división o “caja” tiene que aparecer con un ancho de 740px y situado en la parte superior</div>

CÓMO USAR LAS HOJAS DE ESTILO

� Existen 3 formas de aplicar el estilo a un HTML:

� Hoja de estilo externa

�Es la más potente

�La hoja de estilo es un archivo .css individual.

� Hoja de estilo empotrada

�También permite usar toda la potencia de CSS.

�Va dentro del archivo .html de la página.

� Hoja de estilo en línea

�Potencia de CSS limitada.

�Se aplica el estilo a cada elemento en su definición.

CÓMO USAR LAS HOJAS DE ESTILO (II)

� Hoja de estilo externa:

� Se implementa la hoja de estilo y se guarda como .css .

� Dentro del HTML hay que hacer referencia a la hoja de estilo .css creada:

�Dentro de <head>:

<link rel=“stylesheet” type=“text/css” href=“URL del

archivo CSS” />

Por ejemplo:

<link rel=“stylesheet” type=“text/css” href=“prueba.css” />

CÓMO USAR LAS HOJAS DE ESTILO (III)

� Hoja de estilo empotrada:

� Todo el css se mete en una etiqueta <style> dentro de <head> en el archivo HTML.

<style type=“text/css”>

<!--

Hoja de estilo CSS

-->

</style>

� Se pone como un comentario para ocultarlo a navegadores que no entiendan CSS.

CÓMO USAR LAS HOJAS DE ESTILO (IV)

� Hoja de estilo en línea:

� Se define el estilo de cualquier elemento HTML en la definición del mismo mediante el atributo <style>.

<p style = “border-bottom: blue”>

� Válido si queremos poco marcado.

� Mezcla HTML con presentación � lo ensucia!

� No puede usar la potencia de CSS, sólo marcado.

PRIORIDAD DE CADA TIPO DE ESTILO

� Es posible realizar definición de estilo de varias formas a la vez (externa + empotrada + en línea).

� En caso de conflicto, la prioridad de mayor a menor es la siguiente:1. Estilo en línea.1. Estilo en línea.

2. Hojas de estilo internas (empotradas dentro de <head>).

3. Hojas de estilo externas.

4. Navegador (estilo por defecto).

�La regla memotécnica es:

Ante conflicto, prevalece la definición más cercana al elemento afectado.

PRIORIDAD DE CADA TIPO DE ESTILO (II)

� Ejemplo:

� Hoja de estilos externa:

h3 { color: red;

text-align: left;

font-size: 8pt;

� Hoja de estilos interna:

h3 { text-align: right;

font-size: 20pt;

}font-size: 8pt;

}

}

Resultado de los atributos que toma el elemento h3:

color: red;text-align: right;font-size: 20pt;