Propriedades CSS mais usadas
Propriedades CSS mais usadas
Propriedades CSS mais usadas é uma aula grátis de HTML for Kids no CoddyKit. Esta é a aula 1 de 1. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML for Kids, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML for Kids inclui 1 aulas no total.
Introdução
Olá,
Nesta seção, aprenderemos as propriedades CSS mais comuns.
Até agora, geralmente fizemos exemplos com propriedades simples, como color e font-size.
Largura e altura
Altura - Largura
Usaremos as propriedades width e height para definir os valores de largura e altura dos nossos elementos.
Há dois pontos aos quais devemos prestar atenção aqui.
- Não podemos atribuir largura e altura a elementos do tipo inline.
- Por padrão, as propriedades width e height que atribuímos são independentes de outras propriedades, como margin, padding e border. Elas são usadas apenas para a área interna do elemento.
Forneceremos mais informações sobre essas exceções posteriormente.
<!DOCTYPE html>
<html>
<head>
<style>
.my-box {
width: 100px;
height: 100px;
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div class="my-box">My Box</div>
</body>
</html>
Largura e altura 2
Em nosso exemplo anterior, atribuímos valores estáticos à largura e à altura. No entanto, os valores que podem ser atribuídos não se limitam a números fixos.
Agora vamos ver como atribuir a largura usando porcentagem em nosso exemplo.
<style>
.box1 {
height: 200px;
width: 200px;
background-color: #1cac84;
}
.box2 {
height: 200px;
width: 70%;
background-color: powderblue;
}
.box3 {
background-color: #c974af;
}
</style>
<div class="box1">First Box</div>
<div class="box2">Second Box</div>
<div class="box3">This box takes
the auto value for the width and height
properties by default.</div>
content-box versus border-box
A propriedade box-sizing usa o valor content-box por padrão.
Por padrão, os valores de largura e altura são usados como referência para o conteúdo.
Os valores de borda e preenchimento são adicionados aos valores de largura e altura.
Suponha que a largura de uma caixa seja 100px.
Quando adicionamos 10px de preenchimento e 20px de borda a essa caixa, a largura total do elemento será 100px + 10px + 20px = 130px.
Largura máxima
Com a propriedade max-width, podemos atribuir a largura máxima que um elemento pode ocupar.
No exemplo abaixo, como o valor de max-width foi definido como 100px, embora o valor padrão de width seja auto (o elemento deve ocupar 100% do elemento pai), ele ocupou 100px e o conteúdo ficou para fora da caixa.
<style>
.box {
height: 200px;
max-width: 100px;
background-color: #1cac84;
}
</style>
<div class="box">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Morbi lacinia ut felis
et sagittis
</div>
Decoração de texto
Podemos definir uma decoração para os textos com a propriedade text-decoration.
Acredito que seja mais fácil analisar essa propriedade no exemplo. Observe a saída do nosso código de exemplo na visualização.
<style>
.head1 {
text-decoration: overline;
}
.head2 {
text-decoration: line-through;
}
.head3 {
text-decoration: underline;
}
.head4 {
text-decoration: underline overline;
}
</style>
<h1 class="head1">
Text-decoration is overline
</h1>
<h1 class="head2">
Text-decoration is line-through
</h1>
<h1 class="head3">
Text-decoration is underline
</h1>
<h1 class="head4">
Text-decoration is both underline
and overline
</h1>text-indent
Podemos querer incluir um espaço no início de um texto. Para isso, usamos a propriedade text-indent.
<style>
.indent-txt{
text-indent: 20px;
}
</style>
<p class="indent-txt">Lorem ipsum dolor
sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat
</p>text-align
Definimos o posicionamento horizontal de um texto com a propriedade text-align.
Vamos definir um exemplo de HTML.
<style>
.h1-center {
text-align: center;
}
.h1-left {
text-align: left;
}
.h1-right {
text-align: right;
}
</style>
<h1 class="h1-center">
Lorem ipsum (center)
</h1>
<h1 class="h1-left">
Lorem ipsum (left)
</h1>
<h1 class="h1-right">
Lorem ipsum (right)
</h1>font-family
Definimos o estilo font-family para usar nos textos o tipo de fonte que desejamos.
Há alguns pontos importantes que precisamos conhecer aqui.
- A fonte que defini deve estar registrada no sistema do nosso usuário. Para isso, precisamos usar uma das fontes conhecidas como fonte segura para a Web.
- Se formos usar uma fonte personalizada, precisaremos adicionar a fonte que usaremos como uma dependência de terceiros entre as tags head. Ao adicionar font-family, devemos definir nossas preferências de família de fontes primária e secundária.
- Se o navegador não encontrar nossa preferência primária no sistema, ele exibirá nossa preferência secundária ao usuário.
font-family 2
No exemplo abaixo, o tipo de fonte Times New Roman foi atribuído à classe principal.
As fontes Times e serif são atribuídas como secundária e terciária, respectivamente.
O navegador tenta usar primeiro o tipo de fonte Times New Roman; se esse tipo não for encontrado no sistema, nossas outras preferências serão usadas.
Se as fontes que atribuímos não estiverem disponíveis, o navegador usará a fonte padrão.
<style>
.header {
font-family: "Times New Roman", Times, serif;
}
</style>
<h1 class="header">
Hello Font Family
</h1>font-style
Como podemos entender pelo nome, ele especifica o estilo da fonte do texto que usamos.
Agora vamos ver a propriedade font-style com um exemplo.
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
<p class="normal">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit
</p>
<p class="italic">Lorem ipsum dolor sit amet,
consectetur adipiscing elit
</p>
<p class="oblique">Lorem ipsum
dolor sit amet. consectetur
adipiscing elit
</p>Parabéns
Parabéns 🎉
Nesta seção, aprendemos as propriedades CSS mais usadas.
Na próxima seção, aprenderemos CSS Margin.
Perguntas Frequentes
A aula “Propriedades CSS mais usadas” é grátis?
Sim — o texto completo de “Propriedades CSS mais usadas” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML for Kids, atualize para CoddyKit PRO. O curso de HTML for Kids inclui 1 aulas no total.
O que vou aprender em “Propriedades CSS mais usadas”?
Propriedades CSS mais usadas Você pratica HTML for Kids com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar HTML for Kids?
Nenhuma experiência prévia é necessária. HTML for Kids no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 1.
Quanto tempo leva a aula “Propriedades CSS mais usadas”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de HTML for Kids?
Sim. Cada aula de HTML for Kids inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.