Medidas utilizadas
Na definição das várias propriedades das folhas de estilo, diversas medidas podem ser usadas, sendo que algumas são relativas e outras absolutas.
px - número de pixels. É relativo à resolução do monitor ou outro dispositivo onde a página será exibida. Exemplo: 100 pixels em uma tela com resolução de 640x480 resulta em um tamanho maior que os mesmos 100 pixels em uma tela com resolução de 800x600.
in - polegadas.
cm -centímetros
mm - milímetros
pt - pontos.
pc - paicas
em - pontos. Esta unidade é igual ao tamanho em pontos de uma fonte. No exemplo abaixo, ela se refere ao tamanho do "elemento pai":
p {font-size: 10pt} b {font-size: 1.5em}
Neste caso, qualquer texto na tag inclusa numa tag <p> terá um tamanho de 15 pontos (1.5em x 10 pt)
Cores
Nas tags padrão HTML pode-se usar as cores declarando o seu nome: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow, etc. ou através de seus códigos RGB em formato hexadecimal.
Além dessas notações que podem ser usadas para a CSS, outras notações estão disponíveis, as quais podem facilitar muito o trabalho do desenvolvedor.
Exemplos:
{color: #ff0000;} - representa FF para vermelho, 00 para verde e 00 para azul
{color: rgb (255,120,60);} - os valores vão de 0 a 255
{color: rgb(100%,15%,40%);} - representa 100% para vermelho, 15% de verde e 40% de azul.
Definindo o tipo de CSS
Você pode escolher como utilizará o CSS. Existem vários tipos como: seletores, classes, redefinir tags, seletores contextuais, seletores de links, etc.
Classes
Todos os elementos dentro do elemento body podem ser agrupados em classes, as quais podem ser ligadas à folha de estilo que aumentam o poder de controle sobre os elementos.
Imagine que em um primeiro parágrafo queira colocar o texto na cor vermelha, no segundo parágrafo verde e no terceiro cinza.
Exemplo:
<html> <head> <style type="text/css"> <!-- .primeiro {color:red;font-size: 10pt;} .segundo {color:green;font-size: 12pt;} .terceiro {color:gray;font-size: 14pt;} --> </style> </head> <body> <p class=" primeiro">Primeiro parágrafo</p> <p class=" segundo">Segundo parágrafo</p> <p class=" terceiro">Terceiro parágrafo</p> </body> </html>
Exemplo de Classe
Classes Únicas
Em certas situações, apenas um item dentro código é de uma determinada classe (como o topo de um site, por exemplo) e para isso existem um identificação de classe única. A diferença para classe tradicional (declarada com o ".") é que enquanto a classe comum pode ser usada por diversas tags, a classe única só pode ser utilizada uma vez.
Imagine que em um layout exista um parágrafo que serve para identificar o preço de um produto (mostrado apenas uma vez na página) e esse preço é exibido em vermelho
Exemplo:
<html> <head> <style type="text/css"> <!-- #preço {color:red} --> </style> </head> <body> <p>Notebook HP</p> <p id="preço">R$ 3500,00</p> </body> </html>Redefinindo Tags
Ao redefinir uma tag HTML em CSS, ela é automaticamente formatada pelos estilos definidos.Imagine que em um documento html você tenha várias ocorrências da tag <p>, e quer que todos estes parágrafos fiquem com a mesma formatação. Então você redefine a tag <p>.Exemplo:<html> <head> <style type="text/css"> <!-- p {color:red;font-size: 30pt} --> </style> </head> <body> <p>Primeiro parágrafo</p> <p>Segundo parágrafo</p> <p>Terceiro parágrafo</p> </body> </html>Exemplo de tag redefinidaAs declarações devem ser dadas da mais geral para a mais específica. As tags herdarão as propriedades da declaração geral, tendo como mudança a declaração específica.Os estilos CSS podem ser combinados, para otimização do código, declarando vários atributos ao mesmo tempo para vários elementos.Imagine que num determinado documento todo o texto é formatado com a fonte Arial, porém cada tag (h1, h2 e p) possuem uma cor e tamanhos específicos. Imagine ainda que exista um tipo de parágrafo especial que tem a cor diferente (porém ainda possui o valor semântico de um parágrafo comum). Para isso são utilizadas declarações de redefinição de tag e classe, como no exemplo a seguir:<html> <head> <style type="text/css"> <!-- p, h1, h2 {font-family:Arial;} p{color:black;} h1{color:red;} h2{color:blue;} .destaque {color:red;} --> </style> </head> <body> <h1>Css é fundamental</h1> <p>Todo o texto pode ser formatado com CSS, sem perder a sua função original.</p> <h2>A semântica é importante para o código</h2> <p class="destaque">Cada tag tem a sua função específica</p> <p>Os parágrafos possuem função diferente dos títulos, apesar de poderem dividir propriedades e atributos</p> </body> </html>
Nenhum comentário:
Postar um comentário