AulaCss

(1)

1. Introdução

O que é uma folha de estilo?

Uma folha de estilos é um conjunto de regras que informa a um programa, responsável pela formatação de um documento, como organizar a página, como posicionar e expor o texto e, dependendo de onde é aplicada, como organizar uma coleção de documentos.

2. Motivação

Separar apresentação da estrutura html de um site facilitando a manutenção e modificação de um

web site.

X(HTML) foi criado para especificar o conteúdo e a estrutura de um documento. Ele apresenta

alguns atributos que também controlam a apresentação do mesmo. Entretanto, é uma boa prática

no desenvolvimento Web não misturas conteúdo e apresentação. Se a apresentação de um

website é inteiramente determinada por uma folha de estilo, alterar essa apresentação passa a ser

trivial: basta mudar a folha de estilo do site.

3. Sintaxe das regras

Uma regra é composta de seletores e uma ou mais declarações. Um seletor é algo no qual pode-se aplicar um estilo. Exemplo: uma tag html como h1, h2, body, I, etc. ou um nome definido pelo desenvolvedor capaz de identificar um conjunto de informações que terão a mesma formatação.

seletores { declarações } As declarações são feitas usando a sintaxe:

propriedade: valor h1 { font-size: 24pt }

h1 { color: blue } h1 { font-size: 18pt }

Várias declarações de estilo podem ser aplicadas de uma vez a um seletor. As declarações, então, precisam ser separadas por ponto-e-vírgula (;) :

h {font-size: 18pt; color: blue; font-family: Arial, serif } body { background : navy; color : white }

Os espaços em branco (espaços, novas-linhas e tabulações) são ignorados pelo browser na hora de interpretar uma folha de estilos e podem ser usados para melhorar a sua legibilidade. As duas linhas acima ficariam mais legíveis da forma:

body { background : navy; color : white } h1 { color: blue; font-size: 18pt; font-family: Arial, serif }

(2)

Assim como um seletor pode ter várias propriedades definidas para ele, um mesmo conjunto de propriedades pode ser aplicada a um grupo de seletores, separando-os com vírgulas:

h1, h2, h3 {

color: blue; font-size: 18pt;

font-family: Arial, Helvetica, Sans-serif }

3. Valores

Os valores que são aplicados às propriedades têm uma sintaxe que depende da propriedade que os usa. Propriedades que envolvem tamanho (tamanho de fontes, espaçamento, etc.) geralmente recebem valores que consistem de um número e uma unidade ou porcentagem. O sinal de porcentagem ou unidade deve estar junto ao número correspondente sem espaços. Ou seja, deve-se escrever font-size: 24pt e não font-size: 24 pt.

Há quatro maneiras diferentes de especificar cores em CSS: usando o nome do sistema (red, yellow, blue, black, lightGray), usando seu código RGB hexadecimal (ff0000, ffff00, 0000ff, 34adfc, 80a7a7) ou usando a função rgb().

A função rgb() requer três argumentos que representam a intensidade dos componentes vermelho (R), verde (G) e azul (B) de uma cor em forma de luz (não opaca). A intensidade pode ser expressa em valores inteiros de 0 (mínimo) a 255 (máximo) ou em valores fracionários de 0% a 100%. As instruções abaixo definem a mesma cor para um parágrafo:

p {color: red} p {color: ff0000}

p {color: rgb(100%, 0%, 0%)} p {color: rgb(255, 0, 0)}

Não deve haver espaço entre o "b" de rgb e o abre-parênteses.

A função URL pode ser usada em propriedades que requerem arquivos (no caso, imagens) como valores. Ela recebe um argumento apenas com a URL (relativa ou absoluta) da imagem:

p {background-image: url(../imagens/tijolos.gif)}

p {background-image: url(http://longe.com/imagens/pedras.png)}

4. Herança

Os estilos "herdam" propriedades de várias maneiras. Uma das formas é através da própria hierarquia do HTML. Se você declara propriedades para BODY, todos os descritores serão afetados a não ser que tenham as suas propriedades redefinidas dentro de um novo bloco de declarações CSS. Se um <i> está dentro de um <p> e todos os <p> são declarados como tendo a cor vermelha, o <i> também será vermelho a menos que haja um bloco, posterior àquela declaração, redefinindo as propriedades de <i>, por exemplo:

p {font: 12pt "Times New Roman" bold; color: red }

i {color: black }

4. Como criar uma folha de estilo?

A primeira forma, mais abrangente, é a vinculação a um arquivo CSS. Isto é feito ligando a página HTML a um arquivo de folha de estilo, usando do descritor <link>). Este método permite que múltiplas páginas ou um site inteiro usem a mesma folha de estilos.

(3)

<head> (...)

Uma segunda forma, permite que estilos sejam aplicados localmente, em uma única página, embutindo uma folha de estilos diretamente na página HTML dentro de um bloco formado pelos descritores <style> e <//style>. Este método permite que você altere as propriedades de estilo de uma única página.

font: 12pt "Times New Roman" bold; color: red

}

