Precisa de um freelancer, códigos-fonte e exemplos completos? Bem-vindo(a) ao meu site. Além de realizar alguns serviços como freelancer eu tenho alguns códigos-fonte e exemplos completos de Java, Delphi, PHP, Python, C/C++, Hibernate, JPA, Spring, JSP, Servlets, Ruby, Ruby On Rails e muitas outras linguagens e frameworks. Veja como falar comigo clicando aqui.
Você
está aqui:Inicio
-> DHTML
-> Curso
Completo -> Como adicionar estilos aos títulos
da página HTML
Como adicionar estilos aos títulos
da página HTML
Antes de passarmos ao estudo sobre
como adicionar estilos a uma página web, eu gostaria
de fazer uma pequena demonstração que o deixará
mais confortável para assimilar os próximos tópicos.
Observando a nossa
página web, podemos ver que temos dois títulos.
Veja-os representados em seguida:
<h2 align="center">Sobre
a minha empresa</h2>
e
<h2 align="center">Onde
atuamos - cidades e países</h2>
Observe que fizemos uso da propriedade align="center"
para centralizar o conteúdo de cada título. Vamos
fazer um pequeno teste aqui.
Abra o arquivo lab1-1.htm
que representa a página web demonstrada anteriormente.
Agora, vá até os dois títulos e retire
a propriedade align="center". Você terá
os dois títulos como mostrado em seguida:
<h2>Sobre a minha
empresa</h2>
e
<h2>Onde atuamos
- cidades e países</h2>
Para ver a página já modificada, execute o arquivo
lab1-2.htm.
Agora você pode ver que os dois títulos estão
alinhados à esquerda, já que na falta de qualquer
alinhamento, o browser entende que este deve ser o assumido.
Com a página aberta (o arquivo que você está
editando), vá até a parte <head></head>
do documento e digite o seguinte código:
Com o código anterior devidamente inserido entre as tags
<head></head> e a eliminação dos atributos
align="center" de cada título, você está
pronto para visualizar o resultado. Execute a página
agora e você verá que os títulos estarão
alinhados ao centro novamente. Isso acontece porque, embora
tenhamos retirado os atributos de alinhamento dos títulos,
nós definimos na parte <head> da página
que todos os títulos <h2> devem ser alinhados ao
centro. Isso não é uma maravilha? A partir desse
ponto você não precisa mais se preocupar em alinhar
cada título individualmente. Isto é CSS (Cascading
Style Sheets) e durante os próximos capítulos
você será brindado com técnicas que trarão
um controle sobre a formatação dos elementos de
uma página nunca antes conhecido.
Quer mais motivos para ficar alegre? Experimente acrescentar
mais um trecho de código na parte <head>. Altere
o código anterior para:
Execute a página agora e você verá que todos
os parágrafos estarão justificados. É importante
perceber que estas mudanças só ocorrerão
se nenhuma propriedade de alinhamento HTML for utilizada. Vá
em frente! Digite mais títulos e parágrafos na
página e veja o resultado. Bem-vindo ao maravilhoso mundo
das folhas de estilo (CSS).
Execute o arquivo lab1-3.htm
para ver o resultado final.
Todo o conteúdo deste site,
quando não devidamente observado, pertence a seus idealizadores
e não
poderá ser usado para outras finalidades senão estudo e
aprimoramento de técnicas de programação.
Certifique-se de ler asnotas legaisantes de proceder com
o acesso e leitura do
conteúdo disponibilizado nestas páginas.