Css parte iii_a

618 views

Published on

css /

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

Css parte iii_a

  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 III - a Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010 Listas As propriedades abaixo especificam o tipo e a posição dos itens em uma lista. list-style-type – especifica a aparência do marcador da lista. ul {list-style-type: square} ul {list-style-type: circle} Não utiliza nenhum tipo de marcador.None Utiliza números decimais inteiros. Ex.: 1, 2, 3, etc.Decimal Um pequeno quadrado sólido.Square Um pequeno círculo vazado.Circle Um pequeno círculo sólido, é valor padrão, varia conforme navegador. Disc
  2. 2. 2 Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010 Visualização da utilização: ul {list-style-type: square} Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010 List-style-image – especifica uma imagem que será utilizada como marcador. ul {list-style-image: url(marca.gif)} ul {list-style-image: url(http://www.seusite.com.br/marca.gif)} Não define nenhuma imagem. Terá o valor padrão.None Endereço e nome da imagem que será utilizada como marcador da lista. Arquivo de imagem
  3. 3. 3 Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010 .marcador {list-style-image: url(square_color.jpg)} Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010 Dimensão Width Especifica a largura da área de apresentação do elemento. Seletor {width: valor} Exemplos div {width: 50%} img.logo {width: 250px} Height Especifica a altura da área de apresentação do elemento. Seletor {height: valor} Exemplos div {height: 50%} img.logo {height: 250px} Especifica a largura ou altura em medida fixa.pixel A largura é calculada automaticamente. É o valor padrão.auto Especifica a largura ou altura em medida exataporcentagem DescriçãoValor
  4. 4. 4 Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010 Margens Estas propriedades especificam as margens dos elementos. Margin-top Especifica a margem superior da área de apresentação de um elemento. O valor padrão é 0. Seletor { margin-top: 10%} Div {margin-top: 5%} O mesmo vale para as propriedades de margem direita, esquerda e inferior. Exemplos: p {margin-right: 5%} / body {margin-left: 10px} / pre {margin-bottom: 5px} Atalho p {margin: 4px 2px 4px 2px} Especifica a distância em valores fixos.pixels Especifica a distância em porcentagem relativa ao tamanho da margem padrão. porcentagem DescriçãoValor Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010 Espaçamento As propriedades especificam o tamanho do espaço entre o conteúdo de um elemento e suas bordas. O valor padrão é 0. Padding-top – especifica a distância que o conteúdo de um elemento terá em relação a sua borda superior. pre {padding-top: 10%} P {padding-top: 5px} Padding-right – especifica a distância que o conteúdo de um elemento terá em relação a sua borda direita. body {padding-right: 10%} Padding-bottom Especifica a distância que o conteúdo de um elemento terá em relação a sua borda inferior. Seletor {padding-bottom: valor} h1 {padding-bottom: 5%} p {padding-bottom: 15%}
  5. 5. 5 Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010 Padding-left Especifica a distância que o conteúdo de um elemento terá em relação a sua borda esquerda. Seletor {padding-left: valor} pre {padding-left: 12%} p {padding-left: 5%} Especifica a distância em valores fixos.pixels Especifica a distância em porcentagem relativa ao tamanho da margem padrão. porcentagem DescriçãoValor Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010 Para economizar tempo e deixar o código mais elegante: Usa-se: Seletor {padding: 30px, 20px 30px, 5px} Seletor {padding-top, padding-right, padding-bottom, padding-left} Em vez de usar: Seletor { padding-top: 30px; padding-right: 20px; padding-bottom: 30px; padding-left: 5px } Texto texto texto texto Texto texto texto texto Texto texto texto texto Texto texto texto texto 30 px 20 px 30 px 5 px
  6. 6. 6 Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010 Tipos de bordas As propriedades a seguir especifica, a espessura, cor e estilo das bordas de um elemento. Border-top-width Especifica a largura da borda superior da área de apresentação do elemento. Seletor {border-top-width: valor} Exemplos: Div {border-top-witdh: 2px} Div {border-top-witdh: thin} Esta propriedade vale também para especificar largura de borda esquerda, direita e inferior. Exemplos: Div {border-right-width: 2px} Div {border-left-width: thin} Div {border-bottom-width: thick} Os valores são os mesmos apresentados na tabela acima. Especifica uma largura de borda grossa.Thick Especifica uma largura de borda média. É o valor padrão.Medium Especifica uma largura de borda fina. Depende do navegador.Thin Especifica uma largura fixa para a borda.Pixel DescriçãoValor Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010 Border-top-color Especifica a cor da borda superior da área de apresentação do elemento. Seletor {border-top-color: valor} Exemplos body {border-top-color: #b2b2b2} Esta propriedade vale também para especificar cor de borda esquerda, direita e inferior. Exemplos: pre {border-right-color: #ccffcc} p {border-left- color: #ffffcc} p {border-bottom- color: #ffccff}
  7. 7. 7 Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010 Border-top-style Especifica um estilo de borda superior da area de apresentação do elemento. Seletor {border-top-style: valor} Exemplo H1{border-top-style: Double} Os mesmos valores acima valem para propriedades de estilo de borda esquerda, direita e inferior. Exemplos: Div {border-right-style: inset} Div {border-left-style: solid} Div {border-bottom-style - color: dotted} Atalho: Selector {border: width style color} Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010

×