[Música tocando] 

DOUG LLOYD: Então, vamos dar mais uma vídeo para falar mais de um idioma. Desta vez vamos falar sobre CSS. Então, CSS, que é curto para Cascading Style Sheets, é uma outra linguagem que usamos na construção de websites. Pense nisso como este. Se o HTML é o que usamos para organizar o conteúdo que deseja colocar na nossa página, CSS é a ferramenta que geralmente usamos para personalizar a forma como os nossos sites olhar, e como a experiência do usuário realmente é, interagindo com o nosso site. 

Semelhante ao HTML, CSS é não uma linguagem de programação. Não tem lógica. Não tem variáveis. Ele não tem qualquer tipo de que fluir as coisas relacionadas que faz C. É uma linguagem de estilo. E sua sintaxe é bastante simples, e apenas descreve como os elementos do nosso A página tem certeza de HTML elementos deve ser modificado. Para esse fim, se você não tem Ainda não assisti o nosso vídeo em HTML, ou não estão familiarizados com HTML geralmente, você pode querer dar uma olhada no que em primeiro lugar, porque esta discussão sobre CSS vai depender de algum conhecimento de HTML. 

Então aqui está um realmente simples folha de estilo CSS. Mesmo se você nunca programado com CSS antes, Tenho certeza que você pode descobrir exatamente o que este estilo faz. O que isso faz? Bem, aplicados ao corpo do nosso web página, tudo entre as tags do corpo em nosso HTML, e define o cor de fundo da página para azul. Bem, é um estilo muito simples. Na verdade, é muito humano linguagem amigável, CSS. Assim, mesmo se você nunca usou antes, você provavelmente poderia adivinhar o que fez. Na verdade, se nós carregamos uma página, onde este estilo foi incorporado de alguma forma, a cor da nossa página de fundo faria ser azul, e não o padrão branco. 

Então, como vamos construir folhas de estilo? Bem, primeiro, temos de identificar um selector. No último exemplo, selector que era o corpo. Então nós temos um diálogo aberto chaveta, e estamos vai começar a definir o folha de estilo para esse selector. Em entre as chaves, nós só tem uma lista de pares de valores-chave. O par valor anterior era cor azul do fundo ponto e vírgula, mas podemos fazer mais e mais destes. Você pode ter várias coisas aplicando a essa marca, que o corpo selector. Cada um deles é separado por um ponto e vírgula, e chamamos a cada um deles uma declaração, uma declaração CSS. Quando acabarmos com toda a nós styling deseja aplicar a essa marca particular, só temos uma de fechamento prepare para acabar com a folha de estilo, e estamos a fazer definindo a folha de estilo para que selector particular. 

Quais são algumas das propriedades CSS comuns? Bem, talvez você quer colocar uma borda em torno de algo. Então você pode dizer, beira, que seria sua chave, e, em seguida, seus valores seriam, o estilo, cor e largura você quer que seja. Assim, o modelo pode ser um sólido linha, uma linha pontilhada, uma linha tracejada, uma linha do cume, o que seria linha ondulada. Talvez você quiser tê-lo ser azul ou preto ou verde. Talvez você quer que ele seja 1 ou 2 ou 10 pixels de largura. Você pode especificar todas essas coisas. Talvez você queira definir o fundo cor de sua página de uma forma particular. Já vimos que, definindo a fundo do corpo a ser azul. 

Então você pode usar uma palavra-chave, assim CSS tem certas cores que são construídos para ele, azul, verde, preto, umas cores muito simples que conhecemos. Mas você também pode especificar qualquer hex cor que você gostaria. Lembre-se que as cores podem ser identificados por um conjunto de três números hexadecimais de 0 a 255, RG e b, o componente vermelho, verde e azul. E assim podemos especificar qualquer cor que queremos por, em vez de usar azul ou verde ou preto, usando libras e, em seguida, seis dígitos do hex, e que nos daria a cor de seis dígitos. Então essa é a cor de fundo. 

Temos também o primeiro plano cor, que é geralmente vai ser o texto de sua página. E você poderia fazer isso de forma semelhante com palavra-chave e ou seis dígitos hex. Então você pode especificar qualquer cor que você quer para o texto de sua página contra uma determinada cor de fundo, lá em cima. Você também pode alterar e lidar com a pia batismal, ea forma de texto é processado na página. 

