CSS3

CSS3

1 CSS3

1.1 Selectores 4

1.2 Prefijos de CSS 8

1.3 Selectores por atributos 10

1.4 Selectores n-child 13

1.5 Manejo de imagenes 20

1.6 Bordes 22

1.7 Manejo de colores 24

1.8 Manejo de gradientes 31

1.9 Creación de una plantilla usando CSS 33

1.10 Maquetacion Blog 41

 CSS3

CSS3 - 3 Mario Torrez

Selectores

CSS es la abreviación de “Cascading Style Sheets” (Hojas de Estilo en Cascada) y consiste en

la información que define como va a ser la presentación de una web.

Para trabajar con CSS es necesario considerar a los: selectores, atributos y valores.

Selectores

Se usan para definir sobre que etiqueta HTML se aplican los Atributos y Valores. Existen tres
tipos de selectores:
- Los selectores de etiquetas HTML, los cuales se utilizan escribiendo el nombre de la etiqueta a
la que se aplica el estilo. Ejemplo: h2
- Los selectores de identificador, los que han sido creados y se aplican solo a las etiquetas que
tengan la identificación. Ejemplo: #cabe
- El selector de clase, que se escribe en el documento CSS comenzando con un punto “.” y va
seguido de un nombre. Ejemplo .miclase

Atributos
Son atributos que se pueden aplicar a las etiquetas HTML, para ello es necesario conocer los
atributos que se desea cambiar. Ejemplo: background-color

Valores
Los valores son numeros, cadenas, etc que se asignan a los atributos para cambiar su
comportamiento. Ejempo: green, 10px, etc

Creación del archivo selectores.html

CSS3 - 4 Mario Torrez

 Selección de un elemento

Para incluir estilo en la misma página usamos las etiqutas <style> y colocamos la primera rebla
que seria seleccionar todos los elementos p para cambiar el color

Resultado

Selección de los hijos de un elemento en particular

CSS3 - 5 Mario Torrez

 Resultado

Selección de un elemento adyacente

Resultado

CSS3 - 6 Mario Torrez

 Selección de un elemento sibling (hermano

Resultado

CSS3 - 7 Mario Torrez

Prefijos de CSS

Crear el archivo prefijos.html

CSS3 - 8 Mario Torrez

CSS3 - 9 Mario Torrez
Selectores por atributos

Creación del archivo atributos.html

Resultado

CSS3 - 10 Mario Torrez

 Seleccion de atributos de un elmento que comienzan con cierta cadena

Resultado

Selección de atributos de un elemento que terminan en cierta cadena

Resultado

CSS3 - 11 Mario Torrez

 Resultado

CSS3 - 12 Mario Torrez

Selectores n-child

Crear el archivo selectores_nchild.html

CSS3 - 13 Mario Torrez

 Resultado

Selección del primer elemento y ultimo elemento

CSS3 - 14 Mario Torrez

 Resultado

Selección del primer y ultimo elemento de una lista

CSS3 - 15 Mario Torrez

 Resultado

Selección de un elemento en posición específica

CSS3 - 16 Mario Torrez

 Resultado

Recorridos en intervalos

CSS3 - 17 Mario Torrez

 Resultado

Recorrido a partir de cierta posicion

CSS3 - 18 Mario Torrez

CSS3 - 19 Mario Torrez
Manejo de imagenes

Incluir imagenes con CSS

Utilizando los estilos creados en colores.html, se crean los siguientes div donde se incluyen
imagenes

1) Inclusión de una imagen sin repeticion

2) Imagen que se repite en todo el div
3) Repetición en el eje x
4) Repetición en el eje y

Utilizando los estilos en la pagina html

CSS3 - 20 Mario Torrez

 Resultado

CSS3 - 21 Mario Torrez

Bordes

Estilos para bordes

CSS3 - 22 Mario Torrez

 Resultado

CSS3 - 23 Mario Torrez

Manejo de colores

Creación del archivo colores.html

CSS3 - 24 Mario Torrez

 Inclusión de estilos

CSS3 - 25 Mario Torrez

 Resultado

Adicionando estilos para otros formatos de colores

1) Definición del color con formato #FF0

2) Usando rgb
3) Usando rgb con porcenajes

CSS3 - 26 Mario Torrez

CSS3 - 27 Mario Torrez
 Resultado

Usando colores por nombre

Adicionamos otro div para contener las cajas con colores

La selección del color se realiza por nombre

Resultado

CSS3 - 28 Mario Torrez

 Uso de colores con rgba y hul

Agregamos las cajas para mostrar los colores

Complememtamos estilos

CSS3 - 29 Mario Torrez

 Resultado

CSS3 - 30 Mario Torrez

Manejo de gradientes

Crear los estilos para manejo de gradientes

Los gradientes nos permiten crear fondos con colores degradados, los nombres de estilos para
manejar gradientes son: linear-gradient y radial-gradient

1) Un fondo degradado que va de un color a otro

2) Fondo con varias paradas es decir degradados con varios puntos de partida
3) Fondo radiales con dos colores comenzando del centro
4) Fondo radial con cambio en la ubicación del centro del radial

Codigo en html haciendo uso de los estilos definidos previamente

CSS3 - 31 Mario Torrez

 Resultado

CSS3 - 32 Mario Torrez

Creación de una plantilla usando CSS

Creación de archivo index.html

Creación de la estructura básica

Se tendrá una estructura con tres partes separadas por la etiqueda div

CSS3 - 33 Mario Torrez

 Creamos los elementos de la cabecera

1) El titulo del sitio

2) La etiqueta nav para contener al menu de navegación
3) Las opciones se definiran en una lista usando ul y li

Div contenido

1) Los anuncios estaran contenidos en una etiqueta div

2) Cada anuncio se mostrará dentro de la etiqueta article

CSS3 - 34 Mario Torrez

 Div pie

Se mostrará un texto al final de la pagina

Salida en el navegador

CSS3 - 35 Mario Torrez

 Adicionando estilos con CSS

1) Crear el archivo estilos.css

2) Referenciar al archivo de estilos en index.html

Estilos generales

1) Para que todos los margenes y rellenos se pongan en 0

2) Definimos el tamaño y tipo de letra en toda la aplicacion

CSS3 - 36 Mario Torrez

1) Se define un color de fondo para el div
2) se define un margen inferior con un color distinto
3) Se adiciona un sombra

CSS3 - 37 Mario Torrez

1) Se define el contenedor de la lista
2) Características de cada elemento de la lista
3) La etiqueta <a> dentro de la lista
4) Los cambios de colores de acuerdo al movimiento del mouse

CSS3 - 38 Mario Torrez

 Estilos de contenido

1) Fija margenes arriba y abajo 0 para los lados 10%, con lo que se obtiene el contenido
centrado
2) Margen superior e inferior en 10px
3) Se define el tamaño de cada caja que contendrá el artículo

Estilos del pie

1) Se define un color de fondo para el el div pie

2) Se define margen y color de letras para footer

CSS3 - 39 Mario Torrez

 Salida en el navegador

CSS3 - 40 Mario Torrez

Maquetacion Blog

Creamos la estructura

Archivo index.html

CSS3 - 41 Mario Torrez

CSS3 - 42 Mario Torrez
CSS3 - 43 Mario Torrez
CSS3 - 44 Mario Torrez
 Archivo estilos.css

CSS3 - 45 Mario Torrez

CSS3 - 46 Mario Torrez
CSS3 - 47 Mario Torrez
CSS3 - 48 Mario Torrez
CSS3 - 49 Mario Torrez
CSS3 - 50 Mario Torrez
 Salida de la página terminada

CSS3 - 51 Mario Torrez