CSS - Propriedades e valores

As propriedades básicas para fontes:

• 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 (10px, 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

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 (12px, pt, em, cm, ...) São válidos valores negativos

• word-spacing:
1. normal: é o espaçamento default
2. lenght: uma medida reconhecida pelas CSS (12px, 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 (12px, 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 <br>

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 (12px, pt, em, cm, ...)
3. %: porcentagem da largura do elemento pai

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 (12px, pt, em, cm, ...)

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

1. auto: valor default da margem
2. length: uma medida reconhecida pelas CSS (2px, pt, em, cm, ...)
3. %: porcentagem da largura do elemento pai

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

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

Colocando cores na barra de rolagem do navegador:

scrollbar-face-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-3dligh-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #000000;
scrollbar-arrow-color: #000000;