[Powered by Google Translate] [CSS] [Joseph Ong - Universidad de Harvard] [Este es CS50. - CS50.TV] 

Hoy vamos a hablar acerca de CSS o Cascading Style Sheets. 

Entonces, ¿qué es CSS? Bueno, vamos a romper el término CSS abajo en 2 partes: Cascada y hojas de estilo. En cascada es un poco más complejo, y es algo que vamos a cubrir en otro video. Pero para empezar, las hojas de estilo muchísimo insinúa CSS lo hace. Añade estilos para el código HTML de una página web, cambiar la forma en la página web se ve estéticamente. 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 la adición de sombras al texto. Usted puede incluso hacer cosas locas como hacer las cosas animadas en la pantalla. 

Entonces, ¿cómo usamos CSS con HTML? Tomar este sitio pobre aspecto que acabo de escribir. Si Rob fueron a buscar en este sitio en este momento, probablemente diría algo así como: "¡Guau! Mi introducción se ve terrible. Joseph, eres un diseñador horrible." "Uso de la fuente Times defecto? 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 manera más obvia de las personas inicialmente escribieron 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 CSS del elemento HTML que desea cambiar seguido de dos puntos seguido del 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, ponemos el atributo de estilo en div de Rob aquí a continuación, entre comillas dobles poner una declaración CSS: "Border: 1px solid negro"; El 1 píxel se refiere a la anchura de la frontera, el sólido se refiere al estilo de la frontera, y el color al final determina el color de la frontera es. 

Si queremos múltiples estilos en un elemento, escribir estas declaraciones en secuencia. Por ejemplo, si Rob quiere 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 último punto y coma es en realidad opcional, pero la gente suele mantener en aras de la coherencia. 

Vamos a salvar a explicar algunas de las propiedades de CSS más frías y más complejos para otro video. 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 probablemente pueda hacerlo. Llamamos a este tipo de peinado estilo inline. El estilo de elemento es, así, de acuerdo con la etiqueta de inicio. 

Para la gente que realmente les gusta ser organizado, usted puede empezar a recibir un poco peeved de lo sucio que todo esto se ve. Imagínese si usted tuviera que hacer esto para cada elemento de la página, además de que ahora el código HTML y CSS están mezclados y desordenados. Gross, ¿verdad? 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 utilizan para seleccionar elementos a los que se aplican las declaraciones. Un selector combinado con una lista de declaraciones de CSS se conoce como una regla CSS menudo. Estas normas se ponen entre etiquetas de estilo HTML de apertura y cierre, a menudo en el encabezado del documento. 

Es mucho más fácil de ver con un ejemplo, así que vamos a empezar por la creación de una regla CSS simple. En primer lugar, vamos a poner etiquetas de estilo en la sección principal de nuestro HTML. A continuación, el selector. Vamos a empezar con uno de los selectores más simples, 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 almohadilla seguida de ID de la div, rob. Ahora las declaraciones. Añadimos llaves de apertura y cierre y cambiamos nuestras declaraciones anteriores sobre la línea div de Rob dentro de estos apoyos, 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 h1 interior de introducción de Rob? Se podría pensar, "Vamos a poner un ID en él y luego pasar nuestros estilos anteriores." Esto funciona, pero CSS tiene otras maneras de que le permite seleccionar los 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 todos los casos de 1 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, agregar un espacio, y seguir con un h1, otro selector simple llamado selector de etiquetas que seleccione los tipos de elementos como divs o párrafos. El espacio combina los 2 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, refresco, y, mira, remate de cabeza de Rob es ahora blanco. 

Todo este trabajo viene a demostrar 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 se inicia este estilo de bloque de conseguir un poco más grande, Incluso puedo tirar estos estilos a cabo en un archivo diferente. 

Para incluir este nuevo archivo como CSS en este documento que voy a utilizar la etiqueta de vínculo HTML. Aquí estoy diciéndole que me une 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 independientes, que es casi siempre la manera 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 selectores de clase para la selección de los elementos con una cierta 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, cuando 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 la flecha sólo para los hijos directos, la tilde a todos los hermanos que se producen después de que el elemento, y el signo más para el 1 de hermanos que viene inmediatamente después del elemento. 

Mediante la combinación de estos selectores y combinadores, puede ampliar la gama de estilo 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 CSS que ves me escribir aquí, Puedo hacer rápidamente algo como esto parece a algo como esto. 

Yo soy José, y esto es CS50. 

[CS50.TV] 

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