Propriedades CSS
Estilos Básicos de Texto
O navegador Windows padrão usa a fonte Microsoft YaHei
/*
1.Tamanho da fonte: font-size
2.Espessura da fonte: font-weight
3.Estilo da fonte: font-style
4.Família da fonte: font-family
5.Propriedade combinada: font
line-height: altura da linha
*/
Tamanho da Fonte
/*
Propriedade: font-size
Valores: número + px
Observações:
1.O tamanho padrão de texto no navegador Chrome é 16px
2.A unidade (px) deve ser especificada, caso contrário será inválida
*/
Espessura da Fonte
/*
Propriedade: font-weight
Valores por palavra-chave:
Normal: normal
Negrito: bold
Valores numéricos (números inteiros de 100-900):
Normal: 400
Negrito: 700
Na prática: os estilos normal e negrito são os mais utilizados
*/
Estilo da Fonte
/*
Propriedade: font-style
Valores:
Normal (padrão): normal
Itálico: italic
*/
Propriedade Combinada
/*
Propriedade: font (propriedade combinada)
Valores:
font: estilo peso tamanho família;
Regras de omissão:
Apenas os dois primeiros podem ser omitidos; se omitidos, os valores padrão são aplicados
Observação: Se precisar definir estilos individuais e combinados
Escreva os estilos individuais abaixo da propriedade combinada
Ou inclua os estilos individuais dentro da propriedade combinada
*/
Exemplo de Código
<style>
p {
/*
font-size:;
font-style:;
font-weight:;
font-family:;
Ou defina a fonte aqui
*/
/*Propriedade combinada pode ser escrita como:*/
font: italic 700 66px SimSun;
}
</style>
Cascata (Sobrescrita)
<style>
/* Definindo um seletor universal com * */
* {
color: blue;
/*O código executado posterior sobrescreve o anterior*/
color: red;
font-size: 20px;
}
</style>
Recuo de Texto (text-indent)
Recuo da primeira linha de parágrafo, geralmente controlado com em, pois se usar números diretamente, alterar o tamanho do texto exigiria ajustes
/*
Propriedade: text-indent
Valores:
Número + px
Número + em (recomendado: 1em = tamanho do font-size do elemento atual)
*/
Sublinhado de Texto
Também conhecido como decoração de texto
Caso de uso: remover o sublinhado padrão da tag a
/*
Propriedade: text-decoration
*/
| Valor da Propriedade | Efeito |
|---|---|
| underline | Sublinhado (comum) |
| none | Nanhuma linha de decoração (usado para remover sublinhado padrão da tag a) |
| line-through | Tachado (pouco comum) |
| overline | Sobrelinhado (quase nunca usado) |
Altura da Linha
Composição da altura da linha: espaçamento superior, altura do texto (altura da fonte), espaçamento inferior
Casos de uso: centralizar verticalmente texto de linha única e remover espaçamento superior e inferior do texto
/*
Função: controlar o espaçamento entre linhas
Propriedade: line-height
Valores:
1.Número + px
2.Múltiplos (múltiplos do font-size do elemento atual)
Aplicações:
1.Para centralizar verticalmente texto de linha única, defina line-height: altura do elemento pai do texto
2.No layout de página, define-se line-height: 1 para remover espaçamento superior e inferior
*/
Alinhamento Horizontal do Texto (text-align)
Por padrão, o texto escrito em HTML é alinhado à esquerda no CSS
/*
Propriedade: text-align
Valores
Valor Efeito
left Esquerda (padrão)
center Centralizado
right Direita
Observação:
Para centralizar texto horizontalmente, a propriedade text-align deve ser aplicada ao elemento pai do texto
*/
Centralização Horizontal
Por exemplo, para centralizar uma imagem dentro de uma div, text-align: center deve ser aplicado na div
As seguintes tags precisam que o elemento pai receba a propriedade para centralização horizontal
/*
text-align:center
text-align:center centraliza horizontalmente as seguintes tags quando aplicado ao elemento pai:
1.Texto
2.Tags span, a
3.Tags input, img
*/
Centralização de Elementos
/*
Para centralizar horizontalmente elementos como div, p, h (caixas grandes)
Use margin: 0 auto para implementar
Observação:
1.Se precisar centralizar horizontalmente div, p, h (caixas grandes), aplique a propriedade diretamente no elemento
2.margin: 0 auto geralmente se aplica a caixas com largura definida; se a caixa grande não tiver largura definida, ela ocupará toda a largura do elemento pai por padrão
*/
Centralização de div e elementos dentro dela
No layout de estilos, geralmente centraliza-se pirmeiro a caixa div, depois define-se a centralização dos elementos dentro da div, fazendo com que todos os elementos internos fiquem centralizados horizontalmente
div {
/*Define largura e altura da caixa div*/
width: 234px;
height: 300px;
/*Centraliza a caixa div*/
margin: 0 auto;
/*Centraliza elementos (tags) dentro da caixa div*/
text-align: center;
background-color: #fff;
}
Exemplo de Centralização
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documento</title>
<style>
body {
background-color: #f5f5f5;
}
.produto {
/*Define largura e altura da caixa div*/
width: 234px;
height: 300px;
/*Centraliza a caixa div*/
margin: 0 auto;
/*Centraliza elementos dentro da caixa div, fazendo com que imagem e texto fiquem alinhados*/
text-align: center;
background-color: #fff;
}
</style>
</head>
<body>
<div class="produto">
<h2 style="font-size: 14px; line-height: 25px;">Patinete Elétrico Ninebot</h2>
<h3 style="line-height: 30px;color: #ccc;">Brinquedo para Adultos</h3>
<h2 style="font-size: 14px;color:#ffa500">1999 reais</h2>>
</div>
</body>
</html>
Diretrizes de Uso da Tag div
A tag div serve para layout de página e pode ser usada inúmeras vezes em uma página,
Princípio: Ao usar div, prefira controlar estilos por nomes de classes
Propriedades Relacionadas ao Plano de Fundo
/*
Nota: Cor de fundo e imagem de fundo são exibidas apenas dentro da caixa
background-color (cor de fundo) ,
background-image (imagem de fundo) ,
background-repeat (repetição da imagem de fundo),
background-position (posição da imagem de fundo)
*/
Cor de Fundo
/*
O valor padrão da cor de fundo é transparente
Propriedade: background-color:
Valores:
Valores de cor: palavra-chave, notação rgb, notação rgba, hexadecimal
Observação:
1.O valor padrão da cor de fundo é transparente: rgba(0,0,0,0), transparent
2.A cor de fundo não afeta o tamanho da caixa e permite visualizar o tamanho e posição da caixa; geralmente no layout aplica-se primeiro uma cor de fundo às caixas
*/
<style>
/*Apenas tags p com classe box receberão este estilo*/
.container {
width: 400px;
height: 400px;
background-color: pink;
background-color: #ccc;
/* Três cores primais: vermelho, verde, azul; a é a opacidade de 0-1
r: red
g: green
b: blue
*/
background-color: rgba(0, 0, 0, 0.5);
background-color: rgba(red, green, blue, alpha);/*
alpha: representa a opacidade*/
}
</style>
</head>
<body>
<div class="caixa">
<a href="#">Link, com propriedade; ao hover a cor do botão muda para vermelho</a>
</div>
</body>
Repetição de Imagem de Fundo
Propriedade:background-repeat (atalho bgr)
| Valor da Propriedade | Efeito |
|---|---|
| repeat | (padrão) Repete nas direções horizontal e vertical |
| no-repeat | Sem repetição**(ou seja: a imagem é exibida apenas uma vez)** |
| repeat-x | Repete na direção horizontal (eixo x) |
| repeat-y | Repete na direção vertical (eixo y) |
Posição da Imagem de Fundo
/*
Propriedade: background-position (atalho bgp):
Valores: background-position: direção horizontal, direção vertical
Nomes de direção:
Direção horizontal:
left: padrão é superior esquerdo
center: centralizado horizontalmente
right: direita no eixo x
Direção vertical:
top: para cima
center: centralizado verticalmente
bottom: para baixo
Número + px (coordenadas)
Sistema de coordenadas:
Origem (0,0): canto superior esquerdo da caixa
Eixo x: direita horizontalmente
Eixo y: para baixo verticalmente
Nomes de direção e coordenadas podem ser usados em combinação, o primeiro valor representa a direção horizontal, o segundo a vertical
*/
Diferença entre Imagem de Fundo e Tag img
Imagens importantes usam img, imagens não importantes usam backrgound-image
/*
Para exibir uma imagem na página
Método 1:
img é uma tag, sem largura e altura definidos, exibe no tamanho original
Método 2: tag div + imagem de fundo
É necessário definir largura e altura da div, pois a imagem de fundo é apenas um elemento decorativo de CSS e não expande a tag div
*/