[REPRODUCCIÓN DE MÚSICA] 

DOUG LLOYD: Así que vamos a echar una más vídeo a hablar un idioma más. En esta ocasión hablaremos de CSS. Así CSS, que es la abreviatura de Hojas de estilo en cascada, es otro lenguaje que usamos en la construcción de sitios web. Piense en ello como esto. Si HTML es lo que utilizamos para organizar la el contenido que queremos poner en nuestra página, CSS es la herramienta que utilizamos generalmente para personalizar el aspecto de nuestros sitios web, y cómo la experiencia del usuario realmente es decir, la interacción con nuestro sitio web. 

Al igual que en HTML, CSS es no es un lenguaje de programación. No tiene lógica. No tiene variables. No tiene ningún tipo de que fluir las cosas relacionadas que C hace. Es un lenguaje de estilo. Y su sintaxis es bastante simple, y solo describe cómo los elementos de nuestra página tiene cierta HTML elementos deben ser modificados. Con ese fin, si no lo ha sin embargo, visto nuestro video en HTML, o no están familiarizados con HTML generalmente, se puede que desee echar un vistazo a ese primero, porque esta discusión de CSS va a depender algunos conocimientos de HTML. 

Así que aquí está un muy sencilla hoja de estilo CSS. Incluso si usted nunca ha programado con CSS antes, Estoy bastante seguro de que puedes imaginar exactamente lo que hace esta hoja de estilos. ¿Qué hace? Bueno, aplicada al cuerpo de nuestra web página, todo lo que entre las etiquetas del cuerpo en nuestro HTML, y se establece el color de fondo de la página a azul. Bueno, es una manera muy sencilla hoja de estilo. En realidad es muy humano lenguaje amigable, CSS. Así que incluso si usted nunca ha usado antes, que probablemente podría adivinar lo que hicieron. De hecho, si nos cargamos una página, donde esta hoja de estilo se ha incrustado de alguna manera, el color de fondo de nuestra página haría ser de color azul, y no el blanco estándar. 

Entonces, ¿cómo construimos hojas de estilo? Bueno en primer lugar, tenemos que identificar un selector. En el último ejemplo, que el selector estaba el cuerpo. Entonces tenemos un abierto corchete, y estamos va a empezar a definir la hoja de estilo para ese selector. En medio de las llaves, nos sólo hay una lista de pares de valores clave. El par de valores anterior fue color de fondo azul y coma, pero podríamos hacer más y más de estos. Usted podría tener varias cosas aplicando a esa etiqueta, ese cuerpo selector. Cada uno de ellos está separado por una punto y coma, y ​​nos llama a cada uno de ellos una declaración, una declaración CSS. Cuando hayamos terminado con todo el estilo que que desee aplicar a esa etiqueta en particular, sólo tenemos un rizado cerrar prepararse para poner fin a la hoja de estilos, y hemos terminado de definir la hoja de estilos para ese selector particular. 

¿Cuáles son algunas propiedades CSS comunes? Bueno, tal vez usted quiere poner un borde alrededor de algo. Así que se puede decir, frontera, que sería su clave, y luego sus valores serían, lo que el estilo, el color y el ancho usted quiere que sea. Así el estilo podría ser un sólido línea, una línea de puntos, una línea discontinua, una línea de cresta, lo que sería la línea ondulada. Tal vez usted quiere tener que ser de color azul o negro o verde. Tal vez usted quiere que sea 1 o 2 o 10 píxeles de ancho. Puede especificar todas esas cosas. Tal vez usted quiere configurar el fondo color de su página de una manera particular. Ya vimos que, estableciendo el fondo del cuerpo a ser azul. 

A continuación, puede utilizar una palabra clave, por lo CSS tiene ciertos colores que se construyen en él, azul, verde, negro, unos colores muy simples que conocemos. Pero también se puede especificar cualquier color hexadecimal que desea. Recordemos que los colores se pueden identificar por un conjunto de tres números hexadecimales de 0 a 255, RG y b, la componente rojo, verde, y azul. Y así podemos especificar cualquier color que queremos por, en lugar de utilizar azul o verde o negro, usando libras y luego seis dígitos del hexagonal, y que nos daría el color de seis dígitos. Así que ese es el color de fondo. 

