Por Cosme Faé |
01 de Junho de 2007
“Do jeito que esse blog está abandonado, será que alguém ainda passa por aqui?”
Bom, acho que muitos já passaram por esse problema: a propriedade min-height não funcionar no Internet Explorer. Vai ai o hack:
/* browsers inteligentes entendem */
.box {
min-height:100px;
}
/* aqui o Internet Explorer entende */
/*\\*/
* html .box {
height:100px;
} /**/
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é |
31 de Janeiro de 2006
Acabei de fazer um vídeo tutorial ensinando os valores da propiedade Overflow.
Não é nenhum bixo-de-sete-cabeças, facinho de compreender. Espero que eu tenha explicado direito.
Quem tiver sugestões ai para um próximo vídeo, pode mandar, e elogios nos comentários desse post também são bem vindos.
Vídeo Tutorial: Utilizando a Propiedade Overflow