CSS parte II pdf...

883 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
883
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CSS parte II pdf...

  1. 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. 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. 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. 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. 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. 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. 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.

×