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

22/06/2022 21:35

José Sampaio

José Sampaio

Brasil

Artigo sobre o Tópico de Introdução ao 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

https://www.alura.com.br/artigos/assets/entendendo-como-funciona-box-model-e-o-box-sizing/box-model-no-devtools.png

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.

Faça parte da nossa comunidade!

Domine as tecnologias utilizadas pelas empresas mais inovadoras do mundo e encare seu novo desafio profissional, evoluindo em comunidade com os melhores experts.

0

Certificado

Artigo relacionado

Comentários

    Nenhum comentário