FOLHAS DE ESTILO EM CASCATA CSS (Cascading Style

Transcrição

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.
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>
<head>
<style type="text/css">
<!-h1 {font-family:impact; background: yellow;color:red}
p {color: green}
-- >
</style>
<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>
Quando o style sheet é incluído desta maneira, as definições colocadas ali, valem para
toda a extensão daquele arquivo HTML. Este é o método mais apropriado quando
queremos incluir style sheets em uma página de cada vez.
O atributo TYPE="text/css" quer dizer que o estilo se trata de um tipo MIME, para que
os browsers que não suportam CSS ignorem o código.
Os tags de comentário () 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 <head> do documento. E neste método,
não se precisa usar as tags de comentário. Vamos criar o arquivo abaixo:
<html >
<head>
<link rel=”stylesheet” type="text/css” href="def_estilos.css" >
</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>
<head>
</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">
<!-p.first {color: red}
p.second {color: green}
p.third {color: gray}
-->
</style>
<head>
</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
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:
<head>
<title> Exemplo </title>
<style type=”text/css”>
body { color:red }
</style>
<head>
<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
Ex.
Nome
Centímetro
Polegada
Milímetro
Ponto
Pixel
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
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 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | lighter |
bolder
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.
Valor
Efeito
todas as letras do texto serão em
uppercase
maiúsculas
todas as letras do texto serão em
lowercase
minúsculas
a primeira letra de cada palavra
capitalize
estará em maiúscula
qualquer um dos valores acima
none
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
Efeito
texto sublinhado
adiciona uma linha sobre o texto
adiciona uma linha cortando o
line-through
texto
blink
texto piscante
elimina
todos
os
efeitos
none
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
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>

FOLHAS DE ESTILO EM CASCATA CSS (Cascading Style

Transcrição

Documentos relacionados

SmallVille finalmente na ativa!

css_ap

HyFlex® 11-500 - Ansell Catalogue

XII Campeonato Brasileiro

CSS 1 - Wiki Cursos IFPR

Cascading Style Sheets II

Untitled - Athié Wohnrath

VM Lojas Vips – 09/05/ 2013

CSS CASCADING STYLE SHEETS

e! entertainment e the style network

Mais uma vidente de internet – Esmeralda vidente.

Sensoriamento de Fechamento de Chaves Seccionadoras

OSiS Style Shifters - Schwarzkopf Professional

Meleia Laf

o livro, um ícone cultural.

Apostila CSS