FOLHAS DE ESTILO EM CASCATA

Transcrição

1 FOLHAS DE ESTILO EM CASCATA CSS (Cascading Style Sheets) ou Folhas de Estilo em Cascata são um conjunto de regras de estilo que definem como os elementos e os tags em uma página HTML devem ser exibidos pelo navegador. As folhas de estilo permitem que o HTML volte ao seu objetivo inicial : conteúdo. Separando o conteúdo da exibição, as folhas de estilo criam uma nova facilidade para os desenvolvedores, que podem controlar de perto suas páginas. É muito mais fácil manter um site quando se utilizam folhas de estilo. O código das páginas fica mais legível bem como a manutenção e/ou alteração da exibição fica mais controlável pois as regras estão reunidas em um só lugar. As folhas de estilo são compostas de regras. Estas regras têm o seguinte formato: SELETOR { propriedade1: valor1; propriedade2: valor2;,...,; propriedaden: valorn} Onde: Seletor escrito à esquerda das chaves, especifica o elemento HTML que será definido nesta regra de estilo. Declaração escrita dentro de chaves ( {} ), especifica como o seletor deve ser apresentado. Uma declaração possui duas partes: Propriedade especifica qual o aspecto do seletor deve ser modificado. Valor especifica como a propriedade deve ser apresentada. Ex: p { color:red } A regra acima indica que os textos marcados pelo tag <p>...</p> devem ser exibidos com a cor vermelha. É possível criar regras com mais de uma combinação de propriedade/valor dentro de uma única regra de estilo. Ex: p { color:red; font-family:arial; font-size:12pt } A regra anterior indica que os textos marcados pelo tag <p> </p> são exibidos na cor vermelha, fonte Arial e tamanho 12 pt. Uma mesma regra pode ser aplicada a vários elementos HTML, a seguir: Ex.

2 p, h1, h2 { color:red; font-family:arial; font-size:12pt } Neste caso, os elementos <p>..</p>, <h1>... </h1> e <h2>...</h2> serão exibidos com a mesma formatação. Há três maneiras de se inserir CSS nas páginas HTML: 1- Incluir um style sheet no arquivo HTML Neste método, o código do style sheet é incluído dentro do código da própria página, no começo do arquivo, antes do corpo (<body>) do código HTML. Veja o exemplo abaixo: <html> <style type="text/css"> ) também são muito importantes. Alguns browsers mais antigos (como IE 2.0 para Mac) não reconhecem o código do style sheet pelo atributo TYPE="text/css", e irão mostrar os códigos style sheet como se fossem texto normal. Use comentários, e isto não irá acontecer. 2- Criar um link para um style sheet em outro arquivo Com este método, você pode fazer com que várias páginas HTML usem style sheets definidos em um único arquivo central. A grande vantagem deste método é que, se você quiser fazer uma mudança nos estilos da sua página, você só precisa alterar em um único local. Para criar um link, deve-se substituir a tag <style> pela tag <link>, e colocar a declaração de estilo dentro da porção do documento. E neste método, não se precisa usar as tags de comentário. Vamos criar o arquivo abaixo: <html >

3 <link rel= stylesheet type="text/css href="def_estilos.css" > <title>mais um Exemplo se Style Sheet</title> </head> <body> <h1>neste exemplo, estou começando a dominar</h1> <p>o Cascading Style Sheets</P> </body> </html> O arquivo "def_estilos.css", com o qual o documento anterior possui um link possui o seguinte código: h1 {font-family:impact; background: yellow;color:red} p {color: green} Na hora da visualização do arquivo HTML, as definições do arquivo no link serão carregadas e usadas no código da página. 3- Adicionar estilos dentro dos comandos HTML Você também pode adicionar definições de estilo dentro do corpo de seu código HTML, através do atributo STYLE. Veja o exemplo: <html> <title>mais um Exemplo se Style Sheet</title> </head> <body> <h1 style="font-family:impact; background:yellow; color:red">neste exemplo, estou começando a dominar</h1> <p style="color: green">o Cascading Style Sheets</P> </body> </html> Uma observação a se fazer aqui é que a definição só vale na linha em que foi definida. Seguindo o exemplo acima, se tivéssemos mais um texto h1, sem o atributo STYLE, ele usaria as definições padrões do browser. Classes As classes são usadas para criar várias instâncias de uma regra de estilo. Ex: <style type="text/css">

