Tudo (ou quase tudo) o que você precisa saber para COMEÇAR em CSS

Bom, eu não vou começar a falar da história do CSS ou falar de todas as cores de todos os padroes, ou todo esse bla bla bla que "certas" pessoas ensinam (ou pensam que estão ensinando alguma coisa dessa forma), então vamos ao que interessa: PRÁTICA!

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:

O browser lerá as regras de estilo do arquivo estilo.css, e formatará o documento de acordo com elas.

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:
  1. código hexadecimal: #FFFFFF
  2. código rgb: rgb(255,235,0)
  3. nome da cor: red, blue, green...etc
• font-family:
  1. family-name: define-se pelo nome da fonte,
     p. ex:"verdana", "helvetica", "arial", etc.
  2. generic-family: define-se pelo nome genérico,
     p. ex:"serif", "sans-serif", "cursive", etc.
• font-size:
  1. xx-small
  2. x-small
  3. small
  4. medium
  5. large
  6. x-large
  7. xx-large
  8. smaller
  9. larger
  10. length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)
  11. %
• font-style:
  1. normal: fonte normal na vertical
  2. italic: fonte inclinada
  3. oblique:fonte obliqua
• font-variant:
  1. normal: fonte normal
  2. small-caps: transforma em maiúsculas de menor altura
• font-weight:
  1. normal
  2. bold
  3. bolder
  4. lighter
  5. 100
  6. 200
  7. 300
  8. 400
  9. 500
  10. 600
  11. 700
  12. 800
  13. 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:
  1. código hexadecimal: #FFFFFF
  2. código rgb: rgb(255,235,0)
  3. nome da cor: red, blue, green...etc
• letter-spacing:
  1. normal: é o espaçamento default
  2. lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) São válidos valores negativos
• word-spacing:
  1. normal: é o espaçamento default
  2. lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) São válidos valores negativos
• text-align:
  1. left: alinha o texto a esquerda
  2. right: alinha o texto a direita
  3. center: alinha o texto no centro
  4. justify: força o texto a ocupar toda a extensão da linha da esquerda a direita
• text-decoration:
  1. none: nenhuma decoração
  2. underline: coloca sublinhado no texto
  3. overline: coloca um sobrelinhado no texto
  4. line-through: coloca uma linha em cima do texto
  5. blink: faz o texto piscar
• text-indent:
  1. lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)
  2. % : porcentagem da largura do elemento pai
• text-transform:
  1. none: texto normal
  2. capitalize: todas as primeiras letras do texto em maiúsculas
  3. uppercase: todas as letras do texto em maiúsculas
  4. lowercase: todas as letras do texto em minúsculas
• direction:
  1. ltr: texto escrito da esquerda para a direita
  2. rtl: texto escrito da direita para a esquerda
• white-space:
  1. normal: os espaços em branco serão ignorados pelo browser
  2. pre: os espaços em branco serão preservados pelo browser
  3. 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 margin
  

  
  

  A 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

1. auto: valor default da margem
2. length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)
3. %: 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:
  1. código hexadecimal: #FFFFFF
  2. código rgb: rgb(255,235,0)
  3. nome da cor: red, blue, green...etc
• style:
  1. none: nenhuma borda
  2. hidden: equivalente a none
  3. dotted: borda pontilhada
  4. dashed: borda tracejada
  5. solid: borda contínua
  6. double: borda dupla
  7. groove: borda entalhada
  8. ridge: borda em ressalto
  9. inset: borda em baixo relevo
  10. outset: borda em alto relevo
• width:
  1. thin: borda fina
  2. medium: borda média
  3. thick: borda grossa
  4. 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

1. auto: valor default da margem
2. length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)
3. %: 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:
  1. código hexadecimal: #FFFFFF
  2. código rgb: rgb(255,235,0)
  3. nome da cor: red, blue, green...etc
  4. transparente: transparent
• background-image:
  1. URL: url(caminho/imagem.gif)
• background-repeat:
  1. não repete: no-repeat
  2. repete vertical e horizontal: repeat
  3. repete vertical: repeat-y
  4. repete horizontal: repeat-x
• background-attachment:
  1. imagem fixa na tela: fixed
  2. imagem "rola" com a tela: scroll
• background-position:
  1. x-pos y-pos
  2. x-% y-%
  3. top left
  4. top center
  5. top right
  6. center left
  7. center center
  8. center right
  9. bottom left
  10. bottom center
  11. 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:
  1. none
  2. URL: url(caminho/marcador.gif)
• list-style-position:
  1. outside: marcador fora do alinhamento do texto
  2. inside: marcador alinhado com texto
• list-style-type:
  1. none: sem marcador
  2. disc: círculo (bolinha cheia)
  3. circle: circunferência (bolinha vazia)
  4. square: quadrado cheio
  5. decimal: números 1, 2, 3, 4, ...
  6. decimal-leading-zero
  7. lower-roman: romano minúsculo i, ii, iii, iv, ...
  8. upper-roman: romano maiúsculo I, II, III, IV, ...
  9. lower-alpha: letra minúscula a, b, c, d, ...
  10. upper-alpha: letra maiúscula A, B, C, D, ...
  11. lower-greek
  12. lower-latin
  13. upper-latin
  14. hebrew
  15. armenian
  16. georgian
  17. cjk-ideographic
  18. hiragana
  19. katakana
  20. hiragana-iroha
  21. katakana-iroha

BONUS!

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.