i { color: black } </style>

As propriedades declaradas no bloco <style> sobrepõem qualquer propriedades anteriores do elemento (inclusive as de uma folha de estilos importada, se houver). É comum colocar todo o código entre comentários HTML () para proteger browsers antigos da exibição indesejada do código:

<!--p { font: 12<!--pt "Times New Roman" bold; color: red }

i { color: black } -->

</style>

Finalmente, há uma forma de aplicar estilos diretamente a um descritor individual. Para fazer isto deve-se usar o atributo style em quase qualquer descritor. Este método não corresponde exatamente a uma "folha" de estilos, pois os estilos aplicados não são reaproveitáveis. Permite alterar a aparência de um único descritor, de um conjunto deles ou de um bloco de informações da página. Por exemplo:

<p style="color: green; font-size: 12pt">Este texto</p>

Pode-se usar um, dois ou os três métodos ao mesmo tempo. As características definidas pelos mais específicos sobrepõem as definidas pelos mais genéricos. Por exemplo, suponha que o arquivo estilos.css contenha apenas as seguintes regras:

h1 { color: green; font-size: 24pt } p { color: blue}

Suponha que ele seja carregado na página a seguir que possui um bloco <style> com uma nova definição de p e h1.

<head>

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

type="text/css"><!--p {

font: 12pt "Times New Roman" bold; color: red

}

h1 {color: black } --></style> <//head>

(4)

Mais adiante, existe um parágrafo e um título da forma:

<h1 style="color: navy">Auto da Compadecida</h1> <p style="color: black">Ariano Suassuna (Recife, 1955)</p>

Qual estilo irá predominar? Pela regra de que o mais específico sobrepõe o mais geral, teremos uma página onde os <h1> têm tamanho 24pt (do estilo importado), cor preta (valor sobreposto pelo estilo da página) e os <p> são vermelhos (sobreposto pelo estilo da página). Nas duas linhas acima (e nelas apenas), o <h1> será azul marinho (sobrepondo o estilo da página) e o <p> será preto.

5. Classes

Classes agrupam características semelhantes . Por exemplo, um texto teatral pode ter três parágrafos com apresentação diferente, representando as falas de três personagens. Se quiséssemos que cada um tivesse uma cor diferente, poderíamos declarar cada um como sendo de uma classe distinta:

<p class=”padre”>Eu retiro o que disse, João</p>

<p class=”grilo”>Retirando ou não retirando, o fato é que o cachorro enterrou-se em latim</p> <p class=”bispo”>Um cachorro? Enterrado em latim? </p>

<p class=”padre”>Enterrado latindo, Senhor Bispo, Au, au, au, não sabe? </p>

Para dar a cada parágrafo de um mesmo personagem (mesma classe) os mesmos atributos, usa-se: P.grilo { color: maroon }

P.padre { color: black } P.bispo { color: navy }

Desta maneira, todos os textos que deverão ser lidos pelo personagem "Bispo" estarão em azul marinho. Uma classe também pode conter descritores diferentes. Se todos os textos citados por um certo autor tivessem que estar em outra cor ou fonte, poderíamos criar uma classe sem citar o descritor:

.verde { color: green }

Todos os descritores que tiverem o atributo CLASS=verde serão afetados, por exemplo: <p class=”verde”>, <h3 class=”verde”>, <table class=”verde”>, etc.

6. Links (pseudo-classes e pseudo-elementos)

Para seletores especiais que mudam de estado, como o texto marcado com <a>, é possível atribuir propriedades diferentes para cada estado:

a:link {color: red} a:active {color: 660011}

a:visited {color: black; text-decoration: none} a:hover {color: blue; text-decoration: underline}

muda as características dos links não-visitados, ativos e visitados. Assim como qualquer seletor, os links podem ser combinados com outros descritores:

p, a:link, h2 {color: red}

