Características básicas
CSS
Certificado de profesionalidad
IFCD0110 Confección y publicación de páginas web
MÓDULO FORMATIVO 1
MF0950_2 Construcción de páginas web
UNIDAD FORMATIVA 2
UF1303 Elaboración de hojas de estilo
Duración: 70h
Formador: Manuel de la Concepción Sebastiá
Introducción
Cuando construimos sitios web utilizamos varios
lenguajes distribuidos en varias capas independientes.
¿Qué es CSS?
CSS es un lenguaje de hojas de estilos creado para
controlar el aspecto o presentación de los
documentos definidos con HTML.
Al crear una página web, se utiliza en primer lugar el
lenguaje HTML para marcar los contenidos, es decir,
para designar la función de cada elemento dentro de
la página: párrafo, titular, texto destacado, tabla, lista
de elementos, etc.
Una vez creados los contenidos, se utiliza el lenguaje
CSS para definir el aspecto de cada elemento: color,
tamaño y tipo de letra del texto, separación horizontal
y vertical entre elementos, posición de cada elemento
dentro de la página, etc.
Vamos a mostrar una misma página HTML que se
muestra con hojas de estilo diferentes
¿Dónde crear la hoja de estilos?
Puedes crear los estilos CSS en tres ubicaciones
diferentes:
1. En el elemento HTML al que se aplica el estilo, con
el atributo style.
2. En la página HTML, en el elemento <head>.
3. En un archivo externo que tendrá la extensión .css
y que se vinculará a la página HTML con el
elemento <link> o se importará con una regla
@import.
Incluir CSS en los elementos HTML
Solamente se utiliza en determinadas situaciones en
las que se debe incluir un estilo muy específico para
un solo elemento concreto (es el peor y el menos
utilizado).
Incluir CSS en el mismo documento HTML
Se emplea la etiqueta <style> de HTML y solamente
se pueden incluir en la cabecera del documento (sólo
dentro de la sección <head>).
Definir CSS en un archivo externo
En este caso, todos los estilos CSS se incluyen en un
archivo de tipo CSS que las páginas HTML enlazan
mediante la etiqueta <link>.
Un archivo de tipo CSS no es más que un archivo
simple de texto cuya extensión es .css
Se pueden crear todos los archivos CSS que sean
necesarios y cada página HTML puede enlazar tantos
archivos CSS como necesite.
Definir CSS en un archivo externo con @import
Comentarios
Los comentarios se utilizan para explicar el código, y
pueden ayudar a editar el código fuente en una fecha
posterior.
Comienza con / * y termina con * /.
Componentes de un estilo CSS básico
Selector Declaración
Propiedad Valor Propiedad Valor
Regla CSS
1. Regla: cada uno de los estilos que componen una
hoja de estilos CSS. Cada regla está compuesta de
una parte de "selectores", un símbolo de "llave de
apertura" ({), otra parte denominada
"declaración" y por último, un símbolo de "llave
de cierre" (}).
2. Selector: indica el elemento o elementos HTML a
los que se aplica la regla CSS.
3. Declaración: especifica los estilos que se aplican a
los elementos. Está compuesta por una o más
propiedades CSS.
4. Propiedad: característica que se modifica en el
elemento seleccionado, como por ejemplo su
tamaño de letra, su color de fondo, etc.
5. Valor: establece el nuevo valor de la característica
modificada en el elemento.
• 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.
• Una declaración CSS siempre termina con un punto
y coma, y los bloques de declaraciones están
rodeados por llaves.
Tipos de selectores básicos
1. Universal (*)
2. Etiqueta
3. ID (#)
4. Clase (.)
5. Atributo ([ ])
Selector universal (asterisco *)
Se utiliza para seleccionar todos los elementos de la
página.
Selector de etiqueta
Selecciona todos los elementos de la página cuya
etiqueta HTML coincide con el valor del selector.
Selector de ID (#)
Utiliza el atributo id de un elemento HTML para
seleccionar un elemento específico, único dentro de
una página.
Selector de clase (.)
Selecciona los elementos con un atributo de clase
específica.
Vamos a seleccionar los h1 que utilizan la clase .especial
Selector de atributos ([ ])
Permiten seleccionar elementos HTML en función de
sus atributos y/o valores de esos atributos.
[atributo]
elemento[atributo]
elemento[atributo="valor"]
elemento[atributo^="valor"]
…más expresiones regulares…
Ejemplos de selectores de atributo
span[title$="Venecia"] identifica los elementos <span> que tienen el atributo title y cuyo valor
termina por Venecia.
span[title*="Venecia"] identifica los elementos <span> que tienen el atributo title y al menos
una vez el valor Venecia.
span[title~="Venecia"] identifica los elementos <span> que tienen el atributo title y al menos
una vez el valor Venecia, separado de otros valores con un espacio.
a[hreflang|="en"] identifica los elementos <a> que tienen el atributo hreflang cuyo valor es
estrictamente igual a en, o que empieza por en y va seguido inmediatamente por el carácter -
. Esto permitirá apuntar a los atributos hreflang="en", hreflang="en-en", hreflang="en-us",
etc.
Las reglas de nomenclatura
El nombre de los selectores debe respetar algunas reglas:
• No debe empezar por una cifra.
• No debe contener espacios, caracteres acentuados ni
caracteres especiales, como: +, *, /, etc.
• Puede contener los caracteres guion - y guion bajo _ en
cualquier posición dentro del nombre.
• Es sensible a la diferencia entre mayúsculas y minúsculas.
Combinación de selectores
1. Agrupar selectores
2. Descendientes
3. Hijos (>)
4. Hermano inmediato o adyacente (+)
5. Hermano (~)
Agrupación de selectores
Si tienes elementos con las mismas definiciones de
estilo, como este:
Será mejor agruparlos, para reducir al mínimo el
código (separar cada selector con una coma).
Selector descendiente
Selecciona los elementos que se encuentran dentro
de otros elementos.
No debes confundir con la agrupación de selectores
Selector hijo (>)
Se utiliza para seleccionar un elemento que es hijo
directo de otro elemento.
Selector hermano inmediato o adyacente (+)
elemento1 y elemento2 deben ser elementos
hermanos, por lo que su elemento padre debe ser
el mismo.
elemento2 debe aparecer inmediatamente después
de elemento1 en el código HTML de la página.
Selector hermano (~)
No es necesario que los dos elementos vayan
inmediatamente seguidos.
Conflicto entre reglas CSS
En una estructura de página elaborada, van a intervenir
muchas reglas y puede que algunas de ellas entren en
conflicto, porque apuntan a los mismos elementos en
la página, con las mismas propiedades. Por lo tanto,
hay que aplicar criterios concretos para saber cuál es la
propiedad que se debe aplicar.
Reglas en la aplicación de los estilos
1. Herencia
2. Especificidad de los selectores
3. Cascada
4. Argumento “!important”
Herencia
La regla de la herencia indica que los elementos hijos
heredan propiedades CSS de su padre.
Cálculo de la especificidad
A B C
Nº selectores Nº selectores de Nº selectores de
de tipo ID tipo Clase tipo Elemento
li: solo hay un selector de elemento. Por lo tanto, a=0, b=0 y
c=1. Esto da una especificidad = 001.
ul li: hay dos selectores de elemento. Por lo tanto, a=0, b=0 y
c=2. Esto da una especificidad = 002.
h1 + [Link]: hay un selector de clase (.intro) y dos selectores
de elemento (h1 y h2). Por lo tanto, a=0, b=1 y c=2. Esto da una
especificidad = 012.
Calcula la especificidad de los siguiente selectores
1. ul ol+li
2. ul ol [Link]
3. [Link]
4. #navbar
5. #pie-de-pagina [Link]
Cascada
CSS significa Cascading Style Sheets.
Origen exterior, desde un
archivo .css externo.
Origen interno, con los estilos
definidos en la página.
Origen en línea, con un estilo
definido en el elemento HTML.
!important
Modifica la aplicación estándar de la herencia, de la
especificidad y de la cascada.
Orden de aplicación de los estilos
Primero
• Estilos definidos en el navegador
Segundo
• Estilos definidos en la cascada.
Tercero
• Cálculo de la especificidad
Cuarto
• Argumento de importancia.
Lee el artículo y responde las preguntas
10 La evolución del CSS
¿Qué novedades introduce CSS3?
Respuestas
ul ol+li, hay tres selectores de elemento. Por lo tanto, a=0 b=0 y c=3. Esto da una especificidad = 003.
ul ol [Link]: hay un selector de clase (.especial) y tres selectores de elemento (ul, ol y li). Por lo
tanto, a=0, b=1 y c=3. Esto da una especificidad = 013.
[Link]: hay un selector de elemento (p) y dos selectores de clase (.resultado e
.importante). Por lo tanto, a=0, b=2 y c=1. Esto da una especificidad = 021.
#navbar: solo hay un único selector de identificación. Por lo tanto, a=1, b=0 y c=0. Esto da una
especificidad = 100.
#pie-de-pagina [Link]: hay un selector de identificación (#pie-de-pagina), un selector de clase
(.credito) y un selector de elemento (p). Por lo tanto, a=1, b=1 y c=1. Esto da una especificidad = 111.
Referencia rápida CSS 2.1
[Link]
Referencia CSS
[Link]
Estructura básica
Crea la siguiente estructura básica con etiquetas
HTML 5
Ejercicio 1
Define el color rojo para el subtítulo del primer
artículo.
Define los estilos en la propia etiqueta <h2>.
Ejercicio 2
Define el color rojo para todas las etiquetas <h2> del
documento.
Define los estilos en el propio documento.
Ejercicio 3
Define los estilos en un fichero externo llamado
[Link] creado dentro de una carpeta llamada css.
Ejercicio 4
Aplicar las propiedades “font-family: Arial”, “margin:
0” y “padding: 0” a todos los elementos del
documento.
Ejercicio 5
Utiliza el selector de ID para cambiar el color de los 2
subtítulos como se muestra en la imagen.
Ejercicio 6
Mediante el selector de clase y la propiedad “text-
aling”, alinea el título de la página y varios párrafos.
Ejercicio 7
Utiliza la combinación de selectores para obtener el
menor código posible
Gracias por vuestra atención