HTML & CSS - Aula 2

Na aula anterior...
page.html
<h1> Título 1 </h1>
<a> links </a>
<a href=“link.html”>
<p name=“texto”>
Um texto para o parágrafo
</p>
link.html
<a href=“#texto”>
<a href=“page.html# texto”>
<p name=“texto”>
Um texto para o parágrafo
</p>

Na aula anterior...
list.html
<ul>
<li> item</li>
<ul>
<ol>
<li> item>
</ol>
<dl>
<dt> item </dt>
<dd> definição </dd>
<dl>
layout.html
<html>
<head>
<title> título da página</title>
</head>
<body>
<div>
<p>elemento em bloco</p>
<span>elemento em linha</span>
</div>
</body>
</html>

Na aula anterior...
table.html
<table>
<th>
<td colspan=‘2’> título 1</td>
<td> título 2</td>
</th>
<tr>
<td> célula 1.1 </td>
<td rowspan=‘2’> célula 1.3 </td>
</tr>
<tr>
</tr>
</table>
form.html
<form method=“get/post” action=“#”>
<fieldset>
<legend>Título do fieldset</legend>
<input type=“*” value=“valor”/>
<textarea></textarea>
<select>
<option>opção</option>
</select>
</fieldset>
</form>
<button>botão</button>
*text / password / radio / checkbox /
submit / reset

A saga da CSS começa em 1994. Um dos autores deste livro trabalha no CERN -
o berço da Web – e a Web está começando a ser usada como uma plataforma
para a publicação eletrônica.
Três dias antes da Netscape anunciou a disponibilidade do seu novo navegador,
Håkon publicou o primeiro esboço de Cascading Style Sheets HTML .
História do CSS

Utilidade e Vantagens
Controle total sobre a apresentação do site a partir de um arquivo central
CSS
index.html
form.html
link.html
table.html

Agilização da manutenção e redesign do site

Saída para diferentes tipos de mídia a partir de uma versão única de HTML
print.css
screen.css
aural.css
page.html

Redução do tempo de carga dos documentos Web

Adequação simplificada aos critérios de acessibilidade e usabilidade

O google irá indexar melhor seu site, pois agora tem menos código
misturado com seu conteúdo

Sintaxe
Seletor Declaração Declaração
Propriedade Propriedade ValorValor
h1 { background-color: blue; font-size: 12px; }

Métodos de inserção
Inline Interno
Externo
<p style=“color: #000;”>
Texto
</p>
<head>
<style type=“text/css”>
p {
color: #000;
}
</style>
</head>
<p> Texto </p>
<head>
<link href=“default.css" rel="stylesheet" type="text/css">
</head>
<body>
<p> Texto </p>
</body>
default.css
p {
color: #000;
}

@media
• all
• braille
• embossed
• handheld
• print
• projection
• screen
• speech
• tty
• tv

Id, Class e Element
p { color: black; }
.content p { color: red; }
p#valor { color: green; }
.content #valor { color: white; }
</style>
<div class=“content”>
<p id=“valor”> Fazendo Conta </p>
</div>
#id – elemento único
.class – conjunto de elementos
element – tags html

!important
Estilo inline
Folha de estilo interna
Folha de estilo externa
Efeito Cascata
Prioridade
Padrão do navegador

Efeito Cascata
1. id
2. class
3. element
Especificidade
p { color: black; }
</style>
</div>

Efeito Cascata
1. id
2. class
3. element
Especificidade
p { color: black; }
</style>
</div>
Seletor id class tag valor
p 0 0 1 001

Efeito Cascata
1. id
2. class
3. element
Especificidade
p { color: black; }
</style>
</div>
p 0 0 1 001
. content p 0 1 1 011

Efeito Cascata
1. id
2. class
3. element
Especificidade
p { color: black; }
</style>
</div>
p 0 0 1 001
. content p 0 1 1 011
p#valor 1 0 1 101

Efeito Cascata
1. id
2. class
3. element
Especificidade
p { color: black; }
</style>
</div>
p 0 0 1 001
. content p 0 1 1 011
p#valor 1 0 1 101
.content #valor 1 1 0 110

