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

  • 411