< Return to Video

Conceptos básicos de CSS

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

Spanish, Mexican subtitles

Revisions