CSS Introduo

O que voc deve j saber

Antes de continuar, voc deve ter uma compreenso bsica do seguinte:
HTML / XHTML
Se voc deseja estudar estes assuntos primeiro, encontrar os tutoriais em
nosso Home page .

O que CSS?
CSS significa C ascading S tyle S heets
Os estilos definem como exibir elementos HTML
Estilos foram adicionados ao HTML 4.0 para resolver um problema
Folhas de Estilo Externas pode salvar uma grande quantidade de
trabalho
Folhas de estilo externas so armazenadas em arquivos CSS

Demonstrao CSS
Um documento HTML pode ser exibido com diferentes estilos: Veja como
funciona

Estilos resolveu um grande problema
HTML nunca foi destinado a conter tags para a formatao de um
documento.
HTML foi destinado a definir o contedo de um documento, como:
<h1> Este um ttulo </ h1>
<p> Este um pargrafo. </ p>
Quando tags como <font> e atributos de cor foram adicionados
especificao HTML 3.2, comeou um pesadelo para os desenvolvedores
web. Desenvolvimento de grandes sites da Internet, onde as fontes e
informaes cor foram adicionados cada pgina, tornou-se um processo
longo e caro.
Para resolver este problema, o World Wide Web Consortium (W3C) criou
CSS.
Em HTML 4.0, toda a formatao pode ser removido do documento HTML, e
armazenado em um arquivo CSS separado.
Todos os navegadores suportam CSS hoje.

CSS poupa muito trabalho!
CSS define como elementos HTML devem ser exibidos.
Os estilos so normalmente salvos em arquivos. Css externos. Folhas de
estilo externas permitem alterar a aparncia eo layout de todas as pginas
em um site, apenas editando um nico arquivo!
CSS Sintaxe
CSS Sintaxe
Uma regra CSS definir consiste em um seletor e um bloco de declarao:

Os pontos seletor para o elemento HTML que deseja Style.
O bloco de declarao contm uma ou mais declaraes separadas por
ponto-evrgula.
Cada declarao inclui um nome de propriedade e um valor, separados por
dois pontos.

Exemplo CSS
A declarao CSS sempre termina com um ponto e vrgula, e os grupos de
declarao so cercados por chaves:
p {color:red;text-align:center;}
Para tornar o cdigo CSS mais legvel, voc pode colocar uma declarao
em cada linha, como esta:
Exemplo
p {
color: red;
text-align: center;
}

CSS Comentrios
Comentrios so utilizados para explicar seu cdigo, e pode ajud-lo
quando voc editar o cdigo-fonte em uma data posterior. Os comentrios
so ignorados pelos navegadores.
Um comentrio CSS comea com / * e termina com * /. Os comentrios
tambm podem abranger vrias linhas:
Exemplo
p {
color: red;
/* This is a single-line comment */
text-align: center;
}

/* This is
a multi-line
comment */


CSS Seletores

Seletores CSS
Seletores CSS permitem selecionar e manipular elemento (s) HTML.
Seletores CSS so usados para "encontrar" (ou selecione) elementos HTML
com base em sua ID, classes, tipos, atributos, valores de atributos e muito
mais.

O seletor de elemento
O seletor de elemento seleciona elementos com base no nome do elemento.
Voc pode selecionar todos os <p> elementos em uma pgina como esta:
(todos os elementos <p> ser centro alinhado, com uma cor de texto
vermelho)
Exemplo
p {
text-align: center;
color: red;
}

O seletor id
O seletor id usa o atributo id de uma tag HTML para encontrar o elemento
especfico.
Um id deve ser nico dentro de uma pgina, ento voc deve usar o seletor
de id quando voc quiser encontrar um nico elemento, nico.
Para encontrar um elemento com um ID especfico, escrever um caracter,
seguido do ID do elemento.
A regra de estilo abaixo ser aplicada ao elemento HTML com o id =
"para1":
Exemplo
#para1 {
text-align: center;
color: red;
}


Voc NO iniciar um nome de ID com um nmero!


O seletor de classe
O seletor de classe encontra elementos com a classe especfica.
O seletor de classe usa o atributo de classe HTML.
Para encontrar elementos com uma classe especfica, escrever um
personagem perodo, seguido pelo nome da classe:
No exemplo a seguir, todos os elementos HTML com class = "centro" ser o
centro-alinhados:
Exemplo
.center {
text-align: center;
color: red;
}
Voc tambm pode especificar que apenas os elementos HTML especficos
devem ser afetados por uma classe.
No exemplo a seguir, todos os elementos p com class = "centro" ser o
centro-alinhados:
Exemplo
p.center {
text-align:center;
color:red;
}


Voc NO iniciar um nome de classe com um nmero!


Agrupando seletores
Em folhas de estilo muitas vezes h elementos com o mesmo estilo:
h1 {
text-align: center;
color: red;
}

h2 {
text-align: center;
color: red;
}

p {
text-align: center;
color: red;
}
Para minimizar o cdigo, voc pode agrupar seletores.
Para seletores de grupo, separar cada seletor com uma vrgula.
No exemplo abaixo temos agrupados os seletores do cdigo acima:
Exemplo
h1, h2, p {
text-align: center;
color: red;
}

CSS : Como ...
Quando um navegador l uma folha de estilo, ele ir formatar o
documento de acordo com as informaes contidas na folha de estilo.

Trs maneiras de inserir CSS
H trs maneiras de inserir uma folha de estilo:
Folha de estilo externa
Folha de estilo interna
Estilo inline

Estilo Externa Folha
Uma folha de estilo externa ideal quando o estilo aplicado a muitas
pginas. Com uma folha de estilo externa, voc pode mudar a aparncia de
um site inteiro, alterando apenas um arquivo.
Cada pgina deve incluir um link para a folha de estilo com a tag <link>. A
tag <link> vai dentro da seo head:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Uma folha de estilo externa pode ser escrita em qualquer editor de texto. O
arquivo no deve conter quaisquer tags HTML.O arquivo de folha de estilo
deve ser salvo com a extenso css.. Um exemplo de um arquivo de folha de
estilo mostrado abaixo:
"meuestilo.css" :
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/background.gif");}


No adicione um espao entre o valor da propriedade e da unidade (como margin-left:
20 px ;). A maneira correta : margin-left: 20px;


Estilo Interno Folha
Uma folha de estilo interna deve ser utilizado quando um nico documento
tem um estilo nico. Voc define estilos internos na seo head de uma
pgina HTML, dentro da tag <style>, como este:
<head>
<style>
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/background.gif");}
</style>
</head>


Estilos inline
Um estilo inline perde muitas das vantagens de uma folha de estilo
(misturando contedo com apresentao). Utilize este mtodo com
moderao!
Para usar estilos inline, adicione o atributo de estilo para a marca
relevante. O atributo de estilo pode conter qualquer propriedade CSS. O
exemplo mostra como alterar a cor ea margem esquerda de um pargrafo:
<p style="color:sienna;margin-left:20px;">This is a
paragraph.</p>


Vrias folhas de estilo
Se algumas propriedades foram definidas para o mesmo seletor em
diferentes folhas de estilo, os valores sero herdados da folha de estilo mais
especfico.
Por exemplo, suponha que uma folha de estilo externa tem as seguintes
propriedades para o seletor h3:
h3 {
color: red;
text-align: left;
font-size: 8pt;
}
em seguida, assumir que uma folha de estilo interna tambm tem as
seguintes propriedades para o seletor h3:
h3 {
text-align: right;
font-size: 20pt;
}
Se a pgina com a folha de estilo interna tambm links para a folha de
estilo externa as propriedades do elemento h3 sero:
color: red;
text-align: right;
font-size: 20pt;
A cor herdada da folha de estilo externa eo alinhamento de texto eo
tamanho da fonte substituda pela folha de estilo interna.

Vrios estilos em cascata em Um
Os estilos podem ser especificados:
dentro de um elemento HTML
dentro da seo head de uma pgina HTML
em um arquivo CSS externo
Dica: Mesmo que vrias folhas de estilo externa pode ser referenciado
dentro de um nico documento HTML.
Ordem em cascata
O estilo ser usado quando houver mais de um estilo especificado para um
elemento HTML?
De um modo geral, podemos dizer que todos os estilos vo "cascata" em
uma nova folha de estilo "virtual" pelas seguintes regras, em que o nmero
quatro tem a mais alta prioridade:
1. Padro do navegador
2. Folha de estilo externa
3. Folha de estilo interna (na seo principal)
4. Estilo inline (dentro de um elemento HTML)
Assim, um estilo inline (dentro de um elemento HTML) tem a prioridade
mais alta, o que significa que ele ir substituir um estilo definido dentro da
tag <head>, ou em uma folha de estilo externa, ou em um navegador (um
valor padro).

Nota: Se o link para a folha de estilo externa colocada aps a folha de estilo
interna em <head> HTML, a folha de estilo externa ir substituir a folha de estilo
interna!

CSS Background

Propriedades de fundo CSS so usados para definir os efeitos de um
elemento de fundo.

Propriedades CSS utilizados para efeitos de fundo:

background-color
background-image
background-repeat
background-attachment
background-position


Cor de fundo
A propriedade background-color especifica a cor de um elemento de fundo.
A cor de uma pgina de fundo definida no selector de corpo:
Exemplo
body {
background-color: #b0c4de;
}

