Introdução à Linguagem CSS

+
Cascading Style Sheets

UFCD 0154
Formadora : Telma Amsellem
+
Introduo
A linguagem de programao Cascading Style Sheets, foi
inventada em 1997, e representa uma das ferramentas mais
poderosas, utilizadas pelos web designers.
Actualmente existe uma grande quantidade de pessoas que
utilizam a linguagem de programao CSS para criar
diferentes layouts para pginas web e/ou blogs.
Por esse motivo, a linguagem de programao CSS cada
vez mais conhecida e utilizada na internet por diversas
pessoas.
+
Introduo
Antes do CSS ter sido
inventado, sempre que
necessitavamos de mudar,
por exemplo, um titulo
(headline), teriamos que o
fazer em cada Headline.
+
Introduo
Com CSS, possivel definir apenas uma vez, numa folha de
estilo que todos os H4 sero azuis em todas as pginas que
utilizam tags desse estilo.

+
Regras CSS
Uma regra uma afirmao sobre um dos aspectos estilstico
de uma ou mais tags.
Uma folha de estilo um conjunto de uma ou mais regras que
se aplicam a um documento HTML.
O exemplo da regra abaixo define a cor de todos os
cabealhos de primeiro nvel (h1).

+
Ficheiros CSS
As regras CSS so armazenadas em documentos com a
extenso .css

Por outro lado, podem tambm estar incorporados no cdigo
da pgina HTML.

+
Ficheiros CSS
Por exemplo, a folha de estilo CSS que se segue (armazenada
no ficheiro special.css), define a cor do texto de um pargrafo
como sendo verde e rodeia-o com uma margem a vermelho:
P.special {color : green; border: solid red;}

+
Ficheiros CSS
Os autores podem ligar esta folha de estilo ao documento-
fonte HTML atravs da tag LINK:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="special.css" rel="stylesheet" type="text/css">
</head>
<body>
<p class="special">Este pargrafo dever ter um texto escrito a
verde.
</body>
</html>
+
Style Sheets
O CSS uma linguagem para estilos que permitem a a
definio do layout de documentos HTML, tais como:
Fontes, cores, margens, linhas, alturas, larguras, imagens de fundo,
posicionamentos, .

Apesar de o HTML poder ser (in)devidamente usado para
definir o layout de websites, o CSS proporciona mais opes.

O CSS suportado por todos os navegadores atuais.
+
Vantagens
Obter uma apresentao homognea sobre todo o site,
recorrendo a uma mesma definio de estilo para todas as
pginas;
A mudana do aspecto de um site completo inteiro pela nica
modificao de algumas linhas;
Maior legibilidade do HTML, porque os estilos so definidos
parte;
Carregamentos de pgina mais rpidos;
Posicionamento mais rigoroso das tags;
+
Sintaxe
A sintaxe das CSS constituida por trs partes:

Um selector
Representa a tag HTML que queremos definir.
Uma propriedade
Representa o atributo que se deseja mudar
Um valor
Representa o valor de cada atributo.

