Folha de estilo css

Adicione seus exemplos nos botões

1. Folha de Estilo - CSS Poupe muito trabalho com CSS!

2. O Que é CSS ? O Cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação (aparência) em páginas da internet que adotam para o seu desenvolvimento linguagens de marcação (como XML, HTML e XHTML). O CSS define como serão exibidos os elementos contidos no código de uma página da internet e sua maior vantagem é efetuar a separação entre o formato e o conteúdo de um documento.

3. Por que o CSS foi criado? Com a evolução dos recursos de programação as páginas da internet estavam adotando cada vez mais estilos e variações para deixá-las mais elegantes e atrativas para os usuários. Com isto, linguagens de marcação simples como o HTML, que era destinada para apresentar os conteúdos também precisou ser aprimorada.

4. Estilos Múltiplos Cascatearão Uns Sobre os Outros As Folhas de Estilo permitem que a informação de estilo seja especificada de muitas maneiras. Os estilos podem ser especificados dentro de um único elemento HTML, dentro do elemento < head > de uma página HTML, ou num arquivo CSS externo. Mesmo múltiplas Folhas de Estilo externas podem ser referenciadas dentro de um único documento HTML.

5. Ordem de Cascata Qual estilo será usado quando há mais de um estilo especificado para um elemento HTML? Falando de modo geral pode-se dizer que todos os estilos irão "cascatear" em uma nova Folha de Estilo "virtual" pelas seguintes regras, onde a número quatro tem a prioridade mais alta: Padrão do Navegador Folha de Estilo Externa Folha de Estilo interna (dentro da tag < head >) Estilo em linha ( Inline ) (dentro do elemento HTML)

6. Conclusão Assim, um estilo em linha ( inline ) (dentro de um elemento HTML) tem a mais alta prioridade, o que significa que ele irá anular cada estilo declarado dentro da tag < head >, numa folha de estilo externa, e num navegador (um valor padrão).

7. Sintaxe CSS A sintaxe CSS é constituída de três partes: um seletor ( selector ), uma propriedade ( property ) e um valor ( value )

8. Seletor – Propriedade - Valor O seletor é normalmente o elemento/ tag HTML que você deseja definir, a propriedade é o atributo que você deseja mudar, e cada propriedade pode ter um valor. A propriedade e o valor são separados por dois pontos e circundadas por chaves: body { color: black }

9. Sintaxe Se o valor contém múltiplas palavras, ponha aspas em torno do valor. p { font-family : “ sans serif ” }

10. Sintaxe Se você deseja especificar mais de uma propriedade, você deve separar cada propriedade com um ponto e vírgula. O exemplo abaixo mostra como definir um parágrafo alinhado no centro, com uma cor de texto vermelha p { text-align : center; color: red }

11. Sintaxe Para tornar as definições de estilo mais legíveis, você pode descrever uma propriedade em cada linha, assim: p { text-align : center; color: red ; f ont -Family: arial }

12. Agrupamento Você pode agrupar seletores. Separe cada seletor com uma vírgula. No exemplo abaixo agrupamos todos os elementos header (título). Todos os elementos header serão verdes : h1, h2, h3, h4, h5, h6 { Color: green }

13. Seletor class (classe ) Com o seletor class você pode definir diferentes estilos para o mesmo tipo de elemento HTML. Digamos que você gostaria de ter dois tipos de parágrafos em seu documento: uma parágrafo alinhado à direita, e um parágrafo centralizado. Eis como você pode fazer isso com estilos : p.right { text-align : right } p.center { text-align : center}

14. Seletor class (classe ) Você tem que usar o atributo class no seu documento HTML <p class =“ right ”> Este parágrafo será alinhado à direita. </p> <p class =“center”> Este parágrafo será alinhado ao centro. </p>

15. Seletor class (classe ) Você também pode omitir o nome da tag no seletor para definir um estilo que será usado por todos os elementos HTML que tem uma certa classe. No exemplo abaixo, todos os elementos HTML com class ="center" serão centralizados. .center { text-align : center}

16. Seletor id O seletor id é diferente do seletor class selector ! Enquanto um seletor class pode ser aplicado a VÁRIOS elementos numa página, um seletor id sempre se aplica a somente UM elemento. Um atributo ID deve ser único dentro do documento. A regra de estilo ao lado será aplicada a um elemento p que tem seu valor id como "para1": p#para1 { text-align : center; color: red }

