CSS -Cascading Style Sheets - Introdução Como surgiu a tecnologia CSS? De início, a linguagem HTML foi criada para a construção de páginas Web, que exibiam apenas documentos científicos. Com a evolução tecnológica (aplicativos, software, hardware) : Houve a necessidade de uma maior flexibilidade para manipular visualmente os conteúdos. Com a criação da primeira tag fonte atributo color, nasceu o conceito de estilização dos conteúdos HTML
Folhas de Estilo em Cascata Como surgiu a tecnologia CSS? Com a inclusão de novas tagse atributos de estilização, a velha linguagem de marcação HTML, passou a ter 2 funções: Estruturar o conteúdo através da marcação Dar uma aparência final a este conteúdo. PROBLEMA: como estilizar projetos de documentos HTML cada vez maiores e sofisticados? SOLUÇÃO: criação da tecnologia CSS.
Folhas de Estilo em Cascata Uma regra CSS, compõe-se de três partes: Seletor: seletor { propriedade: valor; } É o elemento HTML identificado por sua tag, ou por uma classe, ou por uma ID, ou etc., e para o qual a regra ser válida (por exemplo: <p>, <h1>, <form>,.minhaclasse, etc.); Propriedade: É o atributo do elemento HTML ao qual será aplicada a regra (por exemplo: font, color, background,etc.); Valor: É a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, etc.)
A regra CSS e sua sintaxe p { font-size: 12px; /* ponto-e-vírgula é facultativo */ } body{ h3 { color: #000; background: #fff; /*ponto-e-vírgula e facultativo */ font-weight: bold; } font-family: "ComicSansMS"; /*valor com palavra composta, deve estar entre aspas duplas ou simples*/} h1, h2, h3, h4, h5, h6 { /*Agrupamento de Seletores*/ color: #0f0;}
Vinculando folhas de estilos à documentos As folhas de estilo podem ser vinculadas a um documento HTML de três maneiras distintas: 1. Importadas ou linkadas: quando as regras CSS estão declaradas em um documento a parte do documento HTML. O arquivo de folha de estilo deve ser gravado com a extensão.css 2. Incorporadas: quando as regras CSS estão declaradas no próprio documento HTML. 3. Inline: quando as regras CSS estão declaradas dentro da tagdo elemento HTML com uso do atributo style
Folha de estilo externa -Sintaxe O arquivo cssda folha de estilo externa deverá ser linkadoou importadoao documento HTML, dentro da seção headdo 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>
Folha de estilo incorporada ou interna -Sintaxe Ideal para ser aplicada a uma única página. Dever ser declarada na seção headdo documento com a tagde estilo <style>, conforme sintaxe: <head> <style type="text/css"> body{ background: #f00; url(imagens/minhaimagem.gif); } h1 { color: #00f; } p { margin-left: 15px; padding: 1.5em; } </style> </head>
Folha de estilo inline-sintaxe Um estilo inlinesó se aplica a um elemento HTML Ele perde muitas das vantagens de folhas de estilo, pois mistura a apresentação com a marcação. Use este método excepcionalmente, por exemplo: quando quiser aplicar um estilo a uma única ocorrência de um elemento. <p style="color:#000; margin: 5px;"> /*Aqui um parágrafo de cor preta e com 5 pxnas 4 margens.*/ </p>
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. Pois a folha interna foi declarada depois da externa na seção head do documento.
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 font-family: nome da família de fontes : define-se pelo nome da fonte, p.ex: verdana, helvetica, arial, etc. nome da família genérica: define-se pelo nome genérico, p.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,..) %
As fontes nos elementos HTML 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
As fontes nos elementos HTML Valores válidos para as propriedades da fonte: font-weight: 300 400 500 600 700 800 900
Exemplo: color... A cor da fonte <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 propriedades para as bordas, e seus valores na regra CSS
Valores válidos para as propriedades das bordas
Propriedades Paddingx Margin padding-top: espaçamento para a parte superior; padding-right: espaçamento para o lado direito; padding-bottom: espaçamento para a parte inferior; padding-left: espaçamento para o lado esquerdo.
Propriedades Paddingx Margin A propriedade marginem CSS define o espaço exterior entre os elementos. margin-top: espaçamento para a parte superior; margin-right: espaçamento para o lado direito; margin-bottom: espaçamento para a parte inferior; margin-left: espaçamento para o lado esquerdo.
Exemplo <html> </html> <head> <style type="text/css"> h3 { border-width: medium; border-style: solid; border-color: #0000FF; } p { border-width: 6px; border-style: dashed; border-color: #FF0000; } </style> </head> <body> <h3>borda média, contínua e azul</h3> <p>borda 6px, tracejada e vermelha</p> </body>
Cabeçalho -Efeito 1 (exemplo) <html> <head> <style type="text/css"> h1 { font-family: Verdana, Arial, Sans-serif; font-size:150%; color:#03c; margin-bottom:0; padding-left: 2px; border-top: 3px solid #00f; border-bottom: 2px solid #00f; } p { font-family: Verdana, Arial, Sans-serif; color: #000; } </style> </head> <body> <h1>efeitos CSS em Cabeçalhos</h1> <p>este é um parágrafo...</p> </body> </html>
Cabeçalho -Efeito 2 (exemplo) <html> <head> <style type="text/css"> h1 { font-family: Verdana, Arial, Sans-serif; font-size:150%; color:#f00; padding-left: 2px; border-top: 2px solid #c36; border-bottom: 2px dotted #c36; } p { font-family: Verdana, Arial, Sans-serif; color: #000; } </style> </head> <body> <h1>efeitos CSS em Cabeçalhos</h1> <p>este e um parágrafo...</p> </body> </html>
Cabeçalho -Efeito 3 (exemplo) <html> <head> <style type="text/css"> h1 { font-family: Verdana, Arial, Sans-serif; font-size:150%; color:#999; padding-left: 2px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin:0 10px 0 0; } p { font-family: Verdana, Arial, Sans-serif; color: #000; } </style> </head> <body> <h1>efeitos CSS em Cabeçalhos</h1><br> <p>este e um parágrafo...</p> </body> </html>
Cabeçalho -Efeito 4 (exemplo) <html> </html> <head> <style type="text/css"> h1 { color:#fff; font-size:150%; background:#999; padding:5px 0px 5px 10px; border-top: 2px solid #000; border-bottom: 2px solid #000; border-left: 20px solid #000; border-right: 2px solid #000; width:18.0em;} p { font-family: Verdana, Arial, Sans-serif; color: #000;} </style> </head> <body> <h1>efeitos CSS em Cabeçalhos</h1><br> <p>este é um parágrafo...</p> </body>
Cabeçalho -Efeito 5 (exemplo) <html> <head> <style type="text/css"> h1 { font-family: Verdana, Arial, Sans-serif; font-size:150%; color:#039; padding: 8px 0 10px 12px; border-left: 1px solid #039; border-top: 1px solid #039; margin-bottom:0;} p { font-family: Verdana, Arial, Sans-serif; color: #000; border-left:1px solid #069; padding: 0 0 12px 12px; margin-top:0;} </style> </head> <body> <h1>efeitos CSS em Cabeçalhos</h1><br> <p>este é um parágrafo...</p> </body> </html>
Cabeçalho -Efeito 6 (exemplo) <html> </html> <head> <style type="text/css"> h1 { font-family: Verdana, Arial, Sans-serif; text-align:left; color:#fff; font-size:150%; background:#a3f padding: 5px 0 5px 80px; border:0; margin-bottom:10px;} p { font-family: Verdana, Arial, Sans-serif; color: #000;} </style> </head> <body> <h1>efeitos CSS em Cabeçalhos</h1><br> <p>este é um parágrafo...</p> </body>
Cabeçalho -Efeito 7 (exemplo) <html> <head> <style type="text/css"> h1 { font-family: Verdana, Arial, Sans-serif; color:#fff; font-size:150%; background:#548b54; padding:5px 0px 5px 10px; border: 3px outset#ccc; margin-bottom:10px; width:22.0em;} p { font-family: Verdana, Arial, Sans-serif; color: #000; } </style> </head> <body> <h1>efeitos CSS em Cabeçalhos</h1><br> <p>este é um parágrafo...</p> </body> </html>