CSS

CSS (Cascading Style Sheets)

Lenguaje usado para definir la presentación de un documento estructurado (HTML, XHTML)

Desarrollado por el W3CLa idea que se encuentra detrás del desarrollo de

CSS es separar la estructura de un documento de su presentación

Extensión .css

Sintaxis

selector {

propiedad:valor;

}

Donde escribir CSS

1. Dentro de la etiqueta:

<p style="color:#009900"> Este párrafo es de color verde.</p>

Donde escribir CSS

2. Dentro del documento

<head>

<STYLE type="text/css">

p {

color:#009900;

}

</STYLE>

</head>

Donde escribir CSS

3. Hoja de estilos (.css)

Llamada desde el HTML:

<head>

<link rel="STYLESHEET" type="text/css" href="estilos.css">

</head>

Selectores

1. Universal *{ }

2. De Tipo:body{ }p{ }h1{ }ul{ }table{ }...

Selectores

3. De Clase:

.p_rojo{

color:#990000;

}


<p class="p_rojo">Este párrafo es rojo</p>

Selectores

4. DE Pseudo-clase:

Enlaces normales a:link { }

Enlaces visitados a:visited { }

Enlaces activos a:active { }

Enlaces hover a:hover { }

Selectores

5. De Identificador:

#p_unico{

color:#990000;

}


<p id="p_unico">El formato de este párrafo es único</p>

Propiedades

http://www.ateneupopular.com/blogs/chuleta-css-conceptos-basicos/

Valores

Números enterosDecimalesHexadecimales (rojo = #f00)Palabras protegidas: rojo, aqua, bold, solid…Medidas:

Unidades absolutasUnidades relativas

Unidades absolutas

in, pulgadas (1 pulgada son 2.54 centímetros)cm, centímetrosmm, milímetrospt, puntos (1 punto equivale a 1 pulgada/72, es

decir, unos 0.35 milímetros)pc, picas (1 pica equivale a 12 puntos, es decir,

unos 4.23 milímetros)

Unidades relativas

em, relativa respecto del tamaño de letra previamente definida, o 16px por omisión.

ex, relativa respecto de la altura de la letra x ("equis minúscula") del tipo de letra que se esté utilizando

px, (píxel) relativa respecto de la pantalla del usuario

%, (porcentaje) el valor de porcentaje es relativo al tamaño del elemento

Etiquetas <span> y <div>

span, se utiliza para separar un trozo de texto y darle formato.

div, permite crear bloques en un documento.

El modelo de cajas

CSS

Technology

Transcript of CSS