CSS – Parte I

Como prometido, volto a falar sobre css (cascading style sheets ou folhas de estilo em cascata), eu nem sei se vai ter parte II, mas se caso acontecer já estamos preparados🙂. Com certeza você já ouviu falar nisso, css baseia-se praticamente em alterar o aspecto de sua página, logicamente, pode-se fazer sem css, porém facilita muito o trabalho. Existem duas formas de se fazer uso dele:

  1. Você pode criar um arquivo de extensão css e incorporar à sua página html.
  2. Criar o css na própria página html.

Eu aconselho utilizar a primeira forma, por diversos motivos, mas os principais são:

  • O código fica melhor visualmente, portanto melhor pra se entender.
  • Mais de uma página na sua web page, poderá usar o mesmo css.
  • Se por um acaso no meio do desenvolvimento necessitar fazer alguma alteração no css, não precisa ir página por página para altera-la, é só ir ao arquivo css e problema resolvido.

Agora, mãos a massa (pensando bem é melhor ficar só no teclado mesmo, que eu sou horrível na cozinha) :

Antes de tudo, vou abordar o assunto de uma forma geral, por enquanto, tenha logo em mente, que há diferenças no IEca (Internet Explorer) e o FF (firefox), seja ela por sintaxe, ou mesmo por suporte.

Sintaxe:

Seletor {propriedade: valor}

Exemplo:

p { font-family: “Times New Roman”}

olha que simples, ele declara que todos os elementos p, vão ter a fonte Times New Roman,  porém essa talvez não seja a melhor forma de usá-lo, vejamos o porque:

table { font-size: 14}

Acabei de declarar que todas as tables da minha página terão a fonte do tamanho 14, porém se eu tiver várias tables na mesma página e elas forem de tamanhos diferentes? Agora, você deve estar pensando “f…”, “calma, calma não criemos pânico”. A solução é simples, todo elemento html tem uma propriedade chamada class, pode-se dar um nome à class e depois montar no css todo o esquema, exemplo:

vamos supor que em sua página html, possua um parágrafo com a class = p_prim (parágrafo primeiro).

no css:

.p_prim { text-align: center}

percebe-se que houve uma alteração no início da linha, onde há um ponto (.), com isso vai procurar em todos elementos do html que possua a class p_prim, lembrando-se que isso se aplica a todos os elementos do seu html, logo pode ter mais de um elemento com a mesma classe, apenas tenha o cuidado de saber quais vão ser os elementos que vão conter a mesma classe. o resto da linha você já sabe, alinha o texto para o centro.

E por último, pois você deve estar de saco cheio de ler e se não tiver eu estou de saco cheio de escrever.🙂

Existe outro modo de você utilizar no css os elementos html, a propriedade id não confunda com name, que também é comum à todos os elementos do html.

Exemplo:

vamos supor que no html o id do seu parágrafo também se chame p_prim

no css:

#p_prim { text-align: justify}

Percebe-se agora que o diferencial é a cerquilha, jogo-da-velha, ou seja lá o que você chame, e todo o resto se repete, a diferença entre usar a propriedade class e a id, além da pontuação ( . no caso de class e # no caso de id) é que no id só um elemento pode possuir aquele nome, pode-se também especificar qual id aquele elemento tem que pertencer , ou seja, se ele for de elemento diferente o browser não faz nada.

Exemplo:

div#p_prim { text-align: justify}

Como visto, antes de # tem a palavra div, que é um elemento de html, então ele só vai fazer alteração do alinhamento do texto, se o elemento div possuir o id p_prim, ou seja, no nosso caso não vai fazer alteração alguma, porque o nosso p_prim é um elemento p.

Alguns pontos:

tanto id quanto class são comuns à todos os elementos html

class = .

id = #

Bom eu acho que com isso, já se tenha uma boa noção de css, quem sabe até possa voltar com esse tema aqui.

abraços

ps: escrever cansa…

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: