HTML, CSS

Prévia do material em texto

Organização: obrigatório 
EDITORES E IDES: 
Início de toda página html: obrigatorio 
Titulo e listas: 
Adicionar imagem: obrigatório 
Colocar texto 
Marcações de ênfase 
Cores em palavras 
Css:obrigatorio 
Font 
ALINHAMENTO E DECORAÇÃO DE TEXTO 
IMAGEM DE FUNDO 
Bordas 
cor 
DIMENSÕES 
ESPAÇAMENTOS 
Margin: obrigatorio 
 
 
HTML, CSS, Java script 
 
Organização: obrigatório 
Criar as pastas: css, js, img de imediato e colocar nossa primeira pagina index.html na raiz. 
 
EDITORES E IDES: 
Visual studio, atom, sublime next, notpad. … 
 
Início de toda página html: obrigatorio 
 
 
 
 
 
 Colocar titulo 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Titulo e listas: 
 
Titulo 
Subtitulo. 
 
elemento1 
elemento2. 
 … 
... 
 
 
HTML 
 
para exibir textos como páginas na Internet. 
 
Navegador 
 
Navegador é o software que requisita um documento HTML 
através do protocolo HTTP e exibe seu conteúdo em uma 
janela. 
 
 
 
ul { 
/* alterar para circulo antes de cada da lista não-ordenada */ 
list-style-type: circle; 
} 
ol { 
/* alterar para uma sequência alfabética antes de cada da lista ordenada */ 
list-style-type: upper-alpha; 
} 
 
 
 
 
Adicionar imagem: obrigatório 
 
 
 
Matriz da MusicDot 
 
 
Add icone na aba do navegador (obrigatorio) 
 
 
 
Colocar texto 
 
A MusicDot é a maior escola online de música em todo o mundo. 
 
Marcações de ênfase 
Aprenda a deixar fonte mais forte. 
 enfâse 
 diminui peso do texto 
 
 
Cores em palavras 
MusicDot anos 90 
 
Css:obrigatorio 
color: blue; 
background-color: yellow; 
 
 
seletor { 
propriedade-subpropriedade: valor; 
} 
 
 
 
Font 
h1 { 
font-family: serif; 
} 
h2 { 
font-family: sans-serif; 
} 
 
