css Cascading Style Sheets CSS CASCADING STYLE SHEETS

Tamanho: px

Começar a partir da página:

Download "css Cascading Style Sheets CSS CASCADING STYLE SHEETS"

Lúcia Mangueira Palhares
10 Há anos
Visualizações:

1 css Cascading Style Sheets CSS CASCADING STYLE SHEETS

2 Oque é o CSS Cascading Style Sheets - Folhas de Estilo em Cascata Não é uma linguagem de programação, é uma linguagem de estilo. Define a apresentação de documentos HTML. Separação entre o formato e o conteúdo de um documento.

3 Oque é CSS Existem duas características essenciais que devem ser levadas em consideração na montagem das páginas web: sua estrutura - a divisão do conteúdo em blocos de textos através da criação das tabelas, dos marcadores, listas etc; A estrutura é controlada pelos marcadores ou seletores HTML (<body>,<h1>, <p>, <ol>, <li>, etc). sua apresentação - a criação de efeitos visuais no texto pela definição das características das letras usadas, o realce de blocos similares de texto, etc.

estrutura é controlada pelos marcadores ou seletores HTML (<body>,<h1>, <p>, <ol>, <li>, etc).

4 Histórico A CSS tem várias versões, a CSS 1 tornou-se uma recomendação pelo W3C no final de 1996 e contém propriedades básicas, a CSS 2 aprimorou isso e adicionou conceitos avançados. O W3C começou antes do início deste milênio o trabalho da CCS 3. O nível 3 ainda está em desenvolvimento e incluiu facilidades como bordas arredondadas, sombras, duas imagens como background de um mesmo objeto, múltiplas colunas de texto, fontes personalizadas, etc...

O W3C começou antes do início deste milênio o trabalho da CCS 3.

5 Incorporado ao documento Importado ao documento inline (diretamente na tag HTML) Utilizando CSS

6 Utilizando CSS > Estilo Incorporado Uma definição deste tipo deve ser usada quando não existe um padrão comum aos vários documentos de um site - ou então o site é composto de um único documento. <html> <head> <title></title> <style type="text/css"> h1 { text-align: center; color: blue } P { font-family: serif } </style> </head> <body> <h1>página sem formatação de estilos</h1> <p>texto texto texto texto.</p> </body> </html>

