Introdução às CSS

Introdução às Cascaded Style Sheets (CSS)
As folhas de estilos em cascata (CSS) definem a aparência e a formatação do conteúdo em

páginas Web e permitem maior controlo sobre o modo como o conteúdo é apresentado nos
browsers.
Vantagens e desvantagens no uso de folhas de estilo

A separação da elaboração dos conteúdos da definição dos estilos permitiu criar documentos
com um aspecto totalmente novo à custa do antigo HTML. Desta forma, facilitou a total
remodelação dos documentos, sem ter de alterar fosse o que fosse do seu conteúdo. Por outro
lado, após terem sido definidos os estilos, possibilitou a sua utilização em qualquer documento
que se desejasse.
Mas nem tudo são vantagens. Deve-se ter em atenção que os diversos browsers não
implementam de forma completa as CSS. Desta forma, é melhor optar por usar as inúmeras
funcionalidades que reconhecidamente são bem suportadas, evitando o recurso a funcionalidades
demasiado avançadas, sob pena de ter de as testar exaustivamente nos diversos browsers.
Definição de estilos
As CSS foram criadas com três possibilidades diferentes: externas, internas e locais. Destas,
apenas é recomendada a utilização das duas primeiras, sob pena de surgirem os mesmos
problemas que as CSS se propõem resolver, isto é, uma grande confusão entre os conteúdos e
os estilos.
Externamente (numa folha de estilos externa)
Ficheiro de extensão css que guarda todos os estilos e que posso aplicar em várias páginas.
A seguir à secção head colocar o link para o ficheiro que contém as declarações de estilo:
<head>
<link rel ="stylesheet" type=”text/css” href="ficheiro.css" >
</head>
Exemplo do código de uma folha de estilo externa:
h2 { font-family:comic sans ms;

color:#00ff00;
}
p { font-family:Courier;
color:red;
}
Exemplo do código de um documento HTML com referência a uma folha de estilo externa:
<html>
<head>
<title> Folha de estilo externa </title>
<link rel ="stylesheet" href="folha de estilo externa.css" >
</head>
<body>
<h2> Texto com letra de cor verde </h2>
<p> Texto com letra de cor vermelha </p>
</body>
</html>
Internamente (numa folha de estilos interna)
Uma folha de estilos interna corresponde à definição de um conjunto de estilos a aplicar

internamente apenas a um documento. Para aplicar os estilos é necessário defini-los, em cada
documento HTML, entre as tags <sytle> e </style>. Estas tags deverão, também, ser colocadas
dentro das tags <head> e </head>
<head>
<style type=”text/css”>
….
….
</style>
</head>
Exemplo da aplicação de uma folha de estilo interna:
<html>
<head>
<title> Folha de estilo interna </title>
p { color: white; }
body { background-color: black; }
</style>
</head>
<body>
<p> Este texto tem como cor de fundo preto </p>
</body>
</html>
Localmente (inline)
Uma folha de estilos inline corresponde à definição de um conjunto de estilos a serem aplicados
individualmente aos elementos de um documento HTML pelo utilizador. Para aplicar os estilos é
necessário defini-los, em cada elemento do documento HTML, através do atributo <sytle> e entre
um único par de aspas (“ “). Este tipo e definição de estilos deve ser evitado, pois pode conduzir a
um aumento e dispersão do código e a um esforço acrescido na sua criação e compreensão.
<p style=”propriedadeCss1:valor; propriedadeCss2:valor”> Parágrafo com estilo CSS local </p>
Prioridades
Após tudo o que foi dito surge, naturalmente, a dúvida de como se comportará o browser quando
encontrar definições de estilos complementares ou concorrentes.
No primeiro caso, o que sucede é a criação de um estilo totalmente novo proveniente da fusão
das propriedades definidas nas diversas instâncias.
No segundo caso, será dada a prioridade à propriedade que for definida mais próxima do
conteúdo, ou seja, pela seguinte ordem: local, interna, externa e finalmente as definições por
defeito, do próprio browser. Desta forma, a designação de “folhas de estilo em cascata” está
relacionada com a determinação da prioridade da aplicação de um estilo associado a um
elemento.
Sintaxe usada nas folhas de estilo

Um estilo CSS é composto por três partes, isto é, um selector, uma propriedade e um valor.
O selector é um elemento, que pode ser uma tag, uma classe ou um identificador, ao qual vai se
associado um estilo. A propriedade corresponde ao atributo de um elemento que vai assumir
determinado valor.
Sintaxe básica de um estilo definindo uma propriedade, segundo as regras CSS:
Selector { propriedade: valor; }
Sintaxe básica de um estilo definindo duas propriedades, segundo as regras CSS:
Selector {
propriedade:valor;
Propriedade:valor;
}
Quando o valor assumido por uma propriedade é constituído por mais do que uma palavra, estas
deve ser escritas entre aspa ou plicas.
Exemplo do código de um documento HTML com as definições de um estilo associado ao
selector h3:
<html>
<head>
<title> Estilo css </title>
h3 {
font-family: “ courier new”;
color: #FF6600;
text-align: center;
}
</style>
</head>
<body>
<h3>
O cabeçalho está alinhado ao centro e tem a cor laranja
</h3>
</body>
</html>
Os selectores podem ser agrupados, permitindo definir propriedades a aplicar ao grupo. As