ALINHAMENTO E DECORAÇÃO DE TEXTO 
lado do texto: 
p { 
text-align: right; 
} 
p { 
line-height: 3px; /* tamanho da altura de cada linha */ 
letter-spacing: 3px; /* tamanho do espaço entre cada letra */ 
word-spacing: 5px; /* tamanho do espaço entre cada palavra */ 
text-indent: 30px; /* tamanho da margem da primeira linha do texto */ 
} 
 
 
IMAGEM DE FUNDO 
h1 { 
background-image: url(sobre-background.jpg); 
} 
body { 
background-image: url(https://i.imgur.com/uAhjMNd.jpg); 
} 
 
Bordas 
 
body { 
border-color: red; cor da borda 
border-style: solid; estilo da borda 
border-width: 1px; tamanho da borda 
} 
 
body { 
border: 1px solid red; 
} 
 
escolher o lado da borda 
h1 { 
border-top: 1px solid red; /* borda vermelha em cima */ 
border-right: 1px solid red; /* borda vermelha à direita */ 
border-bottom: 1px solid red; /* borda vermelha embaixo */ 
border-left: 1px solid red; /* borda vermelha à esquerda */ 
} 
 
cor 
h1 { 
color: red; 
} 
h2 { 
background-color: yellow; 
} 
 
h3 { 
color: rgb(255, 200, 0); 
} 
h3 { 
background-color: #f2eded; 
} 
 
 
DIMENSÕES 
p { 
background-color: red; 
height: 300px; altura 
width: 300px; largura 
} 
 
ESPAÇAMENTOS 
 
A distância entre o limite do elemento, sua borda, e seu respectivo conteúdo. 
padding-top acima 
padding-right direita 
padding-bottom abaixo 
padding-left esquerda 
 
p { 
padding: 10px; aplicado em todas as direções 
} 
 
p { 
padding: 10px 20px 15px 5px; será aplicado acima,... 
} 
 
Margin: obrigatorio 
parecida com o espaçamento. 
margin-top 
margin-right 
margin-bottom 
margin-left 
 
p { 
margin: 0 auto; Com esse auto ele se adpta a tela 
} 
 
LINKS: obrigatorio 
 
Visite o site da Caelum. 
 
 
Mais informações aqui. 
Conteúdo da página... 
 
Mais informações sobre o assunto: 
Informações... 
 
 
Entre em contato sobre o curso 
 
Acesse nossa loja. aparece nome no link 
 Contato 
 
Esse #de cima vai pra uma pagina html chamada sobre.html 
 
 
Seletores 
class="" depois é chamado no css com . 
id="" chamado no css com # 
 
 
herança: obrigatorio 
img { 
width: inherit; 
height: inherit; 
} 
a imagem vai ter sua largura e altura igual do elemento pai 
 
 
TIPOS DE DISPLAY: obrogatorio 
 
display: block ocupa toda a largura da tela 
display: inline ocupa o necessario 
display: inline-block podem ficar um ao lado da outra depende da tela e tamanho 
 
 
 
 
Unidade de menida: obrigatório 
100 px o elemento vai ficar com 100 pixels de tamanho 
100% o elemento vai ficar com 100% do tamanho disponivel 
div { 
width: 400px; 
} 
img { 
width: 100%; /* Ocupe 100% do espaço disponível */ 
} 
Com porcentagem ocupa o espaço disponível e aí dependendo do tamanho da tela ele vai 
se adaptando. 
em e rem: igual a %, mas em usa o tamanho do elemento pai e rem do html. 
ex. 
 
 
 
 
html { 
font-size: 10px; 
} 
 
div { 
font-size: 20px; 
} 
 
obs.: perceba que ocorre uma multiplicação. 
 
img { 
width: 10em; /* A largura será de 200px */ 
height: 10rem; /* A altura será de 100px */ 
} 
 
A importância para se utilizar essas medidas que se adaptam, é justamente pela 
variabilidade de telas. E também pq se precisarmos mudar alguma coisa, simplesmente 
mudamos uma e as outras mudaram sozinhas. 
 
Adaptando aos vários tipos de tela:media types 
 
 
 
 
 
no css: 
@media screen { determina a visualização normal, na tela do Desktop. 
body { 
background-color: blue; 
color: white; 
} 
@media print { print com regras de impressão 
body { 
background-color: white; 
color: black; 
} 
} 
CSS3 MEDIA QUERIES 
 
 
 
 
outra forma de declarar é dentro do css: 
@media screen { 
body { 
font-size: 16px; 
} 
} 
@media (max-width: 480px) { 
body { 
font-size: 12px; 
} 
} 
 
device-width que, resumidamente, representa um número em pixels que o fabricante do 
aparelho considera como mais próximo da sensação que o usuário tem ao visualizar a tela. 
 
os Iphones o device-width é considerado com 370px, apesar de poder ter o tamanho maior. 
 
viewport por padrão costuma considerar o tamanho da tela visível. 
 
nesse caso: 
 
 
 
 
melhor ainda esse último 
 
CSS Reset: obrigatorio 
Esse arquivo simplesmente não deixa os navegadores alterar nossa pagina pelo padrão 
deles, evita por exemplo que um texto que era pra aparecer em cinco linhas apareça em 
seis ou menos… 
 
FLEX CONTAINER 
display: flex igual o inline, porém mais flexível 
 
flex-start: É o valor padrão. Os elementos ficam grudados um do lado do outro à esquerda 
do 
flex container. 
flex-end: Os elementos ficam grudados um do lado do outro à direita do flex container. 
center: Os elementos ficam grudados um do lado do outro no meio do flex container. 
space-between: O primeiro elemento fica totalmente à esquerda do flex container e o último 
fica 
totalmente à direita. O restante dos elementos ficam distribuídos com um espaçamento 
igual 
entre eles. 
space-around: Cada elemento fica com um espaçamentoigual em volta dele mesmo. Isso 
quer 
dizer que o primeiro elemento vai ter um espaçamento maior à direita do que à esquerda 
porque 
vai somar com o espaçamento à esquerda do segundo elemento. 
space-evenly: Corrige o "problema" do valor acima. Os elementos terão um espaçamento 
igual 
em ambos os lados. 
align-items : 
Essa propriedade ajusta verticalmente os elementos filhos do flex container 
stretch: É o valor padrão. Os elementos se "esticam" para que todos fiquem com a mesma 
altura. 
flex-start: Os elementos ficam todos alinhados com o topo do flex container. 
flex-end: Os elementos ficam todos alinhados com a base do flex container. 
center: Os elementos ficam todos alinhados com o meio do flex container. 
baseline: Os elementos ficam alinhados com base do conteúdo textual de cada um deles. 
flex-wrap : 
Essa propriedade trabalha com a "quebra de linha" dos elementos em linha. 
nowrap: É o valor padrão. Os elementos vão ficar um do lado do outro mesmo que não 
exista 
mais espaço horizontal. 
wrap: Os elementos que não cabem mais no espaço lateral recebem uma quebra de linha, 
ou 
seja, vão para a linha debaixo. 
wrap-reverse: Os elementos que não cabem mais no espaço lateral recebem uma quebra 
de 
linha acima, ou seja, vão para a linha de cima. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
	 
	 
	HTML, CSS, Java script 
	Organização: obrigatório 
	EDITORES E IDES: 
	Início de toda página html: obrigatorio 
	Titulo e listas: 
	Adicionar imagem: obrigatório 
	Colocar texto 
	Marcações de ênfase 
	Cores em palavras 
	Css:obrigatorio 
	Font 
	ALINHAMENTO E DECORAÇÃO DE TEXTO 
	IMAGEM DE FUNDO 
	Bordas 
	cor 
	DIMENSÕES 
	ESPAÇAMENTOS 
	Margin: obrigatorio 
	LINKS: obrigatorio 
	Seletores 
	herança: obrigatorio 
	TIPOS DE DISPLAY: obrogatorio 
	Unidade de menida: obrigatório 
	Adaptando aos vários tipos de tela:media types 
	CSS Reset: obrigatorio 
	FLEX CONTAINER