Please enable JavaScript.
Coggle requires JavaScript to display documents.
CSS (Cascading Style Sheets) (Como que é usado o CSS (seletor {propriedade…
CSS (Cascading Style Sheets)
HTML 5 cuida da estrutura e CSS cuida da APARENCIA!
Para relacionar o HTML e o CSS, eu crio um hyper link referenciando o CSS no <head> que fica <link rel="stylesheet" type="text/css" href = "ola_mundo.css" >
OBS IMPORTANTE:
Se for com ponto (Ex: .central{...}) To selecionando uma classe
Se for #, estou selecionando um ID (Ex: #elcentral {....})
Se for sem nada (Ex: h1 {...}) Estou selecionando uma tag
Se for entre colchete (Ex: [for= "atcentral"] {...}, to selecionando um atributo da tag com seu respectigo valor (no caso for)
Pode-se tbm mesclar seletores.
Tag <span> dentro de um ID
Seletor: h1>span (Tras o filho - Span é filho de h1))
Tag <span> com class "myclass"
span.myclass
Tag <h1> com id 10
Seletor: h1#10
Como que é usado o CSS
seletor {propriedade: valor; propriedade 2: valor;} Obs: esse ultimo ponto e virgula como é o ultimo, é opcional.
Propriedade: é o atributo do elemento html ao qual sera aplicada a regra - é o aspecto que sera dado ao seletor. Ex: color, background
Seletor é o elemento HTML (identificado pela sua tag, oela sua classe ou pelo seu ID) para qual a regra sera valida. Ex: <p>,<h1>, <form>
Valor: é o atributo dado à propriedade. Ex: color: blue, font: arial...
Obs: pode aplicar a varios seletores ao mesmo tempo
Ex: h1,h2,h3 {font: "Times new Roman ";}
Obs 2: Valore compostos tem que estar em aspas simples ou duplas. Que nem no exemplo acima
Aceita comentarios. é feito assim: /
* comentario..
/
3 possiveis localizacoes de uma folha de estila:
Incorporada (ou interno) - Dentro do cabecalho da pagina (<head>) definindo um estilo que vai ser aplicado para todo o arquivo
Vantagens e Desvantagens:
Pode modificar varios elementos; Esta restrito à propria pagina: Unico lugar de manutencao;
Externa - CSS
Pode moficiar varios elementos; Pode ser replicado em outras paginas; Mais pontos de manutencao (HTML e CSS) ; Arquivos especializados (tem gente que cuida mais de estrutura e tem gente que cuida mais de estilo)
Daqui surgem as bibliotecas de estiplos, que ja tem modelos prontos de estilo
Inline - Usando a tag <style> no <body>
Vantagens e Desvantagens:
Facil de aplicar; Alta prioridade (se tiver falando de estilo em 3 lugares diferentes, vale o que ta aqui, Dificuldade de reuso
Ele aplica em cascata tudo! Entao, se tiver 2 CSS estilizando o mesmo elemento com relacao mesmo valor e atribuicao, vale o que aparecer por ULTIMO como link no <head>
Obs: Ordem de prioridade de aplicacao do estilo - Inline > Incorporado > CSS
OBS: A propriedade para o efeito em cascata é em ordem decrescente...Regra de Ouro: Quanto mais especifico, maior a prioridade.
Como assim mais especifico? Cada navegador tem sua folha de estilo padrao, Desenvolvedor (aquele que entregou o html para ser renderizado) tbm tem seus padroes e usuario tbm tem seus padroes. Entao tem essa ordem de Servidor<Desenvolvedor<Usuario. Entao o usuario é que tem prioridade maxima.
Desenvolvedor e usuario podem fazer declaracoes em alguma especificacao com "!important".
Entao ordem fica (da maior prioridade para menor)
Folhas Estilo do Desenvolvedor (iline, interna e por fim externa)
Folha de estilo do usuario
!important do desenvolvedor
Folhas de estilo padrao do navegador do usuaroi
!Important do usuario
Lembrar: to tentando dar poder ao usuario
Novidade do CSS3
Media-Query: é pra estilizar de acordo com dispositivo usado. Por exemplo, se for cel usar um estilo, se for pc usar outro