Seletores e Propriedades CSS Essenciais
Seletores de Tag aplicam estilos a elementos HTML específicos como <div> ou <a>. Por exemplo, para definir o tamanho da fonte de todos os <div>s:
<style>
div {
font-size: 18px;
}
</style>
<body>
<div>
Teste de tamanho de fonte
</div>
</body>
Seletores de ID usam o símbolo # para estilizar elementos com um atributo id específico:
<style>
#elemento-destaque {
background-color: red;
}
</style>
<body>
<a id="elemento-destaque"> ID Selector </a>
<a id="elemento-destaque"> ID Selector </a>
<a id="outro-elemento"> Sem estilo </a>
</body>
Seletores de Classe usam . e podem ser reutilizados em múltiplos elementos:
<style>
.destaque {
background-color: blue;
font-size: 14px;
}
</style>
<body>
<div class="destaque">
Div com classe
</div>
<a class="destaque">
Âncora com classe
</a>
<span class="destaque">
Span com classe
</span>
</body>
Seletores Associados permitem estilizar elementos filhos específicos:
<style>
.menu-principal li {
background-color: pink;
}
</style>
<body>
<div class="menu-principal">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</body>
Para estilizar links dentro de itens de lista, adicione a ao seletor:
.menu-principal li a {
background-color: pink;
}
Seletores Combinados usam vírgulas para aplicar estilos a múltiplos elementos:
.container .item1, .container .item2 {
background-color: pink;
}
Seletores de Atributo são úteis para formulários:
<style>
.campo-formulario input[type="text"] {
border: 2px solid red;
}
</style>
<body>
<div class="campo-formulario">
<input type="text" />
<input type="text" nome="especial" />
<input type="password" />
</div>
</body>
Combine atributos para maior precisão:
.campo-formulario input[type="text"][nome="especial"] {
border: 2px solid red;
}
Propriedade background-position controla a exibição de imagens de fundo:
<style>
.janela {
background-image: url('imagem-fundo.jpg');
height: 30px;
width: 30px;
background-repeat: no-repeat;
background-position: 5px 10px;
}
</style>
<body>
<div class="janela"></div>
</body>
Propriedades Padding e Margin controlam o espaçamento interno e externo:
<div style="background-color: green; height: 200px; padding-top: 100px;">
<div style="margin: 0 auto; background-color: blue; height: 20px; width: 20px; margin-top: 30px;">
</div>
</div>
padding herda a cor do elemento pai, enquanto margin expande sem cor.
Propriedade position tem quatro valores principais:
static: fluxo normal do documento.fixed: posicionamento relativo à janela do navegador.relative: deslocamento em relação à posição originnal.absolute: deslocamento relativo ao ancestral posicionado mais próximo ou ao corpo do documento.
<body>
<div style="height: 2000px; background-color: blueviolet;">
<a style="position: fixed; right: 30px; bottom: 30px;">
Voltar ao topo
</a>
</div>
</body>
Propriedade overflow gerencia conteúdo excedente:
<div style="overflow: auto; height: 100px; background-color: green;">
Conteúdo extenso...
</div>
Use hidden para ocultar o excesso.
Propriedade opacity define a transparência:
<div style="background-color: blue; height: 100px; padding-top: 30px;">
<div style="opacity: 0.5; background-color: pink; height: 30px;"></div>
</div>
Propriedade z-index controla a ordem de empilhamento dos elementos.
Exemplo de Layout CSS para uma página dividida em cabeçalho, barra lateral e conteúdo:
<style>
.cabecalho {
height: 48px;
background-color: cornflowerblue;
}
.corpo .lateral {
position: absolute;
top: 50px;
left: 0;
bottom: 0;
width: 200px;
overflow: auto;
background-color: #dddddd;
}
.corpo .conteudo-principal {
position: absolute;
top: 50px;
bottom: 0;
left: 200px;
right: 0;
overflow: auto;
background-color: lightblue;
}
</style>
<body style="margin: 0;">
<div class="cabecalho"></div>
<div class="corpo">
<div class="lateral">
<a>Menu lateral</a>
</div>
<div class="conteudo-principal">
<div style="height: 1000px;">Conteúdo principal</div>
</div>
</div>
</body>