También tenemos el primer plano color, que es por lo general va a ser el texto de su página. Y usted podría hacer igualmente que con la palabra clave y el o seis dígitos hexadecimal. Así que usted puede especificar cualquier color que usted desear para el texto de su página contra un particular, color de fondo, arriba. También puede cambiar y hacer frente con la fuente, y el texto forma se rindió en la página. 

Así que usted puede cambiar el tamaño de fuente. Puede utilizar palabras clave, como adicional, Diminuta, y xx pequeño o medio, grande, y así sucesivamente. Puede utilizar puntos fijos, 10 puntos, 12 puntos, y así sucesivamente. Puede usar porcentajes, 80%, 20%, donde 100% es el tipo de letra predeterminado tamaño, que es por lo general va a algo así como 11 o 12 puntos. O incluso se puede basar fuera el tamaño de la fuente más reciente. Si usted acaba de escribir algo y sabes lo que queremos es que sea más pequeña, pero no sabes qué es exactamente el tamaño que Quiero que sea, bueno, usted puede simplemente decir, tamaño de letra más pequeño. Y va a basar fuera de la, justo por encima, es el tamaño de fuente. Y usted puede conseguir más pequeño o más grande. Así que hay un montón de diferentes maneras de especificar el tamaño de fuente. 

También puede especificar qué familia de la fuente que desea. Si usted tiene un particular, nombre, hay una forma en CSS-- no vamos a hablar de ello aquí-- para definir un tipo de letra muy específico e incrustarlo en tu página. También puede utilizar nombres genéricos. Hay una gran cantidad de fuentes seguras web que están predefinidos en el CSS. Y si usted es un usuario de Microsoft Oficina en los últimos 20 años, probablemente estás familiarizado con muchas de estas fuentes seguras web Ya, Times New Roman, Arial, Courier New, Georgia, Tahoma, Verdana, etcétera. Esos son todos considerados web fuentes seguras. Y, de hecho, parte de la razón por la que llegó a ser iba a ser utilizado para hacer web-- cada página había acceso a este conjunto predeterminado de fuentes con varios remates, y todo esto material de fuente no vamos a entrar, pero estos son generalmente accesible en la CSS, incluso si no lo hace de lo contrario definir las fuentes. Por último, puede alinear el texto, en lugar de ser, por defecto, alineado a la izquierda, podría alinearlo a la derecha, o puede alinearla centrada, o justificado para que golpeó ambas márgenes. Así que esas son todas las opciones que puede utilizar para cambiar lo que su texto se parece, y cómo se muestra en su página. 

Sus selectores no lo hacen tiene que ser sólo las etiquetas. Anteriormente vimos una etiqueta del cuerpo selector, y selector de etiquetas tiene un aspecto como si nada. Usted nombra una etiqueta, y luego definir una hoja de estilo para esa etiqueta. Pero también se puede hacer algo llamado un selector de ID. Un selector ID ve bastante similar. Pero noto que ahora no estoy usando una etiqueta HTML, estoy usando, en este caso, #unique o hash único. Si usted recuerda de nuestra video en HTML, hablamos acerca de cómo las etiquetas pueden tener atributos. 

Y un atributo que se aplica a casi todas las etiquetas HTML, pero no hablamos de ello, es algo que se llama una etiqueta de identificación. Así que esto CSS particular, haría aplicará únicamente a la etiqueta HTML que tiene un documento de identidad muy específica, que ha nombrado. Así que si usted tiene alguna parte en el código, en algún lugar en su archivo HTML, una etiqueta y usted especificar como un atributo a la etiqueta, ID es igual único, este en particular de estilos aquí sólo se aplicarán en el medio esa etiqueta con el identificador de único. 

También puede hacer algo llamado un selector de clase. Así que además de tener Atributos ID, también puede añadir un atributo de la clase de etiquetas HTML. Y cuando se utiliza un atributo de clase, se puede aplicar a múltiples etiquetas. Así que si usted tiene varias cosas que son similares, tal vez usted quiera decir, etiqueta abierta, bla, bla, bla, bla, clase es igual a los estudiantes. Y entonces este particular, se aplicaría hoja de estilo a cada etiqueta cuya clase es alumnos. En este caso, nos fijamos el color de fondo a amarillo, y nos gustaría ajustar la opacidad, que es una etiqueta que no hablamos, pero sólo se ocupa de la forma transparente algo es, a 70%, en este caso. 

