html&css 4 - intermediate css (1/2)
Post on 03-Nov-2014
95 Views
Preview:
DESCRIPTION
TRANSCRIPT
&DINIS CORREIA 2011
cbn
4HTMLCSS
CSS HTML + CSS1CASCADE E
INHERITANCE2ESTILIZAR
TEXTO3⇪
CSS
ESTILIZAR TEXTO3
⇪
na sessão anterior...
HTML + CSS
1. Inline
2. Embed
3. External
HTML + CSS
1. Inline
2. Embed
3. External
HTML + CSS
<p style="color: blue;">Lorem ipsum dolor.</p>
1. Inline
2. Embed
3. External
HTML + CSS
<head><title>Um título</title>
<meta name="description" content="A descrição da página"><meta name="keywords" content="vídeos,fotos,pesquisa">
<style>p {
color: blue;}
</style></head>
1. Inline
2. Embed
3. External
HTML + CSS
<head><title>Um título</title>
<meta name="description" content="A descrição da página"><meta name="keywords" content="vídeos,fotos,pesquisa">
<link type="text/css" rel="stylesheet" media="screen" href="style.css"></head>
CASCADE & INHERITANCE
User agent User Author
User agent User Author
INHERITANCE
HERDAM NÃO HERDAMcolor background
font border
letter-spacing display
line-height float/clear
list-style height/width
text-align margin
text-indent outline
text-transform overflow
white-space padding
word-spacing position
... ...
body { font-‐family: Arial; }
CSS
p { border: inherit; }
CSS
CASCADE
p { color: blue; }
p { color: red; }
CSS
p { color: blue; }
p { color: red; }
CSS
1. Origem
2. Especificidade
3. Ordem
CONFLITOSresolvidos por
1. Origem
2. Especificidade
3. Ordem
CONFLITOSresolvidos por
User agent User Author
21 3
User agent User Author
21 3
User!important
54
Author!important
p { color: blue; }
p { color: red !important; }
CSS
User agent
User
Author
p { color: blue; }
User agent
User
Author
p { color: blue; }
p { color: yellow; }
User agent
User
Author
p { color: blue; }
p { color: yellow; }
p { color: green; }
User agent
User
Author
p { color: blue; }
p { color: yellow; }
p { color: green; }p { color: blue !important; }
User agent
User
Author
p { color: blue; }
p { color: yellow; }p { color: black !important; }
p { color: green; }p { color: blue !important; }
1. Origem
2. Especificidade
3. Ordem
CONFLITOSresolvidos por
1. Origem
2. Especificidade
3. Ordem
CONFLITOSresolvidos por
PONTUAÇÕES PARA CSSFOTO DE MICHAEL PICK c HTTP://FLIC.KR/P/6ZXG7A
p { color: blue; }
#container .nav p { color: red; }
0Inline ClassID Elements
000
<p style="color: red;">Um parágrafo.</p>
CSS
0Inline ClassID Elements
001
#container { color: red; }
CSS
0Inline ClassID Elements
010
.nav { color: red; }
CSS
0Inline ClassID Elements
100
p { color: red; }
CSS
1Inline ClassID Elements
000
p { color: blue; }
.lead { color: red; }
CSS
p { color: blue; }
.lead { color: red; }
CSS
#container .content p { color: red; }
CSS
1Inline ClassID Elements
110
#container .content p:first-‐line { color: red; }
CSS
1Inline ClassID Elements
210
#container .content p strong { color: red; }
CSS
2Inline ClassID Elements
110
1. Origem
2. Especificidade
3. Ordem
CONFLITOSresolvidos por
1. Origem
2. Especificidade
3. Ordem
CONFLITOSresolvidos por
.content p { color: blue; }
.content p { color: red; }
CSS
.content p { color: blue; }
.content p { color: red; }
CSS
EXERCÍCIOFOTO DE SOCIALISBETTER c HTTP://FLIC.KR/P/5BMFB7
User agent
User
Author
h2 { color: blue; }
h2 { color: yellow; }
User agent
User
Author
h2 { color: blue; }
h2 { color: yellow; }
User agent
User
Author
h2 { color: blue; }
h2 { color: yellow; }
h2 { color: red; }
User agent
User
Author
h2 { color: blue; }
h2 { color: yellow; }
h2 { color: red; }
User agent
User
Author
h2 { color: blue; }
h2 { color: yellow; }
h2 { color: red; }
<h2 style="color: black;">Título</h2>
User agent
User
Author
h2 { color: blue; }
h2 { color: yellow; }
h2 { color: red; }
<h2 style="color: black;">Título</h2>
User agent
User
Author
h2 { color: blue; }
h2 { color: yellow; }h2 { color: green !important; }
<h2 style="color: black;">Título</h2>
User agent
User
Author
h2 { color: blue; }
h2 { color: yellow; }h2 { color: green !important; }
<h2 style="color: black;">Título</h2>
p.lead { color: blue; }
CSS
p { color: red; }
p.lead { color: blue; }
CSS
p { color: red; }
p.lead { color: blue; }
CSS
p { color: red; }
p.lead { color: black; }
p.lead { color: blue; }
CSS
p { color: red; }
p.lead { color: black; }
p.lead { color: blue; }
CSS
p { color: red; }
p.lead { color: black; }
#container p { color: white; }
p.lead { color: blue; }
CSS
p { color: red; }
p.lead { color: black; }
#container p { color: white; }
ESTILIZAR TEXTO
ESTILIZAR TEXTOfont-‐size
p { font-‐size: 12px; }
CSS
px
em
%
keywords
px
em%
keywords
ABSOLUTAS
RELATIVAS
px
em%
keywords
ABSOLUTAS
RELATIVAS
px
em%
keywords
ABSOLUTAS
RELATIVAS
font-‐size: 12px;
font-‐size: 1.3em;
font-‐size: 80%;
font-‐size: small;
body { font-‐size: 16px; }
CSS
p { font-‐size: 0.86em }
14px / 16px = 0.86
body { font-‐size: 62,5%; }
CSS
p { font-‐size: 1.2em }
10px x 1.2em = 12px
ESTILIZAR TEXTO
font-‐family
body { font-‐family: Helvetica, Arial, sans-‐serif; }
CSS
body { font-‐family: "Times New Roman", serif; }
CSS
Exemplo serif
Exemplo sans-serif
Exemplo monospace
Exemplo cursive
Exemplo fantasy
SerifSans-serif
ESTILIZAR TEXTO
font-‐stylefont-‐weightfont-‐variant
p { font-‐style: italic; }
p { font-‐style: oblique; }
p { font-‐style: normal; }
CSS
p { font-‐variant: small-‐caps; }
p { font-‐variant: normal; }
CSS
p { font-‐weight: normal; }
p { font-‐weight: bold; }
p { font-‐weight: 400; }
CSS
ESTILIZAR TEXTOshorthand
body { font: italic normal bold 12px Helvetica, Arial, sans-‐serif }
CSS
body { font: italic normal bold 12px Helvetica, Arial, sans-‐serif }
CSS
-style
-variant
-weight
-size
-family
ESTILIZAR TEXTO
outras propriedades
p { text-‐align: right; }
p { text-‐align: left; }
p { text-‐align: center; }
p { text-‐align: justify; }
CSS
p { letter-‐spacing: 0.05em; }
p { word-‐spacing: 0.3em; }
CSS
p { text-‐indent: 10px; }
CSS
p { text-‐indent: 1.5em; }
CSS
p { text-‐transform: uppercase; }
p { text-‐transform: lowercase; }
p { text-‐transform: none; }
CSS
p { text-‐decoration: underline; }
p { text-‐decoration: line-‐through; }
p { text-‐decoration: none; }
CSS
p { line-‐height: 16px; }
p { line-‐height: 1em; }
p { line-‐height: 1.5; }
CSS
top related