Todos os posts da Categoria: Posts de: novembro de 2008
Boas práticas em CSS
Está interessado em aprender boas práticas no desenvolvimento CSS? Então seria uma boa você dar uma olhada nesse overview:
Estrutura mínima de um documento XHTML
Para aquelas pessoas que estão começando agora no mundo do desenvolvimento web e não sabem como iniciar um documento XHTML, vou mostrar nesse post um exemplo muito simples que pode até ser usado com um template para futuros arquivos html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Exemplo de XHTML Strict</title>
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<p>…Conteúdo do XHTML aqui…</p>
</body>
</html>
Vamos as explicações:
- Doctype: Utilize sempre Doctype Strict, pois assim você força o browser a seguir corretamente os padrões web, dentro do possível, sempre que possível.
- xml:lang=”pt-br” lang=”pt-br”: Aqui é onde você define a linguagem do seu documento previsto no XML document schemas
- title, meta, stylesheet e scripts: Todos eles são definidos dentro da Tag head do seu HTML, title para título da página, meta para meta tags, stylesheet para o CSS e scripts são onde você irá adicionar seus arquivos JavaScript.
- body: É aí dentro que você irá construir sua página, todo o código HTML virá dentro da tag body.
Como podem ver não existem muitos segredos ao se escrever documentos XHTML.
BlueTrip CSS Framework
Os Frameworks foram criados para auxiliar os desenvolvedores na criação de seus projetos web, tornado o trabalho menos árduo. Hoje em dia você pode encontrar Frameworks para as mais diversas linguagens, inclusive para CSS. Algumas pessoas descriminam sua utilização, alegando que você irá “desaprender” CSS. Não vejo por esse lado, eu acho que você deve estar aberto a conhecer novas técnicas, e com base nisso acabei descobrindo mais um Framework para CSS.
BlueTrip CSS é framework formado por um mix de vários outros frameworks tais como: 960.gs, Blueprint, LogiCSS, YAML, Elements, YUI, e Boilerplate. Seu criador somou as melhores técnicas utilizadas nesses Frameworks em um só.
Vejam alguns exemplos de utilização:
Bordas redondas com CSS
Segue abaixo um simples código para se produzir bordas redondas com CSS:
border-radius: 9px; /* CSS 3 */ -o-border-radius: 9px; /* Opera */ -icab-border-radius: 9px; /* iCab */ -khtml-border-radius: 9px; /* Konqueror */ -moz-border-radius: 9px; /* Firefox */ -webkit-border-radius: 9px; /* Safari */
Internet Explorer? Como ele não possui suporte a CSS 3, a solução seria ignorá-lo, ou então utilizar JavaScript ou imagens. Exemplo.
Diferença entre elementos inline e de bloco em HTML
Entender como os elementos HTML são renderizados na página é essencial para aqueles que estão embarcando agora no mundo do desenvolvimento web. Já vi muitas pessoas passarem por problemas por não entenderem isso, aliás, muitos programadores, no decorrer do desenvolvimento acabam tendo problemas com o HTML que foi desenvolvido pois ao tentarem efetuar alguma alteração acabam utilizando tags que não são necessárias, e aí os problemas começam. Então, para evitarmos esses problemas vou mostrar aqui que os elementos HTML são renderizados de 3 formas diferentes: Tags a níveis de bloco, Inline e Invisíveis.
Elementos a nível de bloco
Os elementos de bloco em HTML utilizam toda a sua largura disponível e criam uma linha invisível antes e depois de si próprio. Os elementos a nível de bloco são os seguintes:
address, blockquote, center, dir, div, dl, dt, dd, frameset, fieldset, form, h1, h2, h3, h4, h5, h6, hr, menu, noframes, noscript, ol, ul, li, p, pre, table, tbody, thead, tfoot, tr, td, th
Eu sou um elemento a nível de bloco
Elementos Inline
Os elementos HTML a nível inline são aqueles que ocupam somente sua largura necessária e não criam linhas antes e depois de si. Os elementos a nível inline são os seguintes:
a, abbr, acronym, applet, b, basefont, bdo, big, br, button, cite, code, del, dfn, em, font, i, iframe, img, input, ins, kbd, label, map, object, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var
Eu sou um elemento a nível inline, Eu sou mais um elemento a nível inline
Elementos Invisíveis
São aqueles elementos que existem na página, mas não são mostrados ao usuário:
base, isindex, link, meta, script, style, title
Uma dica é que em CSS você pode tranformar um elemento de bloco em inline ou vice-versa através da propriedade CSS display.
