HTML 5 LINGUAGEM DE MARCAÇÃO E ESTILO - CSS - Prof. Rosemary Melo
RESUMO – Linguagem de Marcação e Estilo - CSS DESCRIÇÃO TAGS Regra CSS seletor {propriedade: valor;} Vinculação Inline Vinculação Incorporada Vinculação Externa
LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS Mecanismo simples para adicionar estilo (fonte, cor, espaçamento, etc) a documentos Web. Conjunto de comandos que altera o comportamento dos elementos HTML 5.
LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS 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)
LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS 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;}
LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS 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>
LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS 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: <style type="text/css"> @import url("estilo.css"); </style>
LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS 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.
LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS 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 }
LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS 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 */
LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS 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 */
LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS 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> .
LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS 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.
LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS PROPRIEDADES PARA BORDAS E SEUS VALORES EM REGRAS CSS
LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS VALORES VÁLIDOS PARA AS PROPRIEDADES DAS BORDAS
LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS EXEMPLO
LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS PROPRIEDADE PADDING X MARGIN
LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS EXEMPLO
LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS EXEMPLO
LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS PROPRIEDADE PADDING X MARGIN
LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS EXEMPLO
LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS EXEMPLO
LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS EXEMPLO
LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS EXEMPLO
LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS EXEMPLO
LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS 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 */ 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>
LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS 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' ul { padding-top: 0.3em } Borda: 'border-top-width', 'border-right-width', 'border-bottom-width', e 'border-left-width' h1 { border-width: thin } h1 { border-width: thin thick } h1 { border-width: thin thick medium }
LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS Estilos da Borda: 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style', and 'border-style' Exemplo de utilização: #xy34 { border-style: solid dotted }
LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS 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
LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS 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
HTML Tabela de Cores
LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS 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>
LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS 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.
LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS 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
LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS 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
LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS Valores válidos para as propriedades da fonte: font-weight: 300 400 500 600 700 800 900
LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS Valores válidos para as propriedades da fonte: font-weight: 300 400 500 600 700 800 900
LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS Outras propriedades para fontes: PROPRIEDADE DESCRIÇÃO text-decoration Aplica efeitos decorativos ao texto, como, por exemplo, overline – linha acima do texto; line-through – linha no meio do texto (tachado); e underline – linha abaixo do texto. text-transform Permite alterar a apresentação do texto com os seguintes valores: uppercase (letras maiúsculas), lowercase (letras minúsculas) ou capitalize (primeira letra de cada palavra em maiúsculo).
LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS 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 /wp-content/uploads/2014/08/fundo-site.jpg") }
LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS 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. body { background-image: url("marble.png") } p { background-image: none }
LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS 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/wp-content/uploads/2014/08/fundo-site.jpg") } </STYLE> </HEAD> <BODY> O texto aqui! </BODY> </HTML>
LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS Propriedades para plano de fundo: PROPRIEDADE DESCRIÇÃO background-color Especifica a cor que será utilizada no fundo de um elemento. background-image Permite o carregamento de uma imagem no fundo de um elemento da página. Por exemplo, background-image: url(“fundo.png”). background-repeat Determina como a imagem será repetida na página. Por exemplo: background-repeat: repeat-x. background-position Usado para definir a posição da imagem no fundo de um elemento. Por exemplo, incluir a imagem no canto inferior direito da página: background-position: right bottom.