Css parte iii_a

1

Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010

CSS Cascading Style SheetsFolhas de Estilo em CascataParte III - a


ListasAs 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


Visualização da utilização: ul {list-style-type: square}


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


.marcador {list-style-image: url(square_color.jpg)}


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


MargensEstas propriedades especificam as margens dos elementos.

Margin-topEspecifica 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}

Atalhop {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


EspaçamentoAs 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-bottomEspecifica 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


Padding-leftEspecifica 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


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




30 px

20 px

30 px

5 px

6


Tipos de bordasAs propriedades a seguir especifica, a espessura, cor e estilo das bordas de um elemento.

Border-top-widthEspecifica 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


Border-top-colorEspecifica a cor da borda superior da área de apresentação do

elemento.Seletor {border-top-color: valor}

Exemplosbody {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


Border-top-styleEspecifica um estilo de borda superior da area de

apresentação do elemento.Seletor {border-top-style: valor}

ExemploH1{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}


Css parte iii_a

Technology

Transcript of Css parte iii_a