YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Spanish, Mexican subtitles

← Conceptos básicos de CSS

Get Embed Code
8 Languages

Showing Revision 18 created 03/11/2016 by Martha Isabel Soriano Ruiz.

  1. Ya aprendimos cómo hacer una página web

  2. bonita y completa con todo tipo
    de marcas
  3. textos e imágenes, pero nos falta algo,
    estilo.
  4. Mi página web aquí se ve igual que
  5. las páginas web que has estado haciendo.
  6. Texto negro, fondo blanco, el mismo tipo
    de letra,
  7. todo igual de arriba a abajo.
  8. Pero has navegado en la web y
    has visto que las páginas web se ven
  9. muy diferentes unas de otras.
  10. Mira alrededor en Khan Academy
  11. los diferentes colores y tipos y
    tamaños de letra.
  12. De hecho, es lo que vamos a hacer
    ahora.
  13. Pausa esta guía paso a paso y revisa algunas
    páginas web.
  14. ¿Qué hay de diferente en cada
    una de ellas?
  15. ¿Qué es lo que te gusta o te disgusta
    de su estilo?
  16. Voy a esperar aquí.
  17. Es importante ver cómo las páginas web
    pueden ser diferentes
  18. porque muy pronto podrás hacer
  19. que tus propias páginas web se vean
    diferentes y querrás hacerlo
  20. de manera que seas feliz,
    porque esto te representa,
  21. y esto también hace felices a otros
    usuarios .
  22. Bueno, para montar nuestra página web
    necesitamos
  23. aprender un lenguaje completamente
    nuevo, CSS.
  24. Esto significa Hojas de Estilo en Cascada
  25. y es una forma de definir los estilos
    que vamos a aplicar
  26. a las diferentes partes de nuestra
    página web.
  27. Incorporamos CSS dentro de HTML
    pero realmente no es HTML.
  28. Entonces tenemos que aprender un
    lenguaje nuevo
  29. y trata de no confundir HTML con CSS.
  30. Vamos a ver cómo podemos usar los
    estilos de CSS en todos los aspectos
  31. de nuestra página web como los tipos
    de letra, tamaños y diseños
  32. pero empezaremos con algo que es
    divertido, el color.
  33. ¿Qué tal si cambiamos algunos
    encabezados
  34. en nuestra página web a un
    agradable verde césped?
  35. Para empezar, necesitamos añadir
    etiquetas de estilo
  36. al encabezado de nuestra página.
  37. Cuando el navegador ve esto,
    lo considera correcto.
  38. Todo lo que está aquí dentro es CSS.
  39. Voy a usar mi analizador CSS para
    entender esto
  40. en lugar del mi analizador de HTML.
  41. Aquí dentro, vamos a añadir una regla
    de estilos de CSS.
  42. Una regla de estilos tiene un selector
    que le dice al navegador
  43. qué parte de la página web tiene
    estilo, y declaraciones
  44. que le dicen al navegador cómo estilizar
    esa parte.
  45. Si queremos estilizar todos nuestros
    encabezados h2 en nuestra página,
  46. tenemos que teclear este selector h2.
  47. Después ponemos llaves.
  48. Asegúrate de que sean llaves,
    no corchetes.
  49. Esos no funcionarán.
  50. Dentro, pondremos nuestras
    declaraciones
  51. que tienen propiedades y valores.
  52. Así que para cambiar el color del texto,
    usamos la propiedad de color.
  53. Entonces ponemos dos puntos y
    necesitamos asignar un valor.
  54. Tenemos que decirle al navegador qué
    color queremos.
  55. Bueno, podemos escribir green (verde).
  56. Lo va entender porque el verde
    es un color común.
  57. Pero no es el verde que quiero.
  58. Quiero un verde césped.
  59. Si escribo grassy green (verde césped), oh.
  60. Ahora el navegador está confundido
    y pone los encabezados
  61. negros de nuevo, porque no entiende
    grassy green (verde césped).
  62. Si queremos se capaces de especificar cualquier color,
  63. tenemos que usar algo que se llama
    espectro RGB
  64. del cual tal vez escuchaste en tu clase
    de arte.
  65. No necesitas ser experto
  66. porque aquí tenemos un selector de
    color RGB para ti.
  67. Para usarlo, basta con sustituir esto
    con rgb y paréntesis.
  68. Aparece un selector de color
    y puedes mover
  69. tu ratón dentro de él y seleccionar
    un color,
  70. y puedes ver el color actualizado en
    tiempo real.
  71. Cuando te sientas feliz, selecciona el color.
  72. Ahora, ¿sabes por qué hay tres números
  73. que no cambian en los paréntesis RGB?
  74. Son los componentes rojo, verde y azul
  75. que forman el color.
  76. Ok, lo mejor acerca del selector
    h2 de CSS
  77. que usamos, es que pondrá iguales todos
    los encabezados h2 en la página.
  78. Entonces podemos cambiar múltiples
    encabezados porque queremos
  79. que todos los encabezados h2 sean
    verdes y esto es consistente
  80. para todos los encabezados h2 que se
    encuentran en la página.
  81. Si continuas con CSS, puedes
    aprender
  82. sobre otras maneras de cambiar sólo
    algunas partes de la página,

  83. como si quisieras cambiar sólo uno
    de los encabezados h2.
  84. Pero se puede ir bastante lejos con
    este tipo de selectores.
  85. Vamos a ver otra regla de estilo de CSS.
  86. Ahora vamos a cambiar el fondo por uno
    azul cielo.
  87. ¿Cómo podemos cambiar el color del
    fondo en una página?
  88. Bueno, ¿qué etiqueta abarca toda
    la página?
  89. No es la etiqueta h1.
  90. No es la etiqueta P, no es la de imagen.
  91. Es la etiqueta body, recuerda, todo lo
  92. que es visible está dentro de la etiqueta body.
  93. Así que si queremos cambiar el estilo
    a toda la página,
  94. necesitamos usar un selector para
    seleccionar esa etiqueta.
  95. Entonces escribimos body.
  96. Ahora, en lugar de color, vamos a
    escribir background-color (color de fondo),
  97. dos puntos, y luego rgb paréntesis.
  98. Usamos nuestro selector de color,
    hacemos que aparezca y seleccionamos
    un azul
  99. que me hace pensar en los conejitos y
    en nubes de algodón.
  100. ¡Tan - tan!
  101. Mira el estilo de mi página.
  102. Hay cientos de propiedades más en CSS
  103. aparte de color y color de fondo
  104. pero fue divertido empezar con éstas.
  105. De hecho, cuando termine de hablar,
    juega un poco
  106. con los colores que seleccioné y
    personaliza esta página
  107. para que quede más a tu estilo que al mío.
  108. ¡Muy bien sigue adelante!