Web serces

Disponível somente no TrabalhosFeitos
  • Páginas : 10 (2316 palavras )
  • Download(s) : 0
  • Publicado : 14 de novembro de 2012
Ler documento completo
Amostra do texto
ESCM

CSS - Cascating Styles Sheet
Professores: Noraly Nhantumbo e Anselmo Nhane

CSS – Cascating Styles Sheet

Trata-se de um padrão de formatação para páginas web que vai além das limitações impostas pelo html. Proposto pelo W3 Consortium - uma espécie de comitê que define os padrões de programação para a WWW - o CSS foi introduzido pela primeira vez pela Microsoft, nolançamento do Internet Explorer 3.0.

01

1

CSS – Cascating Styles Sheet
A style sheet consiste em uma ou mais regras que descrevem como os elementos de uma página Web, que correspondem particularmente aos Tags HTML serão apresentados (displayed). Toda regra em CSS tem duas partes, o Seletor e a declaração.

seletor

declaração

H1 {color : purple;}
propriedade valor
02

CSS – Cascating Styles SheetExemplos:

body { color: black; } p { font-family: sans serif; } p { text-align:center;}
03

2

CSS – Cascating Styles Sheet

Como adicionar Style Sheet ao HTML:
Inline Style Sheet
Esta forma de aplicar CSS em documentos HTML perde algumas das vantagens de sua aplicação misturando conteúdo e apresentação. Utilize este método com parcimônia.

Para utilizar estilos Inline, aplique o atributo“style” nos tags HTML. O atributo poderá conter qualquer propriedade CSS. Veja a aplicação abaixo:

Isto é um parágrafo...


04

CSS – Cascating Styles Sheet

Como adicionar Style Sheet ao HTML:
Internal Style Sheet
Um Style Sheet Interno deverá ser aplicado quando um simples documento tem um único estilo. Os estilos internos deverão ser definidos no HEAD dodocumento, utilizando o tag
05

3

CSS – Cascating Styles Sheet

Como adicionar Style Sheet ao HTML:
External Style Sheet
Para incluir um arquivo *.css com todos os estilos que serão usados por todas as páginas do seu site, bastaincluir no HEAD do documento HTML um link para o arquivo CSS como descrito no exemplo abaixo:





Um arquivo Style Sheet externo pode ser escrito em qualquer editor de textos. O arquivo não deverá conter TAGs HTML. Seu Style Sheet deverá ser salvo com a extensão “.css”.

06

CSS – Cascating Styles Sheet

Como adicionar StyleSheet ao HTML:
External Style Sheet
Outra técnica é importar um Style Sheet externo com um elemento STYLE usando a “directive” @import



07

4

CSS – Cascating Styles Sheet

Seletores:
Efeito Cascata
Como a tradução de CSS já diz, é uma folha de estilos em camadas, desta forma, os estilos seguem uma hierarquia como descritaabaixo:

1. Browser default 2. External Style Sheet 3. Internal Style Sheet (dentro do tag ) 4. Inline Style (dentro de elementos HTML)
Obs.: O item (4) sobrepõem o (3), que sobrepõem o (2), que por sua vez sobrepõem o (1).

08

CSS – Cascating Styles Sheet

Seletores:
Elemento Seletor
São os próprios tags HTML

p { text-align:center; color:red;}
Para fazer com que as definições de estilo fiquemmais fáceis de entender, você pode colocar cada propriedade em uma linha.

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

Agrupando: Vc pode agrupar seletores, para isto, coloque uma vírgula para separar os seletores. Cada um dos headers terá cor verde.

h1,h2,h3,h4,h5,h6 { color: green; } 09

5

CSS – Cascating Styles Sheet

Seletores:
Seletor Contextual
Este seletor especifica osatributos style para elementos HTML baseados no contexto em que ele é apresentado. Neste exemplo abaixo o seletor contextual especifica que o texto bold com uma lista “purple”

li b {color: purple;}
Nos seletores contextuais, os seletores individuais são separados por um espaço em branco.

10

CSS – Cascating Styles Sheet

Seletores:
Seletor de Classe
Especifica que os elementos HTML podem...
tracking img