4 </style> <title>mais um Exemplo se Style Sheet</title> </head> <body> <p class="first">primeiro parágrafo</p> <p class="second">segundo parágrafo</p> <p class="third">terceiro parágrafo</p> <p> Quarto parágrafo</p> </body> No exemplo anterior estão definidas três instâncias diferentes para exibição do elemento <p>..</p>. Ainda no exemplo anterior, o texto Primeiro prágrafo seria exibido em vermelho, conforme regra p.first { color:red }. Os textos Segundo parágrafo e Terceiro parágrafo seriam exibidos respectivamente nas cores verde e cinza. Já o texto Quarto parágrafo por não possuir regra associada, seria exibido conforme as definições padrão do browser. O nome de uma classe, pode ser qualquer nome, e identificada pelo ".". Pode-se criar classes sem associá-las a uma tag HTML. Por exemplo: p {font-family: Verdana} h1 {font-family: Arial; font-size: 34 pt}.cor_padrao {color: green} Com esta definição, podemos usar class="cor_padrao" dentro das tags <p>.. </p> e <h1>... </h1> no corpo da página. Exemplo: <p class="cor_padrao"> Este é um texto padrão.</p> Selecionadores de ID Funcionam de maneira semelhante às classes. Primeiro, define-se a regra para um determinado id utilizando o "#": #texto_padrao {font-family: verdana; font-size: 12 pt} E depois usamos o estilo da seguinte maneira: <p id="texto_padrao">este é um texto padrão </p> Selecionadores de Contexto Selecionadores de contexto são utilizados quando uma regra depende de alguma condição. Por exemplo, suponha que se queira exibir um texto em negrito na cor

5 vermelha, mas somente se este texto em negrito ocorrer em um parágrafo. Neste caso usaríamos o seguinte código: p b {color:red} Para visualizar o resultado desta regra, digite o texto HTML abaixo e experimente no seu browser: <p> Este é um texto <b>padrão</b></p> Herança Os elementos herdam o estilo de seus pais, o que significa que os elementos assumem as características dos seus elementos pai. Considere o exemplo abaixo: <title> Exemplo </title> <style type= text/css > body { color:red } </style> <body> <p> Esse texto herda as características do elemento pai. </p> </body> O Texto Esse texto herda as características do elemento pai. Será exibido em cor vermelha. FAMÍLIAS DE PROPRIEDADES DAS FOLHAS DE ESTILO As propriedades das Folhas de Estilo podem ser divididas em famílias baseadas no aspecto do elemento ao qual as propriedades são aplicadas. Veremos a seguir as famílias e suas diferentes propriedades e valores que podem ser utilizados nas definições de estilo. Sobre os valores de tamanho, as unidades pré-definidas são: Abreviação cm in mm pt px Nome Centímetro Polegada Milímetro Ponto Pixel Ex.

6 p {font-size:1cm;} Sobre os valores de cores indicados pelo nome, temos as seguintes possibilidades: nome aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow cor azul claro preto azul rosa cinza verde verde-limão marrom azul escuro marrom claro roxo vermelho prata verde-água branco amarelo Propriedades de Fonte Fornecem informações específicas de fonte como tipo, cor e tamanho. font-family: <family-name> <generic-family> Especfica em que tipologia deve ser apresentado o texto. Alguns exemplos de nomes de família são: Times New Roman, Arial, Helvetica e Sans Serif. A generic-family não é específica da família, mas descreve o estilo da fonte, ou seja, serifada, sem serifa, cursiva, fantasiada ou monoespaçada. A tabela abaixo mostra os nomes de fontes genéricas e o nome da fonte com que se parecem. Nome genérico serif sans-serif cursive fantasy monospace Similar a Times New Roman Arial Script Comic Courier New

7 font-style: normal italic oblique Define o estilo do texto a ser apresentado. font-size: <xx-small x-small small medium large x-large xx-large> <comprimento> <percentual> larger smaller ] Define o tamanho da fonte de uma dentre quatro maneiras: 1. tamanho absoluto como small (pequeno) ou x-large (extra grande). É definido pelo navegador e é relativo ao tamanho real do texto; 2. comprimento especifica o tamanho da fonte em pixels ou qualquer outra unidade de medida válida; 3. percentual especifica o tamanho da fonte atual como percentual da fontebase do documento; 4. tamanho relativo como larger (maior que) ou smaller (menor que). Aumenta ou diminui o tamanho do texto em relação tamanho da fonte-base do documento. Valor xx-small x-small small medium large x-large xx-large larger smaller Descrição 50% menor que a fonte x-small 50% menor que a fonte small 50% menor que a fonte medium Um tamanho de fonte de aproximadamente 10 pontos 50% maior que a fonte medium 50% maior que a fonte large 50% maior que a fonte x-large 50% maior que a fonte do elemento pai 50% menor que a fonte do elemento pai font-variant: normal small-caps Determina se a fonte deve ser exibida em texto regular ou em capitular (inicial maiúscula). font-weight: normal bold lighter bolder

