JesskaBasilio / aprendendo-CSS

CSS - Cascading Style Sheets

DESAFIO 1

Gravar_2024_04_07_14_02_38_535.mp4

DESAFIO 2

Gravar_2024_04_07_14_06_30_763.mp4

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.

Conteúdo Abordado nos Desafios

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

🌟 Seletores

• 📗 Seletor de Tags 📌

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.
• 📗 Seletor de ID 📌

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.
• 📗 Seletor de Classes 📌

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.
• 📗 Seletores Universais 📌

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.
• 📗 Seletores de Atributos 📌

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.

🌟 Combinadores

• 📗Agrupamento de Seletores📌



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.

• Combinador de Descendente
• Combinador Filho
• Combinador Irmão

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

🌟 Propriedades de Dimensionamento e Espaçamento

• Largura e Altura
• Largura e Altura Máxima e Mínima
• Margin
• Padding
• Box Sizing

🌟 Cores

• Cores Pré-definidas

Exemplo: red

• RGB e RGBA

Exemplo: rgb(255, 99, 71) - Tomato | rgba(255, 99, 71, 0.5) - Tomato 50% transparente.

• Hexadecimal

Exemplo: #ff6347 - Tomato

• HSL e HSLA

Exemplo: hsl(9, 100%, 64%) - Tomato | hsla(9, 100%, 64%, 0.5) - Tomato 50% transparente.

🌟 Imagens

• Propriedade Object-Fit
• Propriedade Object-Position

🌟 Fundo dos Elementos

• 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

🌟 Bordas

• 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

🌟 Fontes

• 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