Assim você pode mudar o tamanho da fonte. Você pode usar palavras-chave, como extra, pequeno extra, ou xx pequeno ou médio, grande, e assim por diante. Você pode usar pontos fixos, 10 ponto, ponto 12, e assim por diante. É possível utilizar percentagens, 80%, 20%, onde 100% é a fonte padrão o tamanho, o qual é geralmente vai ser algo como 11 ou 12 pontos. Ou você ainda pode basear-lo do tamanho da fonte mais recente. Se você acabou de escrever alguma coisa e você sabe o que você quer é para que ele seja menor, mas você não sabe o tamanho que você exatamente quer que seja, bem, você pode simplesmente dizer, tamanho de fonte menor. E vai basear fora do, apenas acima, é o tamanho da fonte. E você pode obter menor ou maior. Portanto, há um monte de diferente maneiras de especificar o tamanho da fonte. 

Você também pode especificar o que família de fonte desejado. Se você tem um especial nome, há uma maneira em CSS-- nós não vamos falar sobre isso aqui-- para definir um tipo de letra muito específico e incorporá-lo em sua página. Você também pode usar nomes genéricos. Há um monte de web fontes seguras que são pré-definidos no CSS. E se você é um usuário do Microsoft Escritório nos últimos 20 anos, você provavelmente está familiarizado com muitas dessas fontes seguras web já, Times New Roman, Arial, Courier New, Georgia, Tahoma, Verdana, e assim por diante. Aqueles são todos considerados web fontes seguras. E, na verdade, parte do razão pela qual eles vieram a ser era para ser usado para fazer web-- cada página tinha acesso a este padrão definido de tipos de letra com vários serifas, e tudo isso material de fonte não vamos entrar, mas estes são geralmente acessíveis no seu CSS, mesmo se você não fizer isso caso contrário definir as fontes. Por último, você pode alinhar seu texto, ao invés de ser, por padrão, alinhado para a esquerda, você poderia alinhá-lo para a direita, ou você pode alinhá-lo centrado, ou justificados para que ele bateu ambas as margens. Portanto, estas são todas as opções que você pode usar para mudar o seu texto parece, e como ele é exibido em sua página. 

Os seus seletores não fazer tem que ser apenas as etiquetas. Nós já vimos um tag body seletor, e seletor de tags parece apenas como aquele. Você nomeia um tag, e então você definir uma folha de estilo para essa marca. Mas você também pode fazer alguma coisa chamado um seletor de ID. Um seletor ID parece muito similar. Mas observe, que agora eu não estou usando uma tag HTML, eu estou usando, neste caso, #unique, ou hash exclusivo. Se você se lembrar do nosso vídeo em HTML, nós falamos sobre como as tags podem ter atributos. 

E um atributo que se aplica para praticamente todas as tags HTML, mas nós não falamos sobre isso, é algo chamado uma etiqueta de identificação. Então, isso seria especial CSS só se aplicam a tag HTML que tem uma identificação muito específico, que você tenha nomeado. Então se você tem algum lugar em seu código, em algum lugar em seu arquivo HTML, uma marca e você especificar como um atributo a essa marca, ID iguala original, este especial de estilo aqui só se aplica entre essa marca com a identificação do original. 

Você também pode fazer algo chamado um selector de classe. Assim, para além de terem Atributos ID, você também pode adicionar um atributo de classe de tags HTML. E quando você usa um atributo de classe, ele pode ser aplicado a várias marcas. Então se você tem várias coisas que são semelhantes, talvez você quer dizer, tag aberta blah, blah, blah, blah, classe iguala alunos. E então este particular stylesheet se aplicaria para cada tag cuja classe é alunos. Neste caso, nós definir o cor de fundo para amarelo, e nós definir a opacidade, que é uma tag que não falar, mas apenas trata de como transparente algo é, para 70%, neste caso. 

