No post de hoje faremos um breve relato sobre a Visão Geral CSS. Espero que gostem.
Visão
geral CSS
O Cascading Style Sheets (CSS),
ou Folhas de Estilo Encadeadas, é uma tecnologia padronizada
pelo Word Wide Web Consortium (a entidade que define os padrões da
iterrnet), e que não é parte do HTML padrão, mas sim um conjunto
de novas tags que ajudam a ter o melhor controle sobre o layout e o
gerenciamento de nossas páginas.
Devido às grandes vantagens advindas
do uso do CSS, a maioria dos grandes sites estão usando- o em suas
páginas. Se você visualizar página com CSS em browsers que não
suportam essa tecnologia, você verá o conteúdo normalmente, mas
sem as definições de estilo especificadas com o CSS.
Formas
de utilização
São três as formas de utilização do
CSS: embutido, externo e inline.
Embutido ou Folha de estilo interna:
O código CSS é colocado no header (cabeçalho) da pagina HTML,
fazendo referencias ao estilo das tags daquela página.
Exemplo:
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="pt-br" lang="pt-br">
<head>
<title>Seu
título</title>
<meta
http-equiv="content-type" content="text/html;charset=utf-8"
/>
<style
type="text/css"> .texto {color:#B000FF;} </style>
</head>
<body>
<p
class="texto">Estilo
chamado através do head da página</p>
</body>
</html>
Externo ou folha de estilo externa:
O código CSS é criado em uma página externa, e é chamada no
cabeçalho da página HTML, sempre com extensão .css , e salvo
dentro do mesmo diretório em que está a página HTML.
Exemplo:
<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”pt-br” lang=”pt-br”>
<head>
<title>Seu título</title>
<meta http-equiv=”content-type” content=”text/html;charset=utf-8″ /><link rel=”stylesheet” type=”text/css” href=”estilo.css” />
</head>
<body>
<p class=”texto”>Estilo chamado através do head da página</p>
</body>
</html>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”pt-br” lang=”pt-br”>
<head>
<title>Seu título</title>
<meta http-equiv=”content-type” content=”text/html;charset=utf-8″ /><link rel=”stylesheet” type=”text/css” href=”estilo.css” />
</head>
<body>
<p class=”texto”>Estilo chamado através do head da página</p>
</body>
</html>
Inline: O código CSS é
aplicado dentro da própria tag, junto com o atributo style.
Exemplo:
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="pt-br" lang="pt-br">
<head>
<title>Seu
título</title>
<meta
http-equiv="content-type" content="text/html;charset=utf-8"
/>
</head>
<body>
<p
style="color:#B000FF;">CSS
dentro das tags HTML</p>
</body>
</html>
Livro
HTML/CSS – Microcamp Internacional, pgs 118 a 125.
Tipos
de seletores
O
que são os seletores?
Seletor
é uma entidade que faz parte da regra CSS e define o alvo dessa
regra. O alvo é um elemento integrante da árvore do documento HTML
(ou elementos).
ID
O
seletor ID é usado para especificar um estilo para um elemento único
e exclusivo.
O
seletor id usa o atributo id do elemento HTML, e é definido com um
"#".
A
regra de estilo abaixo será aplicada ao elemento com id = "para1":
#para1
{
text-align:center;
color:red;
}
{
text-align:center;
color:red;
}
Classes
O
selector de classe é usado para especificar um modelo para um grupo
de elementos. Ao contrário do seletor id, o seletor de classe é
mais frequentemente usado em vários elementos.
Isso
permite que você defina um estilo particular de muitos elementos
HTML com a mesma classe.
O
seletor de classe usa o atributo da classe HTML, e é definido com um
"."
No
exemplo a seguir, todos os elementos HTML com class = "center"
será alinhado ao centro:
.center
{text-align:center;}
Regra
CSS e Sintaxe
Uma
regra é uma declaração que segue uma sintaxe própria e que define
como será aplicado estilo a um ou mais elementos . Um conjunto de
regras formam uma Folha de Estilos. Uma regra, na sua forma mais
elementar, compõe-se de três partes: um seletor, uma propriedade e
um valor e tem a sintaxe conforme mostrado abaixo:
seletor
{ propriedade: valor; }É
composta por três partes, onde:
O
seletor é o elemento HTML que você deseja denominar, a propriedade
é o valor real da propriedade, e o valor é o estilo que se aplica a
essa prorpiedade. Cada seletor pode ter propriedades múltiplas, e
cada propriedade dentro desse seletor pode ter valores independentes.
A propriedade e o valor são separados por dois pontos e ficam
contidos dentro de 2 colchetes. As propriedades múltiplas são
separadas por ponto e vírgula. Os valores múltiplos dentro de uma
propriedade são separados por vírgula, e se um valor individual
contiver mais de uma palavra, você deve colocá-lo dentro de uma
citação.Unidades CSS
Uma das coisas mais importantes no desenvolvimento web são as medidas, pois elas tem um grande efeito sobre a acessibilidade de um site web. Em CSS, o valor de uma propriedade, por exemplo, font-size, pode-se expressar em unidades de comprimento, ou em unidades de porcentagem.
Relativas:
-em
-ex
Absolutas:
-in (polegadas)
- cm (centimetros)
-mm (milímetros)
-pt (pontos)
- pc (picas – no bom sentido)
-px (pixels).
Porcentagem:
- %
De todas as unidades, as recomendadas são as relativas, em especial em, que anteriormente seu tamanho era equivalente a altura da letra M em maiúscula, mas hoje, é igual a altura da letra do elemento em que se usa. Com esse tipo de medida, o autor mantém um controle relativo em relação ao tamanho da fonte padrão do usuário , onde pode especificar quanto maior ou menor se vê o texto na página. Você pode utilizar a unidade em também em qualquer propriedade CSS que admita medidas (margens, paddings,…), o que permite um desenho proporcional ao sistema do usuário.
Mas
por que não utilizar medidas absolutas? As unidades absolutas como
px
(pixel),
cm
(centímetros), pt
(pontos), permitem um controle exato da aparência da página. Por
exemplo, a unidade px
tem um valor diferente dependendo da resolução da tela e do tipo de
computador usuário.
Abaixo
você pode ver uma tabela equivalente as medidas e seus valores
aproximados, pois tudo depende do Navegador utilizado e também do
Sistema Operacional:
| Pontos | Pixels | Em’s | % |
|---|---|---|---|
| 6pt | 8px | 0.5em | 50% |
| 7pt | 9px | 0.55em | 55% |
| 7.5pt | 10px | 0.625em | 62.5% |
| 8pt | 11px | 0.7em | 70% |
| 9pt | 12px | 0.75em | 75% |
| 10pt | 13px | 0.8em | 80% |
| 10.5pt | 14px | 0.875em | 87.5% |
| 11pt | 15px | 0.95em | 95% |
| 12pt | 16px | 1em | 100% |
| 13pt | 17px | 1.05em | 105% |
| 13.5pt | 18px | 1.125em | 112.5% |
| 14pt | 19px | 1.2em | 120% |
| 14.5pt | 20px | 1.25em | 125% |
| 15pt | 21px | 1.3em | 130% |
| 16pt | 22px | 1.4em | 140% |
| 17pt | 23px | 1.45em | 145% |
| 18pt | 24px | 1.5em | 150% |
| 20pt | 26px | 1.6em | 160% |
| 22pt | 29px | 1.8em | 180% |
| 24pt | 32px | 2em | 200% |
| 26pt | 35px | 2.2em | 220% |
| 27pt | 36px | 2.25em | 225% |
| 28pt | 37px | 2.3em | 230% |
| 29pt | 38px | 2.35em | 235% |
| 30pt | 40px | 2.45em | 245% |
| 32pt | 42px | 2.55em | 255% |
| 34pt | 45px | 2.75em | 275% |
| 36pt | 48px | 3em | 300% |
Até o próximo post, fiquem com Deus.
Nenhum comentário:
Postar um comentário