CSS

(1)

Anna Tostes | annatostes at gmail.com

Tecnologia Web

CSS

Anna Izabel João Tostes Ribeiro

Pontifícia Universidade Católica de Minas Gerais

1/2012

(2)

Sumário

● Introdução

● Vantagens

● Cascading Style Sheet (CSS)

(3)

Introdução

● HTML:

o

 

Associação entre formato e conteúdo

● Exemplo:

o

 

<font color=#ffff00>

o

 

<table border=1>

o

 

<body bgcolor=#eeff00 link=#ff0000>

o

 

<p align='center'>

(4)

Introdução

● Surgimento dos portais contendo dezenas ou centenas de

páginas web:

o

 

Dificuldade de manutenção

o

 

Necessidade de padronização estética das páginas

● Páginas diferentes:

o

 

Conteúdos diferentes

o

 

Formato.... ?

(5)

Introdução

● O CSS é um mecanismo de definição de regras de

formatação ou de estilo de texto em documentos HTML

● O objetivo foi retirar do HTML toda referência com relação

à formatação

o

 

HTML para estruturação e CSS para apresentação

(6)

Vantagens

● Controle total sobre a apresentação do site a partir de um

arquivo central

● Agilização da manutenção e re-design do site

● Saída para diferentes tipos de mídia a partir de uma

versão única de HTML

● Redução do tempo de carga dos documentos Web

● Adequação simplificada aos critérios de acessibilidade e

usabilidade

● Elaboração de documentos consistentes com as

aplicações de usuários futuras

● Aumento considerável na portabilidade dos documentos

Web

(7)

CSS

● Cascading Style Sheet (CSS)

● Formato

padrão:

seletor{

propriedade:valor;

propriedade: valor;

}

body{

background-color:#eeeeee;

color: #111100

font-family: Arial, Tahoma, Verdana;

font-size: 10px;

}

(8)

CSS

● Todas as páginas utilizando uma folha de estilo percebem

automaticamente qualquer atualização

h1{

font-size:20px;

font-family: Garamond, Times New Roman

}

(9)

CSS: Utilização

①

_{Link para um arquivo de stylesheet em separado}

o

 

<link rel=STYLESHEET href="style.css" type="text/css">

(10)

CSS: Utilização

②

_{Bloco “style” no cabeçalho do HTML}

<html>

<head>

<style type="text/css">

P { font-size: 10pt; font-family: "Verdana, Arial, Sans-Serif"; color:

#000066 }

H1 { font-size: 16pt; font-family: "Impact, Arial, Sans-Serif"; color:

#990000 }

</style>

(11)

CSS: Utilização

③

_{Inline: dentro de tags ou bloco <span>}

<p style="margin-left: 0.5in; font-size: 8pt">

<span style="font-weight: bold; background: #FFFF00">

texto diferente

</span>

(12)

CSS: Precedência

● Precedência:

o

 

Inline

o

 

Tag style

o

 

Arquivo CSS externo

Tecnologia Web – CSS

(13)

CSS: Links

● Definição de estilo de links

a:link {

color:black;

font-weight: bold;

text-decoration:none

}

a:hover {

color:red;

font-weight:bold;

text-decoration:

underline;

}

(14)

CSS: Seletores

● Agrupamento de seletores

a:link, a:visited {

color:black;

font-weight: bold;

text-decoration:none;

}

h1,h2,h3,h4{

color: #00CC22;

}

(15)

CSS: Definição de Classes de Estilo

①

_{Classe específica de TAG}

font.destaque{

font-size:9px;

font-family: Arial, Tahoma;

text-decoration:line-through;

color: black

}

<font class='destaque'> Olá! </font>

(16)

CSS: Definição de Classes de Estilo

②

_{Classe 'geral'}

.destaquegeral{

margin-left: 2.5cm;

font-size:16pt;

font-family: Verdana, Tahoma;

text-decoration:overline;

color: black;

}

(17)

CSS: Definição de Classes de Estilo

● Herança

o

 

Classes de tags herdam as propriedades não especificadas da

tag “mãe”

P

{

font-family: 'Trebuchet MS', 'Helvetica';

font-weight: bold;

font-size: 11pt;

color: #000066;

margin-left: 1cm;

}

P.small

{

font-size: 8pt;

text-align: center;

}

(18)

<html><head><style type="text/css">

body

{

background-color:#d0e4fe;

}

h1

{

color:orange;

text-align:center;

}

p

{

font-family:"Times New Roman";

font-size:20px;

}

</style></head>

<body>

<h1>CSS example!</h1>

<p>This is a paragraph.</p>

</body>

</html>

(19)

<html><head><style type="text/css">

body

{

background-color:#d0e4fe;

}

h1

{

color:orange;

text-align:center;

}

p

{

font-family:"Times New Roman";

font-size:20px;

}

</style></head>

<body>

<h1>CSS example!</h1>

<p>This is a paragraph.</p>

</body>

</html>

(20)

(21)

(22)

(23)

<html><head>

<style type="text/css">

div {

width:100px;

height:100px;

background:red;

position:relative;

animation:mymove 5s infinite;

/Firefox/

-moz-animation:mymove 5s infinite;

/Safari and Chrome/

-webkit-animation:mymove 5s infinite;

}

@keyframes mymove {

from {left:0px;}

to {left:200px;}

}

from {left:0px;}

to {left:200px;}

}

@-webkit-keyframes mymove /*Safari and

Chrome*/ {

from {left:0px;}

to {left:200px;}

}

</style>

</head>

<body>

<p><b>Note:</b> This example does not work in

Internet Explorer and Opera.</p>

<div></div>

</body>

</html>

(24)

<html>

<head>

<style type="text/css">

body {background-image:url('paper.gif');}

</style>

</head>

<body>

<h1>Hello World!</h1>

</body>

</html>

(25)

<html>

<head>

<style type="text/css">

body {background-image:url('paper.gif');}

</style>

</head>

<body>

<h1>Hello World!</h1>

</body>

</html>

(26)

Anna Tostes | annatostes at gmail.com <html><head> <style type="text/css"> div { border-width:15px; width:250px; padding:10px 20px; } #round {

-moz-border-image:url("border.png") 30 30 round; /* Firefox */

-webkit-border-image:url("border.png") 30 30 round; /* Safari and Chrome */ -o-border-image:url("border.png") 30 30 round; /* Opera */

border-image:url("border.png") 30 30 round; }