Tente voc mesmo
Com CSS, uma cor mais frequentemente especificada por:
um valor HEX - como "# ff0000"
um valor RGB - como "rgb (255,0,0)"
nome de uma cor - como "vermelho"
Olhe Valores de cores CSS para uma completa lista de possveis valores de
cor.
No exemplo abaixo, o H1, p, e elementos div tm diferentes cores de fundo:
Exemplo
h1 {
background-color: #6495ed;
}

p {
background-color: #e0ffff;
}

div {
background-color: #b0c4de;
}


Imagem de Fundo
A propriedade background-image especifica uma imagem para usar como
plano de fundo de um elemento.
Por padro, a imagem repetida para que ele cobre todo o elemento.
A imagem de fundo de uma pgina pode ser definido assim:
Exemplo
body {
background-image: url("paper.gif");
}
Abaixo est um exemplo de uma m combinao de imagem de fundo e
texto. O texto no quase legvel:
Exemplo
body {
background-image: url("bgdesert.jpg");
}


Imagem de Fundo - Repetir horizontalmente
ou verticalmente
Por padro, a propriedade background-image repete uma imagem
horizontalmente e verticalmente.
Algumas imagens deve ser repetida apenas horizontalmente ou
verticalmente, ou eles vo olhar estranho, como este:
Exemplo
body {
background-image: url("gradient.png");
}
Se a imagem repetida somente na horizontal (repeat-x), o fundo ficar
melhor:
Exemplo
body {
background-image: url("gradient.png");
background-repeat: repeat-x;
}

Fundo da Imagem - Definir posio e no-
repeat

Nota: Ao usar uma imagem de fundo, usar uma imagem que no perturbe o
texto.
Mostrando a imagem apenas uma vez especificada pela propriedade
background-repeat:
Exemplo
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
No exemplo acima, a imagem de fundo mostrado no mesmo lugar que o
texto. Queremos mudar a posio da imagem, de modo que ela no
perturba o texto demasiado.
A posio da imagem especificada pela propriedade background-position:
Exemplo
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}

Fundo - Propriedade Taquigrafia
Como voc pode ver nos exemplos acima, existem muitas propriedades a
considerar quando se trata de fundos.
Para encurtar o cdigo, tambm possvel especificar todas as
propriedades em uma nica propriedade. Isso chamado de propriedade
abreviada.
A propriedade de taquigrafia para o fundo simplesmente "amor":
Exemplo
body {
background: #ffffff url("img_tree.png") no-repeat right
top;
}
Ao usar a propriedade abreviada a ordem dos valores de propriedade :
background-color
background-image
background-repeat
background-attachment
background-position
No importa se um dos valores das propriedades est ausente, enquanto
que os que esto presentes so, por esta ordem.
Este exemplo usa CSS mais avanado. D uma olhada: exemplo Avanada

Todas as Propriedades do fundo CSS
Property Description
background Sets all the background properties in one declaration
background-attachment Sets whether a background image is fixed or scrolls with the
rest of the page
background-color Sets the background color of an element
background-image Sets the background image for an element
background-position Sets the starting position of a background image
background-repeat Sets how a background image will be repeated

CSS Texto
FORMATAO DE TEXTO
E s t e t e x t o d e c o r a d o c o m a l g u ma s d a s
p r o p r i e d a d e s d e f o r ma t a o d e t e x t o . O t t u l o u s a o
t e x t - a l i g n , t e x t - t r a n s f o r m, e p r o p r i e d a d e s d e c o r . O
p a r g r a f o r e c u a d a , a l i n h a d o s , e o e s p a o e n t r e o s
c a r a c t e r e s e s p e c i f i c a d o . O s u b l i n h a d o r e mo v i d o
d o " T e n t e v o c me s mo " l i n k .

Cor do texto
A propriedade cor usada para definir a cor do texto.
Com CSS, uma cor mais frequentemente especificada por:
um valor HEX - como "# ff0000"
um valor RGB - como "rgb (255,0,0)"
nome de uma cor - como "vermelho"
Olhe Valores de cores CSS para uma completa lista de possveis valores de
cor.
A cor padro para uma pgina definida no seletor de corpo.
Exemplo
body {
color: blue;
}

h1 {
color: #00ff00;
}

h2 {
color: rgb(255,0,0);
}

Nota: Para CSS W3C: Se voc definir a propriedade de cor, voc tambm deve
definir a propriedade background-color.


Alinhamento de texto
A propriedade text-align usado para definir o alinhamento horizontal de
um texto.
O texto pode ser centralizado ou alinhado esquerda ou direita, ou
justificado.
Quando text-align definido como "justificar", cada linha esticada de
modo que cada linha tem largura igual, e as margens esquerda e direita so
retas (como em revistas e jornais).
Exemplo
h1 {
text-align: center;
}

p.date {
text-align: right;
}

p.main {
text-align: justify;
}

Decorao Texto
A propriedade text-decoration usado para definir ou remover decoraes
de texto.
A propriedade text-decoration usado principalmente para remover
sublinhados de links para fins de projeto:
Exemplo
a {
text-decoration: none;
}
Tambm pode ser utilizado para decorar texto:
Exemplo
h1 {
text-decoration: overline;
}

h2 {
text-decoration: line-through;
}

h3 {
text-decoration: underline;
}

Nota: No recomendado para sublinhar o texto que no um link, pois isso
muitas vezes confunde os usurios.


A transformao de texto
A propriedade text-transform usado para especificar letras maisculas e
minsculas em um texto.
Ele pode ser usado para transformar tudo em letras maisculas ou
minsculas, ou capitalizar a primeira letra de cada palavra.
Exemplo
p.uppercase {
text-transform: uppercase;
}

p.lowercase {
text-transform: lowercase;
}

p.capitalize {
text-transform: capitalize;
}

Recuo do texto
Property Description
color Sets the color of text
direction Specifies the text direction/writing direction
letter-spacing Increases or decreases the space between
characters in a text
line-height Sets the line height
text-align Specifies the horizontal alignment of text
text-decoration Specifies the decoration added to text
text-indent Specifies the indentation of the first line in a
text-block
text-shadow Specifies the shadow effect added to text
text-transform Controls the capitalization of text
unicode-bidi Used together with the direction property to
set or return whether the text should be
overridden to support multiple languages in
the same document






A propriedade text-indent usado para especificar o recuo da primeira linha
de um texto.
Exemplo
p {
text-indent: 50px;
}

Todas as propriedades CSS do texto

Tente voc mesmo
Property Description
color Sets the color of text
direction Specifies the text direction/writing direction
letter-spacing Increases or decreases the space between characters in a
text
line-height Sets the line height
text-align Specifies the horizontal alignment of text
text-decoration Specifies the decoration added to text
text-indent Specifies the indentation of the first line in a text-block
text-shadow Specifies the shadow effect added to text
text-transform Controls the capitalization of text
unicode-bidi Used together with the direction property to set or return
whether the text should be overridden to support multiple
languages in the same document
vertical-align Sets the vertical alignment of an element
white-space Specifies how white-space inside an element
is handled
word-spacing Increases or decreases the space between
words in a text
vertical-align Sets the vertical alignment of an element
white-space Specifies how white-space inside an element is handled
word-spacing Increases or decreases the space between words in a text

CSS Fonts
Propriedades de fonte CSS definem a famlia de fontes, ousadia,
tamanho e estilo de um texto.

Diferena entre Serif e Sans-serif Fontes


Famlias CSS Font
Em CSS, existem dois tipos de nomes de famlia de fontes:
famlia genrico - um grupo de famlias de fontes com uma
aparncia semelhante (como "Serif" ou "Monospace")
famlia da fonte - uma famlia de fontes especficas (como "Times
New Roman" ou "Arial")
Generic
family
Font family Description
Serif
Times New Roman
Georgia
Serif fonts have small lines at the ends
on some characters
Sans-serif
Arial
Verdana
"Sans" means without - these fonts do
not have the lines at the ends of
characters
Monospace
Courier New
Lucida Console
All monospace characters have the
same width


Nota: Em telas de computador, fontes sans-serif so considerados mais
fceis de ler do que fontes com serifa.


Famlia de fontes
A famlia da fonte de um texto definido com a propriedade font-family.
A propriedade font-family deve conter vrios nomes de fontes como um
sistema de "retorno". Se o navegador no suporte a primeira fonte, ele
tenta a prxima fonte.
Comece com a fonte que voc quer, e acabar com uma famlia genrica,
para deixar o navegador escolher uma fonte semelhante na famlia
genrica, se no houver outros tipos de letra esto disponveis.
Nota : Se o nome de uma famlia de fontes mais do que uma palavra, ele
deve estar entre aspas, como: "Times New Roman".
Mais do que uma famlia de fonte especificado em uma lista separada por
vrgulas:
Exemplo
p {
font-family: "Times New Roman", Times, serif;
}

Estilo da fonte
A propriedade font-style usado principalmente para especificar o texto em
itlico.
Esta propriedade tem trs valores:
Normal - O texto exibido normalmente
itlico - O texto mostrado em itlico
oblquo - O texto "jovem" (oblqua muito semelhante ao itlico,
mas menos suportado)
Exemplo
p.normal {
font-style: normal;
}

p.italic {
font-style: italic;
}

p.oblique {
font-style: oblique;
}

Tamanho da fonte
A propriedade font-size define o tamanho do texto.
Ser capaz de gerenciar o tamanho do texto importante em web design. No
entanto, voc no deve usar ajustes de tamanho de fonte para fazer
pargrafos parecem com ttulos, ou ttulos de parecer pargrafos.
Use sempre as tags HTML apropriadas, como <h1> - <h6> para ttulos e
<p> para pargrafos.
O valor de font-size pode ser um tamanho absoluto ou relativo.
Tamanho absoluto:
Define o texto a um tamanho especificado
No permite que um usurio altere o tamanho do texto em todos os
navegadores (ruim por questes de acessibilidade)
Tamanho absoluto til quando o tamanho fsico da sada
conhecida
Tamanho relativo:
Define o tamanho em relao a elementos circundantes
Permite que o usurio altere o tamanho do texto nos navegadores


Nota: Se voc no especificar um tamanho de fonte, o tamanho padro para
texto normal, como pargrafos, 16px (16px = 1em).


Defina o tamanho da fonte Com Pixels
Definir o tamanho do texto com pixels lhe d controle total sobre o tamanho
do texto:
Exemplo
h1 {
font-size: 40px;
}

h2 {
font-size: 30px;
}

p {
font-size: 14px;
}
O exemplo acima permite que o Internet Explorer 9, Firefox, Chrome, Opera
e Safari para redimensionar o texto.
Nota: O exemplo acima no funciona no IE, verso anterior 9.
O texto pode ser redimensionada em todos os navegadores usando a
ferramenta de zoom (no entanto, isso redimensiona a pgina inteira, no
apenas o texto).

Defina o tamanho da fonte com o EM
Para evitar o problema de redimensionamento com verses mais antigas do
Internet Explorer, muitos desenvolvedores usam los em vez de pixels.
A unidade de tamanho em recomendado pela W3C.
1em igual ao tamanho da fonte de corrente. O tamanho do texto padro
em navegadores 16px. Assim, o tamanho padro de 1em 16px.
O tamanho pode ser calculado a partir de pixels para los usando esta
frmula: pixels / 16 = los
Exemplo
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}

