aula 3 de css

1. HTML & CSS – aula 3

2. Recordando

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

4. 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

5. Cascading
Style
Sheets

6. 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

7. E ~ F
<!-- html -->
<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
Phasellus nec libero
eu mi gravida pretium
id in diam.

8. E[attr]
<!-- html -->
<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; }
Lorem ipsum dolor sit
amet, consectetur
Phasellus nec libero
eu mi gravida pretium
id in diam.
Lorem ipsum
p[class$=“nota”] { color: red; }
Phasellus nec libero
eu mi gravida pretium
id in diam.

9. E:nth-of-type
<!-- html -->
<div>
<p> Lorem ipsum </p>
<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
Lorem ipsum dolor sit amet
consectetur
Phasellus nec
libero eu mi
gravida pretium id in diam

10. 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’
<!--html-->
<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

11. 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

12. E:nth-child <!-- html -->
<div>
<p> Lorem ipsum </p>
<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
Lorem ipsum dolor sit amet
consectetur
Phasellus nec
libero eu mi
gravida pretium id in diam
consectetur
Phasellus nec
Lorem ipsum dolor sit amet
libero eu mi
gravida pretium id in diam

13. E:empty E:target <!-- html -->
<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;
}
Lorem ipsum dolor sit
amet, consectetur
Phasellus nec libero eu mi
gravida pretium id in diam

14. E:checked E::selection
<!-- html -->
<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;
}
Lorem ipsum dolor sit
amet, consectetur

15. 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; }
Lorem ipsum dolor sit amet
Phasellus nec libero eu mi
gravida pretium id
Phasellus nec libero eu mi
gravida pretium id

16. 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’
<!--html-->
<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)

17. Propriedades

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

19. Background
<!-- html -->
<body>
<div class=“caixa”></div>
</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;
}

20. Margem
<!-- html -->
<body>
<div class=“caixa”></div>
</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

21. Espaçamento
<!-- html -->
<body>
<div class=“caixa”></div>
</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

22. Bordas
<!-- html -->
<body>
<div class=“caixa”></div>
</body>
/* css */
.caixa {
width: 50px;
height: 50px
margin: 20px;
background: green;
border-width: 1px;
border-style: solid;
border-color: black;
}

23. Bordas
<!-- html -->
<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;
}

24. Modelo de caixa
Margem
Espaçamento
Conteúdo
Borda

25. Overflow
<!-- html -->
<body>
<div class=“caixa um”>
dbfsbdhfbshdfbusdbfuvdhuvv
dbfsbdhfbshdfbusdbfuvdhuvv
</div>
<div class=“caixa dois”>
dbfsbdhfbshdfbusdbfuvdhuvv
dbfsbdhfbshdfbusdbfuvdhuvv
</div>
<div class=“caixa tres”>
dbfsbdhfbshdfbusdbfuvdhuvv
</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

26. Cursor
<!-- html -->
<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

27. 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

28. 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)

29. Até a próxima!