O CSS (Cascading Style Sheets) é uma linguagem de estilo utilizada para controlar a apresentação visual de documentos HTML. Seu principal objetivo é separar a estrutura do conteúdo da sua aparência, permitindo uma maior flexibilidade e controle no design de páginas web. Ao aplicar estilos, cores, fontes e layouts, o CSS transforma simples documentos HTML em interfaces atraentes e funcionais.
Este repositório aborda os seguintes temas em CSS 👇
| Seletor | Declaração | Declaração |
|---|---|---|
| H1 | {color: blue;} | {font-size: 12px;} |
| Propriedade | Valor |
|---|---|
| color | blue |
| font-size | 12px |
- 📗 Seletor de Tags 📌
- 📗 Seletor de ID 📌
- 📗 Seletor de Classes 📌
- 📗 Seletores Universais 📌
- 📗 Seletores de Atributos 📌
Exemplo:
p {
color: red;
text-align: center;
}
Nesse exemplo, todos os elementos da tag p (seletor) estarão alinhados no centro e em coloração vermelho.
Exemplo:
#color {
color: red;
text-align: center;
}
Nesse exemplo, todos os elementos da id = "color" (seletor) estarão alinhados no centro e em coloração vermelho.
Exemplo:
.color {
color: red;
text-align: center;
}
Nesse exemplo, todos os elementos da class = "color" (seletor) estarão alinhados no centro e em coloração vermelho.
Exemplo:
* {
color: red;
text-align: center;
}
Nesse exemplo, todos os elementos da da página html (seletor) estarão alinhados no centro e em coloração vermelho.
Exemplo:
[title] {
color: red;
}
Nesse exemplo, se houver mais de uma tag title todos os elementos da tag title (seletor) estarão em coloração vermelho.
Agora olhe esse exemplo:
Netflix[title]{
color: red
}
Nesse exemplo, somente os elementos da tag title (seletor) com valor Netflix estarão em coloração vermelho.
- 📗Agrupamento de Seletores📌
- Combinador de Descendente
- Combinador Filho
- Combinador Irmão
Quando se quer declarar apenas um valor para muitos seletores, existe a possibilidade de declará-los em uma única linha. Exemplo:
Exemplo 1
h1, h2 {
color:blue;
}
Os textos do Título 1 e do Título 2 terão a cor azul.
Exemplo 2
.drop, h1, #image {
background-color: black;
}
Os elementos da classe drop, da ID image e o texto do Título 1 terão a cor de fundo preta.
| Seletor | Exemplo | Descrição do exemplo |
|---|---|---|
| #id | #firstname | Selects the element with id="firstname" |
| .class | .intro | Selects all elements with class="intro" |
| element.class | p.intro | Selects only < p > elements with class="intro" |
| * | * | Selects all elements |
| element | p | Selects all < p > elements |
| element,element,.. | div, p | Selects all elements and all < p > elements |
- Largura e Altura
- Largura e Altura Máxima e Mínima
- Margin
- Padding
- Box Sizing
- Cores Pré-definidas
- RGB e RGBA
- Hexadecimal
- HSL e HSLA
Exemplo: red
Exemplo: rgb(255, 99, 71) - Tomato | rgba(255, 99, 71, 0.5) - Tomato 50% transparente.
Exemplo: #ff6347 - Tomato
Exemplo: hsl(9, 100%, 64%) - Tomato | hsla(9, 100%, 64%, 0.5) - Tomato 50% transparente.
- Alterando o Fundo dos Elementos
- Redimensionando a Imagem de Fundo dos Elementos
- Repetição das Imagens de Fundo
- Posicionamento das Imagens de Fundo
- Propriedade Background Attachment
- Propriedade Background Origin
- Propriedade Background Clip
- Mesclagem
- Propriedade Background
- Tamanho da Borda
- Estilo da Borda
- Cor da Borda
- Propriedade Border
- Arredondando os Cantos com a Propriedade Border Radious
- Propriedade Border Image Source
- Propriedade Border Image Slice
- Propriedade Border Image Width
- Propriedade Border Image Repeat
- Propriedade Border Image Outset
- Onde Encontrar Fontes Personalizadas?
- Personalizando as Fontes do Nosso Site
- Aplicando Fontes Personalizadas com @Font-Face
- Aplicando Fontes Personalizadas com @import url()
- Alterando o Tamanho das Fontes com Font-Size
- Estilo de Fontes (Font-Style)
- Espessura das Fontes com Font-Weight
- Variação das Fontes com Font-Variant
- Propriedade Font-Stretch
- Customizando a Altura da Linha com Line-Height
- Propriedade Resumida Font
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent