HTML & CSS - Aula 4

Na aula anterior...
selectors3.css selectors3.css
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: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

Na aula anterior...
propriedades.css
width
min-width
max-width
height
min-height
max-height
background
background-color
background-image: url(wally.png);
background-position: left bottom;
background-repeat: no-repeat |
repeat | repeat-x | repeat-y
overflow: scroll | visible | hidden
| auto;
propriedades.css
margin
margin-top
margin-right
margin-bottom
margin-left
padding
padding-top
padding-right
padding-bottom
padding-left
border
border-width
border-style
border-color

Texto: font e line-height

<body>
<div>
<p>Lorem ipsum dolor sit amet</p>
<p>Phasellus nec libero eu mi
gravida pretium id </p>
</div>
</body>
/* css */
p {
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 12px;
line-height: 14px;
font-family: Arial,"Times New Roman", Serif;
}
ou
p {
font: italic small-caps bold 12px/14px
Arial,"Times New Roman“,Serif;
}
LOREM IPSUM DOLOR SIT AMET
PHASELLUS NEC LIBERO EU MI GRAVIDA PRETIUM ID

Texto: font
font-style: normal / italic / inherit;
font-variant: normal / small-caps / inherit;
font-weight: normal / bold / bolder / lighter / 100 - 900 (400 = normal e 700 = bold) /
inherit;
font-family:
family-name --> O nome de uma fonte familiar, como "times", "courier", "arial", etc.
generic-family --> O nome de uma família genérica, como "serif", "sans-serif",
"cursive", "fantasy", "monospace“.

Texto: color

<body>
<div>
</div>
</body>
/* css */
p {
font: italic 14px/18px
"Bradley Hand ITC “,Serif;
color: #000;
}
p + p { color: rgb(100,150,40); }
Lorem ipsum dolor sit amet
Phasellus nec libero eu mi gravida
pretium id

Texto: text

<body>
<div>
</div>
</body>
/* css */
p {
text-align: left;
text-decoration: underline;
text-transform: uppercase;
}
p + p {
text-decoration: line-through;
text-transform: capitalize;
text-indent: 5px;
}
p:first-child {
text-overflow: ellipsis;
}
LOREM IPSUM DOLOR SIT …
Phasellus Nec lIbero Eu Mi
Gravida Pretium Id

Texto: Espaçamento das letras

<body>
<p>Lorem ipsum dolor sit amethase
llusnec libero eumi gravida </p>
<p>Lorem ipsum dolor sit amethase
llusnec libero eumi gravida </p>
</body>
/* css */
p {
letter-spacing: 2px;
}
p+p {
letter-spacing: -3px;
}
L o r e m i p s u m d o l o r
s i t a m e t h a s e l l u s n e c
l i b e r o e u m i g r a v i d a
Lorem ipsum dolor sitamethase llusnec
libero eumi gravida

Texto: quebra de texto

<body>
<div>
<p>Lorem ipsum dolor sit
amethasellusnecliberoeumigravida </p>
</div>
</body>
/* css */
p {
word-wrap: break-word;
}
Lorem ipsum dolor
sit
amethasellusnecliberoeumigravida
Lorem ipsum dolor
sit
amethasellusnecliber
oeumigravida

Listas

<body>
<div>
<p> Lista </p>
<ul>
<li>Dedo mindinho</li>
<li>Seu vizinho</li>
<li>Pai de todos</li>
<li>Fura bolo</li>
<li>Mata piolho</li>
</ul>
</div>
</body>
/* css */
li {
list-style-position: inside;
list-style-type: circle;
}
ou
li { list-style: inside circle; }
Lista
oDedo mindinho
oSeu Vizinho
oPai de todos
oFura bolo
oMata piolho

Listas

<body>
<div>
<p> Lista </p>
<ul>
<li>Dedo mindinho</li>
<li>Seu vizinho</li>
<li>Pai de todos</li>
<li>Fura bolo</li>
<li>Mata piolho</li>
</ul>
</div>
</body>
/* css */
li { list-style: inside circle; }
li:first-child {
list-style: outside square;
}
li:last-child {
list-style: outside decimal;
}
li:nth-child(3) {
list-style: outside url(star.png);
}
Lista
oSeu Vizinho
oPai de todos
oFura bolo
 Dedo mindinho
5. Mata piolho
Pai de todos
Estilos de listagem

Test Drive
1. Em sucess.html, atribuir estilo à seguinte mensagem:
“Frases de Albert Einstein:
(Albert Einstein foi um físico e humanista alemão (14 de março 1879 – 18 de
abril 1955), autor da teoria da relatividade e de importantes estudos em
ondulatória.)
Se A é o sucesso, então A é igual a X mais Y mais Z. O trabalho é X; Y é o
lazer; e Z é manter a boca fechada.
Procure ser uma pessoa de valor, em vez de procurar ser uma pessoa de
sucesso. O sucesso é conseqüência
A mente que se abre a uma nova idéia jamais voltará ao seu tamanho original.”
obs: frases retiradas do link http://pensador.uol.com.br/autor/albert_einstein/
obs²: use cabeçalhos, parágrafos, links e listas

Display
{ display: none | block | inline | list-item | table; }

<body>
<div class=“content”>
<div class=“caixa1”></div>
</div>
</body>
/* css */
.caixa1 { display: none;}
.caixa2 { display: block;}
.caixa3 { display: inline;}
.caixa4 { display: inline;}
.content.....
.caixa2
.caixa3 .caixa4

Visibility
{ visibility: hidden | visible; }

<body>
</div>
</body>
/* css */
.caixa1 {visibility: visible;}
.caixa2 {visibility: hidden;}
.caixa3 {visibility: visible;}
.content.....
.caixa1
.caixa3

Posicionamento
{ position: absolute; }

<body>
<div class=“caixa”></div>
</div>
</body>
/* css */
.caixa {
width: 30px;
height: 30px
position: absolute;
top: 50px;
left: 50px;
}
.content.....
.caixa
50px
50px

Posicionamento
{ position: relative; }

<body>
</div>
</body>
/* css */
.caixa {
width: 30px;
height: 30px
position: relative;
top: 50px;
left: 50px;
}
.content.....
.caixa
50px
50px

Posicionamento
{ position: fixed; }

<body>
</div>
</body>
/* css */
.caixa {
width: 30px;
height: 30px
position: fixed;
top: 50px;
left: 50px;
}
.content.....
.caixa
50px
50px

Posicionamento
{ z-index: valor; }

<body>
<div class=“caixa um”></div>
<div class=“caixa dois”></div>
<div class=“caixa tres”></div>
</div>
</body>
/* css */
.caixa { position: relative; }
.um { z-index: 1; }
.dois { z-index: 2; }
.tres { z-index: 3; }
.content.....
.caixa
.um
.caixa
.dois.caixa
.tres

Flutuação
{ float: left; }

<body>
<div class=“side1”></div>
</div>
</body>
/* css */
.side1, .side2 {
width: 40px;
height: 70px
float: left;
}
.side1 .side2

Flutuação
{ float: right; }

<body>
</div>
</body>
/* css */
.side1, .side2 {
width: 40px;
height: 70px
float: right;
}
.side2 .side1

Flutuação

<body>
</div>
</body>
/* css */
.side1, side2 {
width: 40px;
height: 70px
}
.side1 { float: right; }
.side2 { float: left; }
.side2 .side1

Flutuação
{ clear: left | right | both; }

<body>
</div>
<div id=“nota”></div>
</body>
/* css */
.side1, .side2 {
width: 40px;
height: 70px
float: right;
}
.content { clear:both; }
#nota{
width:45px;
height: 20px;
}
.side2 .side1
#footer

Test Drive
1. Criar o arquivo layout.html
2. Estruturar uma página HTML para que fique da seguinte forma (atribua
bordas e backgrounds)

Test Drive
1. No arquivo layout.html, estruturar - usando div, position e z-index - a figura a
seguir:

Sprites 
<ul class="share”>
<li><a class="sh-mail" href="">email</a></li>
<li><a class="sh-feed" href="">feed</a></li>
<li><a class="sh-tweet" href="">twitter</a></li>
<li><a class="sh-face" href="">facebook</a></li>
</ul>
/* css */
.share a{
width:75px;
height:30px;
float:left;
margin-right:5px;
}
.sh-mail { background: url(“../img/sh-mail.png") no-repeat; }
.sh-feed { background: url(“../img/sh-feed.png") no-repeat; }
.sh-tweet{ background: url(“../img/sh-tweet.png") no-repeat;}
.sh-face { background: url(“../img/sh-face.png") no-repeat; }

/* css */
.share a{
width:75px;
height:30px;
float:left;
margin-right:5px;
}
.sh-mail { background: url(“../img/sh-mail.png") no-repeat; }
.sh-feed { background: url(“../img/sh-feed.png") no-repeat; }
.sh-tweet{ background: url(“../img/sh-tweet.png") no-repeat;}
.sh-face { background: url(“../img/sh-face.png") no-repeat; }
.sh-tweet:hover {
background: url(“../img/sh-tweet-hover.png") no-repeat;
}
</ul>

Sprites
share.png
•Uma página web com muitas
imagens pode demorar muito tempo
para carregar e gerar pedidos de
vários servidores.
•Usando sprites imagem vai reduzir o
número de solicitações do servidor e
poupar largura de banda.

/* css */
.share a{
width:75px;
height:30px;
float:left;
margin-right:5px;
background: url(“../img/share.png") no-repeat;
}
.sh-mail { background-position: 0 -40px; }
.sh-feed { background-position: -70px -40px; }
.sh-tweet{ background-position: -140px -40px; }
.sh-face { background-position: -210px -40px; }
.sh-tweet:hover { background-position: -140px 0px; }
</ul>

/* css */
.share a{
width:75px;
height:30px;
float:left;
margin-right:5px;
background: url(“../img/sh-mail.png") no-repeat;
}
.sh-mail { background-position: 0 -40px; }
.sh-feed { background-position: -70px -40px; }
.sh-tweet{ background-position: -140px -40px; }
.sh-face { background-position: -210px -40px; }
.sh-face:hover { background-position: -210px 0px; }
</ul>

Test Drive
1. No arquivo hover.html (presente na pasta de demonstração), criar uma lista
de imagens utilizando a imagem share-sprite.png, que se comporte como a
imagem abaixo

HTML & CSS - Aula 4

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (8)

Semelhante a HTML & CSS - Aula 4

Semelhante a HTML & CSS - Aula 4 (20)

HTML & CSS - Aula 4

Notas do Editor