Hay dos opciones para hojas de estilo de escritura. Puedes escribirlas directamente en el código HTML mediante la colocación de las hojas de estilo entre etiquetas de estilo. Y esas etiquetas de estilo van dentro de las etiquetas de la cabeza de su página web. La forma quizás más preferido hacer que es escribir un archivo .css aparte, y luego vincularlo a su documentar el uso de etiquetas de enlace. Etiquetas de Enlace, de nuevo, son diferente de hipervínculos, si usted recuerda de nuestro video de un HTML. Y las etiquetas de enlace son la forma en que tire en archivos separados. Es algo así como el equivalente de el #include para la programación web. 

Así que echemos un vistazo a table.HTML. Si usted recuerda de nuestra Vídeo HTML, mostré un ejemplo de un muy simple multiplicación tabla que se ve bastante feo, y tal vez haya una manera de hacerlo mejor con CSS, para que sea realmente se ven más como una multiplicación mesa, o algo que no es simplemente pegadas sin división real entre las filas y las columnas. Así que vayamos a CS50 IDE, y echar un vistazo cómo CSS puede, más o menos, ajustar lo que empezamos con el antes, y hacer algo mucho mejor. 

Así que estamos en CS50 IDE ahora, y si no familiar, vamos a detenemos en este mesa de la página HTML. Table.HTML básicamente simplemente define el contenido de un multiple-- que se suponía que era una mesa de cuatro por cuatro multiplicación. Es bastante sencillo. Y nos gustaría pensar que lo haría mirar bastante bien organizado. Pero, de hecho, cuando nos previsualización Esta página, vemos que es algo feo, ¿no? Claramente tenemos filas y columnas aquí. Hay algún tipo de separación. Pero no es una separación significativa. No estamos consiguiendo realmente demasiada información aquí. Y no hay separación entre las filas y columnas en términos de las normas horizontales o verticales. Probablemente podríamos hacer este mirar un poco mejor. Entonces intentemos. Así que voy a cerrar esta pestaña aquí. Y yo voy a cerrar mi table.HTML, y tengo otra versión aquí llamada table2.HTML. Abriremos eso. El cuerpo de la página es prácticamente lo mismo, pero he cambiado poco en la parte superior. Y voy a desplazarme hasta aquí. Nótese que esta vez, estoy usando etiquetas de estilo incrustadas. He abierto una etiqueta de estilo, y estoy ahora la definición de una hoja de estilo CSS justo dentro de la misma. Tengo una hoja de estilo que dice: mesa. Esa es mi selector de etiquetas. No estoy usando puntos o hachís, que estaría haciendo si yo estaba utilizando un ID o un selector de clase. Tengo una tabla aquí-- selector de etiquetas. Este estilo va a aplicará a cada etiqueta de mesa. Aparentemente quiero poner uno pixel de ancho, borde azul sólido, dentro de mi mesa. Eso suena como lo haría probablemente ayudar a la situación, ¿no? Vamos a tener las cosas se ven mucho mejor. Así que esto está muy bien. Estilísticamente, acabo incrustado mi hoja de estilo aquí. Es sin duda una manera aceptable de hacerlo. Vamos a ver lo que esto se parece. Así que me voy a volver aquí, y Voy a una vista previa de mi table2.HTML. Bueno, eso no es exactamente lo que yo quería, pero es exactamente lo que habíamos pedido. Dijimos que este estilo es va a aplicar a nuestra mesa. Nuestra mesa ahora tiene un píxel de un amplia frontera, sólido azul alrededor. No estamos consiguiendo realmente en las celdas de la tabla. Estamos en la mesa. Así CSS funcionó. Se ha aplicado una hoja de estilo a nuestra mesa. Pero no acababa de hacer lo que queríamos hacer. ¿Cómo conseguimos hacer lo que queremos que haga? 

