Clase 3 - CSS

TITULACION II –
PROGRAMACIÓN WEB
Docente: Lsi. Verónica Freires Avilés
Licenciada en Sistemas de Información
Magister en Sistemas de Información Gerencial
INTRODUCCIÓN CSS
• CSS ES EL LENGUAJE QUE USAMOS PARA DISEÑAR UN DOCUMENTO HTML.
• CSS DESCRIBEN CÓMO DEBEN MOSTRARSE LOS ELEMENTOS HTML.
¿QUÉ ES CSS?
• CSS SIGNIFICA HOJAS DE ESTILO EN CASCADA
• CSS DESCRIBE CÓMO SE DEBEN MOSTRAR LOS ELEMENTOS HTML EN LA PANTALLA, EL
PAPEL O EN OTROS MEDIOS
• CSS AHORRA MUCHO TRABAJO. PUEDE CONTROLAR EL DISEÑO DE VARIAS PÁGINAS WEB A
LA VEZ
• LAS HOJAS DE ESTILO EXTERNAS SE ALMACENAN EN ARCHIVOS CSS
¿POR QUÉ USAR CSS?
CSS SE USA PARA DEFINIR ESTILOS PARA SUS PÁGINAS WEB, INCLUIDO EL DISEÑO,
EL DISEÑO Y LAS VARIACIONES EN LA VISUALIZACIÓN PARA DIFERENTES
DISPOSITIVOS Y TAMAÑOS DE PANTALLA.
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
SINTAXIS CSS
UNA REGLA CSS CONSTA DE UN SELECTOR Y UN BLOQUE DE DECLARACIÓN.
• EL SELECTOR APUNTA AL ELEMENTO HTML QUE DESEA DISEÑAR.

• EL BLOQUE DE DECLARACIÓN CONTIENE UNA O MÁS DECLARACIONES SEPARADAS
POR PUNTO Y COMA.
• CADA DECLARACIÓN INCLUYE UN NOMBRE DE PROPIEDAD CSS Y UN VALOR,
SEPARADOS POR DOS PUNTOS.
• VARIAS DECLARACIONES CSS SE SEPARAN CON PUNTO Y COMA, Y LOS BLOQUES
DE DECLARACIÓN ESTÁN RODEADOS POR LLAVES.
p {
color: red;
text-align: center;
}
EJEMPLO EXPLICADO
• P ES UN SELECTOR EN CSS (APUNTA AL ELEMENTO HTML QUE DESEA DISEÑAR:
<P>).
• COLOR ES UNA PROPIEDAD, Y RED ES EL VALOR DE LA PROPIEDAD

• TEXT-ALIGN ES UNA PROPIEDAD, Y CENTER ES EL VALOR DE LA PROPIEDAD
SELECTORES DE CSS
SELECTOR DE ELEMENTOS CSS
• EL SELECTOR DE ELEMENTOS SELECCIONA ELEMENTOS HTML EN FUNCIÓN DEL
NOMBRE DEL ELEMENTO.
p {
text-align: center;
color: red;
}
SELECTOR DE ID DE CSS
• LA IDENTIFICACIÓN DE UN ELEMENTO ES ÚNICA DENTRO DE UNA PÁGINA, POR LO
QUE EL SELECTOR DE IDENTIFICACIÓN SE USA PARA SELECCIONAR UN ELEMENTO
ÚNICO.
#para1 {
text-align: center;
color: red;
}
SELECTOR DE CLASE CSS
• EL SELECTOR DE CLASE SELECCIONA ELEMENTOS HTML CON UN ATRIBUTO DE
CLASE ESPECÍFICO.
.center {
text-align: center;
color: red;
}
SELECTOR UNIVERSOAL DE CSS

• EL SELECTOR UNIVERSAL (*) SELECCIONA TODOS LOS ELEMENTOS HTML DE LA
PÁGINA.
* {
text-align: center;
color: blue;
}
SELECTOR DE AGRUPACIÓN CSS
• EL SELECTOR DE AGRUPACIÓN SELECCIONA TODOS LOS ELEMENTOS HTML CON LAS
MISMAS DEFINICIONES DE ESTILO.
h1 {
text-align: center;
color: red;
}
h2 { h1, h2, p {
text-align: center; text-align: center;
color: red; color: red;
} }
p {
text-align: center;
color: red;
}
CÓMO AGREGAR CSS
CUANDO UN NAVEGADOR LEE UNA HOJA DE ESTILO, FORMATEARÁ EL DOCUMENTO
HTML DE ACUERDO CON LA INFORMACIÓN DE LA HOJA DE ESTILO.
TRES FORMAS DE INSERTAR CSS

