(Cascading Style Sheets) : Instituto Federal de Educação, Ciência e Tecnologia Do Norte de Minas Gerais - IFNMG

Instituto Federal de Educao, Cincia e
Tecnologia do Norte de Minas Gerais - IFNMG
CSS
(Cascading Style Sheets)
Rayssa Loren Mendes Teles

1. Definio
CSS um padro recomendado para

todos os browsers pelo W3C (World
Wide Web Consortium).
1.1. Sintaxe CSS
Seletor: o alvo da CSS, define onde ser aplicada a regra CSS.

Declarao: determina os parmetros da estilizao.
Propriedade: define qual propriedade do elemento ser
estilizado.
Valor: a quantificao ou qualificao da propriedade.
1.2. Localizao do cdigo CSS
Mtodo 1: In-line (o atributo style)
<html>
<head>
<title>Exemplo</title>
</head>
<body style="background-color: #FF0000;">
<p>Esta uma pgina com fundo vermelho</p>
</body>
</html>
Mtodo 2: Interno (a tag style)
<html>
<head>
<title>Exemplo</title>
<style type="text/css">
body { background-color: #FF0000;}
</style>
</head>
<body>
<p>Esta uma pgina com fundo vermelho</p>
</body>
</html>
Mtodo 3: Externo
(link para uma folha de estilos)
<html>
<head>
<title>Meu documento</title>
<link rel="stylesheet" type="text/css"
href="style/style.css">
</head>
</html>
Comentrios em CSS
PRTICA
Dentro do editor, crie dois arquivos (um HTML e um CSS) com os
seguintes contedos:
Index.html
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Meu documento</title>
<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>
<body>
<h1>Minha primeira folha de estilos</h1>
</body>
</html>
estilo.css
body {
background-color: #FF0000;
}
Salve os dois arquivos no mesmo diretrio.

2. Cores e fundos
As cores podem ser definidas pelo seu valor
hexadecimal (#FF0000), com uso do nome da
cor (red) ou ainda pelo seu valor RGB
(255,000,000).
2.1. A propriedade background-color
body {
background-color: #FFCC66;
}
h1{
color: #990000
background-color: #FC9804
}
2.2. Imagens de fundo [background-image]
body {
background-image: url ("imagem.gif");
background-image: url (../imagens/imagem.gif");
}
h1{
color: #990000;
background-color: #FC9804;
}
2.3. Imagem de fundo repetida
[background-repeat]
VALOR DESCRIO
background-repeat: repeat-x A imagem se repete na horizontal
background-repeat: repeat-y A imagem se repete na vertical
background-repeat: repeat A imagem se repete tanto na horizontal

como na vertical
background-repeat: no-repeat A imagem no se repete

Por exemplo, o cdigo mostrado a seguir para
que a imagem no se repita na tela:
body {
background-image: url(imagem.gif");
background-repeat: no-repeat;
}
h1 {
color: #990000;
}
2.4. Imagem de fundo fixa
[background-attachment]
VALOR DESCRIO
background-attachment: scroll A imagem rola com a pgina
background-attachment: fixed A imagem fixa

2.5. Posio da imagem de fundo
[background-position]
Podem ser expressas em porcentagem da largura da
janela, em unidades fixas (pixels, centmetros) ou
pode-se usar as palavras top, bottom, center, left e
right.
VALOR DESCRIO
background-position: 2cm 2cm A imagem posicionada a 2cm da
esquerda e 2cm para baixo na pgina.
background-position: 50% 50% A imagem centrada na horizontal e a

um quarto (25%) para baixo na pgina.
background-position: top right A imagem posicionada no canto

superior direito da pgina.
0% 0%
top left
25% 25%
50% 50%
center center
255px 100px 75% 75%
100% 100%
bottom right
EXEMPLO:
body {
background-attachment: fixed;
background-position: right bottom;
}
h1 { color: #990000;
}
Compilando [background]
background-attachment: fixed;
background-position: right bottom;
}
3. Fontes
3.1. Famlia de fontes [font-family]
3.2. Estilo da fonte [font-style]
Define a escolha da fonte em normal, italic ou oblique.
h1 {
font-family: arial, verdana, sans-serif;
}
h2 {
font-family: "Times New Roman", serif;
font-style: italic;
}
3.3. Fonte variante [font-variant]
Esta propriedade usada para escolher as variantes

normal ou smallcaps.
3.4. Peso da fonte [font-weight]
Define se a fonte ser normal ou negrito (bold).
p {font-family: arial, verdana, sans-serif;}

td {font-family: arial, verdana, sans-serif;
font-weight: bold;}
3.5. Tamanho da fonte [font-size]

h1 {font-size: 30px;
h2 {font-size: 12pt;
h3 {font-size: 120%;
p {font-size: 1em;
Compilando [font]
p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
Usar a abreviao simplifica o cdigo como mostrado abaixo:
p {
font: italic bold 30px arial, sans-serif;
}
4. Textos
4.1. Indentao de texto [text-indent]
Permite que voc aplique um recuo primeira linha de

um pargrafo.
P{
text-indent: 30px;
}
4.2. Alinhamento de textos [text-align]
Textos podem ser alinhados a esquerda (left),

direita (right), centrados (centred) e
justificado (justify).
4.3. Decorao de textos [text-decoration]
Possibilita adicionar efeitos (sublinhar textos,

cortar o texto com uma linha, colocar uma linha
sobre o texto, etc) em texto.
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
4.4. Espao entre letras [letter-spacing]
Define o espao entre os caracteres
h1 {
letter-spacing: 6px;
}
p {
letter-spacing: 3px;
}
4.5. Transformao de textos [text-transform]
capitalize
Exemplo: "john doe" transforma-se para "John Doe".
uppercase
Exemplo: "john doe" transforma-se para "JOHN DOE".
lowercase
Exemplo: "JOHN DOE" transforma-se para "john doe".
none
Sem trasformaes - o texto apresentado como foi escrito
no cdigo HTML.
5. Links
A novidade aqui que voc pode definir as

propriedades de maneira diferenciada de acordo com
o estado do link ou seja visitado, no visitado, ativo
ou com o ponteiro do mouse sobre o link.
5. Links
5.1. Pseudo-classe
5.1.1. Pseudo-classe: link
a:link { color: green; }
5.1.2. Pseudo-classe: visited
a:visited { color: yellow; }

5.1.3. Pseudo-classe: active
a:active { background-color: red; }
5.1.4. Pseudo-classe: hover
a:hover { color: orange; font-style:

italic; }
6. Identificando e agrupando elementos
(classes e id)
6.1. Agrupando elementos com uso de classe
<p>Uvas para vinho branco:</p> <ul>
<li><a href="ri.htm" class="whitewine">Riesling</a></li>
<li><a href="ch.htm" class="whitewine">Chardonnay</a></li>
</ul>
<p>Uvas para vinho tinto:</p> <ul>

<li><a href="me.htm" class="redwine">Merlot</a></li>
<li><a href="pn.htm" class="redwine">Pinot Noir</a></li>
</ul>
CSS
a { color: blue; }
a.whitewine { color: #FFBB00; }
a.redwine { color: #800000;}
6.2. Identificando um elemento com uso de id
<h1 id="c1">Captulo 1</h1>

...
<h2 id="c1-1">Captulo 1.1</h2>
#c1-1 {
color: red;
}
6.3. Agrupando elementos com <span>
Utilizada para agrupar elementos mantendo a continuidade

das linhas.
.disciplina {
font-style: italic; font-weight: bold;
color: blue
}
Disciplina: <span
class="disciplina">Informatica</span>
6.4. Agrupando com <div>
Utilizada para agrupar elementos em bloco.
<div id=resumo>
Disciplina: <span class="disciplina">Autoria
Web</span>
</div>
#resumo{
border-style: dashed;
border-width: 3px;
border-color: red;
}
7. Box Model
As CSS considera e trata todos dos elementos HTML
como se fossem caixas.
As caixas CSS so constitudas por 04 (quatro) reas

retangulares, listadas abaixo: contedo; espaamentos
(padding); bordas (border); margens (margin).
EXEMPLO
body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px; }
Ou, adotando uma sintaxe mais elegante:
body { margin: 100px 40px 10px 70px; }

8. Bordas
8.1. A espessura das bordas [border-width]
Assume os valores thin, medium, e thick (fina, mdia e

grossa), ou um valor numrico em pixels.
8.2. As cores das bordas [border-color]
Os valores so expressos em cdigo ou nome

das cores, por exemplo, #123456,
rgb(123,123,123) ou yellow.
8.3. Tipos de bordas [border-style]
h1 { border-width: thick;
border-style: dotted; border-
color: gold; }
h2 { border-width: 20px;
border-style: outset; border-
color: red; }
p { border-width: 1px;
border-style: dashed; border-
color: blue; }
ul { border-width: thin;
border-style: solid; border-
color: orange; }
8.4. Atribuindo largura [width]
div.box {
width: 200px;
border: 1px solid black;
background: orange;
}
8.5. Atribuindo altura [height]

div.box {
height: 500px;
width: 200px;
border: 1px solid black;
background: orange;
}
9. A propriedade clear
usada para controlar o comportamento dos

elementos que seguem aos elementos floats no
documento.
Pode assumir os valores left, right, both ou none.

10. O princpio de posicionamento CSS
10.1. Posicionamento absoluto [absolute]
Pode ser usado as propriedades left, right, top e bottom

para definir as coordenadas e posicionar o elemento.
#box1 {
position:absolute;
top: 50px;
left: 50px;
}
10.2. Posicionamento relativo
calculado com base na posio original do elemento

no documento.
#bola1 {
position:relative;
left: 350px;
bottom: 150px;
}
Motivao para o uso do CSS
Economiza-se tempo de criao e manuteno
(isola os cdigos de formatao aplicado a vrias
pginas HTML em um nico arquivo ".css");
Reduz cdigo de descritores HTML da pgina
(tags);
Os navegadores (browsers) carregam mais
rpido;
Maior eficincia no gerenciamento do layout;
CSS simples pois descreve apenas estilos.
DVIDAS???

(Cascading Style Sheets) : Instituto Federal de Educação, Ciência e Tecnologia Do Norte de Minas Gerais - IFNMG

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

(Cascading Style Sheets) : Instituto Federal de Educação, Ciência e Tecnologia Do Norte de Minas Gerais - IFNMG

Caricato da

Copyright:

Formati disponibili

Instituto Federal de Educao, Cincia e

Tecnologia do Norte de Minas Gerais - IFNMG

Rayssa Loren Mendes Teles

CSS um padro recomendado para

Seletor: o alvo da CSS, define onde ser aplicada a regra CSS.

Salve os dois arquivos no mesmo diretrio.

background-image: url (../imagens/imagem.gif");

background-repeat: repeat-x A imagem se repete na horizontal

background-repeat: repeat-y A imagem se repete na vertical

background-repeat: repeat A imagem se repete tanto na horizontal

background-repeat: no-repeat A imagem no se repete

background-attachment: scroll A imagem rola com a pgina

background-attachment: fixed A imagem fixa

background-position: 50% 50% A imagem centrada na horizontal e a

background-position: top right A imagem posicionada no canto

255px 100px 75% 75%

Define a escolha da fonte em normal, italic ou oblique.

Esta propriedade usada para escolher as variantes

p {font-family: arial, verdana, sans-serif;}

3.5. Tamanho da fonte [font-size]

Usar a abreviao simplifica o cdigo como mostrado abaixo:

Permite que voc aplique um recuo primeira linha de

Textos podem ser alinhados a esquerda (left),

Possibilita adicionar efeitos (sublinhar textos,

Define o espao entre os caracteres

A novidade aqui que voc pode definir as

5.1.1. Pseudo-classe: link

a:link { color: green; }

5.1.2. Pseudo-classe: visited

a:visited { color: yellow; }

a:active { background-color: red; }

5.1.4. Pseudo-classe: hover

a:hover { color: orange; font-style:

<p>Uvas para vinho tinto:</p> <ul>

<h1 id="c1">Captulo 1</h1>

Utilizada para agrupar elementos mantendo a continuidade

Utilizada para agrupar elementos em bloco.

As caixas CSS so constitudas por 04 (quatro) reas

Ou, adotando uma sintaxe mais elegante:

body { margin: 100px 40px 10px 70px; }

Assume os valores thin, medium, e thick (fina, mdia e

Os valores so expressos em cdigo ou nome

8.5. Atribuindo altura [height]

usada para controlar o comportamento dos

Pode assumir os valores left, right, both ou none.

10.1. Posicionamento absoluto [absolute]

Pode ser usado as propriedades left, right, top e bottom

calculado com base na posio original do elemento

Potrebbero piacerti anche