Bueno, vamos a echar un vistazo a uno más versión de esto en table3.HTML. Así que sólo voy a cerrar estas fichas. Voy a volver por aquí a mi presentar árbol, y abrir table3.HTML. Una vez más, va a parecer bastante similar aquí en el comienzo. Pero aviso, esta vez, en lugar de utilizar una hoja de estilo incrustada justo allí, Voy a enlazar en un hoja de estilo usando la etiqueta de enlace. Así que estoy aparentemente vincular en un hoja de estilo llamado tables.CSS, y esto bien es igual hoja de estilo simplemente designa todas bien, lo que es este archivo en relación con lo Estoy doing-- es una hoja de estilo que estoy utilizando para mi página. Así que si realmente quiero ver lo que Que estoy haciendo con la CSS aquí, Tengo que ir a voces que table.CSS archivo también. Así que vamos a volver por aquí de nuevo a nuestro árbol de archivos. Hay table.CSS. Vamos a estallar abierto. Ahora estamos viendo un poco de la CSS. Al parecer, tengo un par de cosas que hacer aquí. Aparentemente Quiero poner cinco pixel de ancho, borde rojo sólido, alrededor de mi mesa. Ya sabemos que eso va ir sólo en el perímetro. Vimos que en table2.HTML. Con cada fila, me aparentemente desee especificar que la altura de la fila es de 50 píxeles de alto. Así, por cada fila, recuerda eso es lo que hace la etiqueta tr, Estoy haciendo 50 píxeles de alto. 

Por último, tengo este comentario. Y así es como hacemos comentarios en CSS. Es muy similar a tomar el bloque comentarios sintaxis estrella Slash. Todo el texto que desee. No hay slash slash aunque en CSS. Para comentarios en línea cortos, tenemos para utilizar este formato en particular aquí. Parece que estoy haciendo un muchas cosas en mis etiquetas td. Recuerde etiquetas td, o mesa datos, que en realidad son sólo las columnas dentro de nuestras filas, y al parecer, para cada pieza de datos en mi mesa, me quiero para establecer el color de fondo a ser de color negro, el color sea blanco, color es color de primer plano. Así que esto va a ser el texto de mi página. Quiero fuente grande, 22 señalar la fuente, y quiero que es de la familia de fuentes, Georgia. Así que no voy a tener la fuente predeterminada. Voy a especificar Georgia, que es una de esas fuentes seguras web que hemos visto antes. Quiero que mi texto se alinee en el centro, en el centro de la caja, Yo no quiero que se dejó alineado o alineado a la derecha. Y yo quiero que mi ancho de columna a ser de 50 píxeles de ancho también. Echemos un vistazo a el aspecto que tiene, y ver si esto es tal vez una mejora. Así que me voy a ir a table3.HTML, que recuerdo, incluye table.CSS como un enlace, y vamos a obtener una vista previa. Eso es mucho mejor, ¿no? Esto es en realidad empezando a verse un mucho más como una tabla de multiplicar. Tengo que borde rojo alrededor de mi mesa, pero ahora También he especificado que cada fila es de 50 píxeles de ancho, o que es 50 píxeles tall-- excusa mí-- cada columna es de 50 píxeles de ancho. Los datos de cada columna, y sólo los datos, tiene un fondo negro. Así que por eso los líneas blancas están ahí. Debido a que el espacio en el entre todas esas células, no es una frontera en de por sí, es sólo Sólo estoy rellenando el células, que en realidad hace que las fronteras de la tabla, que al parecer, existía desde el principio, que era líneas blancas apenas finas. Ahora están visibles. Ahora hacen estallar fuera de la pantalla. Y por lo que este es un muy simple hoja de estilo que yo he aplicado, y ahora mi mesa se parece mucho más a una mesa de cuatro por cuatro multiplicación, en lugar de un desastre simplemente confusa, donde todo lo que es claramente filas y columnas, pero no super bien organizado. Estamos realmente sólo arañando la superficie de lo que puede hacer con CSS aquí. Afortunadamente la documentación CSS es bastante sencillo. Vamos a usar varios de sus atributos, con bastante frecuencia. Los que hablamos anteriormente en este vídeo. Hay varios que usted probablemente no va a utilizar todo. Y eso está bien, también. Pero sólo sé, que hay una gran cantidad de documentación que hay. Así que incluso si no cubrimos todo, que sin duda no se queda por su cuenta. Pero CSS es muy divertido para experimentar. Y me animo encarecidamente jugar con sus páginas web, y ver cómo se puede hacer que ver y sentir para mejorar el usuario experiencia de visitar su página. Soy Doug Lloyd. Esto es CS50.