A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

CSS - Cascading Style Sheets Folha de Estilos em Cascata Profa:Tânia Neuenschwander.

Apresentações semelhantes


Apresentação em tema: "CSS - Cascading Style Sheets Folha de Estilos em Cascata Profa:Tânia Neuenschwander."— Transcrição da apresentação:

1 CSS - Cascading Style Sheets Folha de Estilos em Cascata Profa:Tânia Neuenschwander

2 Qual é a diferença entre HTML e CSS? CSS é uma linguagem para estilos que define o layout de documentos HTML. Por exemplo, CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos e muito mais. O HTML é uma linguagem interpretada. Introdução

3 A sintaxe básica das CSS Seção { propriedade: valor;} Onde: Seção: é TAG que receberá a propriedade Propriedade: é uma característica da TAG Valor: é a color, tamanho, fonte... ; : encerra o comando Exemplo: body {background-color: #FF0000;}

4 Estrutura Básica do HTML 1ª maneira(in-line): É utilizando o atributo style do HTML, dentro da própria TAG que receberá o estilo. Exemplo: Onde aplicar CSS?

5 Estrutura Básica do HTML 2ª maneira (Interno): Utilizando a TAG style do HTML, na seção head. Exemplo: body {background-color: #FF0000;} Onde aplicar CSS?

6 Estrutura Básica do HTML 3ª maneira (externa): É lincar para uma folha de estilos, que é um arquivo de texto com a extensão.css. No documento HTML (.htm) cria-se um link para a folha de estilos (.css). Exemplo do link: Onde aplicar CSS?

7 Exemplo Estrutura Básica A coisa realmente inteligente disto é que vários documentos HTML podem lincar para uma mesma folha de estilos. Em outras palavras isto significa que um simples arquivo será capaz de controlar a apresentação de muitos documentos HTML. Vantagem do CSS

8 Criando uma Pagina HTML 'color: define a cor da letra de uma seção: Ex. h1 {color: #00FF00;} o texto do cabeçalho de nível 1 será verde. 'background-color: define a cor do fundo de uma seção: Ex. h2 {background-color: #0000FF;} a cor do fundo do cabeçalho de nível 2 será azul. body { background-color: #FFCC66; } a cor do fundo da página será mostarda. Propriedades do CSS

9 background-image: define uma imagem de fundo body {background-color: #FFCC66; background-image: url(imagem.jpg");}a imagem será exibida como fundo de página. background-repeat: define como a exibição da imagem será repetida. background-repeat: repeat-x – repete na horizontal background-repeat: repeat-y – repete na vertical background-repeat: no-repeat – não repete Propriedades do CSS

10 background-attachment: define se a imagem de fundo ficará fixa ou não. Background-attachment: scroll - imagem rola com a pág Background-attachment: fixed - imagem fica fixa. background-position: define a posição da imagem (do topo e da margem esquerda). background-position: 2cm 2cm – 2cm do topo e da margem esquerda background-position: 50% 25% background-position: top right – canto superior direito (válido: top, bottom, center, left e right) Propriedades do CSS

11 Background extendido : body{ background-color: #FFCC66; background-image: url(imagem.gif"); background-repeat: no-repeat; background- attachment: fixed; background-position: bottom right ;} Background abreviado: body{background: #FFCC66 url(imagem.gif") no-repeat fixed bottom right;} ou seja: background: [color] [image] [repeat] [attachment] [position] Propriedades do CSS

12 font-family: define uma lista de fontes para uma seção da página. h1 {font-family: arial, verdana, sans-serif ;} h2 {font-family: serif ;} h3 {font-family: monospace ;} font-variant: texto normal ou small-caps font-weight :define quão negrito será a fonte (um nº no intervalo de 100 a 900). font-size: define o tamanho da fonte (20px, 1cm, 12pt, 2em) Abreviado font: italic bold 30px arial, sans-serif Propriedades do CSS

13 Formatação do texto: text-indent: 30px; (recuo 1ª linha) text-align: center; (Alinhamento) text-decoration: underline; (sublinhado) (overline – linha acima ou line-through tachado) letter-spacing: 6px; (espaço entre letras) text-transform: uppercase; (maiúsculo) (ou capitalize ou lowercase - minúsculo ) Propriedades do CSS

14 Comandos Básicos Separadores – Linha Horizontal Formatação de links pseudo-classe: a:link {color: green;} (link não visitado) a:visited {color: yellow;} (link visitado) a:active {background-color: blue;} (link ativo) a:hover {color:red; font-style: italic;} (sobre o link) Você pode retirar o sulinhado do link a { text-decoration:none; } Propriedades do CSS

15 Comandos Básicos Separadores - Parágrafo Usando class e id para estilizar seções Formata a seção especial: (.nome_da_class).inicio {fonte-size: 2cm; color= blue; letter-spacing: 6px; } Faz uso da classe: (seção class=nome_da_class) Cabeçalho com formatado diferente Cria e formata o identificador: #c1 { color: red; } Faz uso da identificação na seção: Cabeçalho 1 a ser diferenciado Propriedades do CSS

16 Comandos Básicos Separadores - Parágrafo Um elemento tem quatro lados: right, left, top e bottom (direito, esquerdo, superior e inferior). A margin é a distância entre os lados de elementos vizinhos. Exemplo 1: body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px; } Propriedades do CSS Exemplo 2: body { margin: 100px 40px 10px 70px; } p { margin: 5px 50px 5px 50px; }

17 Comandos Básicos Separadores - Parágrafo Padding pode ser entendido como "enchimento, ele define simplesmente a distância entre a borda e o conteúdo do elemento. Exemplo: h1 { background: yellow; padding: 20px 20px 20px 80px; } Width define a largura de um elemento. Height define a altura de um elemento. Propriedades do CSS

18 Comandos Básicos Separadores - Parágrafo Bordas: border-width: define a espessura das bordas. Valores válidos thin, medium, e thick (fina, média e grossa), ou um valor numérico em pixels. border-color: define as cores para as bordas. border-style: define o tipo da borda. Valores válidos:dotted, dashed, solid, double, groove, ridge, inset, outset. Podemos indexar as bodas utilizando: border-top-styleborder-bottom-color border-right-style border-left-width Propriedades do CSS

19 Comandos Básicos Separadores - Parágrafo Exemplos: H1 { border-top-style: solid; border-top-color: red; border-bottom-style: solid; border-bottom-color: blue; border-right-style: solid; border-right-color: green; border-left-style: solid; border-left-color: orange; } p { border-width: 1px; border-style: solid; border-color: blue; } p { border: 1px solid blue; } Propriedades do CSS

20 Comandos Básicos Separadores - Parágrafo Agrupando elementos (span e div) No estilo: span.benefit { color:red; } #bom { background:blue; } #ruim { background:red; } No html: Para ter uma vida feliz e saudável : Propriedades do CSS É bom: Comer frutas e verduras Praticar esportes Viajar Dormir bem Não é bom: Comer gordura animal Trabalho em excesso Vida ociosa

21 Comandos Básicos Separadores - Parágrafo Barra de Navegação.barNav a { font: 12px Arial, Verdana,Helvetica,sa ns-serif; color: #000; text-decoration: none; background: #FFC50C; text-align: center; padding: 1px 5px; margin-right:1px; border: 1px solid #000; }.barNav a:hover { color: #666; background: #FCFCFC; border: 1px solid #666; } Propriedades do CSS Home Quem somos Portfólio Contato


Carregar ppt "CSS - Cascading Style Sheets Folha de Estilos em Cascata Profa:Tânia Neuenschwander."

Apresentações semelhantes


Anúncios Google