p {
font-size: 0.875em; /* 14px/16=0.875em */
}
No exemplo acima, o tamanho da fonte em in o mesmo que o exemplo
anterior, em pixels. No entanto, com o tamanho in, possvel ajustar o
tamanho da fonte em todos os navegadores.
Infelizmente, ainda h um problema com as verses mais antigas do IE. O
texto torna-se maior do que deveria quando fez maior, e menor do que
deveria quando feito menor.

Use uma combinao de cento e Em
A soluo que funciona em todos os navegadores, definir um font-size
padro em percentagem do elemento <body>:
Exemplo
body {
font-size: 100%;
}

h1 {
font-size: 2.5em;
}

h2 {
font-size: 1.875em;
}

p {
font-size: 0.875em;
}
Nosso cdigo agora funciona muito bem! Ele mostra o mesmo tamanho do
texto em todos os navegadores, e permite que todos os navegadores para
aumentar ou redimensionar o texto!

Todas as propriedades da fonte de CSS
Property Description
font Sets all the font properties in one declaration
font-family Specifies the font family for text
font-size Specifies the font size of text
font-style Specifies the font style for text
font-variant Specifies whether or not a text should be displayed in a
small-caps font
font-weight Specifies the weight of a font

CSS Links
Os links podem ser decorados de formas diferentes.

Link Styling
Os links podem ser decorados com qualquer propriedade CSS (por exemplo,
cor, font-family, fundo, etc.)
Alm disso, as ligaes podem ser decorados de forma diferente,
dependendo do que Estado que esto dentro
As quatro ligaes estados so:
a: link - um link normal, no visitado
a: visited - um link o usurio visitou
a: hover - um link quando o usurio mouses sobre ele
a: active - um link no momento em que clicado
Exemplo
/* unvisited link */
a:link {
color: #FF0000;
}

/* visited link */
a:visited {
color: #00FF00;
}

/* mouse over link */
a:hover {
color: #FF00FF;
}

/* selected link */
a:active {
color: #0000FF;
}
Ao definir o estilo para vrios estados da ligao, existem algumas regras
de ordem:
a: hover deve vir aps a: link ea: visited
a: active deve vir depois de a: hover

Estilos elo comum
No exemplo acima, a cor muda de link, dependendo do estado em que est
dentro
Vamos passar por algumas das outras maneiras comuns para links de
estilo:
Decorao Texto
A propriedade text-decoration usado principalmente para remover
sublinhados de links:
Exemplo
a:link {
text-decoration: none;
}

a:visited {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

a:active {
text-decoration: underline;
}
Cor de fundo
A propriedade background-color especifica a cor de fundo para links:
Exemplo
a:link {
background-color: #B2FF99;
}

a:visited {
background-color: #FFFF85;
}

a:hover {
background-color: #FF704D;
}

a:active {
background-color: #FF704D;
}



CSS Listas
As propriedades da lista de CSS permitem que voc:
Definir diferentes marcadores de item de lista para listas ordenadas
Definir diferentes marcadores de item de lista para listas no ordenadas
Definir uma imagem como marcador de item da lista


Lista
Em HTML, existem dois tipos de listas:
listas no ordenadas - os itens da lista so marcados com balas
listas ordenadas - os itens da lista so marcados com nmeros ou
letras
Com CSS, as listas podem ser decorados mais, e as imagens podem ser
utilizadas como o marcador item da lista.

Diferentes marcadores lista de itens
O tipo de marcador de item da lista especificado com a propriedade do
tipo list-style:
Exemplo
ul.a {
list-style-type: circle;
}

ul.b {
list-style-type: square;
}

ol.c {
list-style-type: upper-roman;
}

ol.d {
list-style-type: lower-alpha;
}
Alguns dos valores so para listas no ordenadas, e alguns para listas
ordenadas.

Uma imagem como marcador Lista de Itens
Para especificar uma imagem como marcador de item da lista, use a
propriedade list-style-image:
Exemplo
ul {
list-style-image: url('sqpurple.gif');
}
O exemplo acima no exibe igualmente em todos os navegadores. IE e
Opera ir exibir o marcador de imagem um pouco maior do que o Firefox,
Chrome e Safari.
Se voc deseja que o marcador de imagem a ser colocada igualmente em
todos os navegadores, uma soluo crossbrowser explicado abaixo.
Soluo Crossbrowser
O exemplo a seguir mostra o marcador de imagem igual em todos os
navegadores:
Exemplo
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}