<html> <head> <title></title> <style type="text/css"> h1 { text-align: center; color: blue } P {

7 Utilizando CSS > Estilo importado A definição é feita num arquivo separado e importado na página. <html> <head> <title></title> <link rel= stylesheet href= formatar.css type= text/css /> </head>...

8 Utilizando CSS > Estilo Inline A definição da CSS é feita diretamente na tag HTML com o uso do atributo style. <html> <head> <title></title> </head> <body> <h1>página com formatação de estilos</h1> <p style= font-family:verdana >Ao longo do texto, as <em>palavras chaves</em> estarão realçadas.</p> </body> </html>

<html> <head> <title></title> </head> <body> <h1>página com formatação de

9 Prioridade Sempre o mais próximo do elemento. 3º Arquivo importado 2º Incorporado 1º inline

10 Seletores Para estilizar um determinado elemento da página utilizando CSS, é necessário ter uma maneira de selecionar esse elemento. Na CSS a parte de uma regra de estilo que seleciona elementos da página é chamada de seletor. Formato de um seletor: seletor {propriedade-css: valor;}

Na CSS a parte de uma regra de estilo que seleciona elementos da

11 Seletores > Sintaxe Propriedades com valores múltiplos Definição de estilo: body { background: white; color: maroon; font-family: helvetica, sans-serif; } Estão especificadas 2 famílias de fontes a serem usadas: a helvetica e a sans-serif. Neste caso, os valores possíveis para uma mesma propriedade devem estar separados por vírgula

especificadas 2 famílias de fontes a serem usadas: a helvetica e a sans-serif.

12 E a sintaxe correta é: Escrever o seletor e a seguir a declaração; A declaração deve estar entre { } (chaves); Na declaração, separar a propriedade e o valor por : (dois pontos); É permitido usar espaços em branco em qualquer quantidade entre cada um dos caracteres da regra; É permitido agrupar declarações em uma mesma regra e neste caso as declarações deverão ser separadas por ; (ponto-e-vírgula) podendo todas elas estar em uma mesma linha ou em linhas distintas. É facultativo o uso de ; (ponto-e-vírgula) após a última declaração na regra; É indiferente o uso de maiúsculas e minúsculas em uma regra CSS, contudo as classes e ID's devem seguir a mesma grafia constante da marcação.

as declarações deverão ser separadas por ; (ponto-e-vírgula) podendo todas elas estar em uma mesma linha ou em linhas distintas.

13 Tipos de Seletores Seletores de tipos/seletores de classes associadas Seletores de ID (usam a tag ID) Seletores de classes não-associadas (usam a tag class)

14 Seletores de Tipo Seletores de tipos/seletores de classes associadas: p {color: black} h1 {font-weight: bold; background-color: red;} Seleciona elementos da página pelo tipo da tag utilizada

15 Seletores de Tipo Exemplo CSS: em {color: blue} HTML: <body> <p>this is some <em>text</em></p> <p>this is some text</p> <ul> <li>list item</li> <li>list item</li> <li>list <em>item</em></li> </ul> </body>

16 Seletores de ID Exemplo: CSS: #introducao {font-style: italic; } HTML: <p id= introducao >This is some text</p> Seleciona elementos da página utilizando o atributo ID. #: Identifica que é um seletor de ID.

17 Seletores de classes não associadas Seletores de classes não-associadas:.texto-vermelho {color: red;} Seleciona elementos da página usando o valor do atributo class utilizado nas tag.. (ponto): Identifica que é um seletor de classes não -associadas.

18 Seletores de classes não associadas Exemplo CSS:.big { font-size: 110%; font-weight: bold; } HTML: <body> <p class="big">this is some <em>text</em></p> <p>this is some text</p> <ul> <li class="big">list item</li> <li>list item</li> <li>list <em>item</em></li> </ul> </body> É possível usar diferentes configurações para uma mesma classe: li.big {color: red} p.big {color: blue}

<em>text</em></p> <p>this is some text</p> <ul> <li class="big">list item</li> <li>list

19 Seletores Descendentes Permite definir a formatação para um elemento interno a outro. CSS: p em { color:red } HTML: <body> <h1>heading <em>here</em></h1> <p>lorem ipsum dolor <em>sit</em> amet.</p> </body> Somente afeta o elemento em interno a um parágrafo. IMPORTANTE: A formatação independe da quantidade de níveis.

CSS: p em { color:red } HTML: <body> <h1>heading <em>here</em></h1> <p>lorem

20 Seletores Filhos Define-se que a formatação deve respeitar a hierarquia. Apenas um nível após (filho). CSS: div > em { color: pink } HTML: <h1>heading <em>text</em></h1> <div>this is some <em>text</em> <p>this is a paragraph of <em>text</em></p> </div> Somente afeta o elemento em interno a um parágrafo. A formatação é somente para elementos do primeiro nível.

CSS: div > em { color: pink } HTML: <h1>heading <em>text</em></h1> <div>this is some

21 Seletores Universal Seleciona todos os elementos do documento. CSS: * { color: red } HTML: <h1>heading <em>text</em></h1> <div>this is some <em>text</em> <p>this is a paragraph of <em>text</em></p> </div> Aplicará a regra CSS a todos os elementos do documento.

22 Vale Apena Visitar Outros seletores: Efeitos/Estilos prontos em CSS

23 Fonte

Documentos relacionados

Mudança de formatos no HTML. CSS - Cascading Style Sheets. A prioridade para o efeito cascata. A prioridade para o efeito cascata

Mudança de formatos no HTML. CSS - Cascading Style Sheets. A prioridade para o efeito cascata. A prioridade para o efeito cascata Mudança de formatos no HTML título CSS - Cascading Style Sheets e os problemas do HTML Para mudar a cor de uma única linha de uma página seria relativamente fácil.