INTRODUCCIÓN A CSS 3

1.AÑADIR ESTILOS A NUESTRO HTML

● Podemos añadir CSS a nuestro HTML de cuatro formas

○ Estilos In-line
○ Etiqueta Style
○ Directiva @import
○ Etiqueta link
1.1.-Estilos In-line

● Consiste en incluir el estilo usando el atributo style de las etiquetas.

● Observar que estilo va seguido de un “=” y una pareja atributo:valor , ambos

entre comillas.
1.2.-Etiqueta Style

● Me permite definir todos los estilos desde la página desde un único sitio, que
suele ser la cabecera.

● Si el sitio está compuesto de muchas páginas requiere mucho trabajo realizar

cambios en los estilos.
1.3.-Directiva @import

● Permite importar un fichero css en nuestro fichero html

● Permite hacer cambios en toda la web tocando un único fichero. El

inconveniente es que algunos navegadores detiene la descarga del resto de
la página hasta que se ha descargado el fichero

1.4.-Etiqueta link

● Es la opción recomendada.

● Tiene tres atributos donde se indica

○ El fichero que quiero enlazar (href)
○ Qué tipo de fichero es (type)
○ La relación entre el documento y el documento enlazado (rel)

2.EL MODELO DE CAJAS

● En CSS todos los elementos de una página son cajas. Esto significa que
todos tienen la siguiente estructura visual.
 ● Debemos distinguir las siguientes zonas
○ El contenido que es el texto de las etiquetas de texto, la imagen en
las etiquetas de imagen,..
○ El padding es la distancia que existe entre el contenido y el borde de
la caja.
○ El borde que es el elemento que marca la división entre el elemento y
el resto de los elementos de la página.
○ El margen es la distancia entre el elemento y el resto de los elementos
de la página.
2.1.-Comportamiento de las cajas

● Los elementos pueden clasificarse en elementos en bloque y elementos en

línea
○ Elementos en bloque:Son elementos se separan verticalmente de los
elementos anteriores y posteriores. Es como si provocan un salto de
línea antes y después

.
● Los elementos en línea se van sucediendo a lo largo de la misma
línea, mientras caben, uno detrás del otro y de izquierda a derecha.
Cuando no caben pasan a la línea siguiente.
○ Fluyen dependiendo de la anchura de la pantalla de nuestro
navegador, este fluir es clave a la hora de maquetar.
Es muy importante saber de qué tipo de elemento es la etiqueta que estamos
usando.

3.SELECTORES

● Permiten seleccionar los elementos a los que queremos darle estilos.

● Los selectores son reglas o patrones que nos permiten seleccionar los
distintos elementos de la página web para modificar sus propiedades
● La sintaxis general de un selector es:
Selector {
propiedad1:valor1;
propiedad2:valor2;
….
propiedadn:valor2;
}
● Selector hace referencia a la regla que aplicaremos para seleccionar uno o
varios elementos de la página para aplicar estilos.
● propiedad_i son las propiedades que deseamos modificar
● valor_i:es el valor que le damos a la propiedad

3.1.-Algunos selectores

● * Selector universal. Selecciona todos los elementos.

● #identificador. Selecciona el elemento que tenga ese valor en el atributo id
● .identificador. Selecciona los elementos que tengan ese valor en el atributo
class.
 ● etiqueta. Selecciona esas etiquetas concretas
● selector1, selector2. Se aplican estilos a todos los elementos seleccionados
por ambos
● selector 1 selector 2 .Aplicar estilos a los elementos que están dentro de
selector 2 y que a su vez están dentro de selector 1
○ Ejemplo
li li {} =>Selecciona los li que están dentro de otro li
● selector 1>selector 2 .Aplicar estilos a los elementos seleccionados por
selector 2 que a su vez son hijos directos de selector 1
● selector1+selector2. Aplicar estilos (selecciono) los elementos que
cumplen la regla selector 2 y que están justo después de los que
cumplen la regla selector 1
○ Ejemplo p+h2{} =>doy estilos a todos los h2 despues del parrafo
● selector 1 ~selector 2. Ahora están justo antes
○ Ejemplo:
■ p ~ h3 {}. Doy estilos a los h3 que están antes del párrafo
● [atributo exp valor], siendo expr(), ~,=,|,$=,*...).Para seleccionar elementos
atendiendo al valor de sus atributos.

