Baixe Parâmetros Básicos de Tecnologia CSS em Designs de Páginas Web e outras Esquemas em PDF para Direito falimentar, somente na Docsity!
Atualização: 18/10/
Guia de Referência CSS Volume 1 : Parâmetros Básicos
Prof. Daniel Caetano
Objetivo : Apresentar os parâmetros básicos que podem ser modificados com a
tecnologia CSS.
Bibliografia : W3, 2009; CASCADE, 2006; RAMALHO, 1999.
INTRODUÇÃO
O Objetivo deste texto é servir de apoio na criação de sites web, indicando todas as
características básicas de um documento HTML que podem ser modificadas com o uso da
tecnologia CSS.
Não se pretende com este documento explicar o uso da tecnologia CSS, visto que
isso foi feito em aula específica, mas sim apresentar uma grande variedade de propriedades
cuja discussão não é possível em aula, devido a restrições de tempo. Também não se
imagina que esse texto seja completo. Para uma especificação completa, veja os sites
https://w3.org/ e https://w3schools.com/
1. ESTILOS PARA PLANO DE FUNDO (Background)
O plano de fundo é uma propriedade clássica, que serve para modificar a cor ou
imagem do fundo de qualquer elemento gráfico do HTML. Isso inclui o fundo da página, as
barras HR, as tabelas, dentre outros. As propriedades principais de mudança de plano de
fundo são:
Nome Função
background-color Muda a cor do fundo do elemento
rgb(vermelho, verde, azul) / #RRGGBB transparent
background-image Muda a imagem de fundo do elemento
url("nome.jpg") / none
background-repeat Indica se a imagem de fundo deve se repetir ou não
repeat / repeat-x repeat-y / no-repeat
background-attachment Indica se a imagem de fundo é fixa ou não
scroll / fixed
background-position Indica posição inicial da imagem de fundo
xpos ypos / x% y% top/center/bottom left/center/right
Atualização: 18/10/
Exemplo : faz o fundo da página ter a cor azul, e apresenta uma imagem que serve de
fundo para uma barra no topo da página, repetida horizontalmente:
body { background-color: rgb(0,0,200); background-image: url("bar.jpg"); background-position: top left; background-repeat: repeat-x; }
2. ESTILOS PARA TEXTO (text)
Todo elemento de texto usado no HTML pode ser modificado visualmente de
diversas maneiras, sendo as propriedades de texto justamente as mais comumente
modificadas. As propriedades de mudança de texto são:
Nome Função
color Muda a cor do texto
rgb(vermelho, verde, azul) / #RRGGBB
direction Muda a direção do texto (esq->dir / dir->esq)
ltr / rtl
line-height Muda a distância entre linhas
normal / número comprimento / %
letter-spacing Aumenta ou diminui o espaço entre caracteres
normal / comprimento
text-align Alinhamento de texto no elemento
left / right center / justify
text-decoration Adiciona uma decoração no texto
none / underline overline / line-through / blink
text-indent Adiciona indentação à primeira linha de texto em um
elemento
comprimento / %
text-shadow Adiciona sombra no texto
none / cor / comprimento
text-transform Controla as letras em um elemento
none / capitalize uppercase / lowercase
unicode-bidi Controle de display bidirecional do Unicode
normal / embed bidi-override
white-space Define como os espaços serão processados no elemento
normal / pre nowrap
word-spacing Aumenta ou diminui o espaçamento entre palavras
normal / comprimento
Atualização: 18/10/
Exemplo : modifica a fonte de título para o tipo Verdana, Arial ou o genérico "sans-
serif", com tamanho 28 pixels, em itálico e bold, e com todas as letras em maiúsculas:
h1 { font-family: verdana, arial, sans-serif; font-size: 28px; font-style: italic; font-weight: bold; font-variant: small-caps; }
4. ESTILOS DE BORDAS (border)
Todo elemento HTML pode ter uma borda, mesmo que ela não seja definida por
padrão. A borda é como uma moldura que fica ao redor do elemento e é comum que o
designer queira modificar suas propriedades. As propriedades de mudança de borda são:
Nome Função
border-color Muda cor das bordas
rgb (vermelho, verde, azul) / #RRGGBB
border-style Muda o estilo das bordas
none / hidden dotted / dashed solid / double groove / ridge inset / outset
border-width Muda a espessura da borda
thin / medium thick / comprimento
border-bottom - ___ Muda a propriedade só para a borda inferior
border-left-___ Muda a propriedade só para a borda esquerda
border-right-___ Muda a propriedade só para a borda direita
border-top-___ Muda a propriedade só para a borda superior
Exemplo 1 : liga toda a borda de um parágrafo, em cinza escuro, com estilo
"afundado", de espessura fina:
p { border-color: rgb(60,60,60); border-style: inset; border-width: thin; }
Atualização: 18/10/
Exemplo 2 : apresenta as bordas direita e inferior de um parágrafo, na cor cinza
escura, em formato arredondado e espessura grossa na inferior e média na direita:
p { border-right-color: rgb(60,60,60); border-right-style: ridge; border-right-width: medium; border-bottom-color: rgb(60,60,60); border-bottom-style: ridge; border-bottom-width: thick; }
5. ESTILOS DE LINHA DE CONTORNO (outline)
Algumas vezes é desejável modificar as propriedades das linhas de contorno de
algum elemento. A linha de contorno fica no exterior da borda do elemento. Isso é feito
com estas propriedades, que funcionam de forma muito similar às propriedades de borda,
com a diferença de não ser possível especificar separadamente cada uma das faces da linha
de contorno. As propriedades principais de linha de contorno são:
Nome Função
outline-color Muda cor do contorno
rgb(vermelho, verde, azul) / #RRGGBB invert
outline-style Muda o estilo do contorno
none / dotted dashed / solid double / groove ridge / inset outset
outline-width Muda a espessura do contorno
thin / medium thick / comprimento
Exemplo : coloca uma linha de contorno vermelha sólida e fina em um parágrafo
p { outline-color: rgb(255,0,0); outline-style: solid; outline-width: thin; }
Atualização: 18/10/
7. ESTILOS DE MARCADORES DE LISTA (List)
As listas padrão do HTML podem ser muito feias. Para modificar o estilo das listas,
existem os seguintes parâmetros:
Nome Função
list-image Muda a imagem do marcador da lista
url("image.jpg") / none
list-style-position Indica a posição do marcador na lista
inside / outside
list-style-type Indica o tipo de marcador de lista
none / disc circle / square decimal / decimal-leading-zero lower-roman / upper-roman lower-alpha / upper-alpha lower-greek / lower-latin upper-latin / hebrew armenian / georgian cjk-ideographic / hiragana katakana / hiragana-iroha katakana-iroha
marker-offset Modifica o distanciamento entre marcador e texto
auto / comprimento
Exemplo : Muda o elemento de lista para que a imagem do marcador de lista como
sendo a imagem seta.gif :
li { list-image: url("seta.gif"); }
Exemplo 2 : Muda o elemento de lista para que fique sem marcador de lista:
li { list-style-type: none; }
Atualização: 18/10/
8. ESTILOS DOS ELEMENTOS DAS TABELAS (Table)
Algumas propriedades de tabelas podem ser mudadas também, com os seguintes
parâmetros:
Nome Função
border-colapse Indica se as bordas de tabelas são sobrepostas ou não
(se collapse, mostra apenas uma linha da tabela)
collapse / separate
border-spacing Distância que separa células (apenas para "separate")
comprimento comprimento
caption-side Posição da legenda da tabela
top / bottom left / right
empty-cells Indica se as células vazias devem ser mostradas
show / hide
table-layout Muda o algoritmo para mostrar as células, linhas e colunas
auto / fixed
Exemplo : definir para que uma tabela tenha legenda na parte superior, exibindo as
células vazias:
table { caption-side: top; empty-cells: show; }
9. BIBLIOGRAFIA
CASCADE Style Sheets, level 2 revision 1: CSS 2.1 Specification - W3C Working Draft 06
November 2006. Disponível em < http://www.w3.org/TR/CSS21/ >. Visitado em 21 de
Dezembro de 2006.
W3 schools - CSS Tutorial. Disponível em < http://www.w3schools.com/ >. Visitado em 10
de Março de 2009.
RAMALHO, J.A. HTML 4 Prático e Rápido. Editora Berkeley, 1999.
