>> SPEAKER: Acontece que o HTML não é a única língua que você pode usar dentro
de uma página web.
Você pode usar algo chamado CSS, ou Cascading Style Sheets, também.
CSS permite que você especifique muito mais precisamente a estética de um web
página, incluindo layout e os tamanhos e cores e fontes e muito mais.
Por exemplo, vamos criar uma página web aqui chamado css0 que representa um
home page para, digamos, John Harvard.
>> Nesta página, vamos ter de John Harvard nome, sob o qual será
uma bela mensagem para os seus visitantes, sob que será um rodapé, com
dizer, algumas informações sobre direitos autorais.
Para fazer isso, vamos definir três divisões para a página usando uma tag
chamado div.
Abrir suporte div, John Harvard, perto div suporte, outra div suporte aberto,
e agora vamos especificar algo como, bem-vindo à minha página!
E vamos fechar essa div, também.
>> E agora, um terceiro e último div, direitos autorais.
Só para ser extravagante, deixe-me usar agora um HTML entidade, um símbolo que representa
um personagem que você não podia de outro modo digite no teclado.
Em particular, eu vou fazer comercial, libra, 169, ponto e vírgula.
Acontece que é o código numérico para o símbolo de copyright.
Então vamos especificar John Harvard aqui na parte inferior.
Vamos fechar a div e salve o arquivo.
>> Agora, o que é essa tag div?
A tag div simplesmente define uma divisão da página, que é essencialmente um
região retangular.
Portanto, neste momento no tempo, eu tenho três regiões retangulares, um em cima
do outro.
Então, por agora, o efeito é quase tão embora eu tinha três parágrafos.
Mas não veremos tão grande espaço em branco entre eles.
>> Vamos salvar este arquivo, altere a sua permissões e dar uma olhada para um
momento no Chrome.
Chmod a + r CSS0.html.
Vamos agora abrir Chrome e visita http://localhost.CSS0.html.
Na verdade, aqui está uma home page por John Harvard.
Vamos agora estilizar um pouco mais precisamente usando algum CSS.
>> De volta ao gedit, vamos entrar nessa primeira tag div e adicionar um estilo
atribuem especificando que eu gostaria de uma tamanho da fonte, por exemplo, 36 pixels, ou px.
E eu gostaria que o peso desta fonte ser ousado em vez do padrão,
o que é normal.
Para a segunda div, vamos especificar outro atributo de estilo que tem um
tamanho da fonte de 24 pixels, então um pouco menor.
Citações fechar após o ponto e vírgula.
>> Por fim, nesta terceira div, vamos fazer estilo é igual tamanho citação, fonte e
digamos que 12 pixels dessa vez.
Fechar citação após o ponto e vírgula.
Observe, então, que me parece ter especificou um pouco de estilização para
cada um destes três divs usando, ao que parece, CSS.
Na verdade, a sintaxe que você vê na entre essas aspas é CSS,
especificamente CSS propriedades com valores.
E para que a primeira tag, onde tive duas dessas propriedades, tamanho da fonte e
peso da fonte, eu simplesmente separados los com um ponto e vírgula.
>> Agora, só por causa do estilo, eu ponto e vírgula também incluídos no
No final de cada linha.
Mas eles não são estritamente necessários, especialmente quando você só tem uma
propriedade definida.
Vamos agora salvar o arquivo e recarregue no Chrome, e ver o que
o efeito líquido é.
Voltar no Chrome aqui, vamos clique em Recarregar.
>> Agora temos um pouco mais interessante home page para John
Harvard, em que a primeira linha com seu nome, o que está dentro desse
primeiro div, é de 36 pixels de altura e também negrito, pelo que a segunda linha,
que é, em que a segunda div, é 24 pixels de altura, mas não em negrito.
E em que a terceira linha em que a terceira div é de 12 pixels de altura e também
não negrito.
Mas suponha que agora eu gostaria de mudar tudo isso texto sobre
de tal forma que ele é centrado.
>> Eu poderia alinhar cada do indivíduo divs como sendo centrado.
Mas, mais facilmente, eu poderia envolver os três divs dentro de uma quarta, uma div
div pai, por assim dizer, e especifique que que div e todos os seus
descendentes deve ser texto alinhado centro?
Vamos dar uma olhada.
>> Dentro de gedit, vamos voltar para o meu corpo e adicionar um novo top up div com
div, o estilo é igual entre aspas centro alinhar texto, close
cotar após o ponto e vírgula.
E agora, vamos em frente e tudo travessão dessas linhas que digitou antes.
E abaixo desse terceiro div, vamos fechar esta nova div.
>> Em outras palavras, porque os três divs originais são agora as crianças, por assim
dizer, de uma nova div pai e eu tenho especificou que eu gostaria de alinhar o
texto dessa div pai no centro da página, que a propriedade será
herdado por todas essas crianças.
Na verdade, vamos salvar o arquivo e dê uma olhada em um navegador.
Vamos recarregar no Chrome.
E aí temos que, uma ainda melhor home page para John Harvard.