1. 1
Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010
CSS
Cascading Style Sheets
Folhas de Estilo em Cascata
Parte II
Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010
Tipos de seletores:
- Simples;
- Múltiplo;
- Contextual.
2. 2
Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010
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.
Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010
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.
3. 3
Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010
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).
Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010
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>
4. 4
Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010
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.
Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010
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.
5. 5
Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010
Tabela de unidades absolutas
Outra unidade de medida tipográfica.
1pc = 12pt
Pc
Ponto, unidade de medida tipográficapt
milímetromm
centímetrocm
polegadain
Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010
Tabela de unidades relativas
É calculado com base na resolução da área de exibição do
dispositivo de saída, normalmente um monitor.
px
É calculado com base no tamanho das letras minúsculas do
elemento em questão. Normalmente é utilizada a letra x
como referência.
ex
É calculado com base na altura da letra do elemento em
questão, o qual é definido pela propriedade font-size.
em
Porcentagem relativa ao tamanho padrão ou ao tamanho
herdado de uma medida de outro elemento.
%
6. 6
Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010
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}
Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010
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}
7. 7
Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010
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}
Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010
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.