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.
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.