HTML 5 LINGUAGEM DE MARCAÇÃO E ESTILO - CSS - Prof. Rosemary Melo

RESUMO Linguagem de Marcação e Estilo - CSS DESCRIÇÃO Regra CSS Vinculação Inline Vinculação Incorporada Vinculação Externa TAGS seletor {propriedade: valor;}

Mecanismo simples para adicionar estilo (fonte, cor, espaçamento, etc) a documentos Web. Conjunto de comandos que altera o comportamento dos elementos HTML 5.

Regra CSS unidade básica de uma folha de estilo capaz de produzir efeito de estilização. composta de duas partes: o seletor e a declaração. Sintaxe: seletor {propriedade: valor;} seletor: elemento html identificado por sua tag, ou por uma classe, ou por um ID, ou etc, para a qual a regra será válida (ex.: <p>, <hr>, etc) propriedade: atributo do elemento html a qual será aplicado a regra (ex.: font, color, background, etc) valor: característica específica a ser assumida pela propriedade (letra tipo arial, cor azul, fundo verde, etc)

Regra CSS Exemplo: p {font-size: 12 px;} body { color: #ooo; background: #fff; font-weight: bold; } h3 { font-family: Comic Sans MS ;} h1, h2 {color: green;} h3, h4, h5 {color: red;} h6 {color: black;}

Vinculando Folhas de Estilo a documentos as folhas de estilo de estilo podem ser vinculadas ao um documento HTML de três maneiras: Vinculação Inline - quando as regras CSS estão declaradas dentro do elemento html com o uso do atributo style. ex.: <p style= "color: white; background: black;">teste</p> Vinculação Interna - ideal para ser aplicada a uma única página, deve ser especificada no <head> da página. ex.: <head> <style type= text/css > body {color: black; background: white;} em {font-style: normal; color: red;} </style> </head>

Vinculação Externa - O arquivo css da folha de estilo externa deverá ser linkado ou importado ao documento HTML, dentro da seção head do documento. A sintaxe geral para linkar uma folha de estilo chamada estilo.css: <head>... <link rel="stylesheet" type="text/css" href="estilo.css">... </head> A sintaxe geral para importar uma folha de estilo chamada estilo.css: <head>... <style type="text/css"> @import url("estilo.css"); </style>... </head>

Folhas de estilo múltiplas se alguma propriedade for definida para um mesmo elemento em folhas de estilo diferentes, entrará em ação, o EFEITO CASCATA e prevalecerão os valores da folha de estilo mais específica. Conflito: tamanho da fonte para o elemento h2 Solução: h2 terá o tamanho igual a 10 pt. A folha interna foi declarada depois da externa na seção head do documento.

SELEÇÃO DE ELEMENTOS No CSS, a seleção de elementos pode variar de uma forma simplificada até padrões contextuais ricos. Tipos de seleção Agrupamento - o CSS permite agrupar declarações repetidas. h1 { font-family: sans-serif } h2 { font-family: sans-serif } h3 { font-family: sans-serif } É equivalente a: h1, h2, h3 { font-family: sans-serif }

SELETORES DESCENDENTES Um elemento pode estar contido dentro de outro elemento. Exemplo: <H1>Este texto é <EM>muito</EM> importante</h1> h1 { color: red } /* indica que todos os elementos h1 possuem a cor vermelha */ em { color: red } /* indica que todos os elementos em possuem a cor vermelha */ h1 em { color: blue } /* indica que os elementos em contidos em um elemento h1 possuem a cor azul */

SELETORES FILHOS Um elemento filho é caraterizado quando os elementos são separados por ">". Exemplo: ol>li p {color: green } neste exemplo, todos os elementos p serão de cor verde quando estiverem dentro de um elemento item <li>, filho de uma lista <ol>.

O MÓDULO CSS BOX MODEL Todo elemento HTML possui uma caixa retangular ao seu redor com as seguintes dimensões: Margin: Margem (transparente) Border: Borda Padding: Espaçamento Content: Conteúdo Cada dimensão possui quatro lados: Top: Topo Right: Direito Botton: Inferior Left: Esquerdo Onde sempre será referenciada por esta ordem topo, direita, inferior e esquerda.

Exemplo: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML> <HEAD> <TITLE>exemplos</TITLE> <STYLE type="text/css"> UL { background: yellow; margin: 12px 12px 12px 12px; /* margem topo, direita, inferior, esquerda */ padding: 3px 3px 3px 3px; /* espaçamento topo, direita, inferior, esquerda */ } LI { color: white; /* cor do texto branca */ background: blue; /* Conteúdo do espaçamento = azul */ margin: 12px 12px 12px 12px; /* margem topo, direita, inferior, esquerda */ padding: 12px 0px 12px 12px; /* espaçamento direito = 0*/ list-style: none } LI.withborder { border-style: dashed; border-width: medium; border-color: lime; } </STYLE> <BODY> <UL> <LI>primeiro elemento da lista <LI class="withborder">segundo elemento da lista </UL> </BODY> </HTML>

Podem-se referenciar as dimensões individualmente conforme abaixo: Margem : 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', e 'margin' Exemplo de utilização: body { margin-top: 1em; margin-right: 2em; margin-bottom: 3em; margin-left: 2em } Espaçamento: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', e 'padding' Exemplo de utilização: ul { padding-top: 0.3em } Borda: 'border-top-width', 'border-right-width', 'border-bottom-width', e 'border-left-width' Exemplo de utilização: h1 { border-width: thin } h1 { border-width: thin thick } h1 { border-width: thin thick medium }

Estilos da Borda: 'border-top-style', 'border-right-style', 'border-bottom-style', 'borderleft-style', and 'border-style' Exemplo de utilização: #xy34 { border-style: solid dotted }

As fontes nos elementos HTML As propriedades básicas para fontes: color:...cor da fonte font-family:...tipo de fonte font-size:...tamanho de fonte font-style:...estilo de fonte font-variant:...fontes maiúsculas de menor altura font-weight:...quanto mais escura a fonte é (negrito) font:...maneira abreviada para todas as propriedades

As fontes nos elementos HTML Valores válidos para as propriedades da fonte: color: código hexadecimal: #FFFFFF código rgb: rgb(255,235,0) nome da cor: red, blue, green...etc

Tabela de Cores HTML

Exemplo: <html> <head> <style type="text/css"> h1 {color: #FF0000;} h2 {color: #00FF00;} p {color: rgb(0,0,255);} </style> </head> <body> <h1>cabeçalho com letras vermelhas</h1> <h2>cabeçalho com letras verdes</h2> <p>parágrafo com letras azuis</p> </body> </html>

As fontes nos elementos HTML Valores válidos para as propriedades da fonte: font-family: nome da família de fontes : define-se pelo nome da fonte ex: verdana, helvetica, arial, etc. nome da família genérica: define-se pelo nome genérico ex: serif, sans-serif, cursive, etc.

As fontes nos elementos HTML Valores válidos para as propriedades da fonte: font-size: xx-small x-small small medium large x-large xx-large smaller larger length: uma medida reconhecida pelas CSS (px, pt, em, cm,..) Ex.: 18pt

Valores válidos para as propriedades da fonte: font-style: normal: fonte normal na vertical italic: fonte inclinada oblique: fonte obliqua font-variant: normal: fonte normal small-caps: transforma em maiúsculas de menor altura font-weight: normal bold bolder lighter 100 200

Valores válidos para as propriedades da fonte: font-weight: 300 400 500 600 700 800 900

FOREGROUND E BACKGROUND CSS permite alterar as cores de primeiro plano (foreground) e pano de fundo (background) dos elementos. O W3C recomenda que a regra background seja utilizada no elemento body. Exemplo de elemento de primeiro plano (foreground): em { color: red } /* predefined color name */ em { color: rgb(255,0,0) } /* RGB range 0-255 */ Exemplo de elemento de pano de fundo (background): background: url ("http://www.exodocientifica.com.br /wpcontent/uploads/2014/08/fundo-site.jpg") }

FOREGROUND E BACKGROUND Define a imagem de fundo de um elemento Exemplo de aplicação: h1 { background-color: #F00 } background-image - Define a imagem de fundo de um elemento. Exemplo de aplicação: body { background-image: url("marble.png") } p { background-image: none }

BACKGROUND Exemplo de utilização: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML> <HEAD> <TITLE>Exemplos</TITLE> <STYLE type="text/css"> BODY { background-image: url("http://www.exodocientifica.com.br/wpcontent/uploads/2014/08/fundo-site.jpg") } </STYLE> </HEAD> <BODY> O texto aqui! </BODY> </HTML>