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

Hoje vamos falar sobre CSS ou Cascading Style Sheets. 

Então, o que exatamente é CSS? Bem, vamos quebrar a CSS termo para baixo em duas partes: Cascading Style Sheets e. Cascata é um pouco mais complexo, e é algo que nós vamos cobrir em outro vídeo. Mas, para começar, folhas de estilo dicas muito em o que CSS faz. Acrescenta estilos para o HTML de uma página da web, mudando a forma como a página web esteticamente parece. Isso significa tudo, desde a fonte do texto para o posicionamento do conteúdo da página para outras coisas legais como fazer os cantos de uma caixa arredondada ou adicionar sombras em texto. Você pode até mesmo fazer coisas malucas como fazer as coisas animadas na tela. 

Então, como vamos usar o CSS com HTML? Tome este site pobres de aparência eu escrevi. Se Rob estava a olhar para este site agora, ele provavelmente diria algo como: "Uau! Minha introdução parece terrível. José, você é um designer horrível." "Usando o padrão de fonte Times? Helvetica é muito melhor." 

Então, o que pode ser a maneira mais simples de aplicar o estilo Rob quer? Os lotes de forma mais óbvia de pessoas inicialmente escreveu CSS foi a de colocar o que chamamos de declarações de estilo mesmo no próprio elemento usando o atributo de estilo HTML. A declaração de estilo consiste simplesmente de propriedade do elemento HTML CSS queremos mudar seguida de dois pontos seguido pelo novo valor da propriedade e um ponto e vírgula no final. Por exemplo, vamos dizer que Rob quer uma borda preta ao redor de sua introdução. Primeiro, colocar o atributo de estilo na div Rob aqui em seguida, dentro de aspas colocar uma declaração CSS: "Border: 1px preto sólido"; O pixel 1 refere-se à largura da borda, o sólido se refere ao estilo da fronteira, e a cor no final determina a cor da borda é. 

Se queremos vários estilos em um elemento, escrever estas declarações em sequência. Por exemplo, se Rob quer que seu texto do cabeçalho na Helvética com um fundo azul e mais espaço em torno do texto, podemos fazer isso: style = "font-family: Helvetica; background-color: blue; padding: 5px;" O ponto e vírgula última é realmente opcional, mas as pessoas geralmente mantê-lo em Por razões de coerência. 

Vamos salvar explicar algumas das propriedades mais frias e mais complexo CSS por outro vídeo. Se você tem algo em mente, apenas pesquisando o efeito desejado seguido de CSS provavelmente vai lhe dar resultados muito bons. O legal é que o CSS é bastante amplo, assim as probabilidades são, se houver qualquer coisa que você quer fazer - dentro da razão - CSS pode provavelmente fazê-lo. Chamamos esse tipo de denominar o estilo inline. O estilo elemento é, assim, em linha com a marca de início. 

Para pessoas que realmente gostam de ser organizado, você pode começar a ficar um pouco irritado com a forma como tudo parece bagunçado esse. Imagine se você tivesse que fazer isso para cada elemento da página, mais agora seu HTML e CSS são todos misturados e desordenado. Gross, certo? Para corrigir isso, as pessoas finalmente começou pegando a separar a sua marcação HTML de seu estilo CSS usando algo chamado seletores CSS. Seletores CSS são usados ​​para escolher os elementos para que as declarações são aplicados. Um selector combinado com uma lista de declarações CSS é muitas vezes referida como uma regra CSS. Essas regras seriam colocados entre abrir e fechar marcas de estilo HTML, frequentemente no início do documento. 

É muito mais fácil ver com um exemplo, então vamos começar por criar uma regra CSS simples. Primeiro, vamos colocar marcas de estilo na seção principal do nosso HTML. Em seguida, o selector. Vamos começar usando uma das mais simples seletores, o símbolo de hash, que seleciona um elemento HTML pelo seu atributo ID. Neste caso, vamos selecionar a div que representa a introdução de Rob digitando o símbolo hash seguido por ID da div, Rob. Agora as declarações. Nós adicionar chaves de abrir e fechar e mudar nossas declarações anteriores em linha em div Rob dentro destas chaves, atualização, e, fresco, introdução de Rob ainda tem uma borda preta em torno dela menos a feiúra linha bagunçado. 

Agora, o que se quiséssemos selecione o interior h1 de introdução de Rob? Você pode pensar: "Vamos colocar um ID nele e então mover os nossos estilos anteriores." Isso funciona, mas CSS tem outras maneiras de deixar você selecionar elementos usando o que chamamos de combinadores de misturar seletores simples. Por exemplo, um caracter de espaço em branco pode ser utilizado como um elemento de combinação para especificar todas as instâncias de um seletor que vive dentro de outro seletor. Isso soa muito mais complicado do que realmente é. Aqui está um exemplo. Vamos digitar # roubar, adicionar um espaço, e segui-lo com um h1, outro seletor simples chamado um seletor de tag que seleciona os tipos de elementos como divs ou parágrafos. O espaço combina nossos dois seletores simples, aplicando todas as declarações CSS e as chaves para tags h1 que vivem no interior do elemento com id = "roubar". Só para convencê-lo de que ele funciona, eu vou mudar a cor da fonte para branco, de atualização, e, olha, o cabeçalho de Rob agora é branco. 

Todo este trabalho vai mostrar que por meio de regras, em vez de estilos inline podemos obter o código muito mais limpo. Na verdade, se este bloco estilo começa a ficar um pouco grande, Posso até puxar esses estilos para fora em um arquivo diferente. 

Para incluir este novo arquivo como CSS neste documento eu vou usar tag HTML do link. Aqui eu estou dizendo é que eu estou ligando em uma folha de estilo externa, o atributo rel, e especificando o caminho para o arquivo com meu atributo href. Agora a minha marcação HTML e CSS são organizadas bem em arquivos completamente separadas, que é quase sempre a forma como os designers preferem trabalhar com HTML e CSS. 

No caso você esteja se perguntando, os seletores simples incluem seletores ID e seletores de tag como as que acabamos de ver bem como seletores de classe para a seleção de elementos com uma determinada classe, seletores de atributos para a seleção de elementos por outros atributos, como type = "radio" para as entradas de botão de rádio e pseudoselectors como pairar e concentrar para especificar o estilo quando interações como passar o mouse sobre um elemento ocorrer. 

Os combinadores comuns incluem espaços para todas as crianças e vírgulas para distinguir seletores. Outros que podem ocorrer incluem a seta para crianças diretos apenas, o til para todos os irmãos que ocorrem após o elemento, e no sinal de mais para o irmão 1 que vem imediatamente após o elemento. 

Ao combinar esses seletores e combinadores, você pode ampliar o leque de estilo que você pode conseguir em uma determinada página da web e escrever CSS de forma mais eficiente. Com apenas um par de linhas de CSS que você me ver escrever aqui, Eu posso fazer rapidamente algo como isto parece algo assim. 

Eu sou José, e este é o CS50. 

[CS50.TV] 

Uh, por onde eu começo? Deixe-me fazer isso sem - [risos] Ok. Adicionar um - Deixe-me mudar essa formulação. Ooh. Desculpe.