[Powered by Google Translate] [CSS] [Joseph Ong - Harvard University] [Esta es CS50. - CS50.TV] 

Hoy vamos a estar hablando de CSS o Cascading Style Sheets. 

Entonces, ¿qué es CSS? Bueno, vamos a romper el plazo CSS abajo en 2 partes: Cascading Style Sheets y. Cascada es un poco más complejo, y es algo que vamos a cubrir en otro video. Pero, para empezar, las hojas de estilo consejos muy en lo que CSS hace. Añade estilos para el código HTML de una página web, cambiar la forma en la página web estéticamente se ve. Esto significa que todo, desde el tipo de letra del texto para el posicionamiento de los contenidos de la página a otras cosas interesantes como la fabricación de las esquinas de una caja redondeada o añadir sombras al texto. Usted puede incluso hacer cosas locas como hacer las cosas animadas en la pantalla. 

Entonces, ¿cómo utilizar CSS con HTML? Tome este sitio de apariencia pobre que acabo de escribir. Si Rob fuera a mirar a este sitio ahora mismo, probablemente diría algo así como: "¡Guau! Mi introducción se ve terrible. José, eres un diseñador horrible." "Uso de la fuente por defecto Times? Helvetica es mucho mejor." 

Entonces, ¿cuál podría ser la forma más sencilla de aplicar el estilo de Rob quiere? Los lotes de forma más obvia de las personas inicialmente escribió CSS era poner lo que llamamos declaraciones de estilo justo en el propio elemento utilizando el atributo de estilo HTML. Una declaración de estilo consiste simplemente en la propiedad del elemento HTML CSS queremos cambiar seguido de dos puntos seguido por el nuevo valor de la propiedad y un punto y coma al final. Por ejemplo, digamos que Rob quiere un borde negro alrededor de su introducción. En primer lugar, poner el atributo de estilo en div Rob aquí entonces dentro de comillas dobles puso una declaración CSS: "Border: 1px sólido negro"; El pixel 1 se refiere a la anchura de la frontera, el sólido se refiere al estilo de la frontera, y el color al final determina qué color es la frontera. 

Si queremos múltiples estilos de un elemento, escribo estas declaraciones en secuencia. Por ejemplo, si Rob quiere que su texto de cabecera en Helvetica con un fondo azul y más espacio alrededor del texto, podemos hacer esto: style = "font-family: Helvetica; background-color: blue; padding: 5px;" El punto y coma último es en realidad opcional, pero la gente suele tener en aras de la coherencia. 

Dejaremos que explica algunos de los más frescos y más complejas propiedades CSS por otro vídeo. Si usted tiene algo en mente, sólo buscar en Google el efecto deseado seguido de CSS probablemente le dará muy buenos resultados. Lo bueno es que CSS es bastante amplio, lo más probable es si hay algo que quieres hacer - dentro de lo razonable - CSS probable que pueda hacerlo. Llamamos a este tipo de peinado estilo en línea. El estilo de elemento es, bueno, de acuerdo con la etiqueta de inicio. 

Para la gente que realmente me gusta ser organizado, usted puede comenzar a conseguir un poco molesto en cómo todo esto se ve desordenado. Imagínese si usted tenía que hacer esto para cada elemento de la página, Además, ahora el código HTML y CSS están todos mezclados y desordenada. Gross, ¿no? Para solucionar este problema, la gente finalmente comenzó ganando terreno a separar su formato HTML de su estilo CSS mediante los llamados selectores CSS. Selectores CSS se utiliza para seleccionar elementos a los que se aplican las declaraciones. Un selector combinado con una lista de declaraciones de CSS se refiere a menudo como una regla CSS. Estas normas se coloca entre las etiquetas de estilo HTML de apertura y cierre, menudo en la cabeza del documento. 

Es mucho más fácil de ver con un ejemplo, así que vamos a empezar por crear una sencilla regla de CSS. En primer lugar, vamos a poner etiquetas de estilo en la sección head de nuestro HTML. A continuación, el selector. Vamos a empezar con uno de los más simples selectores, el símbolo de hash, que selecciona un elemento HTML por su atributo ID. En este caso vamos a seleccionar el div que representa la introducción de Rob escribiendo el símbolo de hash seguida de la identificación del div, Rob. Ahora las declaraciones. Añadimos llaves de apertura y cierre y cambiar nuestras declaraciones anteriores sobre la línea div Rob dentro de estas llaves, actualizar, y, fresco, introducción de Rob todavía tiene un borde negro alrededor de él menos la fealdad en línea desordenado. 

Ahora, ¿qué pasa si queremos seleccionar el interior h1 de introducción de Rob? Se podría pensar: "Vamos a poner un ID en él y luego mover los estilos anteriores." Esto funciona, pero CSS tiene otras formas de lo que le permite seleccionar elementos mediante el uso de lo que llamamos combinadores para mezclar selectores simples. Por ejemplo, un carácter de espacio en blanco se puede utilizar como un combinador para especificar todas las instancias de un selector que viven en el interior de otro selector. Eso suena mucho más complicado de lo que realmente es. He aquí un ejemplo. Vamos a escribir # robar, añadir un espacio, y seguir con un h1, otro selector simple llamado un selector de etiquetas que seleccione los tipos de elementos como divs o párrafos. El espacio combina los dos selectores simples, la aplicación de todas las declaraciones de CSS y las llaves a las etiquetas h1 que viven en el interior del elemento con id = "rob". Sólo para convencerte de que funciona, voy a cambiar el color de fuente a blanco, refrescar, y, mira, cabecera de Rob es ahora blanco. 

Todo este trabajo se demuestra que mediante el uso de reglas en lugar de estilos en línea podemos obtener el código mucho más limpio. De hecho, si este bloque de estilo empieza a ser un poco más grande, Incluso puedo tirar estos estilos a cabo en un archivo diferente. 

Para incluir este nuevo archivo CSS como en el presente documento sólo voy a utilizar la etiqueta HTML de enlace. Aquí estoy diciendo que estoy vinculando en una hoja de estilos externa, el atributo rel, y especificar la ruta de acceso al archivo con mi atributo href. Ahora mi código HTML y CSS se organizan muy bien en archivos totalmente distintos, que es casi siempre el camino diseñadores prefieren trabajar con HTML y CSS. 

En caso de que usted se esté preguntando, los selectores simples incluyen selectores de ID y los selectores de etiquetas como las que acabamos de ver así como los selectores de clase para la selección de elementos con una determinada clase, selectores de atributos para la selección de elementos por otros atributos como type = "radio" para las entradas de botón de radio, y pseudoselectors como flotar y se centran para especificar el estilo en que las interacciones gusta pasar el ratón sobre un elemento ocurrir. 

Los combinadores comunes incluyen espacios en blanco para todos los niños y comas para distinguir selectores. Otros que pueden surgir incluyen en la flecha para niños directos solamente, la tilde a todos los hermanos que se producen después de que el elemento, y el signo más para el hermano 1 que viene inmediatamente después del elemento. 

Mediante la combinación de estos selectores y combinadores, puede ampliar la gama de diseño se puede lograr en una página web determinada y escribir CSS de manera más eficiente. Con sólo un par de líneas de código CSS que me ven escribir aquí, Rápidamente me puede hacer algo como esto parezca algo como esto. 

Soy José, y esto es CS50. 

[CS50.TV] 

Uh, ¿por dónde empiezo? Déjame hacer eso sin - [Risas] Bueno. Añadir a - Déjame cambiar esa redacción. Ooh. Lo siento.