SlideShare uma empresa Scribd logo
1 de 7
Baixar para ler offline
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
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 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
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.

Mais conteúdo relacionado

Semelhante a CSS parte II pdf...

Semelhante a CSS parte II pdf... (20)

Aula 07 Css - Parte 1
Aula 07   Css - Parte 1Aula 07   Css - Parte 1
Aula 07 Css - Parte 1
 
Css e iFrames
Css e iFramesCss e iFrames
Css e iFrames
 
Curso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicosCurso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicos
 
Curso HTML módulo 4 - Como buscar um elemento html e personalizá-lo
Curso HTML módulo 4 - Como buscar um elemento html e personalizá-loCurso HTML módulo 4 - Como buscar um elemento html e personalizá-lo
Curso HTML módulo 4 - Como buscar um elemento html e personalizá-lo
 
Desenvolvimento Web Parte II
Desenvolvimento Web Parte IIDesenvolvimento Web Parte II
Desenvolvimento Web Parte II
 
Post 4
Post   4Post   4
Post 4
 
Css parte I
Css parte ICss parte I
Css parte I
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Css 3
Css 3Css 3
Css 3
 
3844 css
3844 css3844 css
3844 css
 
HTML
HTMLHTML
HTML
 
CSS3: CSS3 (aula 2)
CSS3: CSS3 (aula 2)CSS3: CSS3 (aula 2)
CSS3: CSS3 (aula 2)
 
Aula Introdução a Linguagem XML
Aula Introdução a Linguagem XMLAula Introdução a Linguagem XML
Aula Introdução a Linguagem XML
 
0. Introdução ao HTML pptx.pdf
0. Introdução ao HTML pptx.pdf0. Introdução ao HTML pptx.pdf
0. Introdução ao HTML pptx.pdf
 
Css cascading style sheet
Css cascading style sheetCss cascading style sheet
Css cascading style sheet
 
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
 
2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf
 
Curso de XHTML
Curso de XHTMLCurso de XHTML
Curso de XHTML
 
Tutorial Css Parte 1
Tutorial Css  Parte 1Tutorial Css  Parte 1
Tutorial Css Parte 1
 

Mais de Denise Lima

Alfabetismo visual elementos_sintaticos2
Alfabetismo visual elementos_sintaticos2Alfabetismo visual elementos_sintaticos2
Alfabetismo visual elementos_sintaticos2Denise Lima
 
Movimentos artísticos início século XX
Movimentos artísticos início século XXMovimentos artísticos início século XX
Movimentos artísticos início século XXDenise Lima
 
Bauhaus & Estilo Internacional
Bauhaus & Estilo InternacionalBauhaus & Estilo Internacional
Bauhaus & Estilo InternacionalDenise Lima
 
Artigo cientifico
Artigo cientificoArtigo cientifico
Artigo cientificoDenise Lima
 
Orientação para o projeto de pesquisa
Orientação para o projeto de pesquisaOrientação para o projeto de pesquisa
Orientação para o projeto de pesquisaDenise Lima
 
Tecnicas para composição.
Tecnicas para composição.Tecnicas para composição.
Tecnicas para composição.Denise Lima
 
Classificacao tipografia
Classificacao tipografiaClassificacao tipografia
Classificacao tipografiaDenise Lima
 
Dicas assombrosas
Dicas assombrosasDicas assombrosas
Dicas assombrosasDenise Lima
 
Alternativas ao estilo internacional
Alternativas ao estilo internacionalAlternativas ao estilo internacional
Alternativas ao estilo internacionalDenise Lima
 
Design antes do design
Design antes do designDesign antes do design
Design antes do designDenise Lima
 
Dreamweaver - configurando o servidor remoto
Dreamweaver - configurando o servidor remotoDreamweaver - configurando o servidor remoto
Dreamweaver - configurando o servidor remotoDenise Lima
 
Trabalho layout elastico
Trabalho layout elasticoTrabalho layout elastico
Trabalho layout elasticoDenise Lima
 
Css – cascading style sheets
Css – cascading style sheetsCss – cascading style sheets
Css – cascading style sheetsDenise Lima
 
Material css parte I
Material css parte IMaterial css parte I
Material css parte IDenise Lima
 

Mais de Denise Lima (20)

Alfabetismo visual elementos_sintaticos2
Alfabetismo visual elementos_sintaticos2Alfabetismo visual elementos_sintaticos2
Alfabetismo visual elementos_sintaticos2
 
Movimentos artísticos início século XX
Movimentos artísticos início século XXMovimentos artísticos início século XX
Movimentos artísticos início século XX
 
Pós modernismo
Pós modernismoPós modernismo
Pós modernismo
 
Pop art
Pop artPop art
Pop art
 
Pop art
Pop artPop art
Pop art
 
Bauhaus & Estilo Internacional
Bauhaus & Estilo InternacionalBauhaus & Estilo Internacional
Bauhaus & Estilo Internacional
 
Artigo cientifico
Artigo cientificoArtigo cientifico
Artigo cientifico
 
Orientação para o projeto de pesquisa
Orientação para o projeto de pesquisaOrientação para o projeto de pesquisa
Orientação para o projeto de pesquisa
 
Tecnicas para composição.
Tecnicas para composição.Tecnicas para composição.
Tecnicas para composição.
 
Classificacao tipografia
Classificacao tipografiaClassificacao tipografia
Classificacao tipografia
 
Dicas assombrosas
Dicas assombrosasDicas assombrosas
Dicas assombrosas
 
Raizes design
Raizes designRaizes design
Raizes design
 
Alternativas ao estilo internacional
Alternativas ao estilo internacionalAlternativas ao estilo internacional
Alternativas ao estilo internacional
 
Design antes do design
Design antes do designDesign antes do design
Design antes do design
 
Dreamweaver - configurando o servidor remoto
Dreamweaver - configurando o servidor remotoDreamweaver - configurando o servidor remoto
Dreamweaver - configurando o servidor remoto
 
Trabalho layout elastico
Trabalho layout elasticoTrabalho layout elastico
Trabalho layout elastico
 
Css parte iii_b
Css parte iii_bCss parte iii_b
Css parte iii_b
 
Css parte iii_a
Css parte iii_aCss parte iii_a
Css parte iii_a
 
Css – cascading style sheets
Css – cascading style sheetsCss – cascading style sheets
Css – cascading style sheets
 
Material css parte I
Material css parte IMaterial css parte I
Material css parte I
 

CSS parte II pdf...

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