•HAY TRES FORMAS DE INSERTAR UNA HOJA DE ESTILO:
•CSS EXTERNO
•
CSS INTERNO <style>
• SE PUEDE USAR UNA HOJA DE ESTILO INTERNA SI UNA SOLA PÁGINA HTML TIENE UN ESTILO ÚNICO. body {
• EL ESTILO INTERNO SE DEFINE DENTRO DEL ELEMENTO <STYLE>, DENTRO DE LA SECCIÓN DE CABECERA.
background-color: linen;
}
• CSS EN LÍNEA h1 {
SE PUEDE USAR UN ESTILO EN LÍNEA color: maroon;
PARA APLICAR UN ESTILO ÚNICO A
UN SOLO ELEMENTO.
margin-left: 40px;
}
</style>
<h1 style="color:blue;text-align:center;">UAE</h1>
<p style="color:red;">AGRARIA</p>
CSS EXTERNO
• ¡CON UNA HOJA DE ESTILO EXTERNA, PUEDE CAMBIAR LA APARIENCIA DE UN SITIO WEB
COMPLETO CAMBIANDO SOLO UN ARCHIVO!
• CADAPÁGINA HTML DEBE INCLUIR UNA REFERENCIA AL ARCHIVO DE HOJA DE ESTILO

EXTERNO DENTRO DEL ELEMENTO <LINK>, DENTRO DE LA SECCIÓN DE ENCABEZADO.
<!DOCTYPE html> Archivo: estilos.css

<html>
<head> h1 {
<link rel="stylesheet" href=”estilos.css"> text-align: center;
</head> color: red;
<body> }
<h1>This is a heading</h1> p {
<p>This is a paragraph.</p> text-align: center;
color: red;
</body> }
</html>
COLORES CSS
• Los colores se especifican utilizando nombres de color predefinidos o valores RGB, HEX,
HSL, RGBA, HSLA.
NOMBRES DE COLORES CSS
En CSS, se puede especificar un color usando un nombre de color predefinido
div {
background-color: green;
opacity: 0.3;
}
• VALORES DE COLOR CSS
• En CSS, los colores también se pueden especificar usando valores RGB, valores HEX,
valores HSL, valores RGBA y valores HSLA
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
LISTAS CSS
LISTAS HTML Y PROPIEDADES DE LISTAS CSS
EN HTML, HAY DOS TIPOS PRINCIPALES DE LISTAS:

• LISTAS DESORDENADAS (<UL>) - LOS ELEMENTOS DE LA LISTA ESTÁN MARCADOS CON VIÑETAS
• LISTAS ORDENADAS (<OL>) - LOS ELEMENTOS DE LA LISTA ESTÁN MARCADOS CON NÚMEROS O LETRAS
LAS PROPIEDADES DE LA LISTA CSS LE PERMITEN:

• ESTABLECER DIFERENTES MARCADORES DE ELEMENTOS DE LISTA PARA LISTAS ORDENADAS
• ESTABLEZCA DIFERENTES MARCADORES DE ELEMENTOS DE LISTA PARA LISTAS DESORDENADAS
• ESTABLECER UNA IMAGEN COMO MARCADOR DE ELEMENTO DE LISTA
• AGREGAR COLORES DE FONDO A LISTAS Y ELEMENTOS DE LISTA
MARCADORES DE ELEMENTOS DE LISTA DIFERENTES

• LA LIST-STYLE-TYPE PROPIEDAD ESPECIFICA EL TIPO DE MARCADOR DE ELEMENTO DE LISTA.
• EL SIGUIENTE EJEMPLO MUESTRA ALGUNOS DE LOS MARCADORES DE ELEMENTOS DE LISTA DISPONIBLES
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}

Clase 3 - CSS

Cargado por

Copyright:

Formatos disponibles

Clase 3 - CSS

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Clase 3 - CSS

Cargado por

Copyright:

Formatos disponibles

TITULACION II –

• EL SELECTOR APUNTA AL ELEMENTO HTML QUE DESEA DISEÑAR.

• COLOR ES UNA PROPIEDAD, Y RED ES EL VALOR DE LA PROPIEDAD

SELECTOR UNIVERSOAL DE CSS

TRES FORMAS DE INSERTAR CSS

• CADAPÁGINA HTML DEBE INCLUIR UNA REFERENCIA AL ARCHIVO DE HOJA DE ESTILO

<!DOCTYPE html> Archivo: estilos.css

EN HTML, HAY DOS TIPOS PRINCIPALES DE LISTAS:

LAS PROPIEDADES DE LA LISTA CSS LE PERMITEN:

MARCADORES DE ELEMENTOS DE LISTA DIFERENTES

También podría gustarte