Tutorial HTML GPsites.net Sites Prontos - CSS - Folhas de Estilo em Cascata
O uso de Folhas de Estilo em Cascata pode economizar muito tempo no processo de construir páginas em HTML.
O método de adicionar atributos direto aos parágrafos e às outras estruturas da página adiciona uma quantidade considerável de código extra a uma página. O código extra significa páginas maiores e maior consumo de banda.
Métodos
Há 3 métodos de usar folhas de estilo em cascata no HTML; linkando, adicionadas no head e inline.
As folhas de estilo em cascata linkadas são quando se faz um arquivo CSS externo e se coloca o link para puxar o arquivo com a extensão .CSS com as formatações da página.
Exemplo de folha de estilo linkada a um arquivo externo:
<head>
<link rel="stylesheet" href="meu_estilo.css" type="text/css">
</head>
Exemplo de códigos do respectivo arquivo .CSS:
body {text-align :center}
p {font-family: Arial, sans-serif ;font-size : 10pt }
h2 {font-family: Arial Black, serif ;font-size : 16pt }
As folhas de estilo em cascata adicionadas no Head são quando se colocam as folhas de estilo em cascata na mesma página que se está trabalhando, ou seja , no Head da página mesmo se coloca os estilos em cascata.
Exemplo de folhas de estilo colocadas direto no Head:
<head>
<style type="text/css">
body {text-align :center}
p{font-family: Arial, sans-serif ;font-size : 10pt }
h2 {font-family: Arial Black, serif ;font-size : 16pt }
</style>
</head>
As folhas de estilo em cascata inline é onde se adiciona os atributos CSS diretamente nos elementos da página tais como parágrafos, tabelas, divisões, colunas, etc...
Exemplo de Folhas de Estilo Inline - diretamente nos elementos:
<p STYLE="font-family: Arial, sans-serif ; font-style: normal; font-weight: normal; font-size : 10pt; text-align: left">Style settings can be set using the inline method. It should be used sparingly because of the extra amount of code it adds to the web page.</p>
<span STYLE="font-family: Arial, sans-serif ;font-size : 10pt">See Page 1</span>
Há algumas Tags do HTML que requerem o método inline trabalhar corretamente.
Tutorial HTML Sites Prontos - Criação de Folha de Estilo em Cascata CSS
Não importa que método é usado, a estrutura básica das folhas de estilo em cascata CSS é a mesma.
Cada linha de uma folha do estilo é composta de 2 porções: seletor e declaração
seletor {declaração}
Os seletores são colocados à esquerda dos suportes curly e consultam ao Tag do HTML que deve ser definido pela declaração. Todas as declarações são incluídas nos suportes curly.
Os seletores fazem exame do formulário do Tag do HTML sem seus suportes incluindo.
Exemplos:
- <p> declaração do p{}
- <h2> declaração de h2{}
- <a href> declaração do a{}
A declaração contem também 2 porções separadas por uns dois pontos que ajam como um sinal igual.
atributo: valor
Posto simplesmente lhe lê o valor dos iguais do atributo. Você pode atribuir mais de uma declaração por o seletor. Cada declaração individual é separada por um semi-colon.
seletor {atributo: valor; atributo: valor; atributo: valor}
Alguns atributos com valores que podem ser ajustados usando folhas do estilo são:
font-family = tipo de fonte
arial
arial black
courier
times
tahoma
verdana
Always include a generic - example: serif
font-size
= tamanho da fonte
xx-small
x-small
small
medium
large
x-large
xx-large
points - example: 10pt
pixels - example: 12px
font-style
= estilo da fonte
normal
oblique
italic
font-weight
= espessura da fonte
normal
bold
bolder
lighter
weight in numbers 100 - 900
text-align = Alinhamento do texto
left
= esquerda
right
= direita
center
= meio
justify
= justificado
color
(cor)
nome - example: red
código hexidecimal - example: #ff0000 - Recommended
rgb - example: #f00
background-color
(cor do fundo)
nome - exemplo: red
código hexidecimal - exemplo: #ff0000 - Recommended
rgb - example: #f00
text-indent: (identação do texto)
padding (espaçamento) : esquerda, direita, topo, rodapé ( left, right, top, bottom)
Segue abaixo um exemplo com os estilos em cascata comentados. Note que cada declaração individual é separada por ponto e vírgula. |
p{ font-family: Arial, sans-serif;font-style : normal ;font-size : 10pt; font-weight :normal;text-align :left; color :#000000;background-color :#FFFFFF; text-indent : 1em;padding-bottom : 5px}
NOTA: A cor pode ser especificada por nome (Blue), hexadecimal (#0000ff) ou RGB (#00f).
Tutorial HTML Sites Prontos - Famílias de Fontes Genéricas
- serif
- sans-serif
- fantasy
- cursive
- monospace
O navegador escolhe automaticamente uma fonte padrão quando a fonte declarada não existe na máquina do usuário.
|
|