17. Comentários em CSS Você pode inserir um comentário na CSS para explicar o seu código, o que pode ajuda-lo quando você editar o código fonte numa data posterior. Um comentário será ignorado pelo navegador. Um comentário em CSS começa com "/*", e termina com "*/“.

18. Exemplo deComentário /* Este é um comentário */ p { text-align : center; /* Este é outro comentário */ color: black ; font -Family: arial }

19. Como inserir uma folha de estilo Quando um navegador lê uma folha de estilo, ele formata o documento de acordo com ela. Há três maneiras de inserir uma folha de estilo : Folha de estilo externa; Folha de estilo interna; Folha de estilo inline (em linha); Folha de estilos múltiplas.

20. Folha de Estilo Externa Uma folha de estilo é ideal quando o estilo é aplicado a muitas páginas. Com uma folha de estilo externa, você pode mudar a aparência de um site Web inteiro mudando apenas um arquivo. Cada página deve vincular-se com a folha de estilo usando a tag <link>. A tag <link> vai dentro da seção head . < head > <link rel =“ stylesheet ” type =“ text / css ” href =“meuestilo.css” /> </ head >

21. Folha de Estilo Externa O navegador lerá as definições de estilo do arquivo meuestilo.css, e formatará o documento de acordo com ela. Uma folha de estilo externa pode ser escrita em qualquer editor de texto. O arquivo não deve conter qualquer tag html . A sua folha de estilo deve ser salva com uma extensão . css . Um exemplo de uma folha de estilo está mostrado abaixo:hr hr {color: sienna } p { margin-left : 20px} b ody (background- image : url (“ images /back.gif”)}

22. Folha de estilo Interna Uma folha de estilo interna deve ser usada quando um único documento tem um estilo particular. Você define estilos internos na seção head usando a tag < style >, assim : < head > < style type =“ text / css ”> hr {color: sienna } p { margin-left : 20px} body (background- image : url (“ images /back.gif ”)} </ style > </ head >

23. Navegadores Antigos Um navegador normalmente ignora tags desconhecidas. Isto significa que um navegador antigo que não suporta estilos, irá ignorar a tag < style >, mas o conteúdo da tag < style > será exibido na página. É possível prevenir um navegador antigo de exibir o conteúdo escondendo-o num elemento de comentário HTML.

24. Prevenindo um navegador antigo < head > < style type =“ text / css ”> <!-- hr {color: sienna } p { margin-left : 20px} body (background- image : url (“ images /back.gif ”)} --> </ style > </ head >

25. Estilos Inline (em linha ) Um estilo em linha perde muitas das vantagens das folhas de estilo pela mistura de conteúdo com apresentação. Use este método com cuidado, como quando um estilo deve ser aplicado a uma única ocorrência de um elemento. Para usar estilos inline você usa o atributo de estilo na tag relevante. O atributo de estilo pode conter qualquer propriedade CSS.

26. Estilos Inline (em linha ) O exemplo mostra como mudar a cor e a margem esquerda de um parágrafo : <p style =“color: sienna ; margin-left : 20px”> Este é um prágrafo < /p>

27. Folha de estilos múltiplas Se algumas propriedades foram configuradas para o mesmo seletor em diferentes folhas de estilo, os valores serão herdados da folha de estilo mais específica

28. Exemplo Por exemplo, uma folha de estilo externa tem estas propriedades para o seletor h3 : h3 {color: red , text-align : left , font-size : 8pt} E uma folha de estilo interna tem estas propriedades para o seletor h3 : h 3 { text-align : right , font-size : 20pt} Se a página com a folha de estilo interna também se vincula com a folha de estilo externa as propriedades para h3 serão : color: red , text-align : right , font-size : 20pt A cor é herdada da folha de estilo externa e o alinhamento do texto e o tamanho da fonte são substituídos pela folha de estilo interna.

29. Exemplo Prático

30. Configurações de plano de fundo Configurar a cor plano de fundo Configurar uma imagem como plano de fundo Como repetir uma imagem de fundo Como posicionar uma imagem de fundo Como configurar uma imagem de fundo fixa Todas as propriedades do plano de fundo em uma declaração Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo

