IDW2022CSS001

Vista previa del material en texto

Las Hojas de Estilo en Cascada (Cascading Style Sheets) es el 
estándar para controlar el aspecto o presentación de 
documentos web.
CSS es un lenguaje con su propia sintaxis, y permite separar el 
contenido web de su presentación.
CSS
Dentro de un proyecto web se puede tener un sólo archivo .css 
en el que se definan todos los estilos que usará el proyecto.
CSS
Controles precisos de tipo y diseño. Es posible lograr una 
precisión similar a la de una impresión usando CSS. 
Menos trabajo. Se puede cambiar la apariencia de un sitio 
completo editando una hoja de estilo. Esto también asegura la 
coherencia del formato en todo el sitio.
Sitios más accesibles. Cuando la presentación es gestionada 
por CSS, se puede incrementar su contenido de manera 
significativa, haciéndolo más accesible para todos los 
dispositivos
CSS − Beneficios
El poder de CSS
El poder de CSS
El poder de CSS
Comenzar con un documento que haya sido marcado en 
HTML.
Escribir reglas de estilo sobre cómo se deberían ver ciertos 
elementos.
Adjuntar las reglas de estilo al documento. Cuando el 
navegador muestra el documento, sigue sus reglas para 
representar elementos.
Cómo funcionan las CSS
Recordar que es importante elegir elementos que describan 
con precisión el significado del contenido.
El marcado crea la estructura del documento, a veces conocida 
como capa estructural, sobre la cual se puede aplicar la capa de 
presentación.
Comprender la estructura del documento y las relaciones entre 
los elementos es fundamental para el trabajo con hojas de 
estilo.
Marcar el Documento
Una hoja de estilo está hecha de una o más instrucciones de 
estilo (llamadas reglas de estilo) que describen como un 
elemento o grupo de elementos debería mostrarse.
El primer paso al aprender CSS es familiarizarse con las partes 
de una regla:
El selector indica el 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.
Escribir las Reglas
El siguiente ejemplo contiene dos reglas.
La primera hace que todos los elementos h1 del documento 
sean de color verde y estén centrados; la segunda especifica 
que los párrafos deben estar en una fuente grande, sans-serif.
Escribir las Reglas
Los selectores de CSS se utilizan para "encontrar" (o seleccionar) los 
elementos HTML que se quieren diseñar.
Selectores simples — seleccionar elementos basados en nombre, id, clase
Selectores combinadores — seleccionar elementos en función de una 
relación específica entre ellos
Selectores de pseudoclase — seleccionar elementos en función de un 
determinado estado
Selectores de pseudoelementos — seleccionar y diseñar una parte de un 
elemento
Selectores de atributos — seleccionar elementos en función de un atributo 
o valor de atributo
Explicaremos en principio los selectores de CSS más básicos.
Selectores de CSS
El selector de elementos selecciona elementos HTML en 
función del nombre del elemento.
Ejemplo:
Aquí, todos los elementos <p> en la página estarán alineados al 
centro, con un color de texto rojo.
El selector de elementos CSS
El selector de elementos CSS
El selector de id usa 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 usa para seleccionar un elemento único.
Para seleccionar un elemento con una identificación específica, se escribe un 
carácter hash (#), seguido de la identificación del elemento.
Ejemplo:
La siguiente regla CSS se aplicará al elemento HTML con id="para1"
El selector de ID de CSS
El selector de ID de CSS
El selector de clase selecciona elementos HTML con un atributo de clase 
específico.
Para seleccionar elementos con una clase específica, se escribe un carácter 
de punto (.), seguido del nombre de la clase.
Ejemplo
En este ejemplo, todos los elementos HTML con class="center" estarán en 
rojo y alineados al centro:
El selector de clases CSS
El selector de clases CSS
También puede determinar que solo los elementos específicos HTML se 
vean afectados por una clase.
Ejemplo
En este ejemplo, solo los 
elementos <p> con class="center" 
estarán en rojo y alineados al 
centro:
El selector de clases CSS
Los elementos HTML también pueden referirse a más de una clase.
Ejemplo:
En este ejemplo, el elemento <p> 
se diseñará de acuerdo con 
class="center" y class="large":
El selector de clases 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 universal de CSS
El selector de agrupación selecciona todos los elementos HTML con las 
mismas definiciones de estilo.
Será mejor agrupar los selectores, para 
minimizar el código, separando cada selector 
con una coma.
El selector de agrupación CSS
Hay tres formas de insertar una hoja de estilo.
CSS externa
Una hoja de estilo externa es un documento de texto separado que contiene 
una serie de reglas de estilo. Se debe nombrar con el sufijo .css. Este 
documento .css se enlaza (por medio del elemento link) o se importa 
(mediante la regla @import en una hoja de estilo) a uno o más documentos 
HTML.
Adjuntar los estilos al documento
CSS externa
 miestilo.css
Adjuntar los estilos al documento
CSS interna o incrustada
El estilo interno se define dentro del elemento <style>, en la sección de 
cabecera.
Adjuntar los estilos al documento
CSS en línea
Se puede aplicar propiedades y valores a un solo elemento utilizando el 
atributo style en el propio elemento
Adjuntar los estilos al documento
Conceptos Importantes
Herencia
Así como los padres transmiten rasgos a sus hijos, los elementos HTML con 
estilo transmiten ciertas propiedades de estilo a los elementos que 
contienen.
párrafo sin estilo
párrafo con estilo
El elemento em heredó los estilos del párrafo en el que se encuentra.
Conceptos Importantes
Estructura del Documento
Los documentos HTML tienen una estructura o jerarquía implícita.
Se puede visualizar esta estructura como un árbol al revés, ramificándose 
desde la raíz.
Conceptos Importantes
Algunas propiedades de la hoja de estilo se heredan y otras no. En general, 
las propiedades relacionadas con el estilo del texto (tamaño de fuente, 
color, estilo y similares) se transmiten. Las propiedades como bordes, 
márgenes, fondos, etc., que afectan al área encuadrada alrededor del 
elemento, no suelen transmitirse.
Conceptos Importantes
Algunas propiedades de la hoja de estilo se heredan y otras no. En general, 
las propiedades relacionadas con el estilo del texto (tamaño de fuente, 
color, estilo y similares) se transmiten. Las propiedades como bordes, 
márgenes, fondos, etc., que afectan al área encuadrada alrededor del 
elemento, no suelen transmitirse.
Conceptos Importantes
Estilos en conflicto: La Cascada
La cascada se refiere a lo que sucede cuando varias fuentes de estilo 
compiten por el control de los elementos de una página: la información de 
estilo se transmite ("en cascada") hasta que es sobreescrita por una regla de 
estilo con más peso. El peso se considera en función de la prioridad de la 
fuente de la regla de estilo, la especificidad del selector y el orden de la 
regla.
miestilo.css
Colores CSS
Se especifican mediante el nombre predefinido del color, o por los valores 
RGB, HEX, HSL, RGBA, HSLA.
CSS/HTML admite 140 nombres de colores estándar.
Colores CSS
Se puede cambiar el color de fondo de los elementos, el color de texto, el 
color del borde.
Valores de Colores CSS
Backgrounds en CSS
Se utilizan para agregar efectos de fondo en los elementos.
Backgrounds en CSS
Se pueden especificar las propiedades de fondo en una sóla propiedadbackground denominada propiedad abreviada. Pero se debe respetar el 
siguiente orden:
background-color
background-image
background-repeat
background-attachment
background-position
Bordes en CSS
Se pueden especificar el estilo, ancho y color de los bordes de los elementos.
border-width
border-style (requerido)
border-color
border es la propiedad abreviada, con este 
orden:
height, width y max-width
Para especificar la altura y el ancho de un elemento se utilizan las propiedades 
height y width. La propiedad max-width se utiliza para determinar el ancho 
máximo de un elemento.
height, width y max-width
height, width y max-width
Todos los elementos HTML pueden ser considerados como cajas. En CSS, el 
término "modelo de caja" se utiliza cuando se habla de diseño y 
maquetación.
El modelo de caja CSS es esencialmente una caja que envuelve cada 
elemento HTML, y se compone de: márgenes, bordes, el relleno y el 
contenido real.
El Modelo de Caja CSS
Content - El contenido de la caja, donde aparece texto o imágenes.
Padding - Limpia un área alrededor del contenido. Es transparente.
Border - Un borde que rodea el relleno y el contenido.
Margin - Limpia un área fuera del borde. Es transparente.
El modelo de caja nos permite agregar un borde alrededor de los elementos, 
y definir el espacio entre los elementos.
El Modelo de Caja CSS
Ancho total del elemento = width + left padding + right padding + left border
 + right border + left margin + right margin
Altura total del elemento = height + top padding + bottom padding + top border 
 + bottom border + top margin + bottom margin
El Modelo de Caja CSS
El Modelo de Caja CSS
Fuentes en CSS
Hay cinco familias 
de fuentes 
genéricas.
Fuentes en CSS
Se utiliza la propiedad font-family para especificar la fuente de un texto.
Fuentes en CSS
Propiedades
font-style: puede ser normal, italic, u oblique.
font-weight: puede ser normal o bold.
font-size: establece el tamaño del texto.
El valor del tamaño puede ser absoluto o relativo.
1em es igual al tamaño de fuente actual. El tamaño de texto predeterminado en los 
navegadores es 16px. Entonces, el tamaño predeterminado de 1em es 16px.
Tamaño de fuente responsive
El tamaño del texto se puede configurar con una unidad vw, que significa el 
"ancho de la ventana gráfica".
vw : relativo al 1% del ancho de la ventana gráfica.
ventana gráfica = el tamaño de la ventana del navegador.
Si la ventana gráfica mide 50cm de ancho, 1vw = 0.5cm.
Fuentes en CSS
Fuentes de Google
Fuentes en CSS
Se puede agregar estilo a los enlaces con cualquier propiedad CSS (por 
ejemplo color, font-family, background, etc.).
Además, los enlaces pueden tener un estilo diferente según el estado en el 
que se encuentren.
Los cuatro estados de enlace son:
a:link — un enlace normal, no visitado
a:visited — un enlace que el usuario ha visitado
a:hover — un enlace cuando el usuario pasa el mouse sobre él
a:active — un enlace en el momento en que se hace clic
Enlaces con CSS
Enlaces con CSS