7. Comentários e instruções

Além das regras, um arquivo CSS pode ter ainda comentários e instruções (precedidas de @). No CSS apenas uma instrução é definida: @import. Ela é usada para que uma folha de estilos possa importar estilos

(5)

de outro arquivo CSS através de uma URL. Os estilos importados sempre têm menos precedência que os locais (ou seja, os locais podem sobrepor os importados). A sintaxe da instrução @import é:

@import url(“url_da_folha_de_estilos”);

Não deve haver outras estruturas (a não ser comentários) na linha onde há uma instrução. Exemplos do uso de @import:

@import url(“../basico.css”);

@import url(“http://longe.com/estilos/basico.css”);

Pode-se inserir trechos que serão ignorados pelo browser ao interpretar folhas de estilo usando blocos de comentário. Comentários em folhas de estilos são iguais a comentários em linguagens como C ou Java: entre /* e */:

/* este texto é ignorado até que seja encontrado um asterisco seguido por uma barra */

8. Alguns atributos

Nome do

atributo

Possíveis valores

Exemplos

FONTES - FONT

color

valor RGB ou nome da cor color: #009900; _{color: red;}

Serve para indicar a cor do texto. Admitem quase todas as etiquetas de HTML. Nem todos os nomes de cores são admitidos no padrão, é aconselhável então utilizar o valor RGB.

font-size

Unidades de CSS

font-size:12pt; font-size: x-large;

Serve para indicar o tamanho das fontes de forma mais rígida e com maior exatidão.

font-family

serif | sans-serif | cursive | fantasy | monospace

Todas as fontes habituais

font-family:arial,helvetica; font-size: fantasy;

Com este atributo indicamos a familia de tipografia do texto. Os primeiros valores são genéricos, ou seja, os exploradores as compreendem e utilizam as fontes que o usuário tenha em seu sistema.

Também podem se definir com tipografias normais, como ocorria em html. Se o nome de uma fonte tem espaços se utilizam aspas para que se entenda bem.

font-weight

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

font-weight:bold; font-weight: 200;

Serve para definir a largura dos caracteres, ou com outras palavras, para colocar negritas com total liberdade.

Normal e 400 são o mesmo valor, assim como bold e 700.

font-style

normal | italic | oblique font-style:normal; _{font-style: italic;}

É o estilo da fonte, que pode ser normal, itálico ou oblíquo. O estilo oblíquo é similar ao itálico.

PARÁGRAFOS - TEXT

line-height

normal e unidades CSS line-height: 12px; _{line-height: normal;} A altura de uma linha, e portanto, o espaçamento entre linhas. É uma dessas características que não se podiam modificar utilizando HTML.

text-decoration

none | [ underline || overline || line-through ] text-decoration: none; text-decoration: underline; Para estabelecer a decoração de um texto, ou seja, se está sublinhado, tachado, etc.

(6)

text-align

left | right | center | justify text-align: right; _{text-align: center;}

Serve para indicar o alinhamento do texto. É interessante destacar que as folhas de estilo permitem o justificado de texto, mesmo assim, lembre-se que não tem porque funcionar em todos os sistemas.

text-indent

Unidades CSS text-indent: 10px; _{text-indent: 2in;}

Um atributo que serve para fazer recuos ou margens nas páginas. Muito útil e novo.

text-transform

capitalize | uppercase | _{lowercase | none} text-transform: none; _{text-transform: capitalize;}

Permite-nos transformar o texto, fazendo com que tenha a primeira letra em maiúsculas de todas as palavras, tudo em maiúsculas ou minúsculas.

FUNDO - BACKGROUND

Background-color

Uma cor, com seu nome ou seu valor RGB background-color: green; background-color: #000055; Serve para indicar a cor de fundo de um elemento da página.

Background-image

O nome da imagem com seu caminho relativo ou absoluto

background-image: url(mármol.gif) ; background-image:

url(http://www.x.com/fondo.gif) Colocamos com este atributo uma imagem de fundo em qualquer elemento da página.

BOX - CAIXA

Margin-left

Unidades CSS margin-left: 1cm; _{margin-left: 0,5in;} Indicamos com este atributo o tamanho da margem à esquerda.

Margin-right

Unidades CSS margin-right: 5%; _{margin-right: 1in;} Utiliza-se para definir o tamanho da margem à direita.

Margin-top

Unidades CSS margin-top: 0px; _{margin-top: 10px;} Indicamos com este atributo o tamanho da margem acima da página.

Margin-bottom Unidades CSS

margin-bottom: 0pt; _{margin-top: 1px;} Com ele indica-se o tamanho da margem na parte debaixo da página.

Padding-left

Unidades CSS padding-left: 0.5in; _{padding-left: 1px;}

Indica o espaço inserido, pela esquerda, entre a borda do elemento que contem e o conteúdo deste. É parecido ao atributo cellpadding das tabelas.

O espaço inserido tem o mesmo fundo que o fundo do elemento que contem.

Padding-right

Unidades CSS padding-right: 0.5cm; _{padding-right: 1pt;}

Indica o espaço inserido, neste caso pela direita, entre a borda do elemento que contém e o conteúdo deste. É parecido ao atributo cellpadding das tabelas.

O espaço inserido tem o mesmo fundo que o fundo do elemento que contem.

Padding-top

Unidades CSS padding-top: 10pt; _{padding-top: 5px;}

Indica o espaço inserido, por cima, entre a borda do elemento que contem e o conteúdo deste.

Padding-bottom

Unidades CSS padding-right: 0.5cm; padding-right: 1pt;

Indica o espaço inserido, neste caso por baixo, entre a borda do elemento que contém e o conteúdo deste.

Border-color

cor RGB e nome de cor border-color: red; _{border-color: #ffccff;}

Para indicar a cor da borda do elemento da página a qual aplicamo-la. Pode-se colocar cores separadas com os atributos border-top-color, border-right-color, border-bottom-color, border-left-color.

Border-style

border-style: solid; border-style: double;

O estilo da bordea, os valores significam: none=nenhuma borda, dotted=pontilhado (não parece funcionar), solid=sólido, double=borda dupla, e desde groove até outset são bordas com vários efeitos 3D.

(7)

O tamanho da borda do elemento ao qual o aplicamos.

float

none | left | right float: right;

Serve para alinhar um elemento à esquerda ou à direita fazendo com que o texto se agrupe ao redor de tal elemento. Igual que o atributo align em imagens em seus valores right e left.

clear

none | right | left clear: right;

Se este elemento tem a sua altura imagens ou outros elementos alinhados à direita ou à esquerda, com o atributo clear fazemos com que se coloque em um lugar onde já não tenha estes elementos ao lado que indicamos.

Exercícios

1. Crie uma folha de estilos, chame-a de basico.css, e a carregue em um arquivo StyleTest.html (a ser criado por você).

2. Nesta folha de estilos, usando o mínimo de declarações possível, declare: a) que todo H1 tenha fonte Tahoma, ou sans-serif, se Tahoma não existir b) que todo o texto do corpo (BODY) do arquivo tenha tamanho 10 pontos c) que todos os H1, H2 e H3 sejam vermelhos

