Módulo 6 - CSS3

Prévia do material em texto

Inline CSS -> quando fazemos a estilização direto na tag, no arquivo
html, utilizando 'style'.
Internal style sheet -> quando adiionameos uma folha de estilo ao head
(dentro do arquivo html), utilizando a tag .
Id -> utilizado individualmente
#nome_do_id
Classe -> utilizado para grupos
.nome_da_classe
TAGS ---------------------------------------------
border: expessura tipo cor; (ex: border: 1px solid red) (lista
com os tipos de bordas: https://www.devmedia.com.br/css-border/43522)
/*utilizado para adiciona borda aos elementos*/
color: código ou nome da cor; (ex: color: red) /*utilizado para
mudar a cor da fonte*/
font-size: tamanho da fonte; (ex: font-size: 30px) /*utilizado
para modificar o tamanho da fonte*/
px -> pixel, tamanho fixo
% -> porcentagem, tamanho relativo ao padrão do navegador
em -> tamanho relativo ao container
font-family: "fonte 1", "fonte 2", "fonte genérica"; (ex:
font-family: 'Times New Roman', Times, serif;) /*utilizada para mudar a
fonte dos textos*/
font-weight: tamanho; (ex: font-weight: bold; font-weight: 900)
/*utilizado para fazer o texto ficar em negrito, de 100 até 900.*/
font-decoration: tipo; (ex: text-decoration: underline;)
/*serve para adicionar diversos estilos aos textos*/
font-style: tipo; (ex: font-style: italic) /*adiciona estilo
aos textos*/
background-color: cor; /*adiciona cor de fundo*/
background-image: url('caminho'); /*adiiona imagem de fundo*/
background-repeat: tipo; /*altera o padrão de repetição da
imagem de fundo*/
background-repeat: no-repeat; /*tira a repetição da
imagem*/
background-repeat: repeat; /*deixa a imagem repetida
tanto horizontal quanto vertialmente*/
background-repeat: repeat-x; /*repete a imagem
horizontalmente*/
background-repeat: repeat-y; /*repete a imagem
verticalmente*/
background-attachment: tipo; /*altera a maneira como a
imagem de fundo se comporta durante a rolagem*/
background-attachment: fixed; /*deixa a imagem fixa ao
scrollar a página*/
background-attachment: scroll; /*a imagem de fundo se
move junto com o onteúdo ao scrollar a página*/
background-position: posição-x posição-y; /*alinha a imagem
de fundo*/
padding: informação; /*espaçamento interno*/
margin: informação; /*espaçamento externo*/
/*ESTILIZAÇÃO DE LINKS*/
/*definir a cor de links que ainda não foram viitados*/
a:link {
color: #b9c941;
}
/*definir a cor de links que foram viitados*/
a:visited {
color: #c0c0c0;
}
/*definir a cor quando o cursor passar por cima*/
a:hover {
color: #6d790f;
}
/*definir a cor que o link ficará ao ser clicado*/
a:active {
color: #e4f371;
}