HTML & CSS - Aula 3

Na aula anterior...
• Como usar o CSS
• Vantagens e Utilidades do CSS
• Sintaxe
• Efeito Cascata
• Especificidade

Na aula anterior...
selectors1.css selectors2.css
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 > F
E:first-child
E:hover
E:focus
E + F
E[attr]
E[attr=“name”]
E[attr~=“name”]
E:before
E:after

Seletores - CSS 3
Seletor IE 6 IE 7 IE 8 IE 9 FF 3
FF
3.6
Chrome Opera Safari
E ~ F
E[attr^=“name”]
E[attr$=“name”]
E[attr*=“name”]
E[attr|=“name”]
E:root
E:nth-of-type
E:nth-last-of-type
E:first-of-type
E:last-of-type
E:only-of-type

E ~ F

<div>
<p> Lorem ipsum </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; }
p ~ p { color: green; }
Lorem ipsum dolor sit
amet, consectetur
Phasellus nec libero
eu mi gravida pretium
id in diam.
Lorem ipsum
id in diam.

E[attr]

<div>
<p class=“lorem-ipsum”>
Lorem ipsum </p>
<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*=“ini”] { color: green; }
p[class|=“lor”] { color: orange; }
p[class^=“fim”] { color: blue; }
amet, consectetur
id in diam.
Lorem ipsum
p[class$=“nota”] { color: red; }
id in diam.

E:nth-of-type

<div>
<div>
<p>Lorem ipsum dolor sit amet</p>
<p> consectetur </p>
<p>Phasellus nec </p>
<p>libero eu mi</p>
</div>
<div>
<p>gravida pretium id in diam</p>
</div>
</div>
/* css */
p { color: black; }
p:last-nth-of-type(2){ color: red;}
p:nth-of-type(2){ color: green; }
p:first-of-type { color: orange; }
p:last-of-type { color: blue; }
p:only-of-type { color: purple; }
consectetur
Phasellus nec
Lorem ipsum dolor sit amet
libero eu mi
Lorem ipsum
gravida pretium id in diam
Lorem ipsum
consectetur
Phasellus nec
libero eu mi

Test Drive
1. Escrever os seletores css para atribuir:
a. cor ao link precedido de span
b. cor ao segundo item da lista
c. cor ao segundo input, contando do ultimo
d. cor ao último input
e. cor ao um elemento que seja único
f. cor ao elemento com class começando
com up
g. cor ao elemento com class terminando em
div
h. cor ao elemento com class que contenha
‘do’

<div id=“content” class=“div”>
<div class=“up_div first”>
<p>Lorem Ipsum</p>
<span><a>Era uma vez</a></span>
<a>Era uma vez</a>
</div>
<div class=“down_div”>
<ul>
<li class=‘da’>Item 1</li>
<li class=‘do’>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>
span ~ a
li:nth-of-type(2)
input:nth-last-of-type(2)
input:last-of-type
p:only-of-type
div[class^=“up”]
div[class$=“div”]
div[class*=“do”]
span:only-of-type

Seletores - CSS 3
Seletor IE 6 IE 7 IE 8 IE 9 FF 3
FF
3.6
Chrome Opera Safari
E:only-child
E:last-child
E:nth-child
E:nth-last-child
E:empty
E:target
E:checked
E::selection
E:not
E:enabled
E:disabled

E:nth-child 
<div>
<div>
<p> Lorem ipsum dolor sit amet </p>
<p> consectetur </p>
<p> Phasellus nec </p>
<p> libero eu mi </p>
</div>
<div>
<p> gravida pretium id in diam </p>
</div>
</div>
/* css */
p { color: black; }
p:nth-last-child(3){ color: red;}
p:nth-child(odd) { color: green; }
p:last-child { color: blue; }
p:only-child { color: purple; }
Lorem ipsum
consectetur
Phasellus nec
libero eu mi
consectetur
Phasellus nec
libero eu mi

E:empty E:target 
<div>
<p></p>
<div>
<p><a href=“#fim”>Lorem ipsum</a>
dolor sit amet, consectetur
</p>
<p id=“fim”>Phasellus nec
libero eu mi gravida
pretium id in diam
</p>
</div>
</div>
/* css */
p { color: black; }
p:empty {
border: 1px dashed red;
}
p:target {
border: 1px dotted green;
}
amet, consectetur
Phasellus nec libero eu mi

E:checked E::selection

<div>
<p></p>
<div>
<p><a href=“#fim”>Lorem ipsum</a>
dolor sit amet, consectetur
</p>
<p id=“fim”>Phasellus nec
libero eu mi gravida
pretium id in diam
</p>
</div>
</div>
/* css */
p { color: black; }
p::selection {
background: blue;
}
input:checked {
margin-left: 30px;
}
amet, consectetur