ul li {
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
Exemplo explicou:
Para ul:
o Defina o tipo list-style para nenhum para remover o marcador
de item da lista
o Definir tanto preenchimento e margem para 0px (para
compatibilidade cross-browser)
Para todos os li em ul:
o Defina o URL da imagem, e mostr-lo apenas uma vez (no-
repeat)
o Posicione a imagem onde voc quiser (0px esquerda e para
baixo 5px)
o Posicione o texto na lista com padding-left

Lista - Taquigrafia propriedade
Tambm possvel especificar todas as propriedades de lista em um,
propriedade nica. Isso chamado de propriedade abreviada.
A propriedade abreviao usada para listas, a propriedade list-style:
Exemplo
ul {
list-style: square url("sqpurple.gif");
}
Ao usar a propriedade abreviada, a ordem dos valores so:
do tipo list-style
list-style-position (para uma descrio, consulte a tabela de
propriedades CSS abaixo)
list-style-image
No importa se um dos valores acima estiver faltando, enquanto o resto so
na ordem especificada.

Todas as propriedades de lista CSS
Property Description
list-style Sets all the properties for a list in one declaration
list-style-image Specifies an image as the list-item marker
list-style-position Specifies if the list-item markers should appear inside or outside
the content flow
list-style-type Specifies the type of list-item marker

CSS Tabelas
O olhar de uma tabela HTML pode ser muito melhorada com CSS:
Companhia Contato Pas
Alfreds Futterkiste Maria Anders Alemanha
Berglunds snabbkp Christina Berglund Sucia
Centro comercial Moctezuma Francisco Chang Mxico
Ernst Handel Roland Mendel ustria
Ilha de Negociao Helen Bennett
Reino
Unido
Kniglich Essen Philip Cramer Alemanha
Rindo Bacchus Winecellars Yoshi Tannamuri Canad
Magazzini Alimentari Riuniti Giovanni Rovelli Itlia
Norte / Sul Simon Crowther
Reino
Unido
Spcialits Paris Marie Bertrand Frana
The Big Cheese Liz Nixon EUA
Vaffeljernet Palle Ibsen Dinamarca


Bordas da tabela
Para especificar as bordas da tabela em CSS, use a propriedade border.
O exemplo a seguir especifica uma borda preta para a tabela, th e td
elementos:
Exemplo
table, th, td {
border: 1px solid black;
}
Observe que a tabela do exemplo acima tem bordas duplas. Isto porque
tanto a tabela e os elementos th / td tm bordas separadas.
Para exibir uma nica borda para a tabela, use a propriedade border-
collapse.
Recolher Fronteiras
A propriedade border-collapse define se as bordas da tabela esto
recolhidos em uma nica borda ou separado:
Exemplo
table {
border-collapse: collapse;
}

table, th, td {
border: 1px solid black;
}

Tabela Largura e Altura
A largura ea altura de uma tabela definida pelas propriedades de largura e
altura.
O exemplo que se segue define a largura da mesa de 100%, e a altura dos
elementos th para 50px:
Exemplo
table {
width: 100%;
}

th {
height: 50px;
}

Tabela Alinhamento de texto
O texto em uma tabela est alinhada com as propriedades text-align e
vertical-align.
A propriedade text-align define o alinhamento horizontal, como a esquerda,
direita ou centro:
Exemplo
td {
text-align: right;
}
A propriedade vertical-align define o alinhamento vertical, como superior,
inferior, ou no meio:
Exemplo
td {
height: 50px;
vertical-align: bottom;
}

Tabela Padding
Para controlar o espao entre a borda eo contedo em uma tabela, use a
propriedade estofamento em td e th elementos:
Exemplo
td {
padding: 15px;
}

Tabela de cores
O exemplo a seguir especifica a cor das bordas, eo texto e cor de fundo de
elementos th:
Exemplo
table, td, th {
border: 1px solid green;
}

th {
background-color: green;
color: white;
}

CSS Box Model

O modelo de caixa CSS
Todos os elementos de HTML pode ser considerado como caixas. Em CSS, o
termo "modelo de caixa" usado quando se fala em design e layout.
O modelo de caixa de CSS essencialmente uma caixa que envolve
elementos HTML, e composto por: margens, bordas, preenchimento e
contedo real.
O modelo de caixa nos permite colocar uma borda em torno de elementos e
elementos espaciais em relao a outros elementos.
A imagem abaixo ilustra o modelo de caixa:


Explicao das diferentes partes:
Margin - Limpa uma rea ao redor da borda. A margem no tem
uma cor de fundo, que completamente transparente
Fronteira - A fronteira que gira em torno do preenchimento e
contedo. A fronteira herdado da propriedade de cor da caixa
Preenchimento - Limpa uma rea em torno do contedo. O
preenchimento afetada pela cor de fundo da caixa
Contedo - O contedo da caixa, em que o texto e as imagens
aparecem
Para definir a largura e altura de um elemento corretamente em todos os
navegadores, voc precisa saber como funciona o modelo de caixa.

Largura e altura de um elemento

Importante: Quando voc define as propriedades de largura e altura de um
elemento com CSS, voc acabou de definir a largura ea altura da rea de
contedo . Para calcular o tamanho total de um elemento, voc tambm deve
adicionar o preenchimento, bordas e margens.
A largura total do elemento no exemplo abaixo 300px:
width: 250px;
padding: 10px;
border: 5px solid gray;
margin: 10px;
Vamos fazer as contas:
250px (largura)
+ 20px (esquerda + estofamento direita)
+ 10px (esquerda + borda direita)
+ 20px (margem esquerda + direita)
= 300px
Suponha que voc tinha apenas 250px de espao. Vamos fazer um
elemento com uma largura total de 250px:
Exemplo
width: 220px;
padding: 10px;
border: 5px solid gray;
margin: 0px;
A largura total de um elemento deve ser calculado da seguinte forma:
Largura total elemento = largura + preenchimento esquerda + direita +
estofamento borda esquerda + borda direita + margem esquerda +
margem direita
A altura total de um elemento deve ser calculado da seguinte forma:
Altura total elemento = altura + top + estofamento estofamento inferior +
+ borda superior borda inferior + margem superior + margem inferior

Browsers Compatibilidade Issue
IE8 e verses anteriores do IE, includo o preenchimento e borda na
propriedade width.
Para corrigir esse problema, adicione um <! DOCTYPE html> para a pgina
HTML.
CSS Border
Propriedades Border CSS
As propriedades de fronteira CSS permitem que voc especifique o estilo ea
cor da borda de um elemento.
Estilo Border
A propriedade border-style especifica que tipo de fronteira para exibir.

Nota: Nenhuma das propriedades de fronteira ter qualquer efeito a menos que
o border-style propriedade definida!
valores border-style:
nenhum: Define nenhuma fronteira
pontilhada: Define uma borda pontilhada
frustradas: Define uma borda tracejada
slida: Define uma borda slida
duplo: Define duas fronteiras. A largura das duas bordas so o mesmo que
o valor de largura de fronteira
sulco: Define uma borda 3D ranhuras. O efeito depende do valor de
fronteira cores
cume: Define uma borda ondulada 3D. O efeito depende do valor de
fronteira cores
Detalhe: Define uma insero borda 3D. O efeito depende do valor de
fronteira cores
incio: Define uma borda 3D incio. O efeito depende do valor de fronteira
cores

Largura da borda
A propriedade border-width utilizado para definir a largura da borda.
A largura definida em pixels, ou utilizando um dos trs valores pr-
definidos: fina, mdias, ou de espessura.
Nota: A propriedade "border-width" no funciona se for usado sozinho. Use
a propriedade "border-style" para definir as fronteiras em primeiro lugar.
Exemplo
p.one {
border-style: solid;
border-width: 5px;
}

p.two {
border-style: solid;
border-width: medium;
}

Cor da margem
A propriedade border-color usado para definir a cor da borda. A cor pode
ser definida por:
nome - especificar um nome de cor, como "vermelho"
RGB - especificar um valor RGB, como "rgb (255,0,0)"
Hex - especifique um valor hexadecimal, como "# ff0000"
Voc tambm pode definir a cor da borda para "transparente".
Nota: A propriedade "border-color" no funciona se for usado sozinho. Use
a propriedade "border-style" para definir as fronteiras em primeiro lugar.
Exemplo
p.one {
border-style: solid;
border-color: red;
}

p.two {
border-style: solid;
border-color: #98bf21;
}

Lados Individual - Fronteira
No CSS possvel especificar diferentes fronteiras para lados diferentes:
Exemplo
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
O exemplo acima tambm pode ser definido com uma nica propriedade:
Exemplo
border-style: dotted solid;
A propriedade border-style pode ter de um a quatro valores.
border-style: double slida pontilhada pontilhada;
o borda superior pontilhada
o borda direita slido
o limite inferior o dobro
o borda esquerda pontilhada

border-style: pontilhada dupla slida;
o borda superior pontilhada
o bordas direita e esquerda so slidos
o limite inferior o dobro

border-style: solid pontilhada;
o bordas superior e inferior so pontilhadas
o bordas direita e esquerda so slidos

border-style: pontilhada;
o todas as quatro bordas so pontilhadas
A propriedade border-style usado no exemplo acima. No entanto, ele
tambm funciona com border-width e border-color.

Border - Taquigrafia propriedade
Como voc pode ver nos exemplos acima, existem muitas propriedades a
considerar quando se trata de fronteiras.
Para encurtar o cdigo, tambm possvel especificar todas as
propriedades da borda individuais em uma propriedade. Isso chamado de
propriedade abreviada.
A propriedade border um atalho para as seguintes propriedades de
fronteira individuais:
border-width
border-style (obrigatrio)
border-color
Exemplo
border: 5px solid red;

Todas as propriedades da borda CSS
Property Description
border Sets all the border properties in one declaration
border-bottom Sets all the bottom border properties in one declaration
border-bottom-color Sets the color of the bottom border
border-bottom-style Sets the style of the bottom border
border-bottom-width Sets the width of the bottom border
border-color Sets the color of the four borders
border-left Sets all the left border properties in one declaration
border-left-color Sets the color of the left border
border-left-style Sets the style of the left border
border-left-width Sets the width of the left border
border-right Sets all the right border properties in one declaration
border-right-color Sets the color of the right border
border-right-style Sets the style of the right border
border-right-width Sets the width of the right border
border-style Sets the style of the four borders
border-top Sets all the top border properties in one declaration
border-top-color Sets the color of the top border
border-top-style Sets the style of the top border
border-top-width Sets the width of the top border
border-width Sets the width of the four borders

CSS Contornos
Um esboo uma linha que desenhada em torno de elementos (fora
das fronteiras) para fazer o elemento "destacam-se".
As propriedades de contorno especificar o estilo, cor e largura de um
esboo.

Esboo CSS
Um esboo uma linha que desenhada em torno de elementos (fora das
fronteiras) para fazer o elemento "destacam-se".
No entanto, a propriedade de contorno diferente a partir da propriedade
de fronteira.
O contorno no uma parte de dimenses de um elemento; largura e
altura total do elemento no afetado pela largura do contorno.



Todas as Propriedades do esboo CSS
Property Description Values
outline Sets all the outline properties in one declaration outline-color
outline-style
outline-width
inherit
outline-color Sets the color of an outline color_name
hex_number
rgb_number
invert
inherit
outline-style Sets the style of an outline none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
outline-width Sets the width of an outline thin
medium
thick
length
inherit

CSS Margem
As propriedades de margem CSS definir o espao em torno de
elementos.

Margem
A margem limpa uma rea em torno de um elemento (fora da fronteira). A
margem no tem uma cor de fundo, e completamente transparente.
A parte superior, direita e inferior, e margem esquerda podem ser alteradas
independentemente usando propriedades separadas. Uma propriedade
margem abreviada tambm pode ser utilizada, para alterar todas as
margens de uma s vez.
Valores possveis
Value Description
auto The browser calculates a margin
length Specifies a margin in px, pt, cm, etc. Default value is 0px
% Specifies a margin in percent of the width of the containing element
inherit Specifies that the margin should be inherited from the parent element


Nota: tambm possvel utilizar os valores negativos, para se sobrepor
contedo.


Margem - os lados individuais
Em CSS, possvel especificar diferentes margens para lados diferentes:
Exemplo
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 50px;


Margem - propriedade Taquigrafia
Para encurtar o cdigo, possvel especificar todas as propriedades de
margem em uma propriedade. Isso chamado de propriedade abreviada.
A propriedade abreviada para todas as propriedades de margem
"margem":
Exemplo
margin: 100px 50px;
A propriedade de margem pode ter de um a quatro valores.
margin: 25px 50px 75px 100px;
o margem superior de 25px
o margem direita 50px
o margem inferior de 75px
o A margem esquerda 100px

margin: 25px 50px 75px;
o margem superior de 25px
o margens direita e esquerda so 50px
o margem inferior de 75px

margin: 25px 50px;
o margens superior e inferior so 25px
o margens direita e esquerda so 50px

margin: 25px;
o todas as quatro margens so 25px

Todas as propriedades de margem CSS
Property Description
margin A shorthand property for setting the margin properties in one
declaration
margin-bottom Sets the bottom margin of an element
margin-left Sets the left margin of an element
margin-right Sets the right margin of an element
margin-top Sets the top margin of an element

CSS Padding
As propriedades de preenchimento CSS definir o espao entre a margem
do elemento e o contedo do elemento.

Acolchoamento
O preenchimento limpa uma rea em torno do contedo (dentro da
fronteira) de um elemento. O preenchimento afetada pela cor do
elemento de fundo.
A parte superior, direita e inferior, e preenchimento esquerda podem ser
alteradas independentemente usando propriedades separadas. Uma
propriedade de preenchimento abreviada tambm pode ser utilizada, para
alterar todas as preenchimentos de uma s vez.
Valores possveis
Value Description
length Defines a fixed padding (in pixels, pt, em, etc.)
% Defines a padding in % of the containing element


Lados Individual - preenchimento
Em CSS, possvel especificar o preenchimento diferente para lados
diferentes:
Exemplo
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;

Preenchimento - propriedade Taquigrafia
Para encurtar o cdigo, possvel especificar todas as propriedades de
preenchimento em uma propriedade. Isso chamado de propriedade
abreviada.
A propriedade abreviada para todas as propriedades de preenchimento
"preenchimento":
Exemplo
padding: 25px 50px;
A propriedade de preenchimento pode ter de um a quatro valores.
padding: 25px 50px 75px 100px;
o top preenchimento 25px
o preenchimento correto 50px
o preenchimento de fundo 75px
o padding-left 100px

padding: 25px 50px 75px;
o top preenchimento 25px
o paddings direita e esquerda so 50px
o preenchimento de fundo 75px

padding: 25px 50px;
o paddings superior e inferior so 25px
o paddings direita e esquerda so 50px

padding: 25px;
o todos os quatro paddings so 25px

Todas as propriedades de preenchimento
CSS
Property Description
padding A shorthand property for setting all the padding properties in one
declaration
padding-bottom Sets the bottom padding of an element
padding-left Sets the left padding of an element
padding-right Sets the right padding of an element
padding-top Sets the top padding of an element

CSS Dimenso
As propriedades de dimenso CSS permitem que voc controle a altura
ea largura de um elemento.


Todas as propriedades de dimenso CSS
Property Description Values
height Sets the height of an element auto
length
%
inherit
max-height Sets the maximum height of an element none
length
%
inherit
max-width Sets the maximum width of an element none
length
%
inherit
min-height Sets the minimum height of an element length
%
inherit
min-width Sets the minimum width of an element length
%
inherit
width Sets the width of an element auto
length
%
inherit

CSS de exibio e Visibilidade
A propriedade display especifica se / como um elemento exibido, ea
propriedade de visibilidade especifica se um elemento deve ser visvel ou
oculto.
Box 1

Caixa 2

Box 3

Escondendo um elemento - display: none ou
visibility: hidden
Escondendo um elemento pode ser feito definindo a propriedade display
para "none" ou a propriedade de visibilidade para "escondido". No entanto,
notar que estes dois mtodos produzem resultados diferentes:
visibility: hidden esconde um elemento, mas ainda vai ocupar o mesmo
espao de antes. O elemento ser escondido, mas ainda afetam o layout.
Exemplo
h1.hidden {
visibility: hidden;
}

display: none esconde um elemento, e no vai ocupar todo o espao. O
elemento ser escondido, ea pgina ser exibida como se o elemento no
est l:
Exemplo
h1.hidden {
display: none;
}


CSS Display - Bloquear e em linha Elements
Um elemento de bloco um elemento que ocupa toda a largura disponvel,
e tem uma quebra de linha antes e depois dele.
Exemplos de elementos de bloco:
<h1>
<p>
<li>
<div>
Um elemento inline ocupa apenas o mximo de largura, se necessrio, e
no forar as quebras de linha.
Exemplos de elementos em linha:
<span>
<a>

Alterando como um elemento exibido
Mudar um elemento inline para um elemento de bloco, ou vice-versa, pode
ser til para tornar a pgina procurar uma maneira especfica, e ainda
seguem os padres web.
O exemplo a seguir exibe <li> elementos como elementos em linha:
Exemplo
li {
display: inline;
}
O exemplo a seguir exibe <span> elementos como elementos de bloco:
Exemplo
span {
display: block;
}


Nota: A definio da propriedade de um elemento de exibio s muda a
forma como o elemento exibido , no o tipo de elemento que
. Assim, um elemento inline com display: block no permitido ter outros
elementos de bloco dentro dele.


CSS Posicionamento
Posicionamento pode ser complicado s vezes!
Decida qual elemento para exibir na frente!
Os elementos podem sobrepor-se!
Posicionamento
As propriedades de posicionamento CSS permitem que voc posicione um
elemento. Ele tambm pode colocar um elemento atrs de outro, e
especificar o que deve acontecer quando o contedo de um elemento
muito grande.
Os elementos podem ser posicionados usando a parte superior, inferior,
esquerdo e direito propriedades. No entanto, essas propriedades no
funcionar a menos que a propriedade position definida em primeiro
lugar. Eles tambm funcionam de forma diferente, dependendo do mtodo
de posicionamento.
Existem quatro mtodos de posicionamento diferentes.

Posicionamento esttico
Elementos HTML esto posicionados esttica por padro. Um elemento
posicionado esttico est sempre posicionado de acordo com o fluxo normal
de uma pgina.
Elementos posicionados estticas no so afetados por cima, em baixo,
esquerda, e as propriedades certas.

Posicionamento Fixo
Um elemento com posio fixa posicionado em relao janela do
navegador.
No vai mudar mesmo se a janela rolada:
Exemplo
p.pos_fixed {
position: fixed;
top: 30px;
right: 5px;
}


Nota: IE7 e IE8 apoiar o valor fixo somente se um DOCTYPE especificado!.
Elementos posicionados fixos so removidos do fluxo normal. O documento
e outros elementos comportam-se como o elemento posicionado fixo no
existe.
Elementos posicionados fixos podem se sobrepor outros elementos.

Posicionamento Relativo
Um elemento posicionado em relao est posicionado em relao sua
posio normal.
Exemplo
h2.pos_left {
position: relative;
left: -20px;
}

h2.pos_right {
position: relative;
left: 20px;
}
O contedo de elementos relativamente posicionados podem ser movidos e
se sobrepem outros elementos, mas o espao reservado para o elemento
ainda est preservada no fluxo normal.
Exemplo
h2.pos_top {
position: relative;
top: -50px;
}
Relativamente elementos posicionados so freqentemente usados como
blocos de contineres para elementos posicionados absolutamente.

Posicionamento Absoluto
Um elemento de posio absoluta posicionado em relao ao primeiro
elemento pai, que tem uma posio diferente esttica. Se nenhum elemento
tal for encontrado, o bloco contendo <html>:
Exemplo
h2 {
position: absolute;
left: 100px;
top: 150px;
}
Elementos de posicionamento absoluto so removidas do fluxo normal. O
documento e outros elementos se comportam como o elemento posicionado
de forma absoluta no existe.
Elementos posicionados absolutamente podem se sobrepor outros
elementos.

Elementos sobrepostos
Quando os elementos so colocados fora do fluxo normal, que podem
sobrepor-se outros elementos.
A propriedade z-index especifica a ordem de pilha de um elemento (que
elemento deve ser colocado em frente, ou para trs, os outros).
Um elemento pode ter uma ordem de pilha positivo ou negativo:
Exemplo
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Um elemento com uma maior ordem da pilha sempre em frente de um
elemento com uma ordem da pilha inferior.

Nota: Se dois elementos posicionados sobrepem sem um ndice z especificado,
o elemento posicionado em ltimo lugar no cdigo HTML ser mostrado no topo.


Todas as propriedades de posicionamento
CSS
Property Description Values
bottom Sets the bottom margin edge for a positioned box auto
length
%
inherit
clip Clips an absolutely positioned element shape
auto
inherit
cursor Specifies the type of cursor to be displayed url
auto
crosshair
default
pointer
move
e-resize
ne-
resize
nw-
resize
n-resize
se-resize
sw-
resize
s-resize
w-resize
text
wait
help
left Sets the left margin edge for a positioned box auto
length
%
inherit
overflow Specifies what happens if content overflows an element's
box
auto
hidden
scroll
visible
inherit
position Specifies the type of positioning for an element absolute
fixed
relative
static
inherit
right Sets the right margin edge for a positioned box auto
length
%
inherit
top Sets the top margin edge for a positioned box auto
length
%
inherit
z-index Sets the stack order of an element number
auto
inherit
CSS Float
O que CSS Float?






Com CSS float, um elemento pode ser empurrado para a esquerda ou para
a direita, permitindo que outros elementos para envolver em torno dele.
Float muitas vezes usado para as imagens, mas tambm til quando se
trabalha com layouts.

Como Elements Float
Elementos so flutuou horizontalmente, isto significa que um elemento s
pode ser lanada para a esquerda ou direita, no para cima ou para baixo.
Um elemento flutuou vai passar to longe para a esquerda ou direita, como
ele pode. Geralmente isso significa todo o caminho esquerda ou direita
do elemento que contm.
Os elementos depois do elemento flutuante ir fluir em torno dele.
Os elementos antes do elemento flutuante no ser afetado.
Se uma imagem lanada para a direita, a seguinte texto flui em torno
dele, para a esquerda:
Exemplo
img {
float: right;
}

Elementos flutuantes prximos um do outro
Se colocar vrios elementos flutuantes aps o outro, eles iro flutuar
prximas umas das outras, se houver espao.
Aqui fizemos uma galeria de imagens usando a propriedade float:
Exemplo
.thumbnail {
float: left;
width: 110px;
height: 90px;
margin: 5px;
}

Desligar Float - Usando Limpar
Elementos aps o elemento flutuante ir fluir em torno dele. Para evitar
isso, use a propriedade clara.
A propriedade clear especifica que os lados de um elemento outros
elementos flutuantes no so permitidos.
Adicionar uma linha de texto para a galeria de imagens, usando a
propriedade clara:
Exemplo
.text_line {
clear: both;
}


Todas as propriedades CSS float
Property Description Values
clear Specifies which sides of an element where other floating
elements are not allowed
left
right
both
none
inherit
float Specifies whether or not a box should float left
right
none
inherit
CSS alinhamento Horizontal
Em CSS, vrias propriedades so usados para alinhar os elementos
horizontalmente.

Alinhar Elementos de Bloco
Um elemento de bloco um elemento que ocupa toda a largura disponvel,
e tem uma quebra de linha antes e depois dele.
Exemplos de elementos de bloco:
<h1>
<p>
<div>
Para alinhar o texto, veja o CSS Texto captulo.
Neste captulo vamos mostrar-lhe como alinhar horizontalmente os
elementos do bloco para fins de layout.

Alinhando Centro Utilizando a margem de
propriedade
Elementos de bloco pode ser de centro-alinhados, definindo as margens
esquerda e direita para "auto".

Nota: Usando margin: auto; no vai funcionar no IE8 e anteriores, a menos
que um DOCTYPE! declarada.
Definir as margens esquerda e direita para auto especifica que eles devem
dividir a margem disponvel de forma igual. O resultado um elemento
centrado:
Exemplo
.center {
margin-left: auto;
margin-right: auto;
width: 70%;
background-color: #b0e0e6;
}
Dica: Centro-alinhamento no tem efeito se a largura de 100%.

Esquerda e Direita Alinhamento Usando a
posio de propriedade
Um mtodo de elementos de alinhamento est a utilizar o posicionamento
absoluto:
Exemplo
.right {
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
}
Nota: elementos posicionados absolutos so removidos do fluxo normal, e
pode sobrepor elementos.

Crossbrowser problemas de compatibilidade
Ao alinhar elementos como este, sempre uma boa idia para predefinir
margin e padding para o elemento <body>. Isso para evitar diferenas
visuais em diferentes navegadores.
H um problema com o IE8 e anteriores, quando se utiliza a propriedade
position. Se um elemento de recipiente (no nosso caso <div
class="container">) tem uma largura especificada, ea declarao DOCTYPE!
Est faltando, IE8 e verses anteriores ir adicionar uma margem de 17px
no lado direito. Este parece ser o espao reservado para uma barra de
rolagem. Sempre definir a declarao DOCTYPE ao usar a propriedade
position:
Exemplo
body {
margin: 0;
padding: 0;
}

.container {
position: relative;
width: 100%;
}

.right {
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
}

Esquerda e Direita Alinhamento Usando o
bia propriedade
Um mtodo de elementos de alinhamento est a utilizar a propriedade
flutuador:
Exemplo
.right {
float: right;
width: 300px;
background-color: #b0e0e6;
}

Crossbrowser problemas de compatibilidade
Ao alinhar elementos como este, sempre uma boa idia para predefinir
margin e padding para o elemento <body>. Isso para evitar diferenas
visuais em diferentes navegadores.
H um problema com o IE8 e anteriores, quando o uso da propriedade
float. Se a declarao DOCTYPE! Est faltando, IE8 e verses anteriores ir
adicionar uma margem de 17px no lado direito. Este parece ser o espao
reservado para uma barra de rolagem. Sempre definir a declarao
DOCTYPE ao usar a propriedade float:
Exemplo
body {
margin: 0;
padding: 0;
}

.right {
float: right;
width: 300px;
background-color: #b0e0e6;
}

CSS Combinadores
CSS Combinadores

A combinator algo que explica a relao entre os seletores.
Um seletor de CSS pode conter mais de um seletor simples. Entre os
seletores simples, podemos incluir um elemento de combinao.
Existem quatro combinadores diferentes CSS3:
seletor descendente
seletor filho
seletor irmo adjacente
seletor irmo geral

Selector Descendente
O seletor descendente corresponde a todos os elementos que so
descendentes de um elemento especificado.
O exemplo a seguir seleciona todos os elementos <p> dentro <div>
elementos:
Exemplo
div p {
background-color: yellow;
}

Selector Criana
O seletor de criana seleciona todos os elementos que so os filhos
imediatos de um elemento especificado.
O exemplo a seguir seleciona todos os elementos <p> que so filhos
imediatos de um elemento <div>:
Exemplo
div > p {
background-color: yellow;
}

Ao lado do irmo Selector
O seletor irmo adjacente seleciona todos os elementos que so irmos
adjacentes de um elemento especificado.
Elementos irmos devem ter o mesmo elemento pai, e "adjacente" significa
"imediatamente a seguir".
O exemplo a seguir seleciona todos os elementos <p> que so colocados
imediatamente aps <div> elementos:
Exemplo
div + p {
background-color: yellow;
}

Geral Irmos Selector
O seletor de irmo em geral seleciona todos os elementos que so irmos
de um elemento especificado.
O exemplo a seguir seleciona todos os elementos <p> que so irmos de
<div> elementos:
Exemplo
div ~ p {
background-color: yellow;
}

CSS Pseudo-classes
CSS pseudo-classes so usados para adicionar efeitos especiais a alguns
seletores.

Sintaxe
A sintaxe de pseudo-classes:
selector:pseudo-class {
property:value;
}
CSS classes tambm pode ser usado com as pseudo-classes:
selector.class:pseudo-class {
property:value;
}


Anchor Pseudo-classes
Os links podem ser exibidos de formas diferentes em um navegador de
apoio CSS:
Exemplo
/* unvisited link */
a:link {
color: #FF0000;
}

/* visited link */
a:visited {
color: #00FF00;
}

/* mouse over link */
a:hover {
color: #FF00FF;
}

/* selected link */
a:active {
color: #0000FF;
}


Nota: a: hover deve vir aps a: link ea:! visitou na definio CSS, a fim de
ser eficaz
a: active deve vir depois de a: hover na definio CSS, a fim de ser eficaz!
nomes de classe Pseudo no so case-sensitive.


Pseudo-classes e classes CSS
Pseudo-classes podem ser combinados com classes CSS:
CSS:

a.red:visited {
color: #FF0000;
}

HTML:

<a class="red" href="css_syntax.asp">CSS Syntax</a>
Se o link no exemplo acima foi visto, ele ser exibido em vermelho.

CSS - A: primeira criana Pseudo-classe
A: primeira criana pseudo-classe corresponde a um elemento especificado
que o primeiro filho de outro elemento.

Nota: Para: primeira criana a trabalhar no IE8 e anteriores, a <!
DOCTYPE> devem ser declaradas.
Combine o primeiro elemento <p>
No exemplo a seguir, o seletor corresponde a qualquer elemento <p> que
o primeiro filho de qualquer elemento:
Exemplo
<html>
<head>
<style>
p:first-child {
color: blue;
}
</style>
</head>

<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
</body>
</html>

Combine o primeiro elemento <i> em todos
os elementos <p>
No exemplo a seguir, o seletor o primeiro elemento <i> em todos os
elementos <p>:
Exemplo
<html>
<head>
<style>
p > i:first-child {
color: blue;
}
</style>
</head>

<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>

Combine todos os elementos <i> em todos
os elementos primeiro filho <p>
No exemplo a seguir, o seletor corresponde a todos os elementos <i> em
elementos <p> que so o primeiro filho de um outro elemento:
Exemplo
<html>
<head>
<style>
p:first-child i {
color: blue;
}
</style>
</head>

<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>

CSS - A: Pseudo-classe lang
A: lang pseudo-classe permite definir regras especiais para diferentes
idiomas.

Nota: IE8 suporta o: lang pseudo-classe somente se um <DOCTYPE>
especificado.
No exemplo abaixo, o: class lang define as aspas para os elementos q com
lang = "no":
Exemplo
<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>

<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some
text.</p>
</body>
</html>

Todos CSS Pseudo Aulas / Elements
Selector Example Example description
:link a:link Selects all unvisited links
:visited a:visited Selects all visited links
:active a:active Selects the active link
:hover a:hover Selects links on mouse over
:focus input:focus Selects the input element which has focus
::first-letter p::first-letter Selects the first letter of every <p> element
::first-line p::first-line Selects the first line of every <p> element
:first-child p:first-child Selects every <p> elements that is the first child
of its parent
::before p::before Insert content before every <p> element
::after p::after Insert content after every <p> element
:lang(language) p:lang(it) Selects every <p> element with a lang attribute
value starting with "it"
CSS Pseudo-elementos
CSS pseudo-elementos so usados para adicionar efeitos especiais a
alguns seletores.

Sintaxe
A sintaxe de pseudo-elementos:
selector::pseudo-element {
property:value;
}
CSS classes tambm pode ser utilizado com pseudo-elementos:
selector.class::pseudo-element {
property:value;
}


A :: first-line Pseudo-elemento
O :: primeira linha pseudo-elemento usado para adicionar um estilo
especial para a primeira linha de um texto.
A :: first-line pseudo-elemento s pode ser aplicado para bloquear a nvel
de elementos.
Exemplo
Formate a primeira linha do texto em elementos p:
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
As seguintes propriedades so referentes ao :: primeira linha pseudo-
elemento:
propriedades da fonte
propriedades de cor
propriedades do fundo
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
claro

A :: first-letter Pseudo-elemento
A :: first-letter pseudo-elemento usado para adicionar um estilo especial
para a primeira letra de um texto.
A :: first-letter pseudo-elemento s pode ser aplicado para bloquear a nvel
de elementos.
Exemplo
Formate a primeira letra do texto em elementos p:
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
As seguintes propriedades so referentes ao :: first-letter pseudo-
elemento:
propriedades da fonte
propriedades de cor
propriedades do fundo
propriedades de margem
propriedades de preenchimento
propriedades de fronteira
text-decoration
vertical-align (apenas se "flutuar" "none")
text-transform
line-height
flutuador
claro

Pseudo-elementos e classes CSS
Pseudo-elementos podem ser combinados com classes CSS:
CSS:

p.article::first-letter {color:#ff0000;}

HTML:

<p class="article">A paragraph in an article</p>
O exemplo acima ir exibir a primeira letra de todos os pargrafos com
class = "artigo", em vermelho.

Vrios Pseudo-elementos
Vrios pseudo-elementos tambm podem ser combinados.
No exemplo a seguir, a primeira letra de um pargrafo ser vermelha, em
um tamanho de fonte xx-large. O restante da primeira linha ser azul, e em
small-caps. O resto do pargrafo ser o tamanho e cor da fonte padro:
Exemplo
p::first-letter {
color: #ff0000;
font-size: xx-large;
}

p::first-line {
color: #0000ff;
font-variant: small-caps;
}

CSS - O :: antes de Pseudo-elemento
A :: antes de pseudo-elemento pode ser usado para inserir algum contedo
antes que o contedo de um elemento.
O exemplo a seguir insere uma imagem antes de cada elemento <h1>:
Exemplo
h1::before {
content: url(smiley.gif);
}

CSS - O :: depois Pseudo-elemento
A :: aps pseudo-elemento pode ser usado para inserir algum contedo
depois que o contedo de um elemento.
O exemplo a seguir insere uma imagem aps cada elemento <h1>:
Exemplo
h1::after {
content: url(smiley.gif);
}

Todos CSS Pseudo Aulas / Elements
Selector Example Example description
:link a:link Selects all unvisited links
:visited a:visited Selects all visited links
:active a:active Selects the active link
:hover a:hover Selects links on mouse over
:focus input:focus Selects the input element which has focus
::first-letter p::first-letter Selects the first letter of every <p> element
::first-line p::first-line Selects the first line of every <p> element
:first-child p:first-child Selects every <p> elements that is the first child
of its parent
::before p::before Insert content before every <p> element
::after p::after Insert content after every <p> element
:lang(language) p:lang(it) Selects every <p> element with a lang attribute
value starting with "it"
CSS Barra de Navegao
Demonstrao: Barra de Navegao
CASA NOTCIA ARTIGOS FRUM CONTATO SOBRE

Barras de navegao
Ter fcil de usar, a navegao importante para qualquer site da web.
Com CSS voc pode transformar menus HTML chato em barras de boa
aparncia de navegao.

Barra de navegao = Lista de links
A barra de navegao precisa de HTML padro como base.
Em nossos exemplos, vamos construir a barra de navegao a partir de
uma lista HTML padro.
Uma barra de navegao basicamente uma lista de links, portanto,
usando o <ul> e <li> elementos faz todo o sentido:
Exemplo
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
Agora vamos remover as balas e as margens e preenchimento da lista:
Exemplo
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
Exemplo explicou:
do tipo list-style: none - Remove as balas. A barra de navegao no
precisa de marcadores de lista
Definir margens e padding para 0 para remover as configuraes
padro do navegador
O cdigo, no exemplo acima o cdigo padro usado em ambas as barras
de navegao verticais, e horizontais.

Vertical Navigation Bar
Para construir uma barra de navegao vertical, s precisamos estilizar os
elementos <a>, alm de o cdigo acima:
Exemplo
a {
display: block;
width: 60px;
}
Exemplo explicou:
display: block - Exibindo as ligaes como elementos de bloco faz
toda a rea clicvel link (no apenas o texto), e ele nos permite
especificar a largura
width: 60px - Elementos Bloco ocupam toda a largura disponvel por
padro. Queremos especificar uma largura de 60 px

Nota: Sempre especifique a largura para os elementos <a> em uma barra
de navegao vertical. Se voc omitir a largura, o IE6 pode produzir
resultados inesperados.


Horizontal Barra de Navegao
H duas maneiras de criar uma barra de navegao
horizontal. Usando linha ou flutuante itens da lista.
Ambos os mtodos funcionam bem, mas se voc quiser os links para ser o
mesmo tamanho, voc tem que usar o mtodo flutuante.
Lista de Itens inline
Uma maneira de construir uma barra de navegao horizontal especificar
os elementos <li> como inline, alm de o cdigo "padro" acima:
Exemplo
li {
display: inline;
}
Exemplo explicou:
display: inline; - Por padro, elementos <li> so elementos de
bloco. Aqui, ns removemos as quebras de linha antes e depois de
cada item da lista, para exibi-los em uma linha
Lista de Itens flutuantes
No exemplo acima, as ligaes tm larguras diferentes.
Para todos os links para ter uma largura igual, flutuar os elementos <li> e
especificar uma largura para os elementos <a>:
Exemplo
li {
float: left;
}

a {
display: block;
width: 60px;
}
Exemplo explicou:
float: left - usar float para obter elementos de bloco para deslizar ao
lado do outro
display: block - Exibindo as ligaes como elementos de bloco faz
toda a rea clicvel link (no apenas o texto), e ele nos permite
especificar a largura
largura: 60px - Uma vez que os elementos do bloco assumir-se a
toda a largura disponvel, no podem flutuar ao lado do
outro. Especificamos a largura dos links para 60px
CSS Galeria de Imagens

CSS pode ser usado para criar uma galeria de imagens.

Adicione uma descrio da imagem aqui

Adicione uma descrio da imagem aqui

Adicione uma descrio da imagem aqui

Adicione uma descrio da imagem aqui



Galeria de Imagens
A seguir, galeria de imagens criada com CSS:
Exemplo
<html>
<head>
<style>
div.img {
margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}

div.img img {
display: inline;
margin: 5px;
border: 1px solid #ffffff;
}

div.img a:hover img {
border:1px solid #0000ff;
}

div.desc {
text-align: center;
font-weight: normal;
width: 120px;
margin: 5px;
}
</style>
</head>
<body>

<div class="img">
<a target="_blank" href="klematis_big.htm">
<img src="klematis_small.jpg" alt="Klematis" width="110"
height="90">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm">
<img src="klematis2_small.jpg" alt="Klematis" width="110"
height="90">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm">
<img src="klematis3_small.jpg" alt="Klematis" width="110"
height="90">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm">
<img src="klematis4_small.jpg" alt="Klematis" width="110"
height="90">
</a>
<div class="desc">Add a description of the image here</div>
</div>

</body>
</html>
CSS Imagem Opacidade / Transparncia

Criando imagens transparentes com CSS fcil.
A propriedade de opacidade CSS uma parte da recomendao W3C
CSS3.

Exemplo 1 - Criando uma imagem
transparente
A propriedade CSS3 para a transparncia opacidade .
Primeiro vamos mostrar-lhe como criar uma imagem transparente com
CSS.
Imagem normal:

A mesma imagem com transparncia:

Olhe para o seguinte CSS:
img {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
IE9, Firefox, Chrome, Opera, Safari e usar a propriedade de
opacidade para a transparncia. A propriedade de opacidade pode tomar
um valor 0,0-1,0. Um valor mais baixo torna o elemento mais transparente.
IE8 e uso mais cedo filter: alpha (opacity = x) . O x pode assumir um
valor de 0 -. 100 Um valor mais baixo torna o elemento mais transparente.

Exemplo 2 - Transparncia Imagem - Passe
Effect
Passe o mouse sobre as imagens:

O CSS parece com isso:
Exemplo
img {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}

img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
O primeiro bloco CSS semelhante ao cdigo do Exemplo 1. Alm disso,
ns adicionamos o que deve acontecer quando um usurio pairar sobre uma
das imagens. Neste caso, quer que a imagem no ser transparente quando
o usurio passa o mouse sobre ele.
O CSS para isso : opacidade = 1 .
IE8 e anterior: filter: alpha (opacity = 100) .
Quando o ponteiro do mouse se move para longe da imagem, a imagem
ser transparente novamente.

Exemplo 3 - Texto em caixa transparente
Este um texto que colocado na caixa
transparente. Este um texto que
colocado na caixa transparente. Este um
texto que colocado na caixa
transparente. Este um texto que
colocado na caixa transparente. Este um
texto que colocado na caixa transparente.
O cdigo-fonte se parece com isso:
Exemplo
<html>
<head>
<style>
div.background {
width: 500px;
height: 250px;
background: url(klematis.jpg) repeat;
border: 2px solid black;
}

div.transbox {
width: 400px;
height: 180px;
margin: 30px 50px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox p {
margin: 30px 40px;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>

<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent
box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent
box.</p>
</div>
</div>

</body>
</html>
Primeiro, criamos um elemento div (class = "fundo") com uma imagem de
fundo altura fixa e largura, e uma borda. Ento vamos criar uma div menor
(class = "transbox") dentro do primeiro elemento div. O "transbox" DIV tem
uma largura fixa, uma cor de fundo, e uma fronteira - e
transparente. Dentro da div transparente, ns adicionamos um texto dentro
de um elemento p.
CSS Sprites Imagem
Sprites Imagem
Um sprite de imagem uma coleo de imagens colocadas em uma nica
imagem.
Uma pgina web com muitas imagens pode levar um longo tempo para
carregar e gera vrias solicitaes de servidores.
Usando sprites de imagem ir reduzir o nmero de pedidos de servidores e
economizar largura de banda.

Sprites Imagem - Exemplo Simples
Em vez de usar trs imagens separadas, usamos esta imagem nica
("img_navsprites.gif"):

Com CSS, podemos mostrar apenas a parte da imagem que precisamos.
No exemplo a seguir o CSS especifica qual parte da imagem
"img_navsprites.gif" para mostrar:
Exemplo
img.home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
Exemplo explicou:
<img class="home" src="img_trans.gif"> - define Apenas uma
pequena imagem transparente porque o atributo src no pode ser
vazio. A imagem exibida ser a imagem de fundo que especificar em
CSS
width: 46px; height: 44px; - Define a parte da imagem que deseja
utilizar
background: url (img_navsprites.gif) 0 0; - Define a imagem de
fundo e de sua posio (0px esquerda, superior 0px)
Esta a maneira mais fcil de usar sprites de imagem, agora queremos
expandi-la usando links e pairar efeitos.

Sprites Imagem - Criar uma lista de
navegao
Queremos usar a imagem do sprite ("img_navsprites.gif") para criar uma
lista de navegao.
Ns vamos usar uma lista de HTML, porque pode ser um link e tambm
suporta uma imagem de fundo:
Exemplo
#navlist {
position: relative;
}

#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}

#navlist li, #navlist a {
height: 44px;
display: block;
}

#home {
left: 0px;
width: 46px;
background: url('img_navsprites.gif') 0 0;
}

#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
}

#next {
left: 129px;
width: 43px;
background: url('img_navsprites.gif') -91px 0;
}
Exemplo explicou:
# Navlist {position: relative;} - posio relativa est definida para
permitir o posicionamento absoluto dentro dele
# Navlist li {margin: 0; padding: 0; list-style: none; position:
absolute; top: 0;} - Margem e preenchimento definido como 0, list-
style removida, e todos os itens da lista so absolutos posicionado
Li # navlist, # navlist um {height: 44px; display: block;} - a altura
de todas as imagens so 44px
Agora comeam a posio e estilo para cada parte especfica:
# Casa {left: 0px; width: 46px;} - Posicionado todo o caminho para
a esquerda, ea largura da imagem 46px
# Casa {background: url (img_navsprites.gif) 0 0;} - Define a
imagem de fundo e de sua posio (0px esquerda, superior 0px)
# Prev {left: 63px; width: 43px;} - 63px posicionado direita (#
casa largura 46px + algum espao extra entre os itens), ea largura
43px.
# Prev {background: url ('img_navsprites.gif')-47px 0;} - Define a
imagem de fundo 47px para a direita (largura # casa 46px + 1px
linha divisria)
# Prximo {left: 129px; width: 43px;} - Posicionado 129px para a
direita (incio da # prev 63px + # prev largura 43px + espao
extra), ea largura 43px.
# Prximo {background: url ('img_navsprites.gif')-91px 0;} - Define
a imagem de fundo 91px para a direita (largura # casa 46px + 1px
linha divisria + # largura prev 43px + 1px linha divisria)

Sprites Imagem - Passe Effect
Agora queremos adicionar um efeito de pairar nossa lista de navegao.

A: seletor de foco usado para selecionar elementos, quando voc
passa o mouse sobre eles.

Dica: A: seletor de foco pode ser usado em todos os elementos, no somente
em links.
A nova imagem ("img_navsprites_hover.gif") contm trs imagens de
navegao e trs imagens para usar para efeitos de foco:

Porque esta uma nica imagem, e no seis arquivos separados, no
haver nenhum atraso de carregamento quando o usurio passa o
mouse sobre a imagem.
Ns s adicionar trs linhas de cdigo para adicionar o efeito hover:
Exemplo
#home a:hover {
background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
background: url('img_navsprites_hover.gif') -47px -45px;
}

