• Like

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

CSS parte II pdf...

  • 725 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
725
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 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. Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010 1
  • 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. 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 2
  • 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). 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 3
  • 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. 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 4
  • 5. Tabela de unidades absolutas in 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 5
  • 6. 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} Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010 6
  • 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} 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. Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010 7