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

Hoxe imos falar sobre CSS ou CSS. 

Entón, o que é exactamente CSS? Ben, imos romper a CSS termo abaixo en dúas partes: CSS e. Fervenza é un pouco máis complexo, e é algo que nós imos cubrir noutro vídeo. Pero, para comezar, follas de estilo consellos moi o que CSS fai. Engade estilos para HTML dunha páxina web, cambiando o xeito no que a páxina web esteticamente parece. Isto significa todo, dende a fonte do texto para o posicionamento do contido da páxina para 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 o CSS con HTML? Tomé esta web pobres de aparencia eu escribín. Se Rob estaba a mirar para este sitio web agora, probablemente diría algo así como: "Guau! Miña introdución parece terrible. José, vostede é un deseñador horrible." "Usando o estándar de fonte Estafes? Helvetica é moito mellor." 

Entón, o que pode ser o xeito máis sinxelo de aplicar o estilo Rob quere? Os lotes de forma máis obvia de persoas inicialmente escribiu CSS foi a de poñer o que chamamos declaracións de estilo mesmo no propio elemento usando o atributo de estilo HTML. A declaración de estilo consiste simplemente de propiedade do elemento HTML CSS queremos cambiar seguida de dous puntos seguido polo novo valor da propiedade e un punto e coma ao final. Por exemplo, imos dicir que Rob quere un borde negro ao redor da súa introdución. En primeiro lugar, poñer o atributo de estilo na div Rob aquí a continuación, dentro comiñas colocar unha declaración CSS: "Border: 1px negro sólido"; O pixel 1 refírese á ancho do borde, o sólido se refire ao estilo da fronteira, e cor ao final determina a cor do borde é. 

Se queremos varios estilos nun elemento, escribir estas declaracións en secuencia. Por exemplo, se Rob quere que o seu texto da cabeceira da Helvética con un fondo azul e máis espazo en torno ao texto, podemos facelo: style = "font-family: Helvetica, background-color: blue; padding: 5px;" O punto e coma última é realmente opcional, pero a xente xeralmente mantelo en Por razóns de coherencia. 

Imos salvar explicar algunhas das propiedades máis frías e máis complexo CSS por outro vídeo. Se tes algo en mente, só buscando o efecto desexado seguido CSS probablemente lle vai dar moi bos resultados. O legal é que o CSS é moi amplo, así as probabilidades son, se hai algo que quere facer - dentro da razón - CSS pode ser facelo. Chamamos ese tipo de denominar o estilo na 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 como todo parece desorde ese. Imaxina se tivese que facelo para cada elemento da páxina, máis agora o seu HTML e CSS son todos mesturados e desordenado. Gross, non? Para corrixir iso, as persoas finalmente comezou pegando a separar a súa cita HTML do seu estilo CSS usando algo chamado seletores CSS. Seletores CSS son usados ​​para escoller os elementos para que as declaracións son aplicados. Un selector combinados con unha lista de declaracións CSS é moitas veces referida como unha regra CSS. Estas normas serían colocados entre abrir e pechar marcas de estilo HTML frecuentemente no inicio do documento. 

É moito máis doado ver un exemplo, entón imos comezar por crear unha regra CSS simple. En primeiro lugar, imos poñer marcas de estilo na sección principal do noso HTML. A continuación, o selector. Imos comezar a usar unha das máis sinxelas seletores, o símbolo de suma, que selecciona un elemento HTML polo seu atributo id. Neste caso, imos seleccionar a div que representa a introdución de Rob escribindo o símbolo hash seguido por ID da p, Rob. Agora as declaracións. Nós engadir claves de abrir e pechar e cambiar as nosas declaracións anteriores en liña div Rob dentro destas claves, actualización, e, fresco, introdución de Rob aínda ten un borde negro en torno a ela menos a feiúra liña desorde. 

Agora, o que se quixésemos selecciona o interior h1 de entrada de Rob? Podes pensar: "Imos poñer un ID nel e entón mover os nosos estilos anteriores." Isto funciona, pero CSS ten outras formas de deixar seleccionar elementos usando o que chamamos combinadores de mesturar seletores simple. Por exemplo, un carácter de espazo en branco pode ser utilizado como un elemento de combinación para especificar todas as instancias dun selector que vive dentro doutro selector. Isto soa moito máis complicado do que realmente é. Aquí está un exemplo. Imos escribir # roubar, engadir un espazo, e segui-lo con un h1, outro selector simple chamado un selector de etiqueta que selecciona os tipos de elementos como divs ou por parágrafo. O espazo combina nosos dous seletores simple, aplicando as declaracións CSS e as claves para etiquetas h1 que viven no interior do elemento con id = "roubar". Só para 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 vai amosar que por medio de regras, en vez de estilos liña podemos obter o código moito máis limpo. En realidade, este bloque estilo comeza a estar un pouco grande, Podo ata tirar eses estilos para fóra nun arquivo diferente. 

Para engadir este novo ficheiro como CSS neste documento vou usar tag HTML de ligazón. 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 reserva HTML e CSS son organizadas ben en arquivos completamente separadas, que é case sempre a forma na que os deseñadores prefiren traballar con HTML e CSS. 

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

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

Ao combinar eses seletores e combinadores, pode ampliar o abano de estilo que pode conseguir nunha determinada páxina web e escribir CSS de forma máis eficiente. Con só un par de liñas de CSS que me ver escribir aquí, Eu podo facer rapidamente algo como isto parece algo así. 

Eu son Xosé, e este é o CS50. 

[CS50.TV] 

Uh, por onde eu comezo? Deixe-me facer iso sen - [risas] Ok Engadir un - Déixeme cambiar esa formulación. Ooh. Sentímolo.