html&css 4 - intermediate css (1/2)

&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

<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

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

1. Origem

2. Especificidade

3. Ordem

CONFLITOSresolvidos por


21 3


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: green; }

User agent

User

Author

p { color: blue; }


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


PONTUAÇÕES PARA CSSFOTO DE MICHAEL PICK c HTTP://FLIC.KR/P/6ZXG7A

http://www.flickr.com/photos/viggum/


p { color: blue; }

#container .nav p { color: red; }

0Inline ClassID Elements

000

<p style="color: red;">Um parágrafo.</p>

CSS


001

#container { color: red; }

CSS


010

.nav { color: red; }

CSS


100

p { color: red; }

CSS


000

p { color: blue; }

.lead { color: red; }

CSS

#container .content p { color: red; }

CSS


110

#container .content p:first-‐line { color: red; }

CSS


210

#container .content p strong { color: red; }

CSS


110

1. Origem

2. Especificidade

3. Ordem


.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: red; }

User agent

User

Author

h2 { color: blue; }


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>

p.lead { color: blue; }

CSS

p { color: red; }


CSS

p { color: red; }

p.lead { color: black; }


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

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

html&css 4 - intermediate css (1/2)

Technology