Scribd
Cargar
133 vistas29 páginas

Manual de Css - 2

Este documento resume los principales conceptos relacionados con hojas de estilo CSS. Explica que CSS separa la estructura de un documento HTML de su presentación, permitiendo compartir estilos entre múltiples páginas. Describe la sintaxis básica de CSS y los diferentes métodos para insertar hojas de estilo, como hojas externas, internas o en línea. Además, explica conceptos como selectores, prioridades, propiedades de fuentes, colores, bordes y cajas.

Cargado por

Suriken Surikenito
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
133 vistas29 páginas

Manual de Css - 2

Este documento resume los principales conceptos relacionados con hojas de estilo CSS. Explica que CSS separa la estructura de un documento HTML de su presentación, permitiendo compartir estilos entre múltiples páginas. Describe la sintaxis básica de CSS y los diferentes métodos para insertar hojas de estilo, como hojas externas, internas o en línea. Además, explica conceptos como selectores, prioridades, propiedades de fuentes, colores, bordes y cajas.

Cargado por

Suriken Surikenito
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 29

Tema 2.

I- Hojas de estilo
CSS.
Programacin Multimedia.
G.I.M.
Inmaculada Coma, Francisco Grimaldo

Resumen

En este tema:

Recordaremos cmo crear estilos CSS e


insertarlos en una pgina HTML.
Recordaremos los principales selectores CSS
para dar formato a los contenidos HTML.
Veremos algunas opciones avanzadas de CSS e
iremos avanzando algunas opciones de CSS3.

Hojas de estilo.CSS.
Qu es una hoja de estilo?

Las hojas de estilo en cascada o CSS (Cascading Style Sheets) son


un lenguaje utilizado para la presentacin de un documento
estructurado escrito en HTML, XHTML o XML.
La idea que subyace en las hojas de estilo es separar la estructura
de un documento de su presentacin.
Por ejemplo, podemos utilizar la etiqueta <H1> para definir una
cabecera de pgina, sin darle ninguna aspecto a la misma. Luego,
en CSS definiremos el aspecto de dicha etiqueta (color, tipo de
fuente, tamao, o incluso volumen de un sintetizador de voz).
Esto no permite compartir fcilmente los estilos entre mltiples
documentos de un mismo sitio Web.
Las reglas de estilo se aplican de forma jerrquica.

Hojas de estilo.CSS.
Sintaxis:
Forma general:
selector { propiedad: valor }

o
selector { propiedad1: valor1;
propiedad2: valor2;
......
propiedadN: valorN }

Ejemplo:
H1 { text-align: center;
color: blue }
4

Insercin de estilos CSS en HTML


Cmo aplicar una hoja de estilo?

Existen tres formas de aplicar estilos a un


documento:

Una hoja de estilo externa. Almacenaremos en un


fichero .css las reglas de estilo del documento. Es la
forma ms adecuada, separando el estilo
completamente del documento.
Una hoja de estilo interna. Incrustamos dentro de
la cabecera del documento HTML los estilos que
vamos a aplicar.
Un estilo en lnea. Insertamos un estilo
directamente dentro de una etiqueta HTML.
5

Insercin de estilos CSS en HTML


Estilo importado de hoja externa.
En la cabecera del fichero HTML se incluye un
enlace al fichero de estilo:
<LINK rel=StyleSheet href=estilo_ej.css"
type="text/css">

En el fichero de estilo se incluyen las propiedades


alteradas:

/* Ejemplo de un fichero de estilo */


BODY { background: URL(confetti-background.jpg) }
H1 { text-align: center;
color: red;
font-family: Dauphin, "Book Antiqua", Arial}
H2 { font-family: "Square 721 BT", Tahoma, Arial}
STRONG { text-decoration: underline }

Insercin de estilos CSS en HTML