E:enabled E:disabled E:not <!– html -->
<div>
<input type=“text” />
<input type=“text” disabled=“disabled” />
<div>
<p>Lorem ipsum dolor sit amet</p>
<p id=“fim”>Phasellus nec libero
eu mi gravida pretium id </p>
</div>
</div>
/* css */
input:enabled {
border-color: green;
}
input:disabled {
border-color: red;
background-color: gray;
}
p:not(#fim) { color: red; }
gravida pretium id
gravida pretium id

Test Drive
1. Escrever o código css para selecionar os
elementos para atribuir:
a. cor ao parágrafro que for único em uma
div
b. borda ao último filho do formulário
c. cor quando um parágrafo ou link for
selecionado
d. sublinhar um item do formulário quando
for marcado
e. tamanho e borda a um elemento vazio
f. borda ao elemento alvo do link
g. cor a um lemento desabilitado
h. estilo itálico a parágrafos, exceto com
classe ‘up’

<div id=“content” class=“div”>
<div class=“up div first”>
<p>Lorem Ipsum</p>
<span><a>Era uma vez</a></span>
<a href=“opa”>Era uma vez</a>
<p></p>
</div>
<div class=“down div”>
<p>Lista</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div>
<form id=“opa”>
<input type=‘text’ value=‘um’/>
<input type=‘password’/>
<input type=‘checkbox’/> ir
<input type=‘text’
disabled=‘disabled’ />
</form>
</div>
</div>
div p:only-child
form:last-child
p::selection, a::selection
input:checked
input:empty
p:target
input:disabled
p:not(.up)

Dimensão

<body>
<div class=“caixa”></div>
</body>
/* css */
.caixa {
width: 30px;
min-width: 10px;
max-width: 100px
height: 30px
min-height: 10px;
max-height: 100px;
}

Background

<body>
</body>
/* css */
.caixa {
width: 30px;
height: 30px
background-color: green;
background-image: url(wally.png);
background-position: right bottom;
background-repeat: no-repeat;
}
ou
.caixa {
background: green url(wally.png) right
bottom no-repeat;
}

Margem

<body>
</body>
/* css */
.caixa {
width: 30px;
height: 30px
margin-top: 10px;
margin-left: 50px;
}
ou
.caixa {
width: 30px;
height: 30px
margin: 10px 0 0 50px;
}
50px
10px

Espaçamento

<body>
</body>
/* css */
.caixa {
width: 130px;
height: 70px
background: green;
padding-right: 70px;
padding-bottom: 30px;
}
ou
.caixa {
width: 30px;
height: 30px
background: green;
padding: 0 70px 30px 0;
}
70px
30px

Bordas

<body>
</body>
/* css */
.caixa {
width: 50px;
height: 50px
margin: 20px;
background: green;
border-width: 1px;
border-style: solid;
border-color: black;
}

Bordas

<body>
<div class=“caixa um”></div>
<div class=“caixa dois”></div>
</body>
/* css */
.caixa {
width: 30px;
height: 30px
margin: 10px;
background: green;
}
.um {
border: 1px dashed #000;
}
.dois {
border: 3px dotted #000;
}

Modelo de caixa
Margem
Espaçamento
Conteúdo
Borda

Overflow

<body>
<div class=“caixa um”>
dbfsbdhfbshdfbusdbfuvdhuvv
</div>
<div class=“caixa dois”>
</div>
<div class=“caixa tres”>
</div>
</body>
/* css */
.caixa { overflow: scroll; }
.caixa.um { overflow: visible; }
.caixa.dois { overflow: hidden; }
.caixa.tres { overflow: auto; }
dbfsbdhfbs
hdfbusdbfu
vdhuvv
dbfsbdhfbs
hdfbusdbfu
vdhuvv
dbfsbdhfbs
hdfbusdbfu
vdhuvv
dbfsbdhfbs
dbfsbdhfbs
hdfbusdbfu
vdhuvv

Cursor

<body>
<div class=“caixa um”></div>
<div class=“caixa dois”></div>
<div class=“caixa tres”></div>
<div class=“caixa quatro”></div>
<div class=“caixa cinco”></div>
</body>
/* css */
.caixa {
width: 30px;
height: 30px
margin: 10px;
background: green;
border: 1px dashed #000;
}
.um { cursor: pointer; }
.dois { cursor: wait; }
.tres { cursor: move; }
.quatro { cursor: auto; }
.cinco { cursor: text;} I

Test Drive
1. Criar um arquivo default.css
2. Nas suas páginas html chamar o default.css
3. Em index.html adicione à div a class content
4. No arquivo css, edite o layout da tela inicial:
a. atribua um tamanho fixo ao content
b. centralize o content
c. coloque uma borda cinza e tracejada
d. atribua um espaçamento interno
5. Atribua css às tabelas de tabela de table.html de forma que:
a. cada tabela possua um id
b. Exista uma margem entre as tabelas
c. O head da 1ª tabela seja verde
d. As células de conteúdo tenham cor #eee
e. A 2ª tabela tenha bordas pontilhadas e cinza
f. A dimensão da 2ª tabela seja 300 x 100
g. As células da 2ª tabela que possuam rowspan sejam azuis
h. As células da 2ª tabela que não possuam rowspan ou colspan, sejam
laranjas

Test Drive
6. Atribua css ao formulário de form.html de forma que:
a. os inputs de texto possuam o mesmo tamanho
b. as entradas de texto estejam alinhadas no 2º formulário (usar apenas os
recursos ensinados até o momento)
c. o fieldset tenha um background cinza claro com borda dupla cinza escuro
d. estabelecer um espaçamento entre os itens de 10px
e. Todo input, exceto o de senha tenham fundo amarelo (yellow)
7. Adicione no form.html um botão para voltar para a página inicial
a. determine um tamanho fixo de forma que o botão seja bem visível
b. Cor do botão lilás
c. Borda larga, cinza e outset
8. Aplicar o content do index na página do form
9. Crie um arquivo chamado menu.html e crie um menu vertical com itens e seus
sub-itens, diferenciando por cor do texto e cor de fundo.
10. Em layout.html faça a demonstração do modelo de caixa diferenciando por cor
de fundo e borda (margem, borda, espaçamento e conteúdo)

HTML & CSS - Aula 3

Mais conteúdo relacionado

Mais procurados

Semelhante a HTML & CSS - Aula 3

HTML & CSS - Aula 3

Notas do Editor