Aplicativos em PHP/Referências/CSS

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>:

- 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:

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">

Compatibilidade entre Navegadores

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.