Guía Sesion 03

Guía de Taller
1
Diseño y Maquetación Web – Los elementos web a través de hojas de estilo
______________________________________________________________________
_
Diseño y Maquetación Web

Los elementos web a través de hojas de estilo
Sesión 3
LOGRO DE LA SESIÓN
Personaliza los elementos del sitio web mediante hojas de estilos CSS para la aplicación de formatos.
MATERIALES
a) EQUIPOS: PC de escritorio / Laptop

b) HERRAMIENTAS: Visual Studio Code y sus extensiones
c) CONSUMIBLES:
PROCEDIMIENTO
CREACIÓN DE HOJAS DE ESTILOS
Declarar los estilos en la cabecera del documento ahorra espacio y vuelve al código más consistente y
actualizable, pero nos requiere hacer una copia de cada grupo de estilos en todos los documentos de nuestro
sitio web. La solución es mover todos los estilos a un archivo externo y luego utilizar el elemento <link> para
insertar este archivo dentro de cada documento que los necesite. Este método nos permite cambiar los estilos
por completo simplemente incluyendo un archivo diferente. También nos permite modificar o adaptar
nuestros documentos a cada circunstancia o dispositivo.
Diseño y Maquetación Web – Formación Continua

Guía de Taller
2
______________________________________________________________________
_
Sintaxis de las hojas de estilo
Una hoja de estilo es un archivo de texto plano (sin formato) en el que se define el aspecto de las etiquetas de
una página web:
Una hoja de estilo está formada por una o varias sentencias:

Guía de Taller
3
______________________________________________________________________
_
Existen dos tipos de sentencias: las reglas-arroba y las reglas:
Las reglas-arroba empiezan por el símbolo de arroba (@) pegado a un identificador y terminan por un punto y
coma (;):
Algunas reglas-arroba (@import o @namespace) deben aparecer al principio de la hoja de estilo, pero el resto
(@font-face, @media, etc.) pueden escribirse en cualquier lugar de la hoja de estilo.
Las reglas están formadas por un selector y un bloque de declaración. El bloque de declaración empieza y
acaba con llaves { }.

Guía de Taller
4
______________________________________________________________________
_
Cada declaración está formada por una o varias propiedades y sus valores correspondientes. Las propiedades
van separadas entre sí por puntos y comas. El valor (o valores) van separados de las propiedades por dos
puntos. En general, si una propiedad necesita varios valores, los valores van separados por espacios en blanco.
En general, si una propiedad admite varios valores alternativos, los valores van separados por comas.
Comentarios en las hojas de estilo
Una hoja de estilo puede contener comentarios. Los delimitadores del comentario son /* ... */ (como en el
lenguaje de programación C). Los comentarios pueden extenderse varias líneas, como ilustra el siguiente
ejemplo:
/* Author: Javier Rosales*/

h1 {
background-color: black; /*fondo negro*/
color: white; /*texto blanco*/
}

Guía de Taller
5
______________________________________________________________________
_
VINCULAR HOJAS DE ESTILOS CSS
Utilizando la línea <link rel=”stylesheet” href=”misestilos.css”> le decimos al navegador que cargue el archivo
misestilos.css porque contiene todos los estilos necesitados para presentar el documento en pantalla. Esta
práctica fue ampliamente adoptada por diseñadores que ya están trabajando con HTML5. La
etiqueta <link> referenciando el archivo CSS será insertada en cada uno de los documentos que requieren de
esos estilos:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
Mi texto
</body>
</html>
Selectores CSS
Un selector de CSS selecciona los elementos HTML a los que desea aplicar estilo.
Podemos dividir los selectores de CSS en cinco categorías:
 Selectores simples (seleccione elementos según el nombre, la identificación, la clase)

 Selectores de combinador (seleccione elementos en función de una relación específica entre ellos)
 Selectores de pseudo-clase (seleccione elementos basados en un cierto estado)
 Selectores de pseudo-elementos (seleccionar y aplicar estilo a una parte de un elemento)
 Selectores de atributos (seleccione elementos basados en un atributo o valor de atributo)
EL SELECTOR DE ELEMENTOS CSS
El selector de elementos selecciona elementos HTML en función del nombre del elemento.
Ejemplo
Aquí, todos los elementos de la página estarán alineados al centro, con un color de texto rojo:

