Centralizar parágrafos
O que conseguimos lograr até agora não é grande coisa, comparado com o que nos espera, mas de momento temos já assimilado algumas coisinhas interessantes. O aspecto do site que temos até agora não está de todo mal porém falta bastante ainda, então vamos lá!!!
Vamos aprender a centralizar parágrafos de modo muito simples graças como sempre a nossa grandiosa Folha de Estilos.
Criar um estilo: centralizado
A propriedade em css que define o alinhamento de um elemento é: text-align e podem ser dados os valores: left (à esquerda), right (à direita), center (no centro), e justify (justificado).
Se quiséssemos que todos os parágrafos aparecessem centralizados, bastaria colocar na Folha de Estilos esta linha:
p {text-align:center}
O problema disso é que centralizaria todos os parágrafos e claro que não queremos isso, senão que, centralizar alguns poucos. Nesses casos em que queremos definir um estilo mas não queremos aplicar a todos os elementos, é necessário definir o que chamamos: Classes de Estilo. Por exemplo, criaremos uma nova Classe de Estilo que você poderia chamar como quisesse, aqui chamaremos de “centralizado”. Definiremos na Folha de Estilos as propriedades que queremos que tenha e logo no código Html da página indicar a um parágrafo concreto que siga esse estilo. Veremos por partes.
Criar uma classe de estilo
Abrir a Folha de Estilos e escrever esta linha:
.centralizado {text-align:center}
Repare que colocaremos um ponto seguido do nome que demos (no caso aqui “centralizado”) e a continuação entre chaves está à propriedade: center (no centro).
É importante saber que quando criamos esses estilos temos que seguir certas regras para evitar problemas:
- Sempre com letra minúscula.
- Não por acentos, símbolos ou espaços. Somente letras e números.
- Nunca começar o nome com um número.
- Se necessitar separar o nome em duas palavras use sempre o traço normal: “nome-nome”, nunca use underline: “nome_nome”.
Bem, lembrem-se sempre essas normas. Salvar a Folha de Estilos e abrir o index.html para centralizar parágrafos.
Centralizar parágrafos no Html
Como recordará, todos os parágrafos começam com a etiqueta <p>. Pois é justo dentro dessa etiqueta ou tag (muita gente chama as etiquetas de tag que é seu nome em inglês) onde temos que indicar a classe de estilo que queremos aplicar.
Vamos então a pratica, no parágrafo que escrevemos “Bem-vindos/as...” ; centralizemos este parágrafo. Para isso entramos no index.html e mudamos o código acrescentando na respectiva etiqueta <p> a classe de estilo que queremos dar, ela ficará assim:
<p class=”centralizado”> Bem-vindos/as. Em pouco tempo a página estará pronta!!!</p>
Pulse na vista prévia ou “Preview” do Html-kit e verás como agora este parágrafo aparece centralizado. Fácil, não é?
A partir de agora cada vez que queira centralizar um elemento somente terá que colocar class=”centralizado” dentro da etiqueta de início no seu código Html.
Nota:
Que fique bem claro: Definimos na Folha de Estilos colocando um ponto, mais o nome; e indica-se no código Html com class= “nome” (aqui sem ponto). Essas coisas não sabem qualquer um, eu mesmo já vi muita gente que se dedica a fazer sites e não tem nem idéia disso... está começando a ser um Webmaster de verdade!
Relax
Aprenda novos ditados
- Quando um não quer…o outro vira pro lado e vai dormir.
- Água mole em pedra dura tanto bate…até que molha tudo.
- Quem cedo madruga…tem mais tempo para fazer nada.
- Quem rouba dos ricos e dá aos pobres…além de ladrão é gay.
- Depois da tempestade…vem a queda de luz e também a gripe, a pneumonia e o caixão.
- O dinheiro não é tudo…tem também o carro, a casa, o computador…
- Escreveu não leu?…então é burro.
- Quem dá aos pobres…ainda tem que pagar o motel.
- O pior cego é…aquele que anda sem bengala.
- Quem casa…se estrepa.
- Os últimos…serão desclassificados com toda certeza.
- Devagar…se chega atrasado.
- Quem não deve…está sem dívidas. Simples!!!
Menu