+
Exemplos
Body { background-color: #FFFFF }

p {font: arial; color: #0000FF}

Nota: Se o valor possui mais de uma palavra, deve-se colocar
aspas em torno do valor.

+
Sintaxe
Quando se quer especificar mais do que uma propriedade,
deve-se separar cada propriedade com um ponto e vrgula.
O exemplo abaixo mostra como definir um pargrafo centrado,
com texto de cor vermelho:

+
Sintaxe
E para tornar as definies de estilo mais legveis, podemos
descrever uma propriedade por linha :

p { text-align: center;
color: black;
font-family: Arial }

+
Comentrios em CSS
Como em qualquer linguagem, os comentrios so utilizados para
explicar o seu cdigo, e podem ajudar quando se edita o cdigo numa
data posterior.
Um comentrio ser ignorado pelos browsers, e em CSS comea com "/*"
e termina com "*/", como este:
/ * Este um comentrio * /
p { text-align: center;
/ * Este outro comentrio * /
color: black;
font-family: Arial; }

+
Cores e Fundos
Cor do primeiro plano: a propriedade 'color .
A propriedade color define a cor do primeiro plano de uma tag.
Considere, por exemplo, que desejamos que todos os
cabealhos de primeiro nvel no documento sejam na cor
vermelha. A tag HTML que marca tais cabealhos a headline
<h1>. O cdigo a seguir define que todos os <h1> tero a cor
vermelha.

+
Cores e Fundos
A propriedade background-color define a cor do fundo de da
pgina ou blog.
A tag<body> contm todo o contedo de um documento
HTML. Assim, para mudar a cor de fundo da pgina, devemos
aplicar a propriedade background-color tag <body>. Pode-se
aplicar cores de fundo para outras tags, inclusive para
cabealhos e textos. No exemplo abaixo foram aplicadas
diferentes cores de fundo para as tags <body> e <h1>.
body {background-color: #FFCC66;}
h1 {color: #990000; background-color: #FC9804; }
+
Cores e Fundos
Imagens de Fundo (background-image)
A propriedade CSS background-image usada para definir uma
imagem de fundo.

Para inserir uma imagem de fundo na pgina basta aplicar a
propriedade background-image tag <body> e especificar o
caminho para onde est gravada a imagem.

+
Cores e Fundos
Notar como foi especificado o caminho para a imagem usando
url(duck.gif").

Isto significa que a imagem est localizada no mesmo diretrio
da folha de estilos.

semelhana do HTML pode ser escolhido um outro diretrio
para gravar as imagens e o caminho seria
url("../images/butterfly.gif") ou at mesmo hosped-la na
Internet: url("http://www.html.net/butterfly.gif").

+
Famlia de fontes [font-family]

A propriedade font-family permite definir uma lista de fontes e a
sua prioridade.
Se a primeira fonte da lista no estiver instalada na mquina do
utilizador, dever ser usada a segunda e assim por diante at ser
encontrada uma fonte instalada.
Existem dois tipos de nomes para definir fontes:
nomes para famlias de fontes: Exemplos para este tipo
(normalmente conhecidas como "font") so "Arial", "Times New
Roman" ou "Tahoma".
nomes para famlias genricas: Famlias genricas so fontes que
pertencem a um grupo com aparncia uniforme. Um exemplo so as
fontes sans-serif que englobam a coleo de fontes que "no tm
serifas".
+
Exemplo de listagem de fontes:

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

h2 {font-family: "Times New Roman", serif;}
+
Estilo da fonte [font-style]

A propriedade font-style define a escolha da fonte em normal,
italic ou oblique. No exemplo a seguir todos as cabealhos
<h2> sero em itlico.

h2 {font-family: "Times New Roman", serif; font-style: italic;}

+
Fonte variante [font-variant]
A propriedade font-variant usada para escolher as variantes
normal ou small-caps. Uma fonte small-caps aquela que usa
letras maisculas de tamanhos reduzidos.

Se a propriedade font-variant for definida para small-caps e
no estiver disponvel no computador do utilizador, ser usada
fonte em maiscula.

+
Peso da fonte [font-weight]
A propriedade font-weight define quo negrito ou "pesada"
fica a fonte. Uma fonte pode ser normal ou bold. Alguns
navegadores suportam nmeros de 100-900 (em intervalos de
100 em 100) para definir o peso da fonte.

td {font-family: arial, verdana, sans-serif; font-weight: bold;}
+
Tamanho da fonte [font-size]
O tamanho da fonte definido pela propriedade font-size.
Existem muitas unidades (p. ex.:. pixels e percentagens) que
podem ser usadas para definir o tamanho da fonte. Exemplos
a seguir:

+
Alinhamento de textos [text-align]

A propriedade text-align corresponde ao atributo align das
antigas verses do HTML.

Os textos podem ser alinhados esquerda (left), direita
(right) ou centrados (centred). E temos ainda o valor justify que
faz com o texto contido em uma linha se estenda tocando as
margens esquerda e direita. Este tipo de alinhamento usado
em jornais e revistas.

+
Alinhamento de textos [text-align]

No exemplo a seguir o texto contido na clula de cabealho
<th> alinhado direita e os contidos nas clulas de dados
<td> so centrados. E, os textos normais em pargrafos so
justificados:

+
Decorao de textos [text-
decoration]

A propriedade text-decoration possibilita adicionar "efeitos" ou
"decorao" em textos.
Pode-se por exemplo, sublinhar textos, cortar o texto com uma
linha, colocar uma linha sobre o texto, etc.
No exemplo a seguir os cabealhos <h1> so sublinhados, os
cabealhos <h2> levam um linha em cima e os cabealhos
<h3> so cortados por uma linha.

+
Pseudo-classe
Uma pseudo-classe permite criar estilos levando em conta
condies diferentes ou eventos ao definir uma propriedade de
estilo para uma tag HTML.
Os links so marcados no HTML com tags <a>. Pode-se ento
usar a como um seletor CSS:
a {color: blue;}
Um link pode ter diferentes estados: visitado ou no visitado.
Assim podemos utilizar pseudo-classes para atribuir estilos aos
estados dos links.

+
Pseudo-classe dos links
Pode-se criar estilos de links com a pseudo-classe a:active e
a:hover (quando o ponteiro do mouse passa sobre o link).
A pseudo-classe: link utiliza-se para links no visitados.
No exemplo a seguir estilizou-se que os links no vistados
tero a cor verde.

+
Pseudo-classe: visited
A pseudo-classe: visited utilizada para links visitados.

Pseudo-classe: active
A pseudo-classe :active utilizada para links ativos.
No exemplo a seguir links ativos tero seu fundo na cor vermelha:

+
Pseudo-classe: hover
A pseudo-classe :hover utilizada quando o ponteiro do mouse
est sobre o link.
Isto permite chamar ateno do utilizador para a existncia de um
link. Por exemplo, podemos mudar a cor do link para laranja e o
texto para itlico quando o ponteiro do mouse passa sobre o link, o
cdigo CSS para estes efeitos o seguinte:

+
Exemplo completo:

+
Definir margens de uma pgina
A propriedade margin tem quatro lados:
right, left, top e bottom (direito,
esquerdo, superior e inferior).
A margem a distncia entre os lados
de elementos vizinhos no caso de
tabelas (ou s bordas do documento).
O exemplo a seguir mostra como definir
margens para o documento, ou seja,
para a tag <body>.
A ilustrao ao lado mostra as margens
da pgina.

top
right left
bottom
+
Exemplo
As CSS so mostradas
abaixo:

Ou:

Introdução à Linguagem CSS

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Introdução à Linguagem CSS

Enviado por

Direitos autorais:

Formatos disponíveis

+

Cascading Style Sheets

Você também pode gostar