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.
Marketing Digital Somos capaces de ir al ritmo de la tecnologíaMarketinginteli
Conferencia dictada en la Universidad San Buenaventura de Bogotá sobre como desarrollar estrategias de mercadeo digital dirigidas al mercado de las universidades
Marketing Digital Somos capaces de ir al ritmo de la tecnologíaMarketinginteli
Conferencia dictada en la Universidad San Buenaventura de Bogotá sobre como desarrollar estrategias de mercadeo digital dirigidas al mercado de las universidades
Elementos essenciais de CSS para desenvolvedores web. Exemplos de páginas HTML com estilos definidos via CSS. Inclui botões, fontes, layouts, frameworks e bibliotecas. Vários links apontam para fontes adicionais.
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Cristofer Sousa
Essa apresentação visa dar enfase para quem deseja conhecer HTML5, CSS3 e o conceito de prototipagem, a partir disso foi possivel fazer grupo de trabalhos para criação de desenvolvimento de interfaces para sistemas web.
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