CSS - Cascating Style Sheets

CSS - Cascating Style Sheets

(Parte 1 de 8)

CSS Cascading Style Sheets

© Datamec S.A.

Capítulo 1:3
Aplicando Style Sheets3
Objetivo4
Entendendo Style Sheets5
Anexando Style Sheets em documentos HTML6
Através de links6
Incluindo CSS no documento7
Definindo estilos junto com o elemento8
Importando Style Sheets8
Importância do estilo9
Criando Style Sheets para cada tipo de Mídia10
Adicionando regras para uma Style Sheet12
Atribuindo múltiplas propriedades em uma regra simples13
Agrupando seletores juntos em uma regra simples13
Definindo relacionamentos Pai-Filho nas regras14
Entendendo Herança14
Trabalhando com Classes em Style Sheets15
Definindo um estilo para um elemento específico16
Usando pseudo-classes17
Adicionando comentários em Style Sheets18
Ocultando Style Sheets de navegadores antigos18
Revisão19
Capítulo 2:20
Posicionando elementos20
Objetivo21
Entendendo posicionamento de elementos2
Posicionando um Elemento HTML23
Mudando o tamanho de um elemento24
Sobrepondo elementos25
Aninhando posicionamento de elementos26

Sumário Posicionando elementos através de script................................................................... 27

Revisão28
Capítulo 3:29
Dynamic HTML29
Objetivo30
Introdução à DHTML31
Trabalhando com elementos na página32
Mudando o conteúdo de um elemento3
Conectando scripts à estilos e classes34
Controlando a visibilidade de objetos35

Usando scripts para ocultar ou exibir elementos...........................................................................27 Revisão........................................................................................................................ ....36

Cascading Style Sheets 3

Capítulo 1: Aplicando Style Sheets

Cascading Style Sheets 4

Objetivo

Ao final deste capítulo você será capaz de : - Adicionar Style Sheets em documentos HTML;

- Criar arquivos com a extensão .CSS;

- Entender como os estilos são herdados;

- Criar estilos de acordo com necessidades diferentes;

- Analisar documentos CSS escritos por outros autores.

Cascading Style Sheets 5

Entendendo Style Sheets

CSS, ou Cascading Style Sheets é uma recomendação do W3C, assim como o XML e o HTML.

Style Sheets permite a separação do conteúdo dos documentos de sua apresentação. E associando scripts aos elementos é possível alterar o formato do documento assim como sua interface com o usuário.

Tanto o Internet Explorer 4.0 ou superior quanto Netscape 4.7 suportam Cascading Style Sheets Nível 1 (CSS1). As implementações superiores dos respectivos navegadores suportam CSS2 embora de maneira diferente.

Anotações

Documentos HTML ou XML Conteúdo

Apresentação

Documentos WYSIWYG

Conteúdo Apresentação

Cascading Style Sheets 6

Anexando Style Sheets em documentos HTML

A linguagem HTML permite que qualquer trecho de código seja adicionado à página. Para tanto é utilizada o elemento <META>.Entretanto, você deve especificar a linguagem a ser utilizada, como no exemplo abaixo:

Através de links

Você pode criar uma Style Sheet em um arquivo separado para posteriormente aplicar tal estilo em todas as páginas do site. Utilizando este recurso adequadamente, é possível centralizar quase toda a apresentação de um site em um ou mais arquivos. Caso haja necessidade de mudança na apresentação do site, esta é feita em um único lugar.

É aconselhável que o arquivo de estilos possua a extensão .css mas não é obrigatório. Outra extensão também funciona. É um arquivo somente texto cujo formato é legível e de fácil compreensão. Isto facilita a criação de Style Sheets utilizando editores simples como o notepad.

Para associar uma Style Sheet armazenada em um arquivo separado use o elemento <LINK> como no exemplo abaixo:

<META http-equiv="Content-Style-Type" content="text/css">

HREF="http://w.myserver.com/mysheet.css" TYPE="text/css">

Anotações

Cascading Style Sheets 7

Incluindo CSS no documento

Nem sempre é necessário armazenar o estilo em um arquivo separado. Os códigos de estilo podem ser colocados dentro de cada documento HTML. Obviamente os códigos colocados dentro um documento HTML afetarão somente aquele documento.

É possível a utilização de estilos internos e estilos externos. Neste caso os estilos internos sobrepõem estilos externos se houver conflitos. Se não houver, os estilos internos são aplicados e posteriormente são aplicados os estilos externos.

O elemento utilizada para adicionar o estilo ao documento é o elemento <STYLE>. O atributo TYPE especifica o tipo MIME. Existem alguns outros atributos que serão abordados posteriormente.

<HTML> <HEAD> </HEAD> <STYLE TYPE="text/css"> Definições de estilo

Anotações

Cascading Style Sheets 8

Definindo estilos junto com o elemento

CSS permite que sejam definidos estilos como atributo de um elemento. Esta funcionalidade pode ser útil porque os estilos definidos com o elemento sobrepõem os estilos do documento e mesmo estilos anexados.

Por exemplo: suponhamos que você queira alterar a cor de um parágrafo destacando-o diante do resto do documento mas esta alteração é uma exceção. Então você pode utilizar o atributo STYLE e atribuir a este o estilo a ser aplicado:

Estilos definidos junto com os elementos devem ser utilizados com cuidado para que seja preservada uma das principais características da CSS: a reutilização de estilos.

Importando Style Sheets

Estilos também podem ser importados de outros arquivos. Para tanto, é utilizada o comando @import passando como parâmetro caminho e o nome do arquivo. A maioria dos navegadores ainda não suportam este comando e o elemento <STYLE> é indispensável.

<P STYLE=”color: blue”> Este é o parágrafo destacado </P>

<STYLE TYPE="text/css"> @import url(http://w.myserver.com/style.css); </STYLE>

Anotações

(Parte 1 de 8)

Comentários