Demorou mas chegou! Essa terceira aula da #ÍntegraSerie Personalizando todo o blog conta com um breve resumo das principais propriedades do CSS que utilizaremos nas próximas aulas. Apesar disto, recomendo que leiam a documentação oficial do W3C, que contém ótimos tutoriais e aborda o CSS por completo.
Retirei esse resumo do site Hiperbytes, na postagem de Júnior Gonçalves.
font-family: Define a família da fonte utilizada. Exemplos:
font-family: Arial, Verdana, Geneva, sans-serif;font-family: Georgia, “Times New Roman”, Times, serif;
font-style: Define a propriedades de estilos que podem ser: normal, italic ou oblique. Exemplos:
font-style: italic;font-style: normal;
font-weight : Define a propriedade de intensidade de uma fonte na sequência de valores de ’100′ a ’900′, cada número indica uma fonte mais intensa (escura) que o valor anterior. Exemplos:
font-weight: normal; (ou valores de 100 a 500)font-weight: bold; (ou valores de 600 a 900)
font-size: Define o tamanho da fonte. Exemplo:
font-size: 12pt;
letter-spacing: Controla o espaçamento entre as letras de um texto. Exemplo:
letter-spacing: 5px;
word-spacing: Controla o espaçamento entre as palavras de um texto. Exemplo:
word-spacing: 10px;
line-height: Controla a altura entre as linhas do texto de um paragrafo. Exemplo:
line-height: 25px;
text-align: Controla o posicionamento horizontal do conteúdo de um elemento. Os valores possíveis são: left, right, center e justify. Exemplo:
text-align: center;
text-decoration: Define um efeito decorativo no texto. Podendo entre eles ser: none (sem decoração); underline (sublinhado); line-through(linha cortando o texto); e blink (efeito piscante). Exemplo:
text-decoration: underline;
text-transform: Controla os efeitos de capitalização do texto. Com ela, podemos definir a caixa das letras (minúsculas e maiusculas). Os valores possíveis são:
- capitalize – transforma o primeiro caracter de cada palavra em maiúscula
- uppercase – transforma todas as letras de todas as palavras em maiúsculas
- lowercase – transforma todas as letras de todas as palavras em minúsculas
- none – cancela algum valor que tenha sido herdado
text-transform: uppercase;
text-indent: Define o tamanho da endentação para a primeira linha do texto contida em um bloco, ou seja, o deslocamento para a direita de um paragrafo. Exemplo:
text-indent: 20px;
color: Define a cor do texto de um texto. Exemplos:
color: red;color: rgb(255,0,0);color: #FF0000;
font: Propriedade para definir em um único local vários estilos para a fonte. A sintaxe geral para font: [style] [variant] [weight] [size] [/line-height] [family]. Exemplo:
font: normal small-caps bold 14px “Comic Sans MS”, sans-serif;
Nota: Os valores size e family são obrigatórios. Os demais são facultativos (se você os omitir será adotado o valor default ou herdado do elemento pai).
width: Define o comprimento (largura) de um elemento. Exemplo:
width: 100px;
height: Define a altura de um elemento. Exemplo:
height: 50px;
border: Define bordas para um elemento. Exemplo:
border:1px solid #CCC;border-bottom:5px solid #97B2B9;
background: Define as propriedades relacionadas ao fundo de exibição. Exemplo:
background: #EFEFEF url(“images/fundo-topo.png”) no-repeat;
margin: Controla as margens de um elementos. Se forem indicados quatro valores, eles dizem respeito, respectivamente, às margens superior, direita, inferior e esquerda. Se for fornecido apenas um valor, ele é aplicado às quatro margens.
margin: 15px;margin: 10px 1px 5px 20px;
A última atribuição do exemplo acima é equivalente a:
margin-top: 10px;margin-right: 1px;margin-bottom: 5px;margin-left: 20px;
padding: Controla os espaçamentos de um elementos. Se forem indicados quatro valores, eles dizem respeito, respectivamente, aos espaçamentos superior, direito, inferior e esquerdo. Se for fornecido apenas um valor, ele é aplicado aos quatro espaçamentos.
padding: 5px;padding: 10px 5px 5px 10px;
float: Esta regra faz com que o box seja retirado de sua posição no fluxo do documento e flutuado para a direita ou esquerda. O espaço original ocupado pelo box não será deixado livre, mas preenchido pelo elemento que segue no fluxo do documento. Exemplo:
float: left;float: right;
Leiam com atenção para facilitar o entendimento das próximas aulas!
Peço desculpas pela demora para postar, ainda estou ocupado resolvendo coisas da reforma na Íntegra Studio.
Compartilhem e colaborem na volta do blog!
Categorias:
0 Comentários