?Fazendo Conta
Efeito Cascata
1. id
2. class
3. element
Especificidade
p { color: black; }
</style>
</div>
p 0 0 1 001
. content p 0 1 1 011
p#valor 1 0 1 101
.content #valor 1 1 0 110

Test Drive
1. Analisar e dizer qual o estado dos elementos
<div>
div.div { border: 1px solid black; }
.div { border: 1px dotted red; }
div { border: 2px dashed green; }
<p>
#content p { color: red; }
div p { color: green; }
p { color: blue; }
<li>
ul li { color: brown; }
.down li { color: red; }
div ul li { color: yellow; }
<a>
div a { color: orange; }
.div a { color: green; }
#content a { color: gray; }

<div id=“content” class=“div”>
<div class=“up div”>
<p>Lorem Ipsum</p>
<div>
<a>Era uma vez</a>
</div>
</div>
<div class=“down div”>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
Lorem Ipsum
Lorem Ipsum
• Item 1
• Item 2

Seletores – CSS 1
Seletor IE 6 IE 7 IE 8 IE 9 FF 3
FF
3.6
Chrome Opera Safari
E
E F
E, E (grouping)
E#id
E.Class
.class.class
E:link
E:active
E:visited
E:first-line
E:first-letter

E E F E, F

<div>
<ul>
<li>Dedo mindinho</li>
<li>Seu vizinho</li>
<li>Pai de todos</li>
</ul>
</div>
<div>
<p>Fura bolo</p>
<p>Mata piolho</p>
</div>
/* css */
div {
width: 50px;
border: 1px solid #000;
}
div li { color: red; }
p, li { font: arial 16px #000;}
• Dedo mindinho
• Seu vizinho
• Pai de todos
Fura bolo
Mata piolho
• Dedo mindinho
• Seu vizinho
• Pai de todos

#id .class .class.class

<div id=“content” class=“cor”>
<ul>
<li>Seu vizinho</li>
</ul>
</div>
<div class=“cor border”>
<p>Fura bolo</p>
<p>Mata piolho</p>
</div>
/* css */
#content {
width: 50px;
}
.cor {
background-color: green;
}
.cor.border {
border: 1px solid #000;
}
• Dedo mindinho
• Seu vizinho
• Pai de todos
Fura bolo
Mata piolho
Fura bolo
Mata piolho

a:active a:visited

<div>
<ul>
<li><a>Seu vizinho</a></li>
</ul>
</div>
<div>
<p><a>Fura bolo</a></p>
<p><a>Mata piolho</a></p>
</div>
/* css */
a, li { color: black; }
a:visited { color: green; }
a:active { color: red; }
• Dedo mindinho
• Seu vizinho
• Pai de todos
Fura bolo
Mata piolhoMata piolho

E:first-line E:first-letter

<div>
<p> Lorem ipsum dolor sit
amet, consectetur adipiscing
elit. Phasellus nec libero eu mi
gravida pretium id in diam. In
hac habitasse platea dictumst.
Nunc tincidunt dolor ac erat
commodo a consectetur nisi
tincidunt.
</p>
</div>
/* css */
p { color: black; }
p:first-line { color: red; }
p:first-letter {
font-size: 32px;
}
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Phasellus
nec libero eu mi gravida pretium id in
diam. In hac habitasse platea
dictumst. Nunc tincidunt dolor ac erat
commodo a consectetur nisi tincidunt.

Test Drive
1. Escrever os seletores css para atribuir:
a. borda às divs
b. cor para os parágrafos
c. tirar borda da div filha de div
d. cores diferenciadas para o link de acordo
com seu estado
e. cores diferentes para o link que está em
um span
f. o mesmo tamanho para parágrafos e links
g. cor de fundo para as celulas da primeira
linha
h. um tamanho maior para a 1º letra do
parágrafo
i. mudar a borda da div que tem a class div
e a class up
j. sobrescrever o css da div pai

<div class=“up div first”>
<p>Lorem Ipsum</p>
<span><a>Era uma vez</a></span>
<a>Era uma vez</a>
</div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div>
<table>
<tr>
<td colspan=‘2’>Tel</td>
</tr>
<tr>
<td>DDD</td>
<td>Número</td>
</tr>
</table>
</div>
</div>
div
p
div div
a a:visited a:active
span a
p, a
tr:first-line td
p:first-letter
div.div.up
div#content

