CSS Introducción

Informática
Nombre: María Fernanda
Espinoza Trejo.
Docente: Lcdo. Luis Sánchez.

¿QUE ES CSS?
Hojas de Estilo en Cascada
(Cascading Style Sheets), es
un mecanismo simple que
describe cómo se va a mostrar
un documento en la pantalla.

http://www.w3c.es/Divulgacion/GuiasBreves/HojasEstilo

¿PARA QUE
SIRVE?
CSS se utiliza para dar estilo a
documentos HTML y XML, separando el
contenido de la presentación.
Los Estilos definen la forma de mostrar los
elementos HTML y XML. CSS permite a los
desarrolladores Web controlar el estilo y el
formato de múltiples páginas Web al mismo
tiempo. incluyendo elementos tales como
los colores, fondos, márgenes, bordes,
tipos de letra...

¿Cómo
FUNCIONA?
CSS funciona a base de reglas, es
decir, declaraciones sobre el estilo
de uno o más elementos. Las hojas
de estilo están compuestas por una
o más de esas reglas aplicadas a
un documento HTML o XML.

SELECTOR
Ejemplo:
h2 {color: green;}
h2 ---> es el selector
{color: green;} --->
es la
DECLARACIÓN
color ---> es la
propiedad o
atributo
green ---> es el
valor

5

Utilizando una hoja de estilo externa que estará vinculada a
un documento a través del elemento <link>, el cual debe ir
situado en la sección <head>.

<html>
<head>
<title>Título</title>
<link rel="stylesheet" type="text/css"
href="http://www.w3.org/css/officeFloat
s.css" /> </head>
<body> . . . .
</body>
</html>

Utilizando el elemento <style>, en el interior del documento al
que se le quiere dar estilo, y que generalmente se situaría en la
sección <head>.

7

1.Ejemplo.

<style type="text/css">
A:link,A:visited{font-
style:bold;color:yellow}
</style>

En este ejemplo todos los
hipervínculos no visitados (A:link) y
los visitados (A:visited) aparecerán
en negrita (bold) y en amarillo
(yellow)
9

2. Ejemplo.

H1 { color: orange; font-
style: italic}
</style>

En este caso H1 es la etiqueta del
Titular de mayor tamaño y cada vez
que se lo defina aparecerá en color
naranja y en cursiva.

10

3. Ejemplo.

<STYLE TYPE="text/css"> UL {
background: red; margin: A B C D;
padding: E F G H; } LI { color: white;
background: blue; margin: a b c d;
padding: e f g h; } </STYLE>

En este caso el “style” solo
afectara a las letras que se
11
especifican dentro de este.

4. Ejemplo.
<head>
body {background-color:blue}
p {color:white}
</style>
</head>

<body>
<p>Fuentes blancas sobre fondo azul</p>
</body>

En este caso se especifica el
estilo que tendrá <p> dentro de
12 <body>

En el siguiente ejemplo se dará a conocer una
pagina con la aplicación de estilos dentro de
ella, especificando de manera general todos lo
ejemplos expuestos con anterioridad.
Se especificara un estilo general para algo, sin
embargo, dentro de las mismas habrá
excepciones especificadas por otros estilos.
13

CSS Introducción

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (16)

Destacado

Destacado (20)

Similar a CSS Introducción

Similar a CSS Introducción (20)

CSS Introducción