Há duas opções para folhas de estilo de escrita. Você pode escrevê-los diretamente em seu HTML colocando as folhas de estilo entre as tags de estilo. E essas marcas de estilo ir para dentro de as tags de cabeçalho da sua página web. A maneira mais preferida talvez fazer é escrever um arquivo CSS separado, e depois vinculá-lo em seu documento usando links tags. Tags de link, mais uma vez, são diferente de hiperligações, se você se lembra do nosso vídeo de um HTML. E link tags são como nós puxe em arquivos separados. É mais ou menos como o equivalente a o # include para programação web. 

Então, vamos dar uma olhada table.HTML. Se você se lembrar do nosso Vídeo HTML, mostrei um exemplo de uma muito multiplicação simples tabela que parecia bastante feio, e talvez haja uma maneira de torná-lo melhor com CSS, para torná-la realmente olhar mais como uma multiplicação mesa, ou algo assim que não está apenas preso em conjunto com nenhuma divisão real entre as linhas e as colunas. Então vamos cabeça para CS50 IDE, e dê uma olhada a forma como o CSS pode, de certa forma, tweak o que começamos antes, e torná-lo algo muito melhor. 

Então, nós estamos em CS50 IDE agora, e se não familiar, vamos puxar para cima neste tabela que página HTML. Table.HTML basicamente apenas define o conteúdo de um multiple-- que era suposto ser uma mesa de quatro por quatro multiplicação. É bastante simples. E nós pensamos que seria olhar muito bem organizado. Mas, na verdade, quando visualizar esta página, vemos que é uma espécie de feio, certo? É evidente que temos linhas e colunas aqui. Há algum tipo de separação. Mas não é uma separação significativa. Nós não estamos realmente recebendo demasiada informação aqui. E não há nenhuma separação entre as linhas e colunas em termos das regras horizontais ou verticais. Nós provavelmente poderia fazer isso olhar um pouco melhor. Então, vamos tentar. Então eu vou para fechar este guia aqui em cima. E eu vou fechar minha table.HTML, e eu tenho uma outra versão aqui chamado table2.HTML. Nós vamos abrir isso. O corpo da página é basicamente o mesmo, mas eu mudei um pouco na parte superior. E eu vou rolar para cima aqui. Observe que, desta vez, sou usando tags de estilo incorporadas. Eu abri uma marca de estilo, e eu estou agora a definição de uma folha de estilo CSS apenas no interior do mesmo. Eu tenho um estilo que diz: mesa. Esse é o meu seletor de tags. Eu não estou usando ponto ou de hash, que eu estaria fazendo se eu estava usando um ID ou um seletor de classe. Eu tenho um seletor de tag tabela aqui--. Este estilo vai se aplicam a cada marca de tabela. Aparentemente eu quero colocar um pixel de largura, borda azul sólida, dentro da minha mesa. Isso soa como seria provavelmente ajudar a situação, certo? Nós vamos ter as coisas parecem muito melhor. Então, isso é ótimo. Estilisticamente, eu tenho apenas incorporado meu estilo aqui. É certamente um forma aceitável para fazê-lo. Vamos ver o que isso parece. Então, eu vou voltar aqui em baixo, e Vou irá visualizar meu table2.HTML. Bem, isso não é bem o que eu queria, mas é exatamente o que pedimos para. Nós dissemos que este estilo é indo para aplicar para a nossa mesa. Nossa mesa tem agora um um pixel ampla, sólida borda azul em torno dele. Nós não estamos realmente recebendo nas células da tabela. Estamos apenas começando na mesa. Então CSS trabalhou. Ele aplicou uma folha de estilo para a nossa mesa. Mas não chegou a fazer o que queríamos fazer. Como é que vamos começar a fazer o que quer que ele faça? 

