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

Hoje vamos falar sobre CSS ou Cascading Style Sheets. 

Então, o que exatamente é CSS? Bem, vamos quebrar o termo CSS para baixo em duas partes: Cascading Style Sheets e. Cascading é um pouco mais complexa, e é algo que vai cobrir em outro vídeo. Mas, para começar, Style Sheets muito muito dicas de CSS que faz. Acrescenta estilos para o HTML de uma página web, mudando a forma como a página web esteticamente parece. Isso significa que 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 CSS com HTML? Tome este site pobre de aparência eu escrevi. Se Rob estava a olhar para este site agora, ele provavelmente diria algo como: "Wow! Minha introdução parece terrível. Joseph, você é um designer horrível." "Usando a fonte padrão Times? Helvetica é muito melhor." 

Então, o que poderia ser a maneira mais simples de aplicar o estilo Rob quer? A maneira mais óbvia muitas pessoas inicialmente escreveu CSS era 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 do elemento HTML propriedade CSS que queremos mudar seguido por dois pontos, seguido pelo novo valor do imóvel e um ponto e vírgula no final. Por exemplo, digamos que Rob quer uma borda preta ao redor de sua introdução. Primeiro, coloque o atributo de estilo na div de Rob aqui em seguida, dentro de aspas duplas colocar uma declaração CSS: "Border: 1px solid preto"; A 1 pixel refere-se à largura da borda, o sólido refere-se ao estilo de borda, ea cor no final determina a cor da borda é. 

Se queremos vários estilos em um elemento, escrevo estas declarações em seqüência. Por exemplo, se Rob quer que seu texto do cabeçalho em Helvetica com um fundo azul e mais espaço em torno do texto, pode-se fazer isso: style = "font-family: Helvetica; background-color: blue; padding: 5px;" O último ponto e vírgula é realmente opcional, mas as pessoas costumam manter-lo por uma questão de coerência. 

Vamos salvar explicar algumas das propriedades CSS mais frias e mais complexo para 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 styling styling em linha. 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 isso parece confuso. Imagine se você tivesse que fazer isso para cada elemento na página, mais agora o seu HTML e CSS são todos misturados e desordenado. Gross, certo? Para corrigir isso, as pessoas finalmente começou a recuperar para separar sua marcação HTML de seu estilo CSS usando algo chamado seletores CSS. Seletores CSS são usados ​​para escolher elementos aos quais são aplicadas as declarações. Um seletor combinado com uma lista de declarações CSS é muitas vezes referida como uma regra CSS. Essas regras seriam colocados entre as tags estilo HTML abrir e fechar, muitas vezes no cabeçalho do documento. 

É muito mais fácil ver um exemplo, então vamos começar criando uma regra CSS simples. Primeiro, vamos colocar marcas de estilo na seção head do nosso HTML. Em seguida, o selector de. Vamos começar usando um dos seletores simples, 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 de hash seguido pelo ID da div, Rob. Agora as declarações. Nós adicionamos chaves abrem e fecham e mudar as nossas declarações anteriores em linha em div de Rob dentro destas chaves, atualização, e, fresco, introdução de Rob ainda tem uma borda preta em torno dela menos a feiúra em linha confuso. 

Agora, o que se queria para selecionar o h1 dentro de introdução de Rob? Você pode pensar: "Vamos colocar um ID nele e, em seguida, 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 pode ser usado como um elemento de combinação para especificar todas as instâncias de um seletor que viver dentro de outro seletor. Isso parece 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 de seletor de tags, 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 h1 que vivem no interior do elemento com id = "rob". 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 serve para mostrar que, usando 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, Eu até posso puxar esses estilos para fora em um arquivo diferente. 

Para incluir este novo arquivo como CSS neste documento eu vou usar tag link do HTML. 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 o 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 projetistas preferem trabalhar com HTML e CSS. 

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 rádio entradas de botões e pseudoselectors como passar e se concentrar para especificar o estilo quando interações gosta de 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 apenas filhos diretos, o til para todos os irmãos que ocorrem após o elemento, e no sinal de mais para o 1 irmão que vem imediatamente depois do elemento. 

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

Eu sou José, e este é o CS50. 

[CS50.TV] 

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