CSS parte II pdf...

1

Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010

CSS Cascading Style SheetsFolhas de Estilo em CascataParte II


Tipos de seletores:

- Simples;

-Múltiplo;

- Contextual.

2


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.

3


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>

4


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.

5


Tabela de unidades absolutas

Outra unidade de medida tipográfica. 1pc = 12pt

Pc

Ponto, unidade de medida tipográficapt

milímetromm

centímetrocm

polegadain


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


Formatação de letrasFONT – 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}

7


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 parte II pdf...

Documents

Transcript of CSS parte II pdf...