O documento discute propriedades CSS para formatar listas, dimensões, margens, espaçamento interno e tipos de borda. É descrito como configurar lista com marcadores em formatos como círculos e quadrados, além de definir imagens personalizadas. Propriedades como 'width', 'height', 'margin' e 'padding' controlam tamanho e espaçamento. Estilos de borda como 'solid', 'dotted' e 'double' também são explicados.

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