A propriedade background-color especifica a cor de fundo de um elemento.
A cor pode ser especificada através de um valor em hexadecimal (por exemplo: #ffe2a5), através de um valor em rgb ou através do nome da cor (red).
Exemplo:
h1 {
background-color: rgb(129,12,156);
}
A propriedade background-image especifica uma imagem para ser usada como fundo de um elemento.
Exemplo:
body {
background-image: url("recycledpaper.gif");
}
Por defeito a imagem é repetida até cobrir todo o elemento.
Para repetir a imagem na horizontal utiliza background-repeat: repeat-x;
Exemplo:
body {
background-image: url("gradient.jpg");
background-repeat: repeat-x;
}
Nota: Para repetir a imagem verticalmente usa background-repeat: repeat-y;
Para mostrar apenas uma imagem no fundo do elemento podes especificar,
Exemplo:
body {
background-image: url("image.png");
background-repeat: no-repeat;
}
Também é possível definir a posição onde a imagem deve aparecer.
A posição da imagem é definida pela propriedade background-position,
Exemplo:
body {
background-image: url("image.png");
background-repeat: no-repeat;
background-position: right top;
}
Para especificar que a posição da imagem de fundo deve ser fixa, usa a propriedade background-attachment,
Exemplo:
body {
background-image: url("background.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
Para abreviar o código é possível especificar todas as propriedades numa única propriedade.
Chama-se a isso shorthand property,
Exemplo:
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
A propriedade color é usada para definir a cor do texto.
A cor pode ser especificada através de um valor em hexadecimal (por exemplo: #ffe2a5), através de um valor em rgb ou através do nome da cor (red)
A cor do texto por defeito é definida pelo selector body,
Exemplo:
body {
color: blue;
}
h1 {
color: green;
}
A propriedade text-align é usada pra definir o alinhamento horizontal do texto.
O texto pode ser alinhado à esquerda, direita, centrado ou justificado.
Exemplo:
h1 {
text-align: center;
}
h3 {
text-align: right;
}
A propriedade text-decoration é usada para definir/remover "decorações" do texto (overline, line-through e underline). O valor text-decoration: none; é habitualmente utilizado para remover o sublinhado dos links.
Exemplo:
h2 {
text-decoration: line-through;
}
a {
text-decoration: none;
}
A propriedade text-transform é usada para especificar letras em maíusculas ou minúsculas.
Pode ser usada para transformar todo o texto em maíusculas ou minúsculas, ou capitalizar a primeira letra de cada palavra.
Exemplo:
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
.capitalize {
text-transform: capitalize;
}
A propriedade letter-spacing é utilizada para especificar o espaço entre caracteres.
Exemplo:
h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: -3px;
}
A propriedade line-height é usada para especificar o espaço entre linhas.
Exemplo:
.small {
line-height: 0.8;
}
.big {
line-height: 1.8;
}
A propriedade word-spacing éusada para especificar o espaço entre palavras.
Exemplo:
h1 {
word-spacing: 10px;
}
h2 {
word-spacing: -5px;
}
A propriedade font-family deve conter vários nomes de fontes, se o browser não suportar a primeira fonte tentará a seguinte e assim por diante. A última fonte deverá ser a mais genérica. Se o nome da fonte tiver mais do que uma palavra deve ser colocado entre aspas.
Exemplo:
p {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
A propriedade font-style é utilizada para especificar texto em itálico.
Esta propriedade pode assumir três valores: normal, italic e oblique.
Exemplo:
.normal {
font-style: normal;
}
.italic {
font-style: italic;
}
.oblique {
font-style: oblique;
}
A propriedade font-size define o tamanho do texto. A propriedade fon-size não deve ser utilizada para fazer os parágrafos parecerem títulos ou vice-versa.
O valor desta propriedade pode ser atribuído de forma absoluta (pixels) ou de forma relativa (em).
1em é igual ao tamanho da fonte por defeito 16px. O cálculo pode ser feito através da fórmula pixels/16 = em
Exemplo:
h1 {
font-size: 40px;
}
p {
font-size: 1em;
}
A propriedade font-weight especifica o peso, a influência da fonte.
Exemplo:
.normal {
font-weight: normal;
}
.thick {
font-weight: bold;
}
A propriedade font-variant especifica quando um texto deve ser mostrado em maiúsculas.
Exemplo:
.normal {
font-variant: normal;
}
.small {
font-variant: small-caps;
}
Os links podem ser decorados dependendo do estado em que se encontram. Os quatro estados são:
a:link - uma hiperligação normal antes de ser visitada
a:visited - uma hiperligação já visitada
a:hover - uma hiperligação quando o rato está sobre ela
a:active - uma hiperligação no momento em que é clicada
notas: os links devem ser decorados na ordem dada
Exemplo:
a:link { color: red; }
a:visited { color: green; }
a:hover { color: hotpink; }
a:active { color: blue; }
Em HTML, existem listas não ordenadas (<ul>), os elementos estão ordenadas através de pontos e listas ordenadas (<ol>), os elementos são ordenadoa através de números ou letras
A propriedade list-style-type especifica o tipo de marcador utilizado na lista.
Exemplo:
.circulo {
list-style-type: circle;
}
.quadrado {
list-style-type: square;
}
.numeros {
list-style-type: upper-roman;
}
.letrasminusculas {
list-style-type: lower-alpha;
}
...
<ul class=""letrasminusculas">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
A propriedade border-style é usada para definir que espécie de borda é mostrada. São possíveis vários valores, entre eles:
dotted - define um border construído com pontos
solid - o border é uma linha
none - sem border
A propriedade border-width é usada para definir a largura do border.
Se só existir um valor é aplicado a todos os lados, senão a ordem é top, right, bottom e left.
Exemplo:
.bordacincopixels {
border-style: solid;
border-width: 5px;
}
.bordasdiferentes {
border-style: solid;
border-width: 2px 10px 4px 20px;
}
A propriedade border-color é usada para definir a cor do border.
Exemplo:
.bordaverde {
border-style: solid;
border-color: green;
}
.bordacolorida {
border-style: solid;
border-color: red green blue yellow;
A ordem das propriedades é a seguinte: width, style e color
Exemplo:
p {
border: 5px solid red;
}
A propriedade margin é usada para definir o espaço à volta do elemento.
As margens são transparentes e não têm cor de fundo, é ainda possível definir as margens para cada lado do elemento: margin-top, margin-right, margin-bottom e margin-left.
Exemplo:
p {
margin-top: 5px;
margin-bottom: 10px;
margin-right: 15px;
margin-left: 7px;
}
Exemplo: