Está en la página 1de 50

Estilo CSS

HOJAS DE ESTILO - CSS

son un mecanismo simple


que describe cmo se
va a presentar un
documento en la
pantalla o como se va a
imprimir.

HOJAS DE ESTILO - CSS

CSS nos ayuda a separar


el contenido de la
presentacin.

HOJAS DE ESTILO - CSS


as a
m
r
fo r un s:
y 2 erta tilo
a
H ins
es
e
de ja d
ho

CSS nos permite


controlar el estilo y el
formato de mltiples
pginas Web a la vez

Una hoja de estilo


externa puede ser
enlazada a un
documento HTML
mediante el elemento
LINK de HTML:

HOJAS DE ESTILO INTERNAS

HOJAS DE ESTILO EXTERNAS

EJEMPLO-01

CSS

sin

EJEMPLO-01con CSS

EJEMPLO 02 - CSS EXTERNA

DEFINIR CSS EN UN ARCHIVO EXTERNO


PASO 1: Se crea un archivo de texto y se le aade
solamente el siguiente contenido:

PASO 2: Se guarda el archivo de texto con el nombre


estilos.css Se debe poner especial atencin a que el archivo
tenga extensin .css y no .txt

EJEMPLO 02 - CSS EXTERNA

PASO 3: En la pgina HTML se enlaza el archivo CSS externo mediante


la etiqueta <link>:

LEYENDA:
rel: indica el tipo de relacin que existe entre el recurso
enlazado (en este caso, el archivo CSS) y la pgina HTML. Para
los archivos CSS, siempre se utiliza el valor stylesheet
type: indica el tipo de recurso enlazado. Sus valores estn
estandarizados y para los archivos CSS su valor siempre es
text/css
href: indica la URL del archivo CSS que contiene los estilos. La
URL indicada puede ser relativa o absoluta y puede apuntar a
un recurso interno o externo al sitio web.
media: indica el medio en el que se van a aplicar los estilos del
archivo CSS. Ms adelante se explican en detalle los medios
CSS y su funcionamiento.

Colocando una
imagen de fondo

COMPONENTES DE UN ESTILO CSS BSICO


Las hojas de estilo en CSS estn compuestas de reglas. Cada
regla tiene tres partes:

Regla: Est compuesta de una parte de "selectores", un


smbolo de "llave de apertura" ({), otra parte denominada
"declaracin" y por ltimo, un smbolo de "llave de cierre"
(}).

COMPONENTES DE UN ESTILO CSS BSICO

el selector (en el ejemplo sera: 'h1'), el cual le dice al


navegador la parte del documento que se ver afectada por la
regla;

la propiedad (en el ejemplo seran 'color y background), las


cuales especifican qu aspecto del diseo va a cambiarse;

y el valor, establece el nuevo valor de la caracterstica


modificada en el elemento.

General.css

Una hoja de estilo


externa puede ser
enlazada a un
documento HTML
mediante el elemento
LINK de HTML:

REGLAS DE ESTILO CSS

La declaracin indica "qu hay que hacer" y el selector indica "a quin hay que
hacrselo"

El selector no es ms que el tag de html


al que queremos que afecte el estilo.

A un mismo elemento HTML se le pueden asignar infinitas reglas CSS y cada regla
CSS puede aplicarse a un nmero infinito de elementos. En otras palabras, una
misma regla puede aplicarse sobre varios selectores y un mismo selector se puede
utilizar en varias reglas.

SELECTORES BSICOS
SELECTOR DE TIPO O ETIQUETA
Selecciona todos los elementos de la pgina cuya etiqueta HTML
coincide con el valor del selector.

SELECTORES BSICOS
SELECTOR DE TIPO O ETIQUETA
Selecciona todos los elementos de la pgina cuya etiqueta HTML
coincide con el valor del selector.

SELECTORES BSICOS
En las hojas de estilo complejas, es habitual agrupar las propiedades
comunes de varios elementos en una nica regla CSS y posteriormente
definir las propiedades especficas de esos mismos elementos.

SELECTORES BSICOS
SELECTOR DE CLASE

Cmo se pueden aplicar estilos CSS slo al primer prrafo?

SELECTORES BSICOS
SELECTOR DE CLASE

Cmo se pueden aplicar estilos CSS slo al primer prrafo?

/* Pone de color rojo TODOS los prrafos */


p{
color:red;
}

/* Pone de color rojo todos los prrafos que estn dentro de un div, en
cualquier nivel de anidamiento */
div p {
color:red;
}
...
<div>esto es un div
<p>con un prrafo dentro</p>
</div>
<p>y este esta fuera</p>

EJERCICIO 01

/* Pone de color rojo los span que sean hijos de div */


div > span {
color:red;
}

<div>un div con <span>span hijo</span></div>


<div><p>un div con <span>span nieto</span></p></div>

EJERCICIO 02

/* Pone de color rojo los prrafos que van despus de un div */


div + p {
color:red;
}

<div>texto 1</div><p>parrafo 1</p><p>parrafo 2</p>

EJERCICIO 03

/* Pone de color rojo los prrafos que tengan align center */


p[align="center"] {
color:red;
}

<p align="center>centrado y rojo</p><p>normal</p>

EJERCICIO 08

EJERCICIO:
Definir todas las marcas de cabecera
(h1,h2,h3,h4,h5,h6) con la misma
fuente (Verdana) pero tamaos de
fuente distinta.

EJERCICIO 05

background-color:#eeeeee;
color:#000000;
background-color:#ffff00;
font-style:italic;

EJERCICIO 05

EJERCICIO 06

color:#00aa00;
text-decoration:underline;
text-decoration:line-through

En una pgina html, definir un ttulo con nivel h1 (subrayar todo el ttulo).
Luego un prrafo que tenga algunas palabras subrayadas y otras tachadas
(utilizar la marca span para asignar estilos a una palabra).

EJERCICIO 06

EJERCICIO 07

Definir dos reglas en una hoja de estilo externa. Luego crear una pgina HTML que
contenga 3 preguntas y 3 respuestas. A cada pregunta y respuesta disponerla en
un prrafo distinto. Asignar los estilos .pregunta y .respueta

EJERCICIO 07

EJERCICIO 08

EJERCICIO 08