CURSO DE DESARROLLO WEB FRONTEND
¡HOLA, CSS!
CLASE 11
¿DÓNDE ESTAMOS? _
EL CAMINO HEROICO _
EL CAMINO HEROICO _
EL CAMINO HEROICO _
CASCADING STYLE
SHEET
HOJA DE ESTILOS
EN CASCADA
¿CÓMO SE AGREGA CSS A NUESTRA LANDING PAGE? _
<style>
.
.
</style>
Permite escribir CSS en nuestra página HTML.
<link rel="stylesheet"
href="estilos.css">
Asocia un archivo de hoja de estilos (CSS) a la página HTML. Es una alternativa más ordenada a <style>.
¿CÓMO SE HACE PARA "HABLAR EN CSS"? _
SELECTORES
OPERADORES
PROPIEDADES
VALORES
SELECTORES
SON REFERENCIAS A LOS ELEMENTOS SOBRE LOS CUALES APLICAREMOS ESTILOS _
h1 + h2 {
background: yellow;
color: black;
}SELECTORES
OPERADOR
PROPIEDADES
VALORES
#identificador
.clase
[atributo="valor"]
etiqueta
OPERADORES
PERMITEN DEFINIR REGLAS EN BASE A LA RELACIÓN ENTRE MÚLTIPLES SELECTORES.
PROPIEDADES
SON LOS ASPECTOS QUE PODEMOS MODIFICAR DE LOS ESTILOS DE UN ELEMENTO.
VALORES
ES EL CAMBIO EN SÍ QUE PODEMOS APLICAR SOBRE UNA PROPIEDAD DE UN ELEMENTO.
ESTILOS DE TEXTO _
font-family
Permite elegir la tipografía con la que vamos a mostrar el texto.
body {
font-family: Arial, Helvetica, sans-serif;
}EXISTEN TIPOS GENÉRICOS DE TIPOGRAFÍA _
(y algunas fuentes que se consideran "seguras" para la Web, en el sentido de que todo el mundo las tiene)
font-family: sans-serif;
Palo seco.
Letra con gracia.
Ancho fijo.
font-family: serif;
font-family: monospace;
font-family: Trebuchet MS, Helvetica, sans-serif;
Trebuchet MS
o Helvetica o cualquiera de palo seco.
font-family: Georgia, serif;
Georgia
o cualquier letra con gracia.
font-family: Courier New, monospace;
Courier New
o cualquiera de ancho fijo.
¿PODEMOS PONER CUALQUIER TIPOGRAFÍA? _
SÍ Y NO.
SÍ:
SIEMPRE Y CUANDO ESTÉ DISPONIBLE EN EL SISTEMA OPERATIVO DE LA PERSONA QUE VISITA NUESTRA WEB.
NO:
HAY TIPOGRAFÍAS MÁS ADECUADAS QUE OTRAS PARA UTILIZAR EN WEB. MÁS DE UNA TIPOGRAFÍA SUELE SER UN PROBLEMA.
https://fonts.google.com/
font-size
Permite indicar el tamaño de la tipografía en el texto.
body {
font-size: 12pt;
}EXISTEN MUCHAS UNIDADES DE MEDIDA _
font-size: 60px;
Texto de 60 píxeles
Texto de 60 puntos
Texto de 2 veces el tamaño base del documento.
font-size: 60pt;
font-size: 2em;
font-size: 2rem;
Texto de 2 veces el tamaño base del documento, autoadaptable a resolución de pantalla.
font-weight
Permite indicar el espesor o peso de la tipografía en el texto.
.resaltado {
font-weight: bold;
}EXISTE UNA ESCALA NUMÉRICA PARA EL PESO TIPOGRÁFICO _
100 (thin)
200 (fine)
300 (light)
400 (regular)
500 (medium)
600 (semi-bold)
700 (bold)
800 (black)
900 (ultra-black)
font-style
Permite indicar si queremos utilizar un estilo en cursiva o recto.
.cursiva {
font-style: italic;
}font-style: normal;
Texto recto.
font-style: italic;
En itálica.
font-variant
Permite indicar si queremos utilizar un variantes en versalitas.
.versalitas {
font-variant: small-caps;
}font-variant: normal;
Texto recto.
font-variant: small-caps;
Versalitas.
line-height
Indica el espaciado entre líneas en un texto.
p {
line-height: 150%;
}(Podemos utilizar todas las unidades de medida que vimos antes también, el % es otra opción de medida válida.)
line-height: 100%;
Este es un texto extenso que tiene muchas líneas y no dice absolutamente nada, pero sirve para demostrar cómo funciona la propiedad "line-height" en el lenguaje CSS.
line-height: 150%;
Este es un texto extenso que tiene muchas líneas y no dice absolutamente nada, pero sirve para demostrar cómo funciona la propiedad "line-height" en el lenguaje CSS.
line-height: 120%;
Este es un texto extenso que tiene muchas líneas y no dice absolutamente nada, pero sirve para demostrar cómo funciona la propiedad "line-height" en el lenguaje CSS.
color
Indica el color con el que se pinta un texto.
h2 {
color: #ff6600;
}EXISTEN MÚLTIPLES SISTEMAS PARA INDICAR EL COLOR DE ALGO EN CSS _
RGB
RED, GREEN, BLUE
(ROJO, VERDE, AZUL)
TODO COLOR DE PANTALLA SE FORMA MEZCLANDO
ROJO, VERDE Y AZUL _
LA MEZCLA MÁXIMA GENERA EL COLOR BLANCO Y POR ESO SE LOS LLAMA
COLORES LUZ _
¿POR QUÉ FF? _
EL COLOR SE PUEDE EXPRESAR EN SISTEMA HEXADECIMAL _
0
1
2
3
4
5
6
0
1
2
3
4
5
6
=
=
=
=
=
=
=
7
8
9
1011
12
13
7
8
9
A
B
C
D
=
=
=
=
=
=
=
1415
16
EF
10
=
=
=
255 = FF
ES EL MÁXIMO VALOR QUE PUEDE PRESENTAR UNO DE LOS FACTORES DE COLOR
#FFFFFF
#FF0000
#00FF00
#0000FF
#000000
#FF6600
#99FF99
#FFCCFF
Curso Frontend - Introducción a CSS
By Joel Alejandro Villarreal Bertoldi
Curso Frontend - Introducción a CSS
Clase introductoria a CSS