designações dos selectores agrupados têm de ser separadas por vírgulas.
Selector1, selector2, selector3 { propriedade: valor; }
Exemplo do código de um documento HTML com a definição de um estilo associado aos

selectores h3, p e table:
<html>
<head>
<title> Estilo para vários selectores </title>
h3, p, table {
font-family: “ courier new”;
color: #FF6600;
text-align: center;
}
</style>
</head>
<body>
<h3> O cabeçalho está alinhado ao centro e tem a cor laranja </h3>
<p> O parágrafo está alinhado ao centro e tem a cor laranja </p>
<table border=1; align=center>
<tr> <td>
O texto está centrado numa tabela de uma linha por uma coluna
</tr> </td>
</table>
</body>
</html>
Comentários
Os comentários podem ser inseridos nas folhas de estilos entre os símbolos /* e */. Estes
comentários são ignorados pelo browser e podem ser utilizados, por exemplo, para descrever a
forma como está estruturada a folha de estilos.
Identificadores e classes
A utilização de identificadores e classes trouxe maior flexibilidade à formatação dos documentos
HTML. Em ambos os casos, os nomes utilizados para os identificar devem ser sempre iniciados
por uma letra e nunca por um número.
Identificadores
Um selector identificador (id) permite definir um estilo, que pode ser directamente associado a um
elemento de uma tag. Por sua vez, o atributo id, como qualquer outro atributo, só pode ser
especificado uma única vez numa dada tag. Os nomes dos identificadores são precedidos pelo
carácter #.
Sintaxe básica de um selector identificador que pode ser inserido numa folha de estilos
Identificador_do_elemento#selector_identificador { propriedade: valor }
Sintaxe básica para fazer referência a um selector identificador para aplicar o estilo nele contido
<Identificador_do_elemento id=”selector_identificador”>
<html>
<head>
<title> Identificador </title>
<style type="text/css">
P#selector1 {
text-align: right;
color: blue;
}
P#selector2 {
text-align: left;
color: red;
}
</style>
</head>
<body>
<p id=”selector1”> O parágrafo está alinhado à direita e tem a cor azul </p>
<p id=”selector2”> O parágrafo está alinhado à esquerda e tem a cor vermelha </p>
</body>
</html>
Um selector identificador permite definir um estilo não apenas directamente associado a um
elemento, mas a todos que o referenciam.
Sintaxe básica de um selector identificador global que pode ser inserido numa folha de estilos
#selector_identificador {propriedade: valor; }
Exemplo:
<html>
<head><title> selector global </title>
#global1
{
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 id="global1">
Cabeçalho centrado e com cor vermelha
</h1>
<p id="global1">
Paragrafo centrado e com cor vermelha
</p>
</body>
</html>
Classes
Através dos selectores de classe (class) é possível definir vários estilos, que podem ser
directamente associados ao mesmo elemento.
Sintaxe básica de um selector de classe
Identificador_do_elemento.identificador_de_classe {propriedade:valor;}
Sintaxe básica para fazer referência a um selector de classe
<identificador_do_elemento class=”identificador_de_classe”>
Exemplo:
<html>
<head><title> classe </title>
p.direita { text-align: right; color: red;}
p.esquerda { text-align: left; color: blue;}
</style>
</head>
<body>
<p class=”direita”> Paragrafo alinhado à direita e com cor vermelha </p>
<p class=”esquerda”> Paragrafo alinhado à esquerda e com cor azul </p>
</body>
</html>
Sintaxe básica de um selector de classe global
.selector_de_classe {propriedade: valor;}
Exemplo:
<html>
<head><title> classe global </title>
.direita { text-align: right color: green; }
</style>
</head>
<body>
<h2 class=”direita”>
Cabeçalho alinhado à direita e com cor verde
</h2>
<p class=”direita ">
Paragrafo alinhado à direita e com cor verde
</p>
</body>
</html>

Introdução às 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 às CSS

Enviado por

Direitos autorais:

Formatos disponíveis

Introdução às Cascaded Style Sheets (CSS)

As folhas de estilos em cascata (CSS) definem a aparência e a formatação do conteúdo em

Vantagens e desvantagens no uso de folhas de estilo

Externamente (numa folha de estilos externa)

Exemplo do código de uma folha de estilo externa:

h2 { font-family:comic sans ms;

Internamente (numa folha de estilos interna)

Uma folha de estilos interna corresponde à definição de um conjunto de estilos a aplicar

Exemplo da aplicação de uma folha de estilo interna:

<p style=”propriedadeCss1:valor; propriedadeCss2:valor”> Parágrafo com estilo CSS local </p>

Sintaxe usada nas folhas de estilo

Sintaxe básica de um estilo definindo uma propriedade, segundo as regras CSS:

Selector { propriedade: valor; }

Sintaxe básica de um estilo definindo duas propriedades, segundo as regras CSS:

Os selectores podem ser agrupados, permitindo definir propriedades a aplicar ao grupo. As

Selector1, selector2, selector3 { propriedade: valor; }

Exemplo do código de um documento HTML com a definição de um estilo associado aos

Identificador_do_elemento#selector_identificador { propriedade: valor }

#selector_identificador {propriedade: valor; }

Você também pode gostar