BIENVENIDOS
Esta clase empezará en breves minutos. Ahora mismo no puedes oír
nada pero en cuando llegue la hora estaremos en directo para
impartir la clase.
Para dudas o preguntas: [Link]@[Link]
Para problemas técnicos: [Link]@[Link] Teléfono de contacto: +34 900 525 693. EXT. 108
CLASE LIVE
Curso avanzado
Conociendo CSS
Impartido por Carlos Mejía [Link]@[Link]
Rol de CSS
Encargado de:
- Colores,
- Tamaños,
- Espacios,
- Animaciones
¿Qué es CSS?
Son hojas de estilo en cascada,
que permiten darle al HTML
un diseño único y especial en
pocas líneas
CSS se encarga de:
- Tamaños y tipos de fuente
- Colores
- Espacios
- Márgenes
- Adaptar diseños según
dispositivo
- Animaciones
- y mucho más...
Sintaxis y anatomía de CSS
¿Porque en cascada?
p{
color: blue;
}
p{
color: red;
}
Selectores
Selector de Selector de Selector de ID Selector de
elemento clase atributo
p{ .cliente { #cliente { [src=”[Link]”] {
color: blue; color: blue; color: blue; color: blue;
} } } }
Combinación de descendentes
Selecciona los elementos hijos cuyo padre sea
una clase (o ID) en específico
.cliente .nombre {
color: blue;
}
Todos los hijos
Aplica la siguiente regla a todos los párrafos
hijos
.cliente > p {
color: blue;
}
Especificidad:
Como el navegador va a mostrar el
CSS de acuerdo a que tan específico
es el selector que hemos creado
[Link] {
color: blue;
}
p{
color: red;
}
Colores en CSS
- Por nombre
- Hexadecimal #000000
- RGB o RGBA
- HSL o HSLA
Fuentes CSS
Propiedad:
- font-family
Donde encontrar fuentes:
- [Link]
Normalize:
Ayuda a que el contenido se mire
igual en todos los browser
¿Dónde conseguirlo?
[Link]: Make browsers render all elements more
consistently. ([Link])
Display
Por defecto:
- Block: uno debajo de otro
- Inline: elemento a la derecha.
enlace 1 enlace 2 enlace 3
Margin y Padding
Margin
- Separación de donde
termina el elemento
hacia afuera
Padding
- Engorda el elemento
hacia dentro
Flexbox
Diseñado como un modelo unidimensional para crear layouts
Solo se pueden distribuir elementos en una dirección
Fila - row o columna - column
Row viene por default al definir un display: flex;
Los otros valores son row-reverse, column y column-reverse
Estilos para escribir CSS
3 estilos más comunes:
BEM
Utility First
Módulos
BEM
Bloques, Elementos y
Modificaciones
.card { }
.card_ _titulo { }
.card_ _imagen { }
.card_ _boton { }
.card_ _boton--activo{ }
Utility First
Clases con una sola propiedad
que describe lo que hace
.text-center { }
.color-red-100 { }
.cg-blue-200 { }
.p-2 { }
Módulos
Define contenido principal y
luego elementos en HTML
.card { }
.card h2 { }
.card img { }
.card a { }
Empezaremos a
¿Qué veremos en
escribir nuestras
la próxima clase? primeras líneas en CSS
¡Muchas gracias y hasta la próxima clase!
Puedes ver las clases en el área de miembros de
[Link]
Recuerda que tu nombre de usuario es tu email, y la
contraseña, la que hayas elegido al registrarte. En caso
de que tengas problemas para acceder, puedes
seleccionar recordar contraseña.
¿Problemas técnicos? Escribe a
[Link]@[Link]
Si tienes dudas sobre el contenido del curso o las
clases, escribe a [Link]@[Link]