#stretch {

-moz-border-image:url("border.png") 30 30 stretch; /* Firefox */

-webkit-border-image:url("border.png") 30 30 stretch; /* Safari and Chrome */ -o-border-image:url("border.png") 30 30 stretch; /* Opera */

border-image:url("border.png") 30 30 stretch; }

</style></head>

(27)

<body>

<p><b>Note:</b> Internet Explorer does not support the border-image property.</p>

<p>The border-image property specifies an image to be used as a border.</p>

<div id="round">Here, the image is tiled (repeated) to fill the area.</div>

<br />

<div id="stretch">Here, the image is stretched to fill the area.</div>

<p>Here is the image used:</p>

<img src="border.png" />

</body>

</html>

(28)

(29)

Anna Tostes | annatostes at gmail.com <html> <head> <style type="text/css"> p.one { border-style:solid; border-color:#0000ff; } p.two { border-style:solid; border-color:#ff0000 #0000ff; } p.three { border-style:solid; border-color:#ff0000 #00ff00 #0000ff; } p.four { border-style:solid; border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255); } </style> </head> Tecnologia Web – CSS <body> <p class="one">One-colored border!</p> <p class="two">Two-colored border!</p> <p class="three">Three-colored border!</p> <p class="four">Four-colored border!</p>

<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>

</body> </html>

(30)

Anna Tostes | annatostes at gmail.com <html> <head> <style type="text/css"> p.one { border-style:solid; border-color:#0000ff; } p.two { border-style:solid; border-color:#ff0000 #0000ff; } p.three { border-style:solid; border-color:#ff0000 #00ff00 #0000ff; } p.four { border-style:solid; border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255); } </style> </head> Tecnologia Web – CSS <body> <p class="one">One-colored border!</p> <p class="two">Two-colored border!</p> <p class="three">Three-colored border!</p> <p class="four">Four-colored border!</p>

<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>

</body> </html>

(31)

<style type="text/css">

div

{

width:110px;

height:110px;

border:thin solid black;

overflow-x:hidden;

overflow-y:hidden;

}

</style>

(32)

<style type="text/css">

div

{

background-color:red;

opacity:0.5;

filter:Alpha(opacity=50); /* IE8 and earlier */

}

</style>

(33)

display:-moz-box; /* Firefox */

display:-webkit-box; /* Safari and Chrome */ display:box;

width:300px;

border:1px solid black; }

#p1 {

-moz-box-flex:1.0; /* Firefox */

-webkit-box-flex:1.0; /* Safari and Chrome */ box-flex:1.0;

border:1px solid red; }

#p2 {

border:1px solid blue; }

</style>

(34)

display:-moz-box; /* Firefox */

display:-webkit-box; /* Safari and Chrome */ display:box;

width:300px;

border:1px solid black; }

#p1 {

border:1px solid red; }

#p2 {

border:1px solid blue; }

</style>

(35)

● http://www.w3schools.com/cssref/default.asp