Web Design - CSS

Web Desisign - CSS
Web Design - CSS

CSS
- O que CSS?
- Sintaxe CSS
- Como inserir CSS em HTML
- Propriedades CSS
Contedo
O que CSS?
CSS a sigla para Cascading Style Sheets, que pode ser traduzida
para Folhas de Estilo em Cascata. A especificao CSS1 foi criada em
1996 pela W3C (World Wide Web Consortium www.w3c.org), com o
objetivo de substituir as marcaes HTML de formatao, separando
assim a camada de apresentao (CSS) e a camada de informao
(XHTML ou HTML estrutural).
As CSS uma linguagem simples e de fcil aprendizagem para a
criao de layouts para web sites. trabalho das CSS controlar cores,
tamanho, tipografia e posicionamento dos elementos em um site.
Por que devemos utilizar CSS?
A CSS, apesar de simples e de fcil aprendizagem, uma poderosa e
precisa linguagem de formatao, que reduz drasticamente o consumo
de banda do usurio pelo site. uma linguagem padronizada pela
W3C e bem suportada por todos os navegadores modernos.
Quais as vantagens em se usar CSS?
Separando a formatao do contedo, a manuteno do site torna-se
mais fcil. Alteraes no layout podem ser feitas sem a necessidade
de se alterar o documento XHTML, e o contrrio tambm
verdadeiro;
1- Reduz consideravelmente a carga de carregamento de um
documento XHTML, tomando-a mais leve (com menos kilobytes) e
mais rpida (menos tempo de espera de carregamento por parte do
usurio);
2- Reduz o consumo de banda do servidor por parte do site;
3- Permite portar o site para diversos dispositivos, como por exemplo,
pocketpcs, impressoras, WebTVs, navegadores para deficientes
visuais, etc;
Separar a formatao do contedo torna o site mais acessvel.
Sintaxe CSS
Escrever regras CSS muito simples. A sintaxe segue o seguinte
modelo:
seletor {propriedade: valor; }
Quando existe mais de uma propriedade, costuma-se ndentar a
declarao para facilitar a leitura posterior:
seletor {
propriedade: valor;
propriedade: valor;
propriedade: valor;
}
Observe que cada linha de propriedade termina com ponto e vrgula.
As folhas de estilo so case-insensitve.
Os Seletores CSS podem ser escritos com:
Caracteres alfa-numricos (letras de a-z, e nmeros 0-9);
Underscore (_)
Hfen(-)
Ao se escrever seletores CSS deve-se evitar:
1. palavras acentuadas;
2. iniciar uma declarao com hfen;
3. iniciar uma declarao com underscore;
4. iniciar uma declarao com um nmero;
Comentrio em CSS
Deve-se usar os delimitadores /* */, e deve ser usado para fazer
comentrio de uma nica linha de texto ou de um bloco de texto.
01| Assunto: CSS
Web Desisign - CSS
Como inserir um CSS num documento
HTML
Existem 3 formas de inserir Folhas de estilo em um documento CSS:
estilos inline, estilos incorporados, e estilos externos.
Folhas de estilo inline
Folhas de estilo inline so declaradas diretamente na marcao HTML
que se quer formatar, atravs do atributo style. Sua formatao s
vlida para aquele elemento em particular. Seu uso deve ser
extremamente limitado ou restrito a poucas pginas, pois essa tcnica
retira toda a flexibilidade das CSS: quaisquer mudanas na formatao
dever ser feita diretamente na marcao que se deseja mudar.
Exemplo:
<p style="color: #ff0000; font-weight: bold; text-align: center;
border: 1px solid #ff0000">O texto deste pargrafo ser vermelho,
negrito e centralizado, e ter uma borda vermelha de 1 pixel de
largura ao redor dele.</P>
Folhas de estilo incorporadas
Folhas de estilo incorporadas s so vlidas para apenas um
documento especfico. A especificao das CSS feita dentro do
elemento <head>, atravs da marcao <style>.
Os atributos possveis para a marcao <style> so:
type: especifica o tipo de contedo dentro do elemento. Seu valor
para as CSS text/css;
media: especifica o tipo de mdia ao qual sero aplicados os estilos.
Exemplo:
01| Assunto: CSS
<head>
<style type="text/css">
P {color: #ff0000; font-weight: bold; text-align: center; border: 1px
solid #ff0000;}
</style></head>
<body>
<p>O texto deste pargrafo ser vermelho, negrito e centralizado, e
ter uma borda vermelha de 1 pixel de largura ao redor dele.</P>
Folhas de estilo externas
um simples arquivo de texto, mas com extenso css, onde ficam
contidas as declaraes das regras de estilo. Este arquivo vinculado
a um ou mais documentos HTML atravs da marcao <link>, que
deve ser escrita dentro do cabealho do documento, ou seja, dentro
da marcao <head></head>.
Esta a melhor forma de se inserir as CSS em um site. Toda a
formatao do site ficar contida em um nico arquivo, e qualquer
alterao neste arquivo, mudar a formatao em todos os demais
documentos do site.
Os atributos possveis para a marcao <link > para as CSS so:
href: deve indicar o local em que o arquivo css est armazenado. Seu
valor deve ser uma URL.
type: especifica o tipo de contedo dentro do elemento. Seu valor
para as CSS text/css;
rel: especifica o tipo de relao existente entre o documento atual e o
documento para qual a marcao <link /> est apontando. Seus
valores podem (para folhas de estilo) ser: stylesheet e alternate
stylesheet.
Exemplo:
<head>
<link rel="stylesheet" type="text/css" href="estilos/principal.css" />
</head>
Web Desisign - CSS
A propriedade font
As fontes nos elementos HTML
As propriedades para as fontes, definem as caractersticas (os valores
na regra CSS) das letras que constituem os textos dentro dos
elementos HTML.
As propriedades bsicas para fontes e que abordaremos neste tutorial
so as listadas abaixo:
color:...................cor da fonte
font-family:..........tipo de fonte
font-size:.............tamanho de fonte
font-style:............estilo de fonte
font-variant:.........fontes maisculas de menor altura
font-weight:.........quanto mais escura a fonte (negrito)

Valores vlidos para as propriedades da fonte
color:
1. cdigo hexadecimal: #FFFFFF
2. cdigo rgb: rgb(255,235,0)
3. nome da cor: red, blue, green...etc
font-family:
1. family-name: define-se pelo nome da fonte,
ex:"verdana", "helvetica", "arial", etc.
2. generic-family: define-se pelo nome genrico,
ex:"serif", "sans-serif", "cursive", etc.
font-size:
1. Xx-small
2. X-small
3. Small
4. Medium
5. Large
6. X-large
7. Xx-large
8. Smaller
9. Larger
10.length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)
11.%
font:....................maneira abreviada para todas as
propriedades
font-style:
1. normal: fonte normal na vertical
2. italic: fonte inclinada
3. oblique:fonte obliqua
font-variant:
1. normal: fonte normal
2. small-caps: transforma em maisculas de menor altura
font-weight:
1. Normal
2. Bold
3. Bolder
4. Lighter
5. 100
6. 200
7. 300
8. 400
9. 500
10.600
11.700
12.800
13.900
A propriedade text
Os textos nos elementos HTML
As propriedades para textos, definem as caractersticas (os valores na
regra CSS) dos textos inseridos dentro dos elementos HTML.
As propriedades para textos so as listadas abaixo:
color.....................cor do texto;
letter-spacing........espaamento entre letras;
word-spacing.........espaamento entre palavras;
text-align..............alinhamento do texto;
text-decoration......decorao do texto;
text-indent............recuo do texto;
text-transform.......forma das letras;
direction...............direo do texto;
white-space.........como o browser trata os espaos em branco;
02| Assunto: Propriedades CSS
Web Desisign - CSS
Valores vlidos para as propriedades do texto
color:
2. cdigo rgb: rgb(255,235,0)
letter-spacing:
1. normal: o espaamento default
2. lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)
So vlidos valores negativos
word-spacing:
1. normal: o espaamento default
So vlidos valores negativos
text-align:
1. left: alinha o texto a esquerda
2. right: alinha o texto a direita
3. center: alinha o texto no centro
4. justify: fora o texto a ocupar toda a extenso da linha da
esquerda a direita
text-decoration:
1. none: nenhuma decorao
2. underline: coloca sublinhado no texto
3. overline: coloca um sobrelinhado no texto
4. line-through: coloca uma linha em cima do texto
5. blink: faz o texto piscar
text-indent:
2. % : porcentagem da largura do elemento pai
text-transform:
1. none: texto normal
2. capitalize: todas as primeiras letras do texto em maisculas
3. uppercase: todas as letras do texto em maisculas
4. lowercase: todas as letras do texto em minsculas
direction:
1. ltr: texto escrito da esquerda para a direita
2. rtl: texto escrito da direita para a esquerda
white-space:
1. normal: os espaos em branco sero ignorados pelo browser
2. pre: os espaos em branco sero preservados pelo browser
3. nowrap: o texto ser apresentado todo ele numa linha nica na
tela. No h quebra de linha at ser encontrada uma tag <br>
A propriedade background
O fundo dos elementos HTML
A propriedade background define as caractersticas (os valores na
regra CSS) do fundo dos elementos HTML.
As propriedades background so as listadas abaixo:
background-color............... cor do fundo;
background-image............. imagem de fundo;
background-repeat............. maneira como a imagem de fundo
posicionada;
background-attachment.......se a imagem de fundo "rola" ou
no com a tela;
background-position............como e onde a imagem de fundo
posicionada;

