mapa conceptual programacion ramirez manzanrea

hojas de estilo o CSS (Cascading style sheets)

Una hoja de estilo consiste en definir, mediante cierta sintaxis la apariencia y presentación de una página web. Es un fichero plano (sin formato) en el que se definen el aspecto de las etiquetas de una página web a diferentes niveles:

A nivel local

A nivel de documento usando la cabecera

A nivel archivo externo

Permite que solo cierta parte de una página muestre un estilo determinado, esto se logra utilizando un dicho estilo en alguna determinada etiqueta.

En un documento HTML o página, se puede definir la forma, en un pequeño trozo de código en la cabecera, a toda la página.

Una de las características mas potentes de la programación con hojas de etilos consiste en poder definir y cambiar los estilos para todo el sitio web de una sola vez. Esto es utilizando un archivo donde únicamente se colocan las declaraciones de estilo de una pagina y en seguida se enlaza a todas las páginas que componen el sitio.

<p style="background-color: blue">

<head>

< style>

body { background-color: blue;}

p{ color: blue;

background-color: grey;}

</style>

</head>

< head>

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

</head>

Estructura de un CSS

Las hojas de estilo en la que el tipo de sentencia son de tipo regla, las reglas están formadas por un selector y un bloque de declaración. El bloque de declaración empieza y termina con llaves {}.

Manipular la apariencia de una página

La cantidad de cosas que se pueden manipular con un CSS es bastante grande. CSS utiliza una buena cantidad de propiedades para diferentes fines. Es posible utilizar colores, modificar el formato de un texto, añadir y manejar bordes de diferentes elementos, usar imágenes como fondo y manejar la estructura y posición visual de una página.

La propiedad es lo que les vas a cambiar al elemento, por ejemplo puede ser el tamaño, color, etc.

El selector es un elemento o etiqueta a cambiar.

p{

color: white;

background-color: black;

}

Tipos de selectores

a) Universal: afecta a todos los elementos de la página

* {

color: blue;

}

b) Tipo: los cambios afectan al elemento o etiqueta.

h1 {

color: blue;

}

c) Clase:

<p class="blancas"> Texto </p>

. blancas{

color: white;

bankgroud-color: green;

}

d) id: éste identificador debe de ser único.

#elegante{ color: red;}

<h1 id="elegante"> Hola </h1>

e) Descendiente: afecta a todos los elementos dentro de otra etiqueta.

h2 p {

color: blue;

}

f) Seudo-clase: En un evento de un elemento algo pasa.

p: hover {

color: blue;

}