#next a:hover {
background: url('img_navsprites_hover.gif') -91px -45px;
}
Exemplo explicou:
Casa # a: hover {background: url transparente
('img_navsprites_hover.gif') 0-45px;} - Para todas as trs imagens
em foco especificamos a mesma posio de fundo, apenas 45px mais
abaixo
CSS Tipos de Mdia
Utilizando a regra @ media, um site pode ter um layout diferente para a
tela, impresso, telefone celular, tablet, etc

Tipos de mdia
Algumas propriedades CSS so projetados somente para uma determinada
mdia. Por exemplo, a propriedade "voice-family" projetado para agentes
de usurio auditivas. Algumas outras propriedades podem ser usadas para
diferentes tipos de mdia. Por exemplo, a propriedade "font-size" pode ser
utilizado tanto para a tela e mdia impressa, mas talvez com valores
diferentes. Um documento geralmente necessita de uma fonte de tamanho
maior em uma tela do que no papel, e fontes sans-serif so mais fceis de
ler na tela, enquanto fontes com serifa so mais fceis de ler no papel.

A Regra de mdia @
A regra @ media permite que diferentes regras de estilo para diferentes
mdias na mesma folha de estilo.
O estilo no exemplo abaixo diz ao navegador para exibir a 14 pixels fonte
Verdana na tela. Mas se a pgina impressa, ser em uma fonte de 20
pixels, e em uma cor vermelha:
Exemplo
@media screen {
p {
font-family: verdana,sans-serif;
font-size: 14px;
}
}

