UNIVERSIDAD CENTRAL DEL ECUADOR

FACULTAD DE FILOSOFÍA, CIENCIAS Y LETRAS DE LA

EDUCACIÓN
CARRERA DE INFORMÁTICA
PROGRAMACIÓN V

Integrantes:
Cabezas Victor
Cedeño Diana
Prado Michelle
Vera Carlos
 QUE ES CSS
Las siglas CSS significan «Hojas de estilo en cascada»

• Se usa para diseñar la forma de presentar los documentos

a los usuarios — su estilo, diseño, (colores, formas,
márgenes, etc...) a uno o varios documentos de forma
masiva.

• El lenguaje CSS se basa en una serie de reglas que rigen el

estilo de los elementos en los documentos estructurados, y
que forman la sintaxis de las hojas de estilo.
 ESTRUCTURA DE CSS
■ La estructura CSS se basa en reglas que tienen el siguiente formato:

■ Selector: es el elemento HTML que vamos a seleccionar del documento para

aplicarle un estilo concreto. Por ejemplo, el elemento p.
■ Propiedad: es una de las diferentes características que brinda el lenguaje CSS.
■ Valor: Cada propiedad CSS tiene una serie de valores concretos, con los que
tendrá uno u otro comportamiento.
■ Con todo esto le iremos indicamos al navegador que, para cada etiqueta
(selector especificado) debe aplicar las reglas (propiedad y valor) indicadas.
■ De esta forma, a todas las etiquetas <p> se le aplicará el estilo especificado:
el color rojo.
■ Cada una de estas reglas se terminará con el carácter punto y coma (;).
■ En el siguiente esquema se puede ver las diferentes partes del código CSS
con sus respectivos nombres:
■ Esta incorporada a un HTML, a través del elemento style
dentro de la sección head, consiguiendo de esta manera
separar la información del estilo del código HTML
 Etiqueta de inicio
<style type=“text/css”> contenido </style>
Para ingresar estilos en etiquetas especificas se debe
nombrar a las etiquetas de la siguiente manera:
• <p class=“parrafo1”> Contenido </p>
• <table class =“tabla1”> Cotenido </table>
• <img class=“imagen1”>

El atributo CLASS se usa en HTML para indicar la clase de un elemento

<style type=“text/css”>
.parrafo1{ Parámetros}
.tabla1{Parámetros}
.imagen1{Parámetros}
body{Parámetros}
h1{Parámetros}
</style>
 Parámetros CSS
O Texto o contenido

O Tamaño de bloque

O Color fondo del bloque

O Bordes del bloque

O Estilo de bloques

O Color de los bordes

O Espaciado interno y externo

O Posicionamiento
 Parámetros texto
font-size:xx px Tamaño de letra
Color: red /#3333 Color de letra
font-family:Arial,verdana,etc Estilo de letra
font-weight:bold / lighter Grosor de fuente
line-height: xx px Distancia entre líneas
letter-spacing: xx px Distancia entre letras
word-spacing: xx px Distancia entre palabras
text-align: left/right/center/justify Alineación del texto
■ La primera regla comienza con un selector h1.
■ Contiene 3 propiedades con sus valores correspondientes.
 La primera establece el color del texto en azul.
 La segunda establece el fondo en amarillo.
 La tercera establece un marco alrededor de la cabecera de 1 pixel de ancho, sólido (no
punteado) y de color negro.
■ La segunda regla comienza con el selector p.
■ Solo contiene una declaración que establece el color en rojo.
En un navegador, el código anterior producirá el siguiente resultado:
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}

p {
color: red;
}

li {
text-shadow: 2px 2px 3px purple;
}
 Parámetros bloques
border-width: xx px Grosor del borde

border-color:verder/#0032 Color de borde

border- Estilo de borde

style:solid/doublé/insert/outset/Groove/ridge
Margin: xx px Espacio alrededor del bloque

Padding: xx px Espacio al interior del bloque

Width: xx px Ancho del bloque

Height: xx px Altura del bloque

Background:color/#0000 Color del interior del bloque

Overflow: scroll/visible/hidden/auto Acomodación del texto en el bloque

Background-image: url(…/fondo/img.png) Imagen como fondo de bloque

 Parámetro posición
Position:absolute ; top: xx px / Desplazable hacia
bottom: xx px / right: xx px / left: xx arriba, abajo,
px izquierda o derecha