CSS na Wikipedia
http://pt.wikipedia.org/wiki/Cascading_Style_Sheets
Cascading Style Sheets, ou simplesmente CSS, é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.
Ao invés de colocar a formatação dentro do documento, o desenvolvedor cria um link (ligação) para uma página que contém os estilos, procedendo de forma idêntica para todas as páginas de um portal. Quando quiser alterar a aparência do portal basta portanto modificar apenas um arquivo.
Com a variação de atualizações dos navegadores (browsers) como Internet Explorer que ficou sem nova versão de 2001 a 2006, o suporte ao CSS pode variar. O Internet Explorer 6, por exemplo, tem suporte total a CSS1 e praticamente nulo a CSS2. Navegadores mais modernos como Opera, Internet Explorer 7 e Mozilla Firefox tem suporte maior, inclusive até a CSS 3, ainda em desenvolvimento.
A interpretação dos browsers pode ser avaliada com o teste Acid2, que se tornou uma forma base de revelar quão eficiente é o suporte de CSS, fazendo com que a nova versão em desenvolvimento do Firefox seja totalmente compatível a ele assim como o Opera já é.
Agrupar Seletores
Podemos agrupar vários seletores da seguinte forma:
h1,h2,h3,h4,h5,h6
{
color: green;
}
Cor do Texto
cortexto{color:green;}
Cor de Fundo
corfundo{background-color:blue;}
Imagem de Fundo
imagem{ background-image:url(fondo.jpg);}
Exemplo
<HTML><HEAD><TITLE>Exemplo</TITLE>
<STYLE type="text/css">
<!--
P{background-color:black;color:purple; width:400px;border-color:blue; border-width:12px;}
.tuestilo{background-image:url(greenmar.gif); color:yellow;border-style:inset; border-idth:5pt;float:left; width:60px;}
H1{background-color:#afaefd; width:40px; clear:both;padding-right:10px; padding-top:12px;color:navy;}
H3{background-color:blue; margin-left:14px; margin-top:35px;}
-->
</STYLE></HEAD>
<BODY>
<P>Este parágrafo terá texto violeta com em fundo preto e largura de 400 pixels, assim como uma borda azul com uma altura de 12 pixels. </P>
<DIV class="tuestilo">Este parágrafo usará a clase de estilo "tuestilo", usará uma imagen com fundo assim como uma borda estilo "inset"
com uma altura de 5 pontos, permitirá que haja elementos flutuando à sua direita e terá uma largura de 60 pixels.</DIV>
<H1>Entre outras características este bloco tem uma margen interna superior de 12 pixels e uma margen interna direita de 10 pixels.</H1>
<H3>Este bloco usará uma margen esquerda de 14 pixels e uma superior de 35 pixels</H3>
</DIV>
</BODY></HTML>
Tipos de Fontes
<HTML><HEAD><TITLE>UM EXEMPLO SIMPLES</TITLE>
<STYLE TYPE="text/css">
<!--
.meu_estilo{font-size:14pt; font-family:Comic Sans MS; font-weight:Bold; font-style:italic;}
H3 {font-size:25px; font-family:Symbol; font-weight:bold;}
-->
</STYLE></HEAD>
<BODY>
<DIV class="meu_estilo">Estas linhas estão usando o estilo chamado "meu_estilo".</DIV>
<H3>A TAG H3 foi redefinida</H3>
</BODY></HTML>
Propriedades dos Estilos de Texto
<HTML><HEAD><TITLE> MAIS EXEMPLOS </TITLE>
<STYLE type="text/css">
.sublinhado{text-decoration:underline; color:red;}
.tachado{text-decoration:line-through; color:blue;}
.overline{text-decoration:overline; color:purple;}
.pisca{text-decoration:blink; color:green;}
.sangria{text-indent:100px; color:navy;}
.centralizado{text-align:center; color:olive;}
.capitales{text-transform:capitalize; color:silver;}
.maiusculas{text-transform:uppercase; color:#aace34;}
.demoaltura{line-height:150%; color:#eeee44;}
</STYLE>
</HEAD>
<BODY>
<SPAN class="sublinhado">SUBLINHADO</SPAN> <SPAN class="tachado">TACHADO</SPAN>
<SPAN class="overline">OVERLINE</SPAN> <SPAN class="pisca">PISCA</span>
<BR><BR><DIV class="sangria">SANGRIA abcdefghijklmnñopqrstuvwxyz, abcdefghijklmnñopqrstuvwxyz
abcdefghijklmnñopqrstuvwxyz, abcdefghijklmnñopqrstuvwxyz, abcdefghijklmnñopqrstuvwxyz</DIV>
<br>
<DIV class="centralizado">CENTRALIZADO</Div>
<br>
<DIV class="capitales">capitales, abcdef, ghijkl, mnñopq, rstuvw, xyz, capitales.</diV>
<br>
<DIV class="maiusculas">abcdefghijklmnñopqrstuvwxyz</DIV>
<p class="demoaltura">
AAAAAAAAAA<br>BBBBBBBB<br>CCCCCCCCC<br>DDDDDDDDD
</p>
</BODY></HTML>
Tipos de Folhas de Estilo
- Integrado
- Embutido
- Externo
- Integrada ao HTML
Usado nas próprias TAGs HTML, em seu atributo STYLE, como:
<P STYLE="color: #00ff00;">
Para evitar problemas de compatibilidade usar entre <head> e </head>:
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
- Embutida na página
Se usa no cabeçalho do HTML com as tags <STYLE> ... </STYLE>
<STYLE TYPE="text/css">
<!--
IMG { vertical-align: 50%;}
P {color: #00ff00;}
A {font-family: sans-serif;}
A:link {color: #0000ee;}
A:visited {color: #551a8b;}
A:active {color: #ff0000;}
-->
</STYLE>
As linhas:
<!-- e -->
São utilizadas para evitar problemas em navegadores sem suporte a CSS, que no caso considerarão como comentário.
Cria-se trechos de código como o acima na TAG head e utiliza-se os elementos definidos nas TAGs HTML da página, assim:
<P>Este parágrafo terá a cor do texto Azul, pois o elemento P foi definido no trecho acima como azul </P>
- Externo
A opção de uso do CSS recomendada é a de criação de um arquivo externo inteiramente em CSS e se importando esse na página, assim:
<STYLE TYPE="text/css"> <!-- @import url(http://pagina.net) --> </STYLE>
Para compatibilidade com navegadores mais antigos usa-se a sintaxe:
<LINK REL="stylesheet" HREF="estilo.css" TYPE="text/css">
Usando duas Folhas de Estilo
(Exibir e Imprimir)
<LINK REL="stylesheet" MEDIA="screen" HREF="tela.css" TYPE="text/css"> <LINK REL="stylesheet" MEDIA="print" HREF="impressora.css" TYPE="text/css">
Quando o documento é exibido na tela se utilizará o "tela.css", ignorando a segunda folha. E ao imprimir a página se usará a folha "impressora.css", ignorando a anterior.
Folhas de Estilo Persistentes
(Que os navegadores não podem desabilitar)
Aplica-se sempre ao documento sem possibilidade de se desabilitá-la.
Folhas de Estilo Default
Semelhantes às anteriores mas contendo o atributo NAME. Na carga do navegador elas são lançadas na memória e utilizadas na página mas o navegador pode decidir anular seu efeito.
Folhas de Estilo Alternativas
Estas não se aplicam ao documento a menos que o navegador as selecione.
<LINK REL="stylesheet" HREF="folhapersistente.css" TYPE="text/css"> <LINK REL="stylesheet" NAME="Folha Default" HREF="default.css" TYPE="text/css"> <LINK REL="alternate stylesheet" NAME="Folha Alternativa" HREF="alternativa.css" TYPE="text/css">
Vale lembrar que tanto o CSS quanto o JavaScript e outros recursos utilizados na construção de sites não têm seu uso inteiramente padronizado pelos navegadores. Alguns navegadores não seguem ao pé da letra os padrões o que acarreta alguns sites não serem exibidos de forma adequada por todos os navegadores mas apenas por aquele para o qual o programador previu em sua programação. Cabe a nós desenvolvedores evitar o uso de práticas e recursos que não sejam compatíveis com os principais navegadores, para evitar que alguns visitantes tenham problemas ao acessar o site.
Posicionando com Estilo
<html><head><title>Posicionando com CSS</title></head>
<body>
<div id="listagem" style="position:absolute;left:1%;top:1%;width:20%;height:95%;border: solid brown">
<P align="center"><?php include("includes/index.php"); ?></P>
</div>
<div id="cabecalho" style="position:absolute;left:22%;top:1%;width:60%;height:10%;border: solid brown">
<P align="center"><?php include("includes/cabecalho.php"); ?></P>
</div>
<div id="fck" style="position:absolute;left:22%;top:13%;width:60%;height:75%;border: solid brown">
<P align="center"><?php include("includes/fck.php"); ?></P>
</div>
<div id="tags" style="position:absolute;right:1%;top:1%;width:15.5%;height:95%;border: solid brown">
<P align="center"><?php include("includes/tags.php"); ?></P>
</div>
<div id="rodape" style="position:absolute;left:22%;top:90.3%;width:60%;height:5.6%;border: solid brown">
<P align="center"><?php include("includes/rodape.php"); ?></P>
</div>
</body>
</html>
Algumas Propriedades
Propriedades de Texto
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
text-align
text-indent
line-height
Propriedades de Fontes
font-family
font-style
font-variant
font-weight
font-size
font
Propriedades de Quadro
margin-top
margin-botton
margin-right
margin-left
margin
padding-top
padding-right
padding-botton
padding-left
padding
border-top-width
border-right-width
border-botton-width
border-left-width
border-width
border-color
border-style
border-top
border-right
border-botton
border-left
border
width
height
float
clear
Propriedades de Cor e Fundo
color
background-color
background-image
background-repeat
background-attachment
background-position
background
Propriedades de Classificação
display
white-space
list-style-type
list-style-image
list-style-position
list-style
Ferramentas para auxílio no CSS
Existem diversas boas ferramentas para trabalhar ajudando no CSS de sites.
Dreamweaver
É uma ferramenta comercial somente for Windows muito utilizada, especialmente pelos designers.
Aptana
http://www.aptana.com, que inclusive oferece um plugin para o Eclipse. Ele mostra a compatibilidade de cada tag com os principais navegadores, além de contar com ótimo recurso de auto-completar o HTML, JavaScript e CSS. É uma ferramenta free for Windows, Linux e Mac.
BlueFish e Quanta
São muito boas ferramentas para Linux.
Referências
- Free Menu Designs (http://e-lusion.com/design/menu/)
- Gerando estilo CSS para botões - http://
- Dicas de CSS - http://www.phpriot.com/d/articles/client-side/css-tips/index.html
- 53 Técnicas de CSS que você não pode viver sem - http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/
- Tutorial básico de hojas de estilo en cascada - http://web.archive.org/20000601205112/www.geocities.com/lunamatic/tutcss/index.html
- Referências CSS 2.1 - http://www.w3.org/TR/2004/CR-CSS21-20040225
- Recomendações CSS-1 - http://www.w3.org/TR/REC-CSS1
- Recomendações CSS-2 - http://www.w3.org/TR/WD-css2
- CSS Wizard - http://ribafs.net/down/tut/html/wizards/csswiz.html
- CSS para Webdesign - http://www.maujor.com/
- glish.com: CSS Layout Techniques - http://www.glish.com/css/
- tanfa - CSS design, style & fun - http://www.tanfa.co.uk/
- CSS Zen Garden - http://www.csszengarden.com/
Aptana
BlueFish e Quanta