Algunos ejemplos del uso de selectores.

1.

En cascada significa que

● Los estilos de los elementos padre se van propagando hacia abajo
● Si hay más de una regla que se pueden aplicar al mismo elemento y hay
conflicto se aplica lo más específico

4.ALGUNAS PROPIEDADES

● La lista completa de propiedades podemos encontrarla en

https://developer.mozilla.org/es/docs/Web/CSS/Reference
● Algunas propiedades
https://developer.mozilla.org/es/docs/Web/CSS/CSS_Properties_Reference
● Veremos solo las siguientes propiedades
○ Color
○ Fondos
○ Dimensiones y unidades
○ Márgenes, bordes y padding
○ Texto

4.1.-Colores
 ● Podemos establecer el color de la web con la propiedad color

Ejemplo: p{
color:red;
}

● También se puede expresar el color en notación hexadecimal o RGB

4.2.-Fondos

● Las propiedades más destacadas para el fondo son:

○ background-color. Establece el color de fondo
○ background-image.Establece una imagen de fondo
○ background-repeat.Especifica cómo se repite la imagen de fondo.
Puede tomar varios valores
○ background-origin.Establece donde queremos que se repita la imagen
4.3.-Dimensiones y unidades

● Podemos usar varias unidades

4.4.-Márgenes, bordes y Paddings

● Son propiedades para establecer las dimensiones de la caja.

● Para los margenes y el relleno tenemos varias formas de acerlo.Si tenemos
en cuenta que A(Arriba)-D(Derecha)-AB(Abajo)-IZQ(izquierda)
● Para el padding es igual pero reemplazando margin por padding.
● Para los bordes hay varias posibilidades

● Para el texto hay muchas opciones

5.PSEUDO SELECTORES

● Además de los selectores tradicionales disponemos de

○ pseudoselectores
○ pseudoelementos
● Los pseudoselectores son palabras claves que se añaden a los selectores y
nos indican una estado determinado de los elementos seleccionados.
5.1.-pseudoselectores

● Tiene la sintaxis

● Podemos dividirlos en selectores de estado y posición

5.1.1.-Explicación de los pseudoselectores de estado
1. :link indica que un enlace no está visitado todavía
2. :visited.Indica que el enlace ha sido visitado
3. :enable.Permite seleccionar elementos que están habilitados.
4. :disable.Deshabilitado
5. :checked.Elementos de un formulario que se hayan seleccionado.
6. :required.Seleccionar elementos obligatorios del formulario
7. :optional.Elementos no obligatorios
8. :focus. Elemento del formulario donde tengo el cursor
9. :hover.Permite seleccionar los elementos sobre los que está el ratón
10. :empty.Elementos vacíos
11. ….
5.1.2.-Explicación de los pseudoselectores de posición
1. :first.Seleccionamos la primera ocurrencia del selector
2. :first-child.Elementos que son el primer hijo del árbol.
3. :first-of-type.La primera ocurrencia del tipo de elementos de tipo ‘type’ que ha
seleccionado el selector
4. :last. La última ocurrencia del selector
 5. :last-child.Elementos seleccionados que son el último hijo
6. :last-of-type.El último de su tipo
7. :...

5.2.-pseudoelementos

● Tienen la sintaxis

1. ::first-line=> La primera línea

2. ::first-letter=>La primera letra
3. ::after=>Elementos que están antes
4. ::before=>Elementos que están después
5. ::selected=>Seleccionar elementos que han sido seleccionados.