CSS Seletores e Propriedades

Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010
CSS
Cascading Style Sheets
Folhas de Estilo em Cascata
Parte II

Tipos de seletores:
- Simples;
- Múltiplo;
- Contextual.

Seletor Simples
Define o nome de um elemento que receberá as
informações de estilo.
pre {propriedade: valor}
Atribui um estilo a todas vezes em que aparece o
elemento pre no documento html.

Seletor Múltiplo
Define vários elementos html, separados por
vírgulas, que receberão as mesmas informações
de estilos.
h1, h2, h3, h4 {propriedade: valor}
Atribui um mesmo estilo aos elementos h1, h2,
h3 e h4.

Seletor Contextual
Define um elemento html que receberá as
informações sobre estilos, mas somente quando
a mesma estiver subordinada a outro elemento.
p b {propriedade: valor}
Atribui um estilo a todo elemento b que estiver
dentro de um elemento P (elemento parágrafo).

Atributo Class
Define o valor para um atributo class de um ou
mais elementos html, os quais receberão o estilo
através do css. Utiliza-se o valor do atributo em
questão precedido de um ponto (.) como
identificação do seletor.
No CSS:
.teste {propriedade: valor}
No HTML:
<p class=“teste”>texto</p>

Herança
O CSS permite que as regras de estilo
sejam herdadas entre os elementos.
O elemento de maior posição na
hierarquia de um documento html é a tag
<body>, pois é este elemento que contém
todos os outros. Dessa forma as marcações
de estilo aplicadas ao elemento body são
herdadas por todas os elementos do
documento html.

Encadeamento
No documento html pode haver mais de uma
forma de estilo sendo utilizado na formatação do
documento. Estilos in line, incorporados e
externos podem ser combinados e estes possuem
uma hierarquia em sua aplicação. O navegador
irá considerar primeiro o in line, depois o
incorporado e por último o externo.

Tabela de unidades absolutas
in polegada
cm centímetro
mm milímetro
pt Ponto, unidade de medida tipográfica
Pc Outra unidade de medida tipográfica.
1pc = 12pt

Tabela de unidades relativas
% Porcentagem relativa ao tamanho padrão ou ao tamanho
herdado de uma medida de outro elemento.
em É calculado com base na altura da letra do elemento em
questão, o qual é definido pela propriedade font-size.
ex É calculado com base no tamanho das letras minúsculas do
elemento em questão. Normalmente é utilizada a letra x
como referência.
px É calculado com base na resolução da área de exibição do
dispositivo de saída, normalmente um monitor.

Formatação de letras
FONT – define as características das fontes do documento.
Font-family – especifica quais fontes serão utilizadas por ordem de
preferência.
Fontes genéricas: serif (com serifa), sans-serif (sem serifa), cursive
(manuscrita), fantasy (decorativa) e monospace (com caracteres de
tamanho fixo).
p {font-family: arial, helvetica, sans-serif}
Font-weight – determina a espessura da fonte. É bastante utilizada
para aplicação de negrito.
pre {font-weight: bold}

Font-style – especifica um efeito de inclinação a ser
inclinação a ser aplicado ao texto contido no elemento.
h1 {font-style: normal}
h2 {font-style: italic}
h3 {font-style: obliqué}
Font-variant – transforma letras minúsculas de um texto
em letras maiúsculas, com a altura um pouco menor que
as maiúsculas normais do texto.
Div {font-variant: small-caps}
Font-size – especifica o tamanho da fonte.
h1 {font-size: 10pt}

Cores e Fundos
Essas propriedades definem as cores do texto e as cores ou
imagens aplicadas ao fundo do elemento.
Color – especifica a cor do texto contido no elemento.
Body {color: #000000}
Background-color – especifica a cor de fundo de um
elemento.
h1 {background-color: #00ff00}

Background-image – especifica uma imagem que será
utilizada como fundo do elemento.
Background-repeat – define como a imagem de fundo será
repetida.
Body {
background-image: url(fundo.gif);
background-repeat: no-repeat
}
Valores para background-repeat:
Repeat = imagem repete em sentido horizontal e vertical;
Repeat-x = imagem repete no sentido horizontal;
Repeat – y = imagem repete no sentido vertical.

CSS Seletores e Propriedades

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie CSS Seletores e Propriedades

Ähnlich wie CSS Seletores e Propriedades (20)

Mehr von Denise Lima

Mehr von Denise Lima (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

CSS Seletores e Propriedades