@media print {
p {
font-size: 20px;
color: red;
}
}

Outros Tipos de mdia
Media Type Description
all Used for all media type devices
aural Used for speech and sound synthesizers
braille Used for braille tactile feedback devices
embossed Used for paged braille printers
handheld Used for small or handheld devices
print Used for printers
projection Used for projected presentations, like slides
screen Used for computer screens
tty Used for media using a fixed-pitch character grid, like teletypes
and terminals
tv Used for television-type devices

CSS Atributo Seletores
Elementos de estilo HTML com atributos
especficos
possvel estilizar elementos HTML que possuem atributos especficos, e
no apenas de classe e ID.

Nota: IE7 e IE8 apoio atribuem seletores somente se um DOCTYPE
especificado!.


CSS [atributo] Selector
O [atributo] seletor usado para selecionar elementos com o atributo
especificado.
O exemplo a seguir seleciona todos os elementos <a> com um atributo de
destino:
Exemplo
a[target] {
background-color: yellow;
}

CSS [atributo = valor] Selector
O [atributo = valor] seletor usado para selecionar elementos com o
atributo e valor especificado.
O exemplo a seguir seleciona todos os elementos <a> com um atributo
target = "_blank":
Exemplo
a[target="_blank"] {
background-color: yellow;
}

CSS [atributo ~ = value] Selector
O [atributo ~ = value] seletor usado para selecionar elementos com um
valor de atributo que contm uma palavra especificada.
O exemplo a seguir seleciona todos os elementos com um atributo de ttulo
que contm uma lista separada por espao de palavras, um dos quais
"flor":
Exemplo
[title~="flower"] {
border: 5px solid yellow;
}
O exemplo acima ir corresponder a elementos com title = "flor", title =
"flor do vero", e title = "flor nova", mas no title = "meu-flor" ou title =
"flores".