Seletores – CSS 2
Seletor IE 6 IE 7 IE 8 IE 9 FF 3
FF
3.6
Chrome Opera Safari
*
E > F
E:first-child
E:hover *
E:focus
E + F
E[attr]
E[attr=“name”]
E[attr~=“name”]
E:before **
E:after **

E > F E:first-child

<div>
<p>Lorem ipsum dolor sit amet,
consectetur
</p>
<blockquote>
<p>Lorem ipsum dolor sit
amet, consectetur
</p>
<p>Phasellus nec libero eu
mi gravida pretium id in
diam.
</p>
</blockquote>
</div>
/* css */
p { color: black; }
div > p { color: red; }
blockquote p:first-child {
color: green;
}
consectetur
Lorem ipsum dolor sit
amet, consectetur
Phasellus nec libero
eu mi gravida pretium
id in diam.
consectetur
amet, consectetur
id in diam.

E:hover

<div>
<ul>
</ul>
</div>
<div>
</div>
/* css */
a:hover { color: red; }
div:hover {
background: blue;
color: white;
}
• Dedo mindinho
• Seu vizinho
• Pai de todos
Fura bolo
Mata piolho

E:hover

<div>
<ul>
</ul>
</div>
<div>
</div>
/* css */
a:hover { color: red; }
div:hover {
background: blue;
}
div:hover a {
color: white;
}
• Dedo mindinho
• Seu vizinho
• Pai de todos
Fura bolo
Mata piolho

E + F E:focus

<div>
<input type=“text”
value=“Lorem ipsum” />
<blockquote>
<p>Lorem ipsum dolor sit
amet, consectetur
</p>
<p>Phasellus nec libero eu
mi gravida pretium id in
diam.
</p>
</blockquote>
</div>
/* css */
p { color: black; }
p + p { color: green; }
input:focus { color: red; }
amet, consectetur
id in diam.
Lorem ipsum

E[attr]

<div>
<input type=“text”
value=“Lorem ipsum” />
<blockquote>
<p class=“inicio”>Lorem
ipsum dolor sit amet,
consectetur
</p>
<p class=“fim nota”>Phasellus
nec libero eu mi gravida
pretium id in diam.
</p>
</blockquote>
</div>
/* css */
p { color: black; }
p[class] { color: green; }
input[type=“text”] { color: red; }
p[class~=“fim”] { color: blue;}
amet, consectetur
id in diam.
Lorem ipsum

E:before E:after

<div>
<blockquote>
<p class=“inicio”>Lorem
ipsum dolor sit amet,
consectetur
</p>
<p class=“fim”>Phasellus nec
libero eu mi gravida
pretium id in diam
</p>
</blockquote>
</div>
/* css */
p { color: black; }
p.inicio:before {
content: “antes”;
color: green;
}
p.fim:after {
content:”depois”;
color: red;
}
amet, consectetur
id in diam
antes Lorem ipsum dolor
sit amet, consectetur
depois

Test Drive
1. Escrever o código css para selecionar os
elementos para atribuir:
a. ausência de margem para todos os
elementos
b. cor ao link que seja filho direto de uma div
c. cor ao primeiro item da lista
d. borda pontilhada à div irmã
e. borda dashed no campo de senha
f. cor de fundo a uma div que tenha a classe
first
g. a palavra ‘história’ no início do link filho de
um span
h. a palavra ‘fim’ ao fim do link que está em
uma div
i. mudança da cor do input quando estiver
sendo usado
j. mudança da cor de fundo da div quando
passar o mouse sobre a mesma

<div class=“up div first”>
<p>Lorem Ipsum</p>
<span><a>Era uma vez</a></span>
<a>Era uma vez</a>
</div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div>
<form>
<input type=‘text’ value=‘um’/>
<input type=‘password’/>
<textarea></textarea>
<input type=‘submit’ value=‘ir’>
</form>
</div>
</div>
*
div > a
ul:first-child
div + div
input[type=‘password’]
div.first
span a:before
div a:after
a:focus
div:hover

HTML & CSS - Aula 2

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a HTML & CSS - Aula 2

Semelhante a HTML & CSS - Aula 2 (20)

HTML & CSS - Aula 2

Notas do Editor