Valores vlidos para as propriedades do fundo
background-color:
2. cdigo rgb: rgb(255,235,0)
4. transparente: transparent
background-image:
1. URL: url(caminho/imagem.gif)
background-repeat:
1. no repete: no-repeat
2. repete vertical e horizontal: repeat
3. repete vertical: repeat-y
4. repete horizontal: repeat-x
background-attachment:
1. imagem fixa na tela: fixed
2. imagem "rola" com a tela: scroll
background........................maneira abreviada para todas as
propriedades;
Web Desisign - CSS
background-position:
1. x-pos y-pos
2. x-% y-%
3. top left
4. top center
5. top right
6. center left
7. center center
8. center right
9. bottom left
10.bottom center
11.bottom right
A propriedade border
As bordas nos elementos HTML
As propriedades para as bordas, definem as caractersticas (os valores
na regra CSS) das quatro bordas de um elemento HTML.
As propriedades para as bordas so as listadas abaixo:
border-width:................espessura da borda
border-style:................estilo da borda
border-color:................cor da borda
border-top-width:............espessura da borda superior
border-top-style:............estilo da borda superior
border-top-color:............cor da borda superior
border-right-width:.........espessura da borda direita
border-right-style:..........estilo da borda direita
border-right-color:..........cor da borda direita
border-bottom-width:.........espessura da borda inferior
border-bottom-style:.........estilo da borda inferior
border-bottom-color:.........cor da borda inferior
border-left-width:...........espessura da borda esquerda
border-left-style:...........estilo da borda esquerda
border-left-color:...........cor da borda esquerda
:...maneira abreviada para todas as propriedades da
borda superior
:..maneira abreviada para todas as propriedades da
borda direita
:..maneira abreviada para todas as propriedades
da borda inferior
:..maneira abreviada para todas as propriedades da
borda esquerda