31. Propriedades de Texto em CSS Configurar a cor do texto Especificar os espaços entre os caracteres Alinhar o texto Decorar o texto Recua ( Indent ) o texto Controla as letras em um texto Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo

32. Propriedades de Texto em CSS Especificar as fontes de um texto Especificar o tamanho da fonte Especificar o estilo da fonte Especificar a variante da fonte Especificar a espessura ( boldness ) da fonte Todas as propriedades em uma declaração Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo

33. Bordas no CSS As propriedades de borda permitem-lhe especificar o estilo, a cor, e a largura de um elemento border . Em HTML usamos tabelas para criar bordas em torno de um texto, mas com as propriedades de borda na CSS podemos criar bordas com belos efeitos, e elas podem ser aplicadas a qualquer elemento.

34. Propriedades de Borda em CSS Quatro estilos de Borda Diferentes bordas em cada lado do elemento Especificar a cor das quatro bordas Especificar a largura da borda inferior Especificar a largura da borda esquerda Especificar a largura da borda direita Especificar a largura da borda superior Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo

35. Propriedades de Borda em CSS Todas as propriedades da borda inferior Todas as propriedades da borda esquerda Todas as propriedades da borda direita Todas as propriedades da borda superior Todas as propriedades das largura da bordas Todas as propriedades das bordas Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo

36. Propriedades de Margem em CSS As propriedades de margem definem o espaço em volta dos elementos. É possível usar valores negativos para sobrepor o conteúdo. As margens superior, direita, inferior, e esquerda podem ser mudadas independentemente usando propriedades separadas. Uma propriedade de margem estenográfica pode também ser usada para mudar todas as margens de uma só vez.

37. Propriedades de Texto em CSS Especificar a margem esquerda de um texto Especificar a margem direita de um texto Especificar a margem superior de um texto Especificar a margem inferior de um texto Especificar todas as propriedades das margens Exemplo Exemplo Exemplo Exemplo Exemplo

38. Propriedades de Enchimento ( padding ) em CSS As propriedades de enchimento definem o espaço entre a borda do elemento e o conteúdo do elemento. Valores negativos não são permitidos. O enchimento superior, direito, inferior, e esquerdo podem ser mudados independentemente usando propriedades separadas. Uma propriedade de enchimento estenográfica é também criada para controlar múltiplos lados de uma só vez.

39. Propriedades de Enchimento ( padding ) em CSS Especificar o enchimento esquerdo Especificar o enchimento direito Especificar o enchimento superior Especificar o enchimento inferior Especificar todas as propriedades dos enchimentos Exemplo Exemplo Exemplo Exemplo Exemplo

40. Propriedades de Lista em CSS As propriedades de Lista permitem-lhe trocar diferentes marcadores de item de lista, especificar uma imagem como marcador de item de lista, e especificar onde colocar um marcador de item de lista.

41. Propriedades de Texto em CSS Marcadores para listas não ordenadas Marcadores para listas ordenadas Especificar imagem como marcador de uma lista Posicionar o marcador de um lista Exemplo Exemplo Exemplo Exemplo

42. Propriedades de Dimensão em CSS As propriedades de Dimensão permitem-lhe controlar a altura e a largura de um elemento. Também permitem-lhe aumentar o espaço entre duas linhas.

43. Propriedades de Texto em CSS Especificar a altura ( height ) e a largura ( width ) de uma imagem Aumentar os espaços entre linhas Exemplo Exemplo

44. Propriedades de Classificação em CSS As propriedades de Classificação permitem-lhe controlar como exibir um elemento, especificar onde uma imagem aparecerá em outro elemento, posicionar um elemento em relação à sua posição normal, posicionar um elemento usando um valor absoluto, e como controlar a visibilidade de um elemento.

45. Propriedades de Classificação em CSS Como exibir um elemento Flutuar ( Float ) Position:relative Position:absolute Como tornar um elemento invisível Mudar o cursor Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo

46. Propriedades de Posicionamento em CSS As propriedades de Posicionamento permitem-lhe especificar a posição esquerda, direita, superior e inferior de um elemento. Também permitem-lhe especificar a forma de um elemento, posicionar um elemento atrás de outro, e especificar o que deve acontecer quando o conteúdo de um elemento é muito grande para caber numa área específica.

