Please enable JavaScript.
Coggle requires JavaScript to display documents.
CSS ( folha de estilo em cascata) (Pseudo-Classes Servem para definir um…
CSS ( folha de estilo em cascata)
Sintaxe
Seletores
h1, p, a, body, html ( aponta para a tag )
bloco de declarações indicado pelo
{
e
}
atributos: inseridos nos blocos seguidos de
: (dois pontos)
e separados por
; (ponto-virgula)
para mais de 1 atributo
valores : numericos, alfanumericos, siglas
vd, em, px, inline, border-box @
Acessando Seletores
id
: seleciona o seletor indicado pela id ( especifico ) utiliza-se o
#
para chamar o seletor no arquivo css:
#body { }
class
: seleciona um grupo de seletors universal, sua formatação é aplicada a todos elementos. use o ponto precedend o seletor :
.body { }
Agrupamentos: separe os seletores atravez de
,
caso mais de 1 tenha a mesma formatação;
p, ul, body, table {
padding:15px;
}
Comentário : classico comentario de C,
/* inicio
......
*/ fim
Inserção de estilos ( css )
Externo :
extern style
, através da tag
<link rel="stylesheet" href="local.css" >
Interno :
intern style
através da tag
<style>
seletores +blocos+atributos
</style>
Em linha:
inline style
com o atributos
style=""
;
Quando se tem mais de um arquivo externo de estilo e estes possuirem seletores iguais com formatação diferente, os atributos do ultimo estilo carregado será o usado
Formatação Atributos
para o fundo dos elementos:
background-color
cor de um texto:
color
cor para borda:
border: 2px solid Tomato
rgb/a (red, gree, blue, alpha )
'#00F00AA'( hex rgb)
hsl/a (hue,saturation,light,alpha)
background-image: ulr ("image.jpg");
background-repeat: repeat -xl repeat-y
background-position, background-attachment: top(pos) fixed(att)
Combinadores de Seletor
usando o espaco acessa o descendente imediato :
#div ul { }
usando o simbolo de
>
acessa o filho especifico do elemento :
#div
>
p > ul { }
usa-se o
+
para acessar o irmão mais proxino do elemento :
#div + p { }
usa-se o
~
para acessar o irmão mais distante do elemento :
#div ~ p { }
Formatação de Texto
font-style
font-family
font-decoration
font-size
font-weight
Display
box-model
inline-blocl
block
inline
margin:auto;
float: left / right
position: absolute / fixed / relative
Pseudo-Classes Servem para definir um estado especial do elemento
:hover
:after
:before
:link
:visited
: active
:first-child
:lang
:last-child
:only-child
:root
quantidade de filhos : nth-child(n)
Utilizado para definir o estilo, formatação de uma página