Introducción a CSS

19
Introducción a CSS Joaquin Lara Sierra Introducción a CSS por Joaquín Lara Sierra se encuentra bajo una Licencia Creative Commons Atribución-NoComercial-CompartirIgual 2.5 Colombia. Basada en una obra enhttp://librosweb.es/css/pdf/introduccion_css.pdf . Permisos que vayan más allá de lo cubierto por esta licencia pueden encontrarse enhttp://librosweb.es/css/pdf/introduccion_css.pdf . Joaquín Lara Sierra Docente Facilitador

description

Introducción a CSS

Transcript of Introducción a CSS

Page 1: Introducción a CSS

Introducción a CSS

Joaquin Lara Sierra

Introducción a CSS por Joaquín Lara Sierra se encuentra bajo una Licencia Creative Commons Atribución-NoComercial-CompartirIgual 2.5 Colombia.

Basada en una obra enhttp://librosweb.es/css/pdf/introduccion_css.pdf. Permisos que vayan más allá de lo cubierto por esta licencia pueden encontrarse

enhttp://librosweb.es/css/pdf/introduccion_css.pdf.

Joaquín Lara SierraDocente Facilitador

Page 2: Introducción a CSS

Estructura

Page 3: Introducción a CSS

Los diferentes términos se definen a

continuación

• Regla: cada uno de los estilos que componen

una hoja de estilos CSS. Cada regla está

compuesta de una parte de "selectores", un

símbolo de "llave de apertura" ({), otra parte

denominada "declaraciones" y por último, un

símbolo de "llave de cierre" (}).

• Selector: indica el elemento o elementos HTML

a los que se aplica la regla CSS.

Page 4: Introducción a CSS

Los diferentes términos se definen a

continuación

• Declaración: especifica los estilos que se

aplican a los elementos. Está compuesta por

una o más propiedades CSS.

• Propiedad: permite modificar el aspecto de una

característica del elemento.

• Valor: indica el nuevo valor de la característica

modificada en el elemento

Page 5: Introducción a CSS

CSS Indirectas o dentro del

Documento HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Ejemplo de estilos CSS en el propio documento</title>

<style type="text/css">

p { color: black; font-family: Verdana; }

</style>

</head>

<body>

<p>Un párrafo de texto.</p>

</body>

</html>

Page 6: Introducción a CSS

Definir CSS en un archivo externo

Un archivo de tipo CSS no es más que un archivo simple de

texto cuya extensión es .css

las páginas HTML enlazan el archivo CSS, mediante la

etiqueta <link>.

Ejemplo.

Archivo estilo.css tiene p { color: black; font-family: Verdana; }

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Ejemplo de estilos CSS en un archivo externo</title>

<link rel="stylesheet" type="text/css" href="/css/estilos.css" media="screen" />

</head>

Page 7: Introducción a CSS

Etiqueta <Link>

Normalmente, la etiqueta <link> incluye cuatro atributos

cuando se enlaza un archivo CSS:

• rel: indica el tipo de relación que tiene el recurso

enlazado (en este caso, el archivo CSS) y la página

HTML. Para los archivos CSS, siempre se utiliza el valor

stylesheet

• type: indica el tipo de recurso enlazado. Sus valores

están estandarizados y para los archivos CSS su valor

siempre es text/css.

Page 8: Introducción a CSS

Etiqueta <Link>

Normalmente, la etiqueta <link> incluye cuatro atributos

cuando se enlaza un archivo 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. Más adelante se explican en

detalle los medios CSS y su funcionamiento.

Page 9: Introducción a CSS

Comentarios

/* Este es un comentario en CSS */

/* Este es un

comentario CSS de varias

líneas */

<!-- Este es un comentario en HTML -->

<!-- Este es un

comentario HTML de varias

líneas -->

CSS

HTML

Page 10: Introducción a CSS

Selectores básicos

* {

margin: 0;

padding: 0;

}

p {

...

}

Selector universal

Selector de tipo o etiqueta

Page 11: Introducción a CSS

Ejemplo

h1 {

color: red;

}

h2 {

color: blue;

}

p {

color: black;

}

Page 12: Introducción a CSS

Ejemplo

h1 {

color: #8A8E27;

font-weight: normal;

font-family: Arial, Helvetica, sans-serif;

}

h2 {

color: #8A8E27;

font-weight: normal;

font-family: Arial, Helvetica, sans-serif;

}

h3 {

color: #8A8E27;

font-weight: normal;

font-family: Arial, Helvetica, sans-serif;

}

En el siguiente ejemplo, los títulos de sección h1, h2 y h3 comparten los mismosestilos:

Page 13: Introducción a CSS

Ejemplo

h1, h2, h3 {

color: #8A8E27;

font-weight: normal;

font-family: Arial, Helvetica,

sans-serif;

}

En este caso, CSS permite agrupar todas las reglasindividuales en una sola regla con un selector múltiple. Paraello, se incluyen todos los selectores separados por unacoma (,) y el resultado es que la siguiente regla CSS esequivalente a las tres reglas anteriores:

Page 14: Introducción a CSS

Selector de clase

Si se considera el siguiente código HTML de

ejemplo:

<body>

<p>Texto de explicacion uno...</p>

<p>Texto de explication dos…</p>

<p>Texto de explicación tres …</p>

</body>

Page 15: Introducción a CSS

Aplicando CSS

<body>

<p class="destacado">Texto Texto Texto...</p>

<p> Texto Texto Texto...</p>

<p>Class Texto Texto Texto...</p>

</body>

Page 16: Introducción a CSS

Crear Archivo CSS

A continuación, se crea en el archivo CSS una nueva regla

llamada destacado con todos los estilos que se van a

aplicar al elemento. Para que el navegador no confunda

este selector con los otros tipos de selectores, se prefija el

valor del atributo class con un punto (.) tal y como muestra

el siguiente ejemplo:

.destacado { color: red; }

Page 17: Introducción a CSS

Selectores de ID

El selector de ID permite seleccionar un elemento de la

página a través del valor de su atributo id. Este tipo de

selectores sólo seleccionan un elemento de la página

porque el valor del atributo id no se puede repetir en dos

elementos diferentes de una misma página.

#destacado { color: red; }

<p>Primer párrafo</p>

<p id="destacado">Segundo párrafo</p>

<p>Tercer párrafo</p>

Page 18: Introducción a CSS

Ejemplos

#hdr {

background: url(/images/ds.gif)

repeat-x;

width: 100%;

text-align: center;

}

Page 19: Introducción a CSS

.wide #content-secondary {

width: 272px;

margin: 13px 0 0 0;

position: relative;

margin-left: -8px;

background: url(./graphics/wide/bg-

content-secondary.gif) repeat-y;

}