47. Entendendo a propriedade Position O Position é uma propriedade perigosa para iniciantes. Normalmente o desenvolvedor que acaba de conhecer essa propriedade, acha que ela é a resposta para todos os problemas de posicionamento e diagramação de layout. Pelo contrário. O Position não serve para diagramar a estrutura de layouts. Para isso, você utiliza a propriedade float do css . O Position vai servir para fazer coisas mais simples.

48. Coordenadas Para posicionar seus elementos, você precisa inserir uma coordenada. Essas coordenadas são comandadas pelas propriedades: top, left , right ou bottom . Todos os valores de positions só trabalham com essas coordenadas. Obviamente, se você definir um left para o seu elemento, não faz sentido definir um right . A mesma coisa para o bottom e o top. Em código ficaria assim:

49. Tipos de Posicionamento: Position Fixed O position: fixed ; irá fixar a posição do elemento na coordenada que você definir. A medida que a página é rolada, o elemento continua fixo na posição que você definiu e o conteúdo da página rola normalmente . Geralmente é usado para fixar elementos como cabeçalhos ou sidebars . Exemplo 1 Exemplo 2

50. Tipos de Posicionamento: Position Relative Todos os positions precisam de um ponto para iniciar o cálculo da coordenada para assim posicionar o elemento na tela. Ao contrário do que muitos acham, esse ponto não é o ponto central do elemento, o ponto base é o canto superior esquerdo do elemento. A partir deste canto, o browser irá calcular a coordenada que você definiu e irá posicionar o elemento no viewport . O position relative posiciona o elemento em relação a si mesmo. Ou seja, o ponto zero será o canto superior esquerdo, e ele começará a contar a partir dali.

51. Position Relative

52. Tipos de Posicionamento: Position Absolute O Position Absolute é um tanto diferente do Relative . Enquanto o elemento com Position Relative utiliza seu próprio canto para referenciar sua posição, o elemento com Position Absolute se utiliza do ponto superior esquerdo de outros elementos. Estes elementos são os parentes dele do elemento com position absolute . Mais especificamente o pai.

53. Position Absolute

54. Overflow Com a  propriedade Overflow (sobrecarga) do CSS , podemos escolher o que deverá acontecer se o conteúdo ultrapassar o tamanho de uma DIV. Podemos adicionar barra de rolagem, ocultar o conteúdo ultrapassado, etc.

55. Tipos de Overflow mais utilizados hidden   – Corta o conteúdo que ultrapassa o tamanho da DIV. scroll   – Mostra as barras de rolagens, vertical e horizontal, mesmo que não seja necessário. auto   – Acho essa a melhor opção porque só cria barra de rolagem quando necessário. Exemplo

56. Propriedades de Posicionamento em CSS Especificar a forma de um elemento Especificar a posição esquerda e superior de um elemento Especificar a posição direita e inferior de um elemento Sobrecarga (Overflow) Alinhar verticalmente uma imagem Z-index Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo

57. Pseudo-elementos em CSS Pseudo-elementos são usados em CSS para adicionar efeitos diferentes em alguns seletores, ou parte de alguns seletores .

58. Propriedades de Pseudo-classes em CSS Este exemplo demonstra como adicionar cores diferentes a um hipervínculo (hyperlink) num documento . Especificar a posição esquerda e superior de um elemento Este exemplo demonstra como adicionar outros estilos a um hipervínculo . Exemplo Exemplo

59. Pseudo-classes em CSS As Pseudo-classes são usadas na CSS para adicionar efeitos diferentes em alguns seletores, ou a uma parte de alguns seletores.

60. Propriedades de Pseudo-classes em CSS Este exemplo demonstra como adicionar um estilo especial à primeira letra de um texto. Este exemplo demonstra como adicionar um estilo especial à primeira linha de um texto. Exemplo Exemplo

61. Tipos de Mídia Os Tipos de Mídia permitem-lhe especificar como os documentos serão apresentados em diferentes tipos de mídia. O documento pode ser exibido diferentemente na tela, no papel, num navegador auricular, etc.

62. A Regra @ media A regra @media permite diferentes regras de estilo para diferentes mídias na mesma folha de estilo. O estilo no exemplo diz ao navegador para exibir uma fonte Verdana com 14 pixels na tela. Mas se a página for impressa, ela será com fonte Times com 10 pixels. Observe que a espessura da fonte ( font-weight ) está especificada como negrito ( bold ), tanto na tela quanto no papel. Exemplo