8 Especifica o peso ou largura da fonte utilizando tamanho absoluto (medidas de número) ou tamanho relativo lighter (mais claro) ou bolder (mais escuro). O peso 400 representa texto normal, enquanto 700 é texto em negrito. font: <font-weight> <font-style> <font-variant> <font-size> <font-family> Uma versão abreviada das propriedades de família de fontes utilizada para definir todos os aspectos das fontes com um conjunto de itens propriedade-valor. Exemplo: <style type= text/css > p {font-family: Arial sans-serif; font-size: x-large; font-weight: bolder; font-style: normal; line-height: 50%; } </style> Propriedades de Texto Especifica como o texto deve ser apresentado pelo navegador através de propriedades como cor, espaçamento, maiúscula ou minúscula, decoração e alinhamento. color: <nome_da_cor #RRGGBB> Define a cor do texto. text-align: left right center justify Define o alinhamento do texto. text-indent: <comprimento> <percentual> Define o recuo ou indentação para o texto, em relação à margem esquerda. word-spacing: normal <comprimento> Define o espaçamento entre as palavras. Normal é o padrão e comprimento fornece uma medida real. letter-spacing: normal <comprimento> Define o espaçamento entre as letras. Normal é o padrão e comprimento fornece uma medida real. text-transform: capitalize uppercase lowercase none Força o navegador a apresentar todo o texto em letras maiúsculas, minúsculas ou com iniciais maiúsculas, independentemente de como foi digitado.

9 Valor Efeito todas as letras do texto serão em uppercase maiúsculas lowercase capitalize none todas as letras do texto serão em minúsculas a primeira letra de cada palavra estará em maiúscula qualquer um dos valores acima herdados serão ignorados. Exemplo: p {text-transform:capitalize} Cada palavra que estiver no parágrafo terá a sua primeira letra em maiúscula. text-decoration: none underline overline line-through blink Adiciona a decoração do texto. Valor underline overline line-through blink none Efeito texto sublinhado adiciona uma linha sobre o texto adiciona uma linha cortando o texto texto piscante elimina todos os efeitos anteriores vertical-align: base-line sub super top text-top middle bottom text-bottom <percentual> Especifica como o texto deve ser alinhado em relação ao restante do texto e à página. Exemplo: <style type= text/css> p {color: blue; letter-spacing: 5px; word-spacing: 10px; text-transform: capitalize; textalign: center; } </style> Propriedades de Segundo Plano Inclui cor e imagem de segundo plano, além de especificar como as imagens devem ser dispostas lado a lado. As propriedades de segundo plano permitem que diferentes cores

10 e imagens de segundo plano sejam atribuídas a diferentes elementos HTML e que mais de uma de cada seja incluída em uma determinada página. background-color: <nome_da_cor> transparent Define a cor do segundo plano ou a propriedade de transparência (que faz o segundo plano principal aparecer transparente). background-image: URL none Define a imagem do segundo plano. A notação para URL é: url (imagem.extensão) background-repeat: repeat repeat-x repeat-y no-repeat Define a disposição da imagem em relação à repetição. Valores: repeat dispõe a imagem lado a lado; repeat-x duplica a imagem em uma linha reta atravessando a página da direita para a esquerda; repeat-y duplica a imagem em uma linha reta para baixo na página; no-repeat inclui a imagem apenas uma vez. background-attachment: scroll fixed Define o se a imagem de background rolará com o conteúdo da página ou permanecerá fixa quando o usuário usar as barras de rolagem. background-position: top left top center top right center left center center center right bottom left bottom center bottom right Define a posição da imagem de segundo plano em relação à página e ao seu conteúdo. Exemplo: <style type= text/css > p.body {background-image: url (background.gif); background-repeat: no-repeat; background-position: top center; } </style>