Por Cosme Faé |
31 de Março de 2006
A regra CSS e sua sintaxe
- seletor {
- propiedade: valor;
- }
No seletor é o local onde você irá inserir qual elemento terá a regra que você definirá. Pode ser body, span, div, h1, h3, p… E é claro, uma class ou id.
Na propiedade você irá começar a definir as regras do seu seletor como por exemplo: font-size, background-color, margin…
No valor você poderá estar definindo um valor para a sua propiedade, no caso seria: font-size:11px;.
Exemplo de sintaxe
Vamos formatar todos os parágrafos do site.
- p {
- font-family: Arial, Verdana, sans-serif;
- font-size:11px;
- color:#000000;
- }
- Primeiro defini a fonte do texto, a padrão é Arial, caso não exista será substituída por Verdana, caso Verdana não exista ela será substituída por qualquer fonte no computador que não tenha serifa.
- Defini o tamanho da fonte para 11 (onze) pixels.
- A cor será preto. Eu poderia ter inserido a palavra black no lugar do valor #000000.
Agrupamento
O agrupamento de seletores é um método bastante prático de definir regras de estilização e posicionamento para diversos elementos ao mesmo tempo.
Exemplo de Agrupamento
Agrupando todos os cabeçalhos do documento com a mesma estilização. Texto com o valor #444444 e alinhado ao centro.
- h1, h2, h3, h4, h5, h6 {
- color:#444444;
- text-align:center;
- }
O Seletor Classe
Com o seletor classe você poderá definir diferentes estilos para diversos tipos de elementos XHTML.
Exemplo de Seletor Classe
- .pequeno {
- font-size:10px;
- }
- .maior {
- font-size:16px;
- }
Agora no nosso XHTML:
- <p>Lorem ipsum dolor <span class=”pequeno”>sit amet</span>, consectetuer <span class=”maior”>adipiscing elit</span>
In eros est, <span class=”pequeno”>ultricies</span> quis, sagittis auctor, <span class=”maior”>condimentum</span> a, nunc.</p>
Repare que o seletor classe é necessário inserir no CSS um ponto antes do nome. Você pode repetir as classes quantas vezes quiser.
Não use caracteres especiais e números para definir o nome de um seletor, e evite colocar letras maiúsculas. 
O Seletor ID
É possível definir estilos de elementos no XHTML com o seletor de identificação (id). O seletor de identificação é definido com a #. Diferente das Classes, cada ID só poderá ser utilizado uma única vez. Normalmente usamos para definir posicionamento e estilização de titulo, topo, menu, corpo e rodapé.
Exemplo de Seletor ID
Vamos definir uma regra para o nosso topo. Ele terá fundo cinza.
- #topo {
- background-color:#cccccc;
- }
Nosso XHTML ficará assim:
- <div id=”topo”></div>
Comentários no CSS
É bom comentar no seu código CSS para poder futuramente lembrar onde começou a definir tal bloco, etc. Os comentários, como nas demais linguagens, é ignorado pelos browsers. Como na linguagem C, os comentários começam com " / * " e terminam com " */ ".
Exemplo de Comentários no CSS
- /* Aqui começa o topo */ #topo { background-color:#cccccc;
Cuidado para não sujar muito seu código com comentários. Às vezes tentando se organizar, acaba se perdendo no código.
Por Cosme Faé |
30 de Março de 2006
A sigla CSS significa Cascading Style Sheets, em português, Folhas Estilo em Cascata. Utilizando CSS você terá maior controle da apresentação/estilzação do seu layout XHTML ou XML.
Com o CSS a página carrega muito mais rápido, você cria uma única folha de estilo e importa ela em várias páginas. Quando for modificar algo no posicionamento ou estilização do site é só mudar um único arquivo (a folha CSS).
Você deve estar pensando: “Mas a minha folha CSS está imensa, com as minhas marcações font e atributos color, size, family, ficaria um pouco menor”. Pense bem, o user-agent renderizou sua página, agora a folha de estilo está em cache, quando for acessar as outras páginas do site ele só renderizará o conteúdo do corpo (body), assim a velocidade no carregamento melhora.
Quando o cliente disser: “Mude a cor da fonte de todos os textos que estão no conteúdo de todas as páginas.”. Já pensou você ter que editar dezenas de páginas só para mudar a cor da fonte? E pior ainda, o “sócio” do cliente dizer que prefere outra cor. Você ficaria horas e horas em frente ao computador.
Com CSS você só mudará um único valor em uma única página, e automagicamente tudo mudará de acordo com as novas regras definidas.
Se mesmo assim você prefere o modo antigo de estilizar, prepare-se, você terá uma bela dor de cabeça (se não já tem)…
Por Cosme Faé |
29 de Março de 2006
Acho que já deu tempo da galera estudar bastante XHTML com meu post anterior, e como prometido no mesmo, estou trazendo o Exame XHTML. O meu amigo JuseH me deu uma força com PHP, ele me ajudou bastante na parte server-side.
Depois de tanta dor de cabeça com JS, PHP consegui finalizar, e estilizei para ficar com um visual bem bonito (clean). Só de lembrar de cada bug que ocorreu no desenvolvimento… (uff). Espero que todo mundo acerte as questões.
Boa sorte.
Faça o teste: Exame XHTML
[update] Fiz umas alterações nas respostas da número 11 e 14 do exame. A pressa é inimiga da perfeição, eu deveria ter resolvido isso antes… 
[update]
Por Cosme Faé |
28 de Março de 2006
O XHTML, ou eXtensible Hypertext Markup Language, é uma linguaguem de marcação baseada em XML. XHTML Combina as tag’s de marcação HTML com regras da XML. Além de XHTML ser Web Standards.
O XHTML 1.0 tornou-se uma recomendação do World Wide Web Consortium (W3C) no dia 26 de janeiro de 2000.
Para desenvolver um código XHTML válido é necessário seguir umas pequenas regras.
Feche as Tags
É a primeira regra (ou lei, como preferir) para desenvolver um XHTML válido.
Errado: <p>Um dia de sol.
Certo: <p>Um dia de sol.</p>
Tags Vazias
As tags vazias não são permitidas no XHTML, portando, fecha-as.
Errado: <hr>
Certo: <hr />
Errado: <br>
Certo: <br />
Errado: <img src=”imagem.jpg” alt=”imagem”>
Certo: <img src=”imagem.jpg” alt=”imagem” />
Feche os Atributos
Errado:
<frame noresize>
<option selected>
<option checked>
<input readonly />
<input checked />
<textarea nowrap />
Certo:
<frame noresize=”noresize”>
<option selected=”selected”>
<option checked=checked>
<input readonly=”readonly” />
<input checked=”checked” />
<textarea nowrap=”nowrap” />
Atributo NAME
O atributo name foi substituído pelo atributo id. Mas nada o empede de utilizá-lo caso precise.
<input type="text" name="artigo" id="artigo" />
ASPAS nos Atributos
Todos os atributos devem conter aspas abrindo e fechando…
Errado:
<a href=http://www.cosmefae.com/blog>Texto</a>
Certo:
<a href=”http://www.cosmefae.com/blog”>Texto</a>
Utilize Sempre Letras Minúsculas
As tags e atributos devem ser em letras minúsculas. Fica até melhor para se localizar dentro do código.
Errado:
<INPUT TYPE=”TEXT” NAME=”REGRAS” ID=”REGRAS” />
Certo:
<input type=”text” name=”regras” id=”regras” />
Quiz XHTML
Se você já praticou bastante e quer testar seus conhecimentos em XHTML, essa é a hora. São 20 (vinte) questões (em inglês), não esqueça do limite de tempo.
Você ganha 1 (um) ponto para cada questão, no caso, total de 20 (vinte) pontos.
Acesse o Quiz Test XHTML!
Estou no final de um Quiz semelhante a este, mas em português, aguardem o Exame XHTML.
Links Referentes
Veja se o código do seu site está válido:
Por Cosme Faé |
27 de Março de 2006
Doctype quer dizer Document Type Definition (Definição do Tipo de Documento), ou simplesmente, DTD.
É necessário que o user-agent saiba qual a DTD que o documento (X)HTML usa. Por isso existem 3 (três) tipos diferentes:
- Strict: Utilizado no documento XHTML sem nenhum erro.
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
- Transitional: Utilizado quando está com um código migratório (nota: o mais utilizado), do HTML para o XHTML:
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
- Frameset: Utilizado caso exista FRAMES no código-fonte da página:
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
A declaração do Doctype é sempre no ínicio do documento, veja o exemplo:
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<title> Título do Documento </title>
</head>
<body>
[teste]
</body>
</html>
Cada um destes tipos está definido em especificação própria no W3C. Lembrando que é fundamental a especificação do Doctype na página para o user-agent processar os dados sem problema algum. Em alguns browsers - caso não declare o Doctype - o documento entrará em modo “standards”, assim dependendo dos elementos do código-fonte, a página será exiba de forma obsoleta.
