05 desarrollocss (3)

¿Qué es CSS?
Hojas de Estilo en Cascada (Cascading Style Sheets):

• Mecanismo que describe cómo se va a mostrar un documento en la pantalla, o
• Cómo se va a imprimir,
• Cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de
lectura.

Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de
sus documentos.

* Es la separación de contenido XHTML y estilo visual (ó presentación)
* Permite dar estilo a múltiples páginas web.

Tres formas de incluir el CSS
a) Definir CSS en un archivo externo
<link rel="stylesheet" href="imagen/estilo.css" type="text/css" />

<style type="text/css">
@import url("estilo/estilo.css");
</style>

<!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=UTF-8" />
<title>Documento sin título</title>
<link rel="stylesheet" href="estilo/estilo.css" type="text/css" />
</head>

<body>
</body>

</html>

<head>
@import url("estilo/estilo.css");
</style>

</head>

<body>
</body>

</html>

b) Incluir CSS en el mismo documento HTML
p { color: black; font-family: Verdana; }
</style>

c) Incluir CSS en los elementos HTML
<span style="border:solid 1px green;"></span>

<head>
p { color: black; font-family: Verdana; }
</style>

</head>

<body>
</body>

</html>

c) Incluir CSS en los elementos HTML
<span style="border:solid 1px green;"></span>

<head>
</head>

<body>
<p style="border:solid 1px green;">Párrafo con borde verde</p>
</body>

</html>

¿Cuál vamos a usar?

a) Definir CSS en un archivo externo

Regla CSS
• CSS define una serie de términos que permiten describir cada una de las
partes que componen los estilos CSS.
El siguiente esquema muestra las partes que forman un estilo CSS muy
básico:

• 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 "declaración" 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.
• 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.

Ejercicio
1.- Crear una carpeta con el nombre de la empresa “nombreEmpresa”
2.- Crear archivo html, con nombre “empresa_inicio.html”
3.- Dentro de carpeta “nombreEmpresa”, crear otra carpeta con nombre “estilo”
4.- Dentro de la carpeta estilo crear el archivo “estilo.css”
5.- Dentro de la carpeta “estilo” crear la carpeta “images”

Ejercicio html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<head>
</head>

<body>
<div class="pagina">
<div class="encabezado">
</div>
<div class="cuerpo">
</div>
<div class="pie">
</div>
</div>
</body>

</html>

05 desarrollocss (3)

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie 05 desarrollocss (3)

Ähnlich wie 05 desarrollocss (3) (20)

05 desarrollocss (3)