-
Ya aprendimos cómo hacer una página web
-
bonita y completa con todo tipo
de marcas
-
textos e imágenes, pero nos falta algo,
estilo.
-
Mi página web aquí se ve igual que
-
las páginas web que has estado haciendo.
-
Texto negro, fondo blanco, el mismo tipo
de letra,
-
todo igual de arriba a abajo.
-
Pero has navegado en la web y
has visto que las páginas web se ven
-
muy diferentes unas de otras.
-
Mira alrededor en Khan Academy
-
los diferentes colores y tipos y
tamaños de letra.
-
De hecho, es lo que vamos a hacer
ahora.
-
Pausa esta guía paso a paso y revisa algunas
páginas web.
-
¿Qué hay de diferente en cada
una de ellas?
-
¿Qué es lo que te gusta o te disgusta
de su estilo?
-
Voy a esperar aquí.
-
Es importante ver cómo las páginas web
pueden ser diferentes
-
porque muy pronto podrás hacer
-
que tus propias páginas web se vean
diferentes y querrás hacerlo
-
de manera que seas feliz,
porque esto te representa,
-
y esto también hace felices a otros
usuarios .
-
Bueno, para montar nuestra página web
necesitamos
-
aprender un lenguaje completamente
nuevo, CSS.
-
Esto significa Hojas de Estilo en Cascada
-
y es una forma de definir los estilos
que vamos a aplicar
-
a las diferentes partes de nuestra
página web.
-
Incorporamos CSS dentro de HTML
pero realmente no es HTML.
-
Entonces tenemos que aprender un
lenguaje nuevo
-
y trata de no confundir HTML con CSS.
-
Vamos a ver cómo podemos usar los
estilos de CSS en todos los aspectos
-
de nuestra página web como los tipos
de letra, tamaños y diseños
-
pero empezaremos con algo que es
divertido, el color.
-
¿Qué tal si cambiamos algunos
encabezados
-
en nuestra página web a un
agradable verde césped?
-
Para empezar, necesitamos añadir
etiquetas de estilo
-
al encabezado de nuestra página.
-
Cuando el navegador ve esto,
lo considera correcto.
-
Todo lo que está aquí dentro es CSS.
-
Voy a usar mi analizador CSS para
entender esto
-
en lugar del mi analizador de HTML.
-
Aquí dentro, vamos a añadir una regla
de estilos de CSS.
-
Una regla de estilos tiene un selector
que le dice al navegador
-
qué parte de la página web tiene
estilo, y declaraciones
-
que le dicen al navegador cómo estilizar
esa parte.
-
Si queremos estilizar todos nuestros
encabezados h2 en nuestra página,
-
tenemos que teclear este selector h2.
-
Después ponemos llaves.
-
Asegúrate de que sean llaves,
no corchetes.
-
Esos no funcionarán.
-
Dentro, pondremos nuestras
declaraciones
-
que tienen propiedades y valores.
-
Así que para cambiar el color del texto,
usamos la propiedad de color.
-
Entonces ponemos dos puntos y
necesitamos asignar un valor.
-
Tenemos que decirle al navegador qué
color queremos.
-
Bueno, podemos escribir green (verde).
-
Lo va entender porque el verde
es un color común.
-
Pero no es el verde que quiero.
-
Quiero un verde césped.
-
Si escribo grassy green (verde césped), oh.
-
Ahora el navegador está confundido
y pone los encabezados
-
negros de nuevo, porque no entiende
grassy green (verde césped).
-
Si queremos se capaces de especificar cualquier color,
-
tenemos que usar algo que se llama
espectro RGB
-
del cual tal vez escuchaste en tu clase
de arte.
-
No necesitas ser experto
-
porque aquí tenemos un selector de
color RGB para ti.
-
Para usarlo, basta con sustituir esto
con rgb y paréntesis.
-
Aparece un selector de color
y puedes mover
-
tu ratón dentro de él y seleccionar
un color,
-
y puedes ver el color actualizado en
tiempo real.
-
Cuando te sientas feliz, selecciona el color.
-
Ahora, ¿sabes por qué hay tres números
-
que no cambian en los paréntesis RGB?
-
Son los componentes rojo, verde y azul
-
que forman el color.
-
Ok, lo mejor acerca del selector
h2 de CSS
-
que usamos, es que pondrá iguales todos
los encabezados h2 en la página.
-
Entonces podemos cambiar múltiples
encabezados porque queremos
-
que todos los encabezados h2 sean
verdes y esto es consistente
-
para todos los encabezados h2 que se
encuentran en la página.
-
Si continuas con CSS, puedes
aprender
-
sobre otras maneras de cambiar sólo
algunas partes de la página,
-
como si quisieras cambiar sólo uno
de los encabezados h2.
-
Pero se puede ir bastante lejos con
este tipo de selectores.
-
Vamos a ver otra regla de estilo de CSS.
-
Ahora vamos a cambiar el fondo por uno
azul cielo.
-
¿Cómo podemos cambiar el color del
fondo en una página?
-
Bueno, ¿qué etiqueta abarca toda
la página?
-
No es la etiqueta h1.
-
No es la etiqueta P, no es la de imagen.
-
Es la etiqueta body, recuerda, todo lo
-
que es visible está dentro de la etiqueta body.
-
Así que si queremos cambiar el estilo
a toda la página,
-
necesitamos usar un selector para
seleccionar esa etiqueta.
-
Entonces escribimos body.
-
Ahora, en lugar de color, vamos a
escribir background-color (color de fondo),
-
dos puntos, y luego rgb paréntesis.
-
Usamos nuestro selector de color,
hacemos que aparezca y seleccionamos
un azul
-
que me hace pensar en los conejitos y
en nubes de algodón.
-
¡Tan - tan!
-
Mira el estilo de mi página.
-
Hay cientos de propiedades más en CSS
-
aparte de color y color de fondo
-
pero fue divertido empezar con éstas.
-
De hecho, cuando termine de hablar,
juega un poco
-
con los colores que seleccioné y
personaliza esta página
-
para que quede más a tu estilo que al mío.
-
¡Muy bien sigue adelante!
