As folhas de estilo podem ser vinculadas a um documento de três maneiras distintas:
1. Importadas ou lincadas;
2. Incorporadas;
3. Inline.
Folha de estilo externa
Uma folha de estilo é dita externa, quando as regras CSS estão declaradas em um documento a parte do documento HTML. A folha de estilo é um arquivo separado do arquivo html e que tem a extensão .css
Uma folha de estilo externa é ideal p
ara ser aplicada a várias páginas. Com uma folha de estilo externa , você pode mudar a aparência de um site inteiro mudando um arquiv
o apenas (o arquivo da folha de estilo).
O arquivo css da folha de estilo extern
a deverá ser lincado ou importado ao documento HTML, dentro da tag <> do documento. A sintaxe geral para lincar uma folha de estilo chamada
estilo.css é mos
trada abaixo.
A sintaxe geral para importar uma folha de estilo chamada estilo.css é mostrada abaixo:
Uma folha de estilo externa pode ser escrita em qualquer editor de texto. O arquivo não deve conter nenhuma tag HTML. As folhas de estilo devem ser "salvas" com uma extensão .css
Folha de estilo incorporada ou interna
Uma folha de estilo é dita incorporada ou interna, quando as regras CSS estão declaradas no próprio documento HTML.
Uma folha de estilo incorporada ou interna, é ideal para ser aplicada a uma única página. Com uma folha de estilo incorporada ou interna, você pode mudar a aparência de somente um documento, aquele onde a folha de estilo esta incorporada.
As regras de estilo, válidas para o documento, são declaradas na seção <> do documento com a tag de estilo <>, conforme sintaxe mostrada abaixo:
O browser lerá agora as regras de estilo na própria página, e formatará o documento de acordo com elas.
Nota: Um browser ignora normalmente as tags desconhecidas. Isto significa que um browser velho que não suporte estilos, ignorará a tag , mas o conteúdo da tag será mostrado na tela. É possível impedir que um browser velho mostre o conteúdo
da tag, "escondendo-o" através do uso da marcação de comentário do HTML.
Observe a inclusão dos símbolos (fecha comentário) no código acima.
Folha de estilo inline
Uma folha de estilo é dita inline, quando as regras CSS estão declaradas dentro da tag do elemento HTML.
Um estilo inline só se aplica a um elemento HTML. Ele perde muitas das vantagens de folhas de estilo pois mistura o conteúdo com a apresentação. Use este método excepcionalmente, como quando quiser aplicar um estilo a uma única ocorrência de um elemento.
A sintaxe para aplicar estilo inline é mostrada a seguir:
Agora, as propriedades mais importantes do CSS:
A propriedade font
As propriedades para as fontes, definem as características (os valores na regra CSS) das letras que constituem os textos dentro dos elementos HTML.
As propriedades básicas para fontes e que abordaremos neste tutorial são as listadas abaixo:
- color:...................cor da fonte
- font-family:..........tipo de fonte
- font-size:.............tamanho de fonte
- font-style:............estilo de fonte
- font-variant:.........fontes maiúsculas de menor altura
- font-weight:.........quanto mais escura a fonte é (negrito)
- font:....................maneira abreviada para todas as propriedades
Valores válidos para as propriedades da fonte
- color:
- código hexadecimal: #FFFFFF
- código rgb: rgb(255,235,0)
- nome da cor: red, blue, green...etc
- font-family:
- family-name: define-se pelo nome da fonte,
p. ex:"verdana", "helvetica", "arial", etc. - generic-family: define-se pelo nome genérico,
p. ex:"serif", "sans-serif", "cursive", etc.
- family-name: define-se pelo nome da fonte,
- font-size:
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- smaller
- larger
- length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)
- %
- font-style:
- normal: fonte normal na vertical
- italic: fonte inclinada
- oblique:fonte obliqua
- font-variant:
- normal: fonte normal
- small-caps: transforma em maiúsculas de menor altura
- font-weight:
- normal
- bold
- bolder
- lighter
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
A propriedade text
As propriedades para textos, definem as características (os valores na regra CSS) dos textos inseridos dentro dos elementos HTML.
As propriedades para textos são as listadas abaixo:
- color.....................cor do texto;
- letter-spacing........espaçamento entre letras;
- word-spacing.........espaçamento entre palavras;
- text-align..............alinhamento do texto;
- text-decoration......decoração do texto;
- text-indent............recuo do texto;
- text-transform.......forma das letras;
- direction...............direção do texto;
- white-space.........como o browser trata os espaços em branco;
Valores válidos para as propriedades do texto
- color:
- código hexadecimal: #FFFFFF
- código rgb: rgb(255,235,0)
- nome da cor: red, blue, green...etc
- letter-spacing:
- normal: é o espaçamento default
- lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) São válidos valores negativos
- word-spacing:
- normal: é o espaçamento default
- lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) São válidos valores negativos
- text-align:
- left: alinha o texto a esquerda
- right: alinha o texto a direita
- center: alinha o texto no centro
- justify: força o texto a ocupar toda a extensão da linha da esquerda a direita
- text-decoration:
- none: nenhuma decoração
- underline: coloca sublinhado no texto
- overline: coloca um sobrelinhado no texto
- line-through: coloca uma linha em cima do texto
- blink: faz o texto piscar
- text-indent:
- lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)
- % : porcentagem da largura do elemento pai
- text-transform:
- none: texto normal
- capitalize: todas as primeiras letras do texto em maiúsculas
- uppercase: todas as letras do texto em maiúsculas
- lowercase: todas as letras do texto em minúsculas
- direction:
- ltr: texto escrito da esquerda para a direita
- rtl: texto escrito da direita para a esquerda
- white-space:
- normal: os espaços em branco serão ignorados pelo browser
- pre: os espaços em branco serão preservados pelo browser
- nowrap: o texto será apresentado todo ele numa linha única na tela. Não há quebra de linha até ser encontrada uma tag <>
A propriedade
marginA propriedade para margens, define um valor para espessura das margens dos elementos HTML.
As propriedades para margens são as listadas abaixo:
- margin-top..........define a margem superior;
- margin-right........define a margem direita;
- margin-bottom.......define a margem inferior;
- margin-left.........define a margem esquerda;
- margin..............maneira abreviada para todas as margens
Valores válidos para a propriedade margin
- auto: valor default da margem
- length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)
- %: porcentagem da largura do elemento pai
:: A propriedade border ::
As propriedades para as bordas, definem as características (os valores na regra CSS) das quatro bordas de um elemento HTML.
As propriedades para as bordas são as listadas abaixo:
- border-width:................espessura da borda
- border-style:................estilo da borda
- border-color:................cor da borda
- -----------------------------------------
- border-top-width:............espessura da borda superior
- border-top-style:............estilo da borda superior
- border-top-color:............cor da borda superior
- -----------------------------------------
- border-right-width:.........espessura da borda direita
- border-right-style:..........estilo da borda direita
- border-right-color:..........cor da borda direita
- -----------------------------------------
- border-bottom-width:.........espessura da borda inferior
- border-bottom-style:.........estilo da borda inferior
- border-bottom-color:.........cor da borda inferior
- -----------------------------------------
- border-left-width:...........espessura da borda esquerda
- border-left-style:...........estilo da borda esquerda
- border-left-color:...........cor da borda esquerda
- -----------------------------------------
- border-top:...maneira abreviada para todas as propriedades da borda superior
- border-right:..maneira abreviada para todas as propriedades da borda direita
- border-bottom:..maneira abreviada para todas as propriedades da borda inferior
- border-left:..maneira abreviada para todas as propriedades da borda esquerda
- border:.........maneira abreviada para todas as quatro bordas
Valores válidos para as propriedades das bordas
- color:
- código hexadecimal: #FFFFFF
- código rgb: rgb(255,235,0)
- nome da cor: red, blue, green...etc
- style:
- none: nenhuma borda
- hidden: equivalente a none
- dotted: borda pontilhada
- dashed: borda tracejada
- solid: borda contínua
- double: borda dupla
- groove: borda entalhada
- ridge: borda em ressalto
- inset: borda em baixo relevo
- outset: borda em alto relevo
- width:
- thin: borda fina
- medium: borda média
- thick: borda grossa
- length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)
A propriedade padding
A propriedade para espaçamentos (alguns traduzem como "enchimento"), define um valor para os espaçamentos entre o conteúdo e as bordas dos elementos HTML.
As propriedades para espaçamentos são as listadas abaixo:
- padding-top..........define a espaçamento superior;
- padding-right........define a espaçamento direita;
- padding-bottom.......define a espaçamento inferior;
- padding-left.........define a espaçamento esquerda;
- padding..............maneira abreviada para todas os espaçamentos
Valores válidos para as propriedades de espaçamento
- auto: valor default da margem
- length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)
- %: porcentagem da largura do elemento pai
A propriedade background
A propriedade background define as características (os valores na regra CSS) do fundo dos elementos HTML.
As propriedades background são as listadas abaixo:
- background-color............... cor do fundo;
- background-image............. imagem de fundo;
- background-repeat............. maneira como a imagem de fundo é posicionada;
- background-attachment.......se a imagem de fundo "rola" ou não com a tela;
- background-position............como e onde a imagem de fundo é posicionada;
- background........................maneira abreviada para todas as propriedades;
Valores válidos para as propriedades do fundo
- background-color:
- código hexadecimal: #FFFFFF
- código rgb: rgb(255,235,0)
- nome da cor: red, blue, green...etc
- transparente: transparent
- background-image:
- URL: url(caminho/imagem.gif)
- background-repeat:
- não repete: no-repeat
- repete vertical e horizontal: repeat
- repete vertical: repeat-y
- repete horizontal: repeat-x
- background-attachment:
- imagem fixa na tela: fixed
- imagem "rola" com a tela: scroll
- background-position:
- x-pos y-pos
- x-% y-%
- top left
- top center
- top right
- center left
- center center
- center right
- bottom left
- bottom center
- bottom right
A propriedade list
A propriedade list define as características (valores) das listas HTML.
As propriedades list são as listadas abaixo:
- list-style-image............. imagem como marcador da lista;
- list-style-position..........onde o marcador da lista é posicionado;
- list-style-type...............tipo do marcador da lista;
- list-style........................maneira abreviada para todas as propriedades;
Valores válidos para as propriedades do lista
list-style-image:- none
- URL: url(caminho/marcador.gif)
list-style-position:- outside: marcador fora do alinhamento do texto
- inside: marcador alinhado com texto
list-style-type:- none: sem marcador
- disc: círculo (bolinha cheia)
- circle: circunferência (bolinha vazia)
- square: quadrado cheio
- decimal: números 1, 2, 3, 4, ...
- decimal-leading-zero
- lower-roman: romano minúsculo i, ii, iii, iv, ...
- upper-roman: romano maiúsculo I, II, III, IV, ...
- lower-alpha: letra minúscula a, b, c, d, ...
- upper-alpha: letra maiúscula A, B, C, D, ...
- lower-greek
- lower-latin
- upper-latin
- hebrew
- armenian
- georgian
- cjk-ideographic
- hiragana
- katakana
- hiragana-iroha
- katakana-iroha
POSITION
O atributo POSITION pode receber três valores:
- absolute: é o único que permite a sobreposição de camadas e com ele você determina uma posição em relação à página que criou e pronto. Posicionamento absoluto;
- relative: esse valor define que o texto terá posições relativas ao resto da página, e com isso ele não pode se sobrepor, mas ainda é capaz de reconhecer alguns atributos interessantes. Posicionamento relativo;
- estatic: determina que ele não reconhecerá nenhum posicionamento especial determinado pelo controle de camadas. Posicionamento estático.
LEFT
Define a distância que a camada vai ficar da borda esquerda do navegador ou do elemento-pai. Pode assumir os valores absolutos, relativos ou auto (automático).
Observação: os valores absolutos aceitam os valores de acordo com a definição de formatos descritos no item "Formatos de tamanho".
RIGHT
Define a distância que a camada terá da borda direita do navegador ou do elemento-pai. Pode assumir os valores absolutos, relativos ou auto (automático).
Observação: os valores absolutos aceitam os valores de acordo com a definição de formatos descritos no item "Formatos de tamanho".
TOP
Define a distância que a camada terá do topo do navegador ou do elemento-pai. Pode assumir os valores absolutos, relativos ou auto (automático).
Observação: os valores absolutos aceitam os valores de acordo com a definição de formatos descritos no item "Formatos de tamanho".
BOTOM
Define a distância que a camada terá da parte inferior do navegador ou do elemento-pai. Pode assumir os valores absolutos, relativos ou auto (automático).
Observação: os valores absolutos aceitam os valores de acordo com a definição de formatos descritos no item "Formatos de tamanho".
Z-INDEX
Determina a ordem de empilhamento dos elementos. Aceita o valor auto (automático) e número, onde quanto maior o valor, mais alta é a camada.
VISIBILITY
Esse estilo é utilizado para ocultar um elemento. Um elemento invisível ainda ocupa espaço na página. Os valores válidos são: visible (visível), hidden (oculto) e inherit (herda o atributo da camada superior, padrão).
OVERFLOW
Determina como vai se comportar o conteúdo da camada quando os seus limites forem menores que o seu conteúdo. Os valores válidos são: visible (visível, redimensiona a camada para apresentar seu conteúdo), hidden (oculta, ignora o conteúdo excedente da camada), scroll (apresenta a barra de rolagem na camada) e auto (apresenta a barra de rolagem para a camada caso seja necessária).
DISPLAY
Identifica quando e se um elemento deve ser exibido:
- block: como um bloco, com quebra de linha antes e depois do elemento. Cria uma nova caixa em relação aos elementos ao redor (valor padrão);
- inline: sem quebra de linha antes e depois do elemento;
- list-item: o mesmo que block, exceto que um marcador list-item é adicionado;
- none: é invisível e não ocupa espaço na página. Desativa a apresentação do elemento em qualquer situação, incluindo os elementos secundários.