Valores vlidos para as propriedades das bordas
color:
2. cdigo rgb: rgb(255,235,0)
style:
1. none: nenhuma borda
2. hidden: equivalente a none
3. dotted: borda pontilhada
4. dashed: borda tracejada
5. solid: borda contnua
6. double: borda dupla
7. groove: borda entalhada
8. ridge: borda em ressalto
9. inset: borda em baixo relevo
10.outset: borda em alto relevo
width:
1. thin: borda fina
2. medium: borda mdia
3. thick: borda grossa
4. length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)
border-top
border-right
border-bottom
border-left
border:.........maneira abreviada para todas as quatro bordas
Web Desisign - CSS
A propriedade margin
As margens nos elementos HTML
A propriedade para margens, define um valor para espessura das
margens dos elementos HTML.
As propriedades para margens so as listadas abaixo:
margin-top..........define a margem superior;
margin-right........define a margem direita;
margin-bottom.......define a margem inferior;
margin-left.........define a margem esquerda;
Valores vlidos para a propriedade margin

1. auto: valor default da margem
3. %: porcentagem da largura do elemento pai
A propriedade padding
Os espaamentos nos elementos HTML
A propriedade para espaamentos (alguns traduzem como
"enchimento"), define um valor para os espaamentos entre o
contedo e as bordas dos elementos HTML.
As propriedades para espaamentos so as listadas abaixo:
padding-top..........define a espaamento superior;
padding-right........define a espaamento direita;
padding-bottom.......define a espaamento inferior;
padding-left.........define a espaamento esquerda;
Valores vlidos para as propriedades de espaamento

1. auto: valor default da margem
3. %: porcentagem da largura do elemento pai
margin..............maneira abreviada para todas as margens
padding..............maneira abreviada para todas os
espaamentos
A propriedade list
Mudando o estilo das listas HTML
A propriedade list define as caractersticas (valores) das listas HTML.
As propriedades list so as listadas abaixo:
list-style-image............. imagem como marcador da lista;
list-style-position..........onde o marcador da lista posicionado;
list-style-type...............tipo do marcador da lista;
Valores vlidos para as propriedades do lista

List-style-image:
1. none
2. URL: url(caminho/marcador.gif)
list-style-position:
1. outside: marcador fora do alinhamento do texto
2. inside: marcador alinhado com texto
list-style-type:
1. none: sem marcador
2. disc: crculo (bolinha cheia)
3. circle: circunferncia (bolinha vazia)
4. square: quadrado cheio
5. decimal: nmeros 1, 2, 3, 4, ...
6. decimal-leading-zero
7. lower-roman: romano minsculo i, ii, iii, iv, ...
8. upper-roman: romano maisculo I, II, III, IV, ...
9. lower-alpha: letra minscula a, b, c, d, ...
10.upper-alpha: letra maiscula A, B, C, D, ...
list-style........................maneira abreviada para todas as
propriedades;
Fontes: http://www.brunotorres.net
http://www.maujor.com.br http://www.alistapart.com
http://pt.wikipedia.org http://www.tableless.com.br
http://www.w3c.org http://www.bergbrandt.com
http://www.w3schools.com REBITTE, Leonardo e VINCIUS
http://www.revolucao.etc.br Marcos. Dominando Tableless
http://www.artifice.web.pt
Web Desisign - CSS
Carlos Jos

Web Design - CSS

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Web Design - CSS

Enviado por

Direitos autorais:

Formatos disponíveis

Web Desisign - CSS

Web Design - CSS

Valores vlidos para a propriedade margin

Valores vlidos para as propriedades de espaamento

Valores vlidos para as propriedades do lista

Você também pode gostar