CSS [atributo | = value] Selector
O [atributo | = value] seletor usado para selecionar elementos com o
atributo especificado comeando com o valor especificado.
O exemplo a seguir seleciona todos os elementos com um valor de atributo
de classe que comea com "top":
Nota: O valor tem que ser uma palavra inteira, sozinho, como class =
"top", ou seguido de um hfen (-), como class = "top-texto"!
Exemplo
[class|="top"] {
background: yellow;
}

CSS [atributo ^ = valor] Selector
O [atributo ^ = valor] seletor usado para selecionar elementos cujo valor
do atributo comea com um valor especificado.
O exemplo a seguir seleciona todos os elementos com um valor de atributo
de classe que comea com "top":
Nota: O valor no tem que ser uma palavra inteira!
Exemplo
[class^="top"] {
background: yellow;
}

CSS [atributo $ = value] Selector
O [atributo $ = value] seletor usado para selecionar elementos cujo valor
do atributo termina com um valor especificado.
O exemplo a seguir seleciona todos os elementos com um valor de atributo
de classe que termina com "teste":
Nota: O valor no tem que ser uma palavra inteira!
Exemplo
[class$="test"] {
background: yellow;
}

CSS [atributo * = valor] Selector
O [atributo * = valor] seletor usado para selecionar elementos cujo valor
do atributo contm um valor especificado.
O exemplo a seguir seleciona todos os elementos com um valor de atributo
de classe que contm "te":
Nota: O valor no tem que ser uma palavra inteira!
Exemplo
[class*="te"] {
background: yellow;
}

Formas Styling
Os seletores de atributo pode ser til para modelar formas sem classe ou
ID:
Exemplo
input[type="text"] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}

input[type="button"] {
width: 120px;
margin-left: 35px;
display: block;
}