1. Republica Bolivariana de Venezuela
Ministerio del Poder Popular para la Educación Universitaria
Instituto Universitario de Tecnología de Yaracuy
Ponente: López Adrian
2. Css, es una tecnología que le permite
al programador darle una variedad de
estilos a un documento web separando la
estructura de su contenido.
Cascade Este método le ofrece a los
desarrolladores el control
Style total del formato de sus
documentos.
Sheets
3. Css posee una sintaxis muy sencilla de manejar los estilos o capas,
usando las siguientes palabras:
Selector, Atributo y el Parámetro. se estructura la hoja de estilo.
Selector: elemento al que
Se le aplicaran los estilos.
Body { Background‐color: #cc00ff; }
Atributo: características que
Que componen cada estilo.
Parámetro: es el valor que
Se le pasa al atributo.
4. Body {
Estilo General Background‐color:#00cc99;
}
Estilo con “id” #titulo {
define un estilo font‐family:Arial;
Uso de los estilos único para un color:#00cc99;
elemento }
p.párrafo {
Estilo con “Class”
Font‐Family:Arial;
Especifica la clase de
color:#f25;
estilo a la cual
text‐align:justify;
pertenece elemento
}
5. Formas De Usar CSS
In Line (en línea) Hoja de estilo Interna.
<html>
<head>
<html> <title>Documento 1</title>
<head> <style type=“text/css”>
<title>Documento 1</title> P{
Color:#000;
</head>
Font‐Family:arial;
<body> }
<p style=“Font‐Family:Arial;”> </style>
Esto es CSS in line </head>
</p> <body>
</body> <p>Esto es CSS interno</p>
</html> </body>
</html>
6. /*Hoja de estilo*/
Hoja de Estilo Externa
Body{background‐color:#909;} Para trabajar una hoja de estilo
.titulo{ De manera externa se usa una línea
Font‐Family:Arial; de código dentro de la cabecera
color:#000; Que vincula el html con el css.
text‐align:center;
} <html>
#cont{ <head>
<title>Documento 1</title>
text‐align:left;
<link rel=“stylesheet” href=“stylo.css”
color:blue; type=“text/css”>
Font‐Family:arial; </head>
} <body>
<h1 class=“titulo”> CSS </h1>
<p id=“cont”>
La hoja de estilo se debe guardar Así ce trabaja una hoja de estilo
Con la extensión “.css” externa
Ejemplo: </p>
</body>
stylo.css </html>
7. El elemento DIV (Divisor) es de tipo bloque que actúa como
contenedor, para estructurar de manera mas sencilla , dinámica y
practica un documento web
Su sintaxis: va inmerso dentro
Del código html y su estructura es
la Siguiente: <div> </div>
<div id=“Capa 1”>
Banner Titulo
</div>
B
O
<div id=“Capa2”>
T
Botonera
O
</div>
N Contenido
E
<div id=“Capa3”>
R
Contenido
A
</div>
