CSS parte II pdf...
-
Upload
denise-lima -
Category
Documents
-
view
742 -
download
1
description
Transcript of 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
Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010
Tipos de seletores:
- Simples;
-Múltiplo;
- Contextual.
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
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
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
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
Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010
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}
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
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.