Artigo sobre o Tópico de Introdução ao CSS

#CSS

Introdução ao css

SELETORES

Elementos de identificação para o css que podem representar qualquer tipo de elemento:

Id
class

exemplo aplicando id e class no html:

<header class="cabeçalho" id="cabeçalho"> </header>

exemplo aplicando id e class no css:

/*class indicado no css é precedida por um ponto*/
.cabeçalho{ 
  color: black;
}
/*id indicado no css é precedida por um hash (#)*/
#cabeçalho{
  color: white;
}

diferenças: um id pode ser usado apenas uma vez na pagina.

Conceito de Box-model

Estilizando elementos

Padding e Margin:

formas de utilizar:

.post{
  padding: 10px; 
  margin: 10px;
}
.post{
  padding: 10px 5px; /*valores para lado x e y*/ 
  margin: 10px 5px;
}
.post{
  padding: 10px 5px 5px 0px; /*valores para todos os lados*/ 
  margin: 10px 5px 5px 0px;
}

BACKGROUND

O chamado de “plano de fundo” recebe varias propriedades

Alguamas delas:

background-color: black; → muda cor do plano de fundo.
background-imagen: url(””); → uma imagem como plano de fundo.
background-position: top; → alterar posiocionamento.

recomendando estudar site: https://developer.mozilla.org/pt-BR/

BORDER

Recebe 3 valores:

largura, cor e estilo.

exemplo:

.post{
  border: 10px yellow solid;
}
/* pode ser escrito tambem:*/

.post{
  border-width: 10px;
  border-color: yellow;
  border-style: solid;
}

outro comando de bordar:

border-radius: 30%; → arredonda as bordas.

ESTILIZANDOS TEXTOS

Principais comandos:

font-family: verdana;
font-size: 12px;
font-style: italic;
font-weight: bold;
text-transform: uppercase/lowercase/capitalize;
text-decoration: underline; adiciona uma linha.

Estilizando listas

comandos:

list-style-type: → este comando alterar a marcação de um item na lista.

ul{
list-style-type: square; /*o símbolo de maracaçã
                       se tornar um quadrado */
}

ol{
list-style-type:upper-roman; /*lista ordena com numeros romanos*/
}

ul{
list-style-type: "\\1F44D"; /*um simolo/emoji*/
}

list-style-image: url(”link de imagem”) → adicionando imagem como simbolo de marcação da lista.

Dimesão e Alinhamento

Dimensão:

Cão comandos que controlam o tamanho de um elemento.

width, height.
max-width, min-width (estes colocam um limite de tamanho em uma determinada dimesão que se adptaram com relação a tela.)

Alinhamento:

alinham os textos.

comando principal:

text-align: auto/left/right/justify.