Bem, vamos dar uma olhada em mais um versão deste em table3.HTML. Então, eu estou indo só para fechar essas guias. Eu vou voltar aqui para o meu árvore de arquivos, e abrir table3.HTML. Mais uma vez, ele vai ficar bonita semelhante aqui no início. Mas aviso, desta vez, em vez de usar uma folha de estilo embutida exatamente lá, Vou ligar em um folha de estilo usando a tag link. Então, eu estou ligando aparentemente em um estilo chamado tables.CSS, e esta é igual a bem stylesheet apenas means-- bem, o que é esse arquivo em relação ao que Estou doing-- é uma folha de estilo que eu sou usando para minha página. Então, se eu realmente quero ver o que Eu estou fazendo com o CSS aqui, Eu preciso ir aberto que table.CSS arquivo também. Então, nós vamos voltar aqui novamente para a nossa árvore de arquivos. Há table.CSS. Vamos colocá-la aberta. Agora estamos vendo um pouco da CSS. Aparentemente, eu tenho um par de coisas acontecendo aqui. Eu aparentemente quer pôr um cinco pixel de largura, borda vermelha sólida, em torno de minha mesa. Nós já sabemos que o que está acontecendo ir apenas no perímetro. Vimos que em table2.HTML. Com cada linha, I aparentemente deseja especificar que a altura da linha é de 50 pixels de altura. Assim, para cada linha, lembre- isso é o que a tag tr faz, Eu estou fazendo isso 50 pixels de altura. 

Por último, eu tenho esse comentário. E é assim que nós fazemos comentários no CSS. É muito semelhante a aproveitar bloco Comentários estrela barra sintaxe. Todo o texto que você quer. Não há nenhuma barra barra embora em CSS. Para comentários in-line curtos, temos para usar este formato particular aqui. Parece que eu estou fazendo um monte de coisas na minha tags td. Lembre-se tags td, ou mesa dados, o que realmente são apenas as colunas no interior de nossas linhas e, aparentemente, para cada pedaço de dados na minha mesa, eu quero para definir a cor de fundo para ser preto, a cor a ser branca, cor é cor de primeiro plano. Portanto, esta vai ser o texto da minha página. Eu quero uma pia batismal grande, 22 apontar fonte, e eu quero que ele seja do tipo de letra, Geórgia. Então eu não vou tem a fonte padrão. Eu estou indo para especificar a Geórgia, que é uma dessas fontes seguras web que já vimos antes. Eu quero o meu texto a ser alinhado centralmente, no meio da caixa, Eu não quero que ele seja deixado alinhado ou alinhado à direita. E eu quero a minha largura da coluna para ser de 50 pixels de largura bem. Vamos dar uma olhada o que isso parece, e ver se esta é talvez uma melhoria. Então, eu estou indo para ir para table3.HTML, que recall, inclui table.CSS como um link, e vamos visualizá-lo. Isso é muito melhor, certo? Este é realmente começando a olhar um muito mais como uma tabela de multiplicação. Eu tenho que borda vermelha em torno de minha mesa, mas agora Eu também especificou que cada linha é de 50 pixels de largura, ou é 50 pixels tall-- desculpa me-- cada coluna é de 50 pixels de largura. Os dados em cada coluna, e apenas os dados, tem um fundo preto. É por isso que aqueles linhas brancas estão lá. Uma vez que o espaço na entre todas as células, não é uma fronteira em e de si mesmo, é só Eu só estou preenchendo o As células, que na verdade faz com que as bordas da tabela, o que aparentemente, existia o tempo todo, ele era apenas linhas brancas finas. Agora eles estão visíveis. Agora eles saltam na tela. E por isso esta é uma forma muito simples folha de estilo que eu apliquei, e agora minha mesa parece muito mais como uma mesa de quatro por quatro multiplicação, em vez de apenas uma bagunça confusa, onde tudo o que é claramente linhas e colunas, mas não super bem organizado. Nós realmente estamos apenas arranhando a superfície de que você pode fazer com CSS aqui. Felizmente, a documentação CSS é bastante simples. Você vai usar vários dos seus atributos, com bastante frequência. Os que falamos anteriormente neste vídeo. Há vários que você provavelmente não vai usar todos. E isso é bom, também. Mas só sei que há uma grande quantidade de documentação lá fora. Assim, mesmo se nós não cobrir tudo, você certamente não é deixado em seu próprio país. Mas CSS é realmente divertido para experimentar. E eu gostaria fortemente incentivamos para brincar com suas páginas web, e veja como você pode torná-los olhar e sentir para melhorar o usuário experiência de visitar sua página. Eu sou Doug Lloyd. Este é CS50.