Ferramentas Programáveis Profº Ritielle Souza
Folhas de Estilo Existem três formas de trabalharmos com folhas de estilos Forma mais usual CSS Externo Estilo na página <style> Forma menos usual estilo inline
Sintaxe CSS Folha de Estilo Regra CSS é a unidade básica de uma folha de estilo. Uma regra CSS é composta de duas partes: o seletor e a declaração. A declaração compreende uma propriedade e um valor.
Sintaxe CSS Folha de Estilo seletor{propriedade:valor declaração p{ REGRA CSS color:#000000; background-color:#ff0000; font-style:italic; text-align:right; font-family:tahoma;
Comentários em CSS /* Este é um comentário em linha */ Bloco de comentário /* Este é um bloco de comentários em linhas diferentes contendo muitas informações sobre um trecho da folha de estilos */
Formatação de Texto Atributos Valor Definição color Valor em hexadecimal ou nome da cor Cor do texto font-family Nome da fonte Tipo da Fonte font-size Valor referente ao tamanho Tamanho da fonte font-weight Normal, bold Estilos de negrito font-style Normal, oblique ou itálico Estilo do texto
Formatação de Texto text-align left, center, right ou justify Ajuste do alinhamento do texto text-decoration underline, overline Decoração do texto
Formatação do segundo plano Atributo Valores Definição background-attachment fixed ou scroll Define se a imagem de fundo permanecerá fixa enquanto a barra de rolagem é deslizada ou se ela acompanhará esse movimento (scroll) background-color Valor em hexadecimal ou nome da cor Determina a cor de fundo
Formatação do segundo plano background-image url ou none Uma imagem que será utilizada como plano de fundo background-position bottom center, bottom left, bottom right, center center, center left, center right, top center, top left, top right Determina o local a partir do qual será criada a imagem de fundo
Formatação do segundo plano background-repeat repeat-x, repeat-y, no-repeat, repeat Determina se um mosaico será formado a partir da repetição da imagem de fundo
Bordas Border-style: dashed; Border-color: red; Styles: dotted, double e groove
EXEMPLO DE CSS COM <html> <head> <title> Folhas de Estilo</title> <style> body{ font-size:20px; font-family:verdana; color:#ff0000; background-color:#fcfccc; h1{ border-style:dashed; border-color:red; BORDAS
EXEMPO DE CSS COM BORDAS h2{ border-style:dotted; border-color:black; h3{ border-style:double; border-color:green; h4{ border-style:groove; border-color:yellow; </style>
EXEMPO DE CSS COM BORDAS </head> <body> <h1> Estilo dashed</h1> <h2> Estilo dotted</h2> <h3> Estilo double</h3> <h4> Estilo groove</h4> </body> </html>
Folha de Estilo Estilo na Página <html> <head> <title> Folhas de Estilo</title> <style> body{ font-size:20px; font-family:verdana; color:#ff0000; background-color:#fcfccc; font-weight:bold; font-style:italic; background-image:url("imagens/porsche01.jpg"); background-repeat:no-repeat; background-position:center right; background-attachment:fixed; */bgproperties do html*/
Folhas de Estilo Estilo na página h1{ font-size:25px; font-family:arial; color:white; text-align:center; text-decoration:none; background-color:blue; width:400px; h2{ font-size:18px; font-family:verdana; text-decoration:underline; color:#ffe4b5; text-align:center; word-spacing:5px;
FOLHAS DE ESTILO ESTILO NA PÁGINA a:link{ font-size:15px; font-family:verdana; color:orange; text-decoration:none;/*link sem sublinhado*/ width:200px; background-color:black; display:block;/*exibe o conteúdo em bloco*/ a:visited{ font-size:15px; font-family:verdana; color:orange; text-decoration:none;/*link sem sublinhado*/ width:200px; background-color:black; display:block;
FOLHAS DE ESTILO ESTILO NA PÁGINA a:hover{ text-align:center; border-color:orange; border-style:solid; background-image:url("imagens/fundo08.jpg"); h3{ font-size:25px; font-family:tahoma; color:#ff8fcf; text-align:center; </style>
FOLHAS DE ESTILO ESTILO NA PÁGINA </head> <body> Testando estilo para a tag body <h1> Testando estilo para tag h1</h1> <a href="#">hiperlink1</a> <a href="#">hiperlink2</a> <a href="#">hiperlink3</a> <a href="#">hiperlink4</a> <a href="#">hiperlink5</a> <a href="#">hiperlink6</a> <h2> Testando estilo para a tag h2</h2> <h3>testando estilo para a tag h3</h3> </body> </html>