[Powered by Google Translate] [CSS] [Joseph Ong - Harvard University] [É dicir CS50. - CS50.TV] 

Hoxe imos falar de CSS ou CSS. 

Entón, o que é exactamente CSS? Ben, imos romper o termo CSS abaixo en dúas partes: CSS e. Cascading é un pouco máis complexa, e é algo que vai cubrir noutro vídeo. Pero para comezar, Style Sheets moi moi consellos de CSS que fai. Engade estilos para HTML dunha páxina web, cambiando o xeito no que a páxina web esteticamente parece. Isto significa que todo, dende a fonte do texto para o posicionamento do contido da páxina a outras cousas legais, como facer os recunchos dunha caixa redondeada ou engadir sombras en texto. Podes incluso facer cousas malucas como facer as cousas animadas na pantalla. 

Entón, como imos usar CSS con HTML? Tomé esta web pobre de aparencia escribín. Se Rob estaba a mirar para este sitio web agora, probablemente diría algo así como: "Wow! Miña entrada parece terrible. Joseph, vostede é un deseñador horrible." "Usando a fonte por defecto Times? Helvetica é moito mellor." 

Entón, o que podería ser a maneira máis sinxela de aplicar o estilo Rob quere? O xeito máis obvia moita xente inicialmente escribiu CSS era poñer o que chamamos declaracións de estilo mesmo no propio elemento usar o atributo de estilo HTML. A declaración de estilo consiste simplemente do elemento HTML propiedade CSS que queremos cambiar seguido por dous puntos, seguido polo novo valor do inmoble e un punto e coma ao final. Por exemplo, digamos que Rob quere un bordo negro ao redor da súa introdución. Primeiro, introduza o atributo de estilo na div de Rob aquí logo dentro comiñas dobres poñer unha declaración CSS: "Border: 1px solid negro"; O 1 pixel refírese á ancho do borde, o sólido refírese ao estilo de bordo, ea cor ao final determina a cor do borde é. 

Se queremos varios estilos nun elemento, escribo estas declaracións en secuencia. Por exemplo, se Rob quere que o seu texto da cabeceira en Helvetica cun fondo azul e máis espazo en torno ao texto, pódese facer isto: style = "font-family: Helvetica, background-color: blue; padding: 5px;" O último punto e coma é realmente opcional, pero a xente adoitan manter-lo por unha cuestión de coherencia. 

Imos salvar explicar algunhas das propiedades CSS máis frías e máis complexo a outro vídeo. Se tes algo en mente, só buscando o efecto desexado seguido CSS probablemente lle vai dar resultados moi bos. O legal é que o CSS é moi amplo, así as probabilidades son, se calquera cousa que quere facer - dentro da razón - CSS pode ser facelo. Chamamos este tipo de styling Styling en liña. O estilo elemento é, así, en liña coa marca de inicio. 

Para persoas que realmente quere ser organizado, pode comezar a estar un pouco irritado coa forma na que todo isto parece confuso. Imaxina se tivese que facelo para cada elemento na páxina, máis agora o HTML e CSS son todos mesturados e desordenado. Gross, non? Para solucionar isto, a xente finalmente comezou a recuperar para separar a súa cita HTML do seu estilo CSS utilizando algo chamado selectores CSS. Selectores CSS son usados ​​para seleccionar elementos aos que se aplican as declaracións. Un selector quedar unha lista de declaracións CSS é moitas veces referida como unha regra CSS. Estas normas serían colocados entre as etiquetas estilo HTML abrir e pechar, moitas veces na cabeceira do documento. 

É moito máis doado ver un exemplo, entón imos comezar creando unha regra CSS simple. En primeiro lugar, imos poñer marcas de estilo na sección head da nosa HTML. A continuación, o selector de. Imos comezar a usar un dos selectores simple, o símbolo de hash, que selecciona un elemento HTML polo seu atributo ID. Neste caso, imos seleccionar a div que supón a entrada de Rob escribindo o símbolo hash seguido polo ID da div, Rob. Agora as declaracións. Nós engadimos claves abren e pechan e cambiar as súas declaracións anteriores en liña en div de Rob dentro destas claves, actualización, e, fresco, entrada de Rob aínda ten un borde negro en torno a ela menos a feiúra en liña confuso. 

Agora o que se quería para seleccionar o h1 dentro entrada de Rob? Pode pensar: "Imos poñer un ID nel e, a continuación, mover os nosos estilos anteriores." Isto funciona, pero CSS ten outras formas de deixar selecciona elementos mediante o que chamamos combinados de mesturar selectores simple. Por exemplo, un carácter de espazo pode ser usado como un elemento de combinación para especificar todas as instancias dun selector que vivir dentro doutro selector. Isto parece moito máis complicado do que realmente é. Aquí está un exemplo. Imos escribir # roubo, engadir un espazo, e segui-lo con un H1, outro selector sinxelo chamado selector de etiquetas, que selecciona os tipos de elementos como divs ou por parágrafo. O espazo combina nosos dous selectores sinxelo, aplicando as declaracións CSS e as claves para h1 que viven no interior do elemento con id = "Rob". Só convencelo de que funciona, eu vou cambiar a cor da fonte para branco, de actualización, e, mira, a cabeceira de Rob agora é branco. 

Todo este traballo serve para amosar que, usando regras, no canto de estilos en liña podemos obter o código moito máis limpo. En realidade, se este bloque estilo comeza a estar un pouco grande, Eu ata podo tirar estes estilos para fóra nun arquivo diferente. 

Para incluír este novo ficheiro como CSS neste documento vou usar etiqueta enlace do HTML. Aquí eu estou dicindo é que eu estou conectando nunha folla de estilo externa, o atributo rel, e especificando o camiño para o arquivo co meu atributo href. Agora a miña cita HTML e CSS son organizadas ben en ficheiros totalmente separadas, que é case sempre o xeito no que os proxectos prefiren traballar con HTML e CSS. 

No caso de que estea se pregunta, os selectores simple inclúen selectores ID e selectores de etiquetas como os que acabamos de ver así como selectores de clase para a selección de elementos con unha determinada clase, selectores de atributos para a selección de elementos por outros atributos como type = "radio" para radio entradas de botóns e pseudoselectors como pasar e concentrarse para especificar o estilo cando interaccións gústalle pasar o rato sobre un elemento ocorrer. 

Os combinados comúns inclúen espazos para todos os nenos e comas para distinguir selectores. Outros que poden ocorrer inclúen a frecha para só fillos directos, o til para todos os irmáns que ocorren despois do elemento, e no signo máis ao 1 irmán que vén inmediatamente despois do elemento. 

Ao combinar estes selectores e combinados, pode ampliar o abano de styling pode conseguir nunha determinada páxina web e escribir CSS máis eficiente. Con só un par de liñas de CSS que ve-me a escribir aquí, Podo rapidamente facer algo como isto parece algo así. 

Eu son Xosé, e este é o CS50. 

[CS50.TV] 

Uh, por onde eu comezo? Déixeme facer iso sen - [risas] Okay. Engadir un - Déixeme cambiar isto redacción. Ooh. Sentímolo.