d) que os H1 tenham tamanho 24 pontos e) que os H2 tenham tamanho 18 pontos f) que os H3 tenham tamanho 14 pontos

3. Mude a cor do fundo da página para azul marinho (navy) e a cor default do texto para branco em uma única declaração.

4. Faça com que todo texto marcado em itálico apareça em azul ciano (cyan). 5. Edite o arquivo Styleteste.html de modo a testar os seletores criados.

(8)

Parte II

Desenvolver uma página de notícias. Essa página deverá ter um titulo e várias caixas. Cada caixa terá um título da notícias, opcionalmente uma imagem, uma descrição da notícia e um link para a notícia completa. Olhe o esboço abaixo apresentado.

Crie regras para a página de notícias, Título da notícia, caixa de texto da notícia incluindo a cor de seu background, link para a notícia completa, descrição da notícia.

(9)

6. Controlando o background de uma página web.

1. <?xml version = "1.0" encoding = "utf-8"?>

2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

3.

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4.

5.

6.  7. <html xmlns = "http://www.w3.org/1999/xhtml">

8.

<head>

9.

<title>Background Images</title>

10.

11.

body { background-image: url(logo.gif);

12.

background-position: bottom right;

13.

background-repeat: no-repeat;

14.

background-attachment: fixed;

15.

background-color: #eeeeee }

16.

p { font-size: 18pt;

17.

color: #1144AA;

18.

text-indent: 1em;

19.

font-family: arial, sans-serif; }

20.

.dark { font-weight: bold } 21.

22.

</style>

23.

</head>

24.

<body>

25.

<p>

26.

This example uses the background-image,

27.

background-position and background-attachment

28.

styles to place the <span class = "dark">Deitel

29.

& Associates, Inc.</span> logo in the bottom,

30.

right corner of the page. Notice how the logo

31.

stays in the proper position when you resize the

32.

browser window. The background-color fills in where

33.

there is no image.

34.

</p>

35.

</body> 36. </html>

(10)

7. Posicionamento absoluto e camadas

1. <?xml version = "1.0" encoding = "utf-8"?>

2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

3.

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4.

5. 

6.  7. <html xmlns = "http://www.w3.org/1999/xhtml">

8.

<head>

9.

<title>Absolute Positioning</title>

10.

<style type = "text/css">

11.

.bgimg { position: absolute;

12.

top: 0px;

13.

left: 0px;

14.

z-index: 1 }

15.

.fgimg { position: absolute;

16.

top: 25px;

17.

left: 100px;

18.

z-index: 2 }

19.

.text { position: absolute;

20.

top: 25px;

21.

left: 100px;

22.

z-index: 3;

23.

font-size: 20pt;

24.

font-family: tahoma, geneva, sans-serif }

25.

</style>

26.

</head>

27.

<body>

28.

<p><img src = "bgimg.gif" class = "bgimg"

29.

alt = "First positioned image" /></p> 30.

31.

<p><img src = "fgimg.gif" class = "fgimg"

32.

alt = "Second positioned image" /></p> 33.

34.

<p class = "text">Positioned Text</p>

35.

</body>

(11)

8. Caixas de texto e tamanho

1. <?xml version = "1.0" encoding = "utf-8"?>

3.

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4.

5. 

6.  7. <html xmlns = "http://www.w3.org/1999/xhtml">

8.

<head>

9.

<title>Box Dimensions</title>

10.

11.

div { background-color: #aaccff;

12.

margin-bottom: .5em;

13.

font-family: arial, helvetica, sans-serif }

14.

</style>

15.

</head>

16.

<body>

17.

<div style = "width: 20%">Here is some

18.

text that goes in a box which is

19.

set to stretch across twenty percent

20.

of the width of the screen.</div> 21.

22.

<div style = "width: 80%; text-align: center">

23.

Here is some CENTERED text that goes in a box

24.

which is set to stretch across eighty percent of

25.

the width of the screen.</div>

26.

27.

<div style = "width: 20%; height: 150px; overflow: scroll">

28.

This box is only twenty percent of

29.

the width and has a fixed height.

30.

What do we do if it overflows? Set the

31.

overflow property to scroll!</div>

32.

</body>

(12)

9. Utilizando a propriedade float

1. <?xml version = "1.0" encoding = "utf-8"?>

3.

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4. 5.  6.  7. <html xmlns = "http://www.w3.org/1999/xhtml">

8.

<head>

9.

<title>Flowing Text Around Floating Elements</title>

10.

11.

div.heading { background-color: #bbddff;

12.

text-align: center;

13.

font-family: arial, helvetica, sans-serif;

14.

padding: .2em }

15.

p { text-align: justify;

16.

font-family: verdana, geneva, sans-serif;

17.

margin: .5em }

18.

div.floated { background-color: #eeeeee;

19.

font-size: 1.5em;

20.

font-family: arial, helvetica, sans-serif;

21.

padding: .2em;

22.

margin-left: .5em;

23.

margin-bottom: .5em;

24.

float: right;

25.

text-align: right;

26.

width: 50% }

27.

div.section { border: 1px solid #bbddff }

28.

</style>

29.

</head>

30.

<body>

31.

<div class = "heading"><img src = "deitel.png" alt = "Deitel" />

32.

</div>

33.

<div class = "section">

34.

<div class = "floated">Corporate Training and Publishing</div>

35.

<p>Deitel & Associates, Inc. is an internationally

36.

recognized corporate training and publishing organization

37.

specializing in programming languages, Internet/World

38.

Wide Web technology and object technology education.

39.

The company provides courses on Java, C++, Visual Basic, C,

40.

Internet and World Wide Web programming, and Object

41.

Technology.</p>

42.

</div>

43.

<div class = "section">

44.

<div class = "floated">Leading-Edge Programming Textbooks</div>

45.

<p>Through its publishing

(13)

47.

Inc. publishes leading-edge programming textbooks,

48.

professional books, interactive CD-ROM-based multimedia

49.

Cyber Classrooms, satellite courses and World Wide Web

50.

courses.</p>

51.

</div>

52.

</body> 53. </html>