Guía de Taller
6
______________________________________________________________________
_
El selector de id de CSS
El selector de id utiliza el atributo id de un elemento HTML para seleccionar un elemento específico.
La identificación de un elemento es única dentro de una página, por lo que el selector de identificación se
utiliza para seleccionar un elemento único.
Para seleccionar un elemento con una identificación específica, escriba un carácter de almohadilla (#), seguido
de la identificación del elemento.
Ejemplo
La siguiente regla CSS se aplicará al elemento HTML con id = "para1":
El selector de clases CSS

El selector de clases selecciona elementos HTML con un atributo de clase específico.
Para seleccionar elementos con una clase específica, escriba un punto (.), Seguido del nombre de la clase.
Ejemplo
En este ejemplo, todos los elementos HTML con class = "center" serán rojos y alineados al centro:
También puede especificar que solo los elementos HTML específicos deben verse afectados por una clase.
Ejemplo
En este ejemplo, solo los elementos con class = "center" serán rojos y alineados al centro:
Los elementos HTML también pueden hacer referencia a más de una clase.
Ejemplo
En este ejemplo, el elemento se diseñará de acuerdo con class = "center" y class = "large":

Guía de Taller
7
______________________________________________________________________
_
El selector universal de CSS

El selector universal (*) selecciona todos los elementos HTML de la página.
Ejemplo
La siguiente regla CSS afectará a todos los elementos HTML de la página:
El selector de agrupación CSS

El selector de agrupación selecciona todos los elementos HTML con las mismas definiciones de estilo.
Mire el siguiente código CSS (los elementos h1, h2 yp tienen las mismas definiciones de estilo):
Será mejor agrupar los selectores para minimizar el código. Para agrupar selectores, separe cada selector con
una coma.
Ejemplo
En este ejemplo, hemos agrupado los selectores del código anterior:

Guía de Taller
8
______________________________________________________________________
_
Todos los selectores simples de CSS
Nombre del selector Qué selecciona Ejemplo

Selector de elemento (llamado Todos los elementos HTML del p
algunas veces selector de etiqueta tipo especificado. Selecciona 
o tipo)
Selector de identificación (ID) El elemento en la página con el ID #mi-id
especificado (en una página HTML Selecciona y <a
dada, solo se permite un único id="mi-id">
elemento por ID).
Selector de clase Los elementos en la página con la .mi-clase
clase especificada (una clase Selecciona y <a class = "mi-clase">
una página).
Selector de atributo Los elementos en una página con img[src]
el atributo especificado. Selecciona <img
src="mimagen.png"> pero
no <img>
Selector de pseudoclase Los elementos especificados, pero
solo cuando esté en el estado
especificado, por ejemplo, cuando
el puntero esté sobre él.
Unidades de medida
En CSS se utilizan dos longitudes diferentes: relativa y absoluta. Es importante conocer la diferencia para
entender qué dimensiones van a tener las cosas.
Absoluta:

Guía de Taller
9
______________________________________________________________________
_
Relativa:
Ejemplo:

Guía Sesion 03

Cargado por

Información del documento

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

Guía Sesion 03

Cargado por

Copyright:

Formatos disponibles

Guía de Taller

Diseño y Maquetación Web

a) EQUIPOS: PC de escritorio / Laptop

CREACIÓN DE HOJAS DE ESTILOS

Diseño y Maquetación Web – Formación Continua

Una hoja de estilo está formada por una o varias sentencias:

Diseño y Maquetación Web – Formación Continua

Diseño y Maquetación Web – Formación Continua

Comentarios en las hojas de estilo

/* Author: Javier Rosales*/

Diseño y Maquetación Web – Formación Continua

<link rel="stylesheet" href="misestilos.css">

 Selectores simples (seleccione elementos según el nombre, la identificación, la clase)

EL SELECTOR DE ELEMENTOS CSS

Diseño y Maquetación Web – Formación Continua

El selector de clases CSS

Diseño y Maquetación Web – Formación Continua

El selector universal de CSS

El selector de agrupación CSS

Diseño y Maquetación Web – Formación Continua

Todos los selectores simples de CSS

Nombre del selector Qué selecciona Ejemplo

Diseño y Maquetación Web – Formación Continua

Diseño y Maquetación Web – Formación Continua

También podría gustarte