Hoja de estilo interna
En la cabecera del fichero HTML dentro de las
etiquetas HEAD, se definen las propiedades de la
hoja de estilo.
<head>
<title>Actes commemoratius del Jard Botnic</title>
<style>
BODY { background-color:#00FF99;}
H1 { text-align: center;
color: red;
font-family: Dauphin, "Book Antiqua", Arial}
H2 { font-family: "Square 721 BT", Tahoma, Arial}
STRONG { text-decoration: underline }
</style>
</head>
7

Insercin de estilos CSS en HTML


Estilo definido en lnea
Se utiliza el atributo STYLE para cambiar
directamente el estilo de cada elemento HTML.
p.e.
<H2>Valncia, 7/II/02</H2>
<p style="margin-left: 1cm;
magin-right: 1cm;
font-style: italic">
Des de la primavera fins al .....
.......

Selectores

Selectores formados por elementos HTML:


BODY { color: blue }
H1, H2, H3, H4, H5, H6 { color: red;
font-family: sans-serif}
H1 EM { color: green }

Clases definidas por el usuario.


//Clase que se aplica sobre 1 elemento HTML
P.miparrafo { margin-left: 1cm; magin-right: 1cm;
font-style: italic }
<P class=miparrafo">

//Clase global
.azul { color: blue; font-weight: bold }
<H2 CLASS=azul>Cabecera azul</H2>

Selectores
Pseudoclase enlace

El estndar CSS1 permite definir propiedades


para cada uno de los tipos de enlaces:

A:link o :link - enlaces no visitados.


A:visited o :visited - enlaces visitados.
A:active o :active - enlaces activados.
A:hover o :hover - ratn sobre el enlace.

A:visited { color: red }


.bizarre :active { font-size: 300% }
A:link IMG { border: solid green }

10

Selectores

Adems de los selectores vistos, CSS permite definir a


qu etiquetas HTML afecta un estilo, de diferentes
formas. Algunos selectores son nuevos en CSS3.

Por id del elemento.


Por posicin: etiquetas adyacentes, etiquetas anidadas.
Por eventos del usuario: click, mouseover..
Por atributos: si una etiqueta tiene determinados atributos.

Selectores CSS3:

http://www.w3.org/TR/css3-selectors/
http://www.w3schools.com/cssref/css_selectors.asp

11

Selectores

Selectores bsicos: elemento HTML, clase o


ID:

Tipo

Sintaxis CSS

HTML

Elemento

H1 {color:blue;}

<h1>

Nombre de clase

.azul {color:blue;}

<h1 class=azul>

Identificador

#capa {display:block;}

<DIV id=capa> .

12

Selectores

Por posicin

Tipo

Sintaxis CSS

Anidados

tag1 tag2

Hijo

#capa > li {color:blue;}

Etiquetas adyacentes

h1 + p {color:blue;}

Posicin en el rbol

li:first-child {color:blue;}

Seleccin de elementos dentro del rbol:


:first-child
:last-child
:nth-child (even | odd| {formula})
:after
:before
:first-letter :first-line
13

Selectores

Por atributos
Tipo

Sintaxis CSS

Atributo

tag[atributo]

Atributo con valor

tag[atributo=valor]

Clase

tag.clase

ID

tag#id

Eventos ratn

Tipo

Sintaxis CSS

Hiperenlaces visitados o no visitados

tag:link
tag:visited

Elemento al que se est haciendo click (active),


ratn sobre el elemento,
ratn que tiene el foco

tag:active
tag:hover
tag:focus
14

Selectores. Ejemplo.
Estilo:

HTML

div {

<p id=parrafo>
Mi texto
</p>

width: 20 px

}
#parrafo{
color: red;
}
.capa{
width: 15 px;;
}
.capa .capa2{
width: 30 px;
}

<div class =capa>


<div class=capa2>
Hola mundo
</div>
</div>

15

Prioridades

Las etiquetas se aplican en cascada,


establecindose un orden de prioridades.
Dependiendo de dnde se ha definido la
etiqueta las prioridades son:
1.

2.
3.
4.

Estilo inline (dentro de un elemento HTML).


Hoja de estilo interna (en la cabecera).
Hoja de estilo externa.
Estilos por defecto del navegador.

16

Prioridades

Cuando a una mismo elemento se le pueden aplicar


varios estilos se calcula la especificidad de cada selector
y se aplica el que tiene mayor valor.
Para calcula la especificidad se hace:

a = contar 1 si la declaracin viene de un atributo style inline.


b= contar el nmero de atributos ID en el selector.
c= contar el nmero de pseudo-clases y otros atributos en el
selector.
d= contar el nmero de elementos en el selector.

El resultado ser un nmero abcd que definir la


prioridad.
li.red.level { } /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
ul ol+li { }
/* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */

Prioridades
<HTML>
<HEAD>
<STYLE type="text/css">

#x97z
{
color: black;
font-style: italic;
}
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color:red"> </p>
</BODY>
</HTML>

#x34y {} /* a=0 b=1 c=0 d=0 ->


style="" /* a=1 b=0 c=0 d=0 ->

specificity = 0,1,0,0 */
specificity = 1,0,0,0 */

Como 1000 > 0100 -> se aplica el color rojo definido en


style

Propiedades de las fuentes

font-weight: Anchura relativa de la fuente.

nomal | lighter | bold | bolder| 100 | 200 | ... | 900


H1 { font-weight: 200 }, H2 { font-weight: bold }

font-style: Apariencia de la fuente.

normal | italic | oblique


P { font-style: normal }, TH { font-style: italic }

font-size: Tamao (relativo o absoluto) de la fuente

pt, in, cm, mm | em, ex, px, % | xx-large | x-large | large |


medium | small | x-small | xx-small | smaller | larger
STRONG {font-size: 150%}, P{font-size: 14pt}

font-family: fuente de letra.


H1 { font-family: Book antique, Tahoma, Arial }

19

Propiedades del texto

text-decoration: aadidos al texto de un elemento.

none | underline | overline | line-through

P { text-decoration: underline }

vertical-align: alineacin vertical del texto.

text-align: alineacin horizontal.

top | bottom | baseline | middle | sub | super


left | right | center | justify

text-indent: identacin de la primera lnea del texto.

+/- pt, in, cm, mm | +/- em, ex, px, %


P{text-ident: -25px}

line-height: distancia entre lneas del mismo prrafo.

normal | number | pt, in, cm, mm | em, ex, px, %

20

Colores y fondos.

color: color del texto.


nombre | #RRGGBB | rgb( rrr, ggg, bbb )
P {color: blue}, H1 {color: #00AABB}, H3{color:rgb(255,0,0)}

background-color: color del fondo de la regin.


nombre | #RRGGBB | rgb( rrr, ggg, bbb )
background-image: imagen de fondo de la regin.
none | url(nombre_fichero)
H2 { background-image: url(Bluedrop.gif};}

background-repeat: modo de repeticin de la imagen


repeat | repeat-x | repeat-y | norepeat
BODY {

background-image: url(fondo.jpg);
background-repeat: repeat-x }

background: combina las propiedades en una sla entrada.


P { background: url(fondo.jpg) repeat-x }

21

Box model

Cada uno de los elementos HTML que incluimos


en nuestra pgina est delimitados por una regin
rectangular.

Cdigo HTML y reas rectangulares asociadas a cada elemento

Entornos de Usuario

HTML

22

Box model

Cada rea rectangular est definida por 4 partes:

El contenido: content.
El borde: border. Este borde puede tener un determinado grosor.
El espacio entre el contenido y el borde: padding.
El espacio entre el borde y el exterior del rectngulo: margin.

23

Box model

border-width: fija el tamao de los bordes en una


entrada
none | thin | medium | thick | pt, in, cm, mm | em, ex, px

border-left-width, border-right-width, border-topwidth , border-bottom-width: tamao de los bordes de


cada una de las lneas
border-color, border-left-color: fija el color del borde
nombre-color | #RRGGBB | rgb(rrr, ggg, bbb)

border-style, border-left-style: Estilo del borde.


none | dotted | dashed | solid | double | groove | ridge | inset |
outset

border, border-left, border-right: fija el ancho, el


estilo y de los mrgenes.
24

Box model

padding-left, padding-right, padding-top, paddinbottom


pt, in, cm, mm | em, ex, px, %
padding: ana las anteriores propiedades en una
entrada.
margin-left, margin-right, margin-top, marginbottom.
auto | pt, in, cm, mm | em, ex, px, %
margin: ana todos los mrgenes en una entrada.

25

Dimensin, posicin y visibilidad.


Para definir la dimensin y posicin de imgenes o bloques creados
con las etiquetas DIV y SPAN tenemos algunos selectores:

width, height: tamao del elemento

position: indica cmo se va a especificar la posicin de


un elemento: absoluta, relativa a elementos del entorno,
fija.

auto | pt, in, cm, mm | em, ex, px

static | fixed | relative | absolute

top, bottom, left, right: pxeles de posicin del objeto.


z-index: orden de aparicin de los elementos si se
superponen (cul se muestra encima).
visibility: si es visible o no.

visible | hidden
26

Dimensin, posicin y visibilidad.

display: especifica cmo se agrupan las cajas de cada


bloque en la pgina.

float: indica como se sita el elemento flotante respecto


al texto circundante.

IMG { float: left }

left | right | both

overflow: especifica el comportamiento de un contenido


si sobrepasa la caja que lo contiene

none | left | right

clear: indica en qu lados de un elemento no estn


permitidos los elementos flotantes

block |inline | inline-block | none

auto | hidden | scroll | visible | inherit

clip: recorta un elemento


27

28

Bibliografa y referencias

Cascading Style Sheets home page

http://www.w3.org/Style/CSS/

Selectores CSS:

http://www.w3schools.com/cssref/css_selectors.a
sp

29

También podría gustarte