Css parte II
-
Upload
denise-lima -
Category
Education
-
view
676 -
download
1
description
Transcript of Css parte II
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.
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.
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>
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.
Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010
Tabela de unidades absolutasin polegada
cm centímetro
mm milímetro
pt Ponto, unidade de medida tipográfica
Pc Outra unidade de medida tipográfica. 1pc = 12pt
Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010
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.
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}
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.