Rogério Lino » o que e

CSS – O que é?

Rogério Alencar Lino Filho — Wed, 05 Jul 2006 04:54:49 +0000

CSS (Cascading Style Sheet) são folhas de estilo em cascata.

Pra que servem?

Servem para definir um estilo para o seu documento Web (HTML, XHTLM, por exemplo). Ao invez de você ter que toda hora definir dentro da tag usada os atributos desejados, basta fazer isso uma vez pelo CSS.

Ex.: Se você quer que toda a tag

tenha a fonte de cor azul, Verdana e tamanho 12px. Basta configurar ela no CSS dessa maneira:

p {
font: 12px Verdana;
color: blue;
}

E assim todas as tag

terão essa mesma característica. Caso você não queira que isso se aplique a todas mas sim em apenas algumas tag

, você pode definir uma classe com tais características e depois dentro da tag chamar essa classe.

Ex.:

.minhaclasse {
font: 12px Verdana;
color: blue;
} repare que para definir uma classe é necessário começar com um ponto.

e na tag:

class=”minhaclasse“> Meu parágrafo aqui

Como que eu uso o CSS?

Há duas maneiras de aplicar uma folha de estilo em seu documento, uma é definir na própria página, ou chamar um arquivo externo de extensão .css. A segunda opção posibilita muito mais flexibilidade, devido a que você não irá precisar mudar os estilos página por páginas, caso venha querer mudar a “cara” do seu documento, e sim só alterar uma vez o próprio arquivo .css.

Sintaxe:

A sintaxe do CSS é muito simples. Primeiro coloca o nome da tag que queira definir o estilo abra “{” coloca os atributos e depois fecha “}”.

Os nomes das classes devem ser iniciados com um “.” e dos ID com “#“.

Ex.:

body {
background: black;
}

.minhaclasse {
color: #FF0000;
}

#meuDiv {
width: 100px;
height: 200px;
}

mais aqui

A diferença primordial entre class e id, é que a mesma classe você usa mais de uma vez em tags diferentes, enquanto o id é usado uma única vez – por uma

por exempo – pois o nome declarado no id serve para identificar aquela tag (exclusiva), como era feito pelo atributo name.

Definindo o estilo pela própria página:

Se você não ver porquê criar um arquivo externo ou que só vai precisar usá-lo em uma página, basta colocar o código do CSS dentro da tag

minhaclasse“> Meu parágrafo aqui

Repare que o CSS propriamente dito vem dentro de um comentário ( –> ), isso acontece para evitar bugs de alguns browser antigos, mas será ignorados pelos browsers mais novos.

Definindo o estilo através de um arquivo externo:

Pode-se chamar um arquivo externo de duas maneiras, uma já utrapassada e pouco usada e a mais semânticamente correta usando a tag – tag na qual adiciona informações externas na página.

Primeira:

Segunda, e recomendada:

<link rel=”stylesheet” href=”style.css” type=”text/css”/>

Para entender um pouco mais do porquê de tanto atributos vamos analisar um-por-um :

href: igual ao da tag , define o caminho.

rel: vem do ingles relationship (relacionamento), com o atual arquivo especificado no href.

A tag também deverá estar contida na tag .

Alguns dos atributos mais utilizados:

background: cor; /* cor do fundo da página */
color: cor; /* cor da fonte */
font: familia; /* ex.: Verdana, Arial, Tahoma */
margin: top right bottom left; /* margin e os sentidos */
padding: top right bottom left; /* espaçamento dentro e os sentidos */
width: valor /* largura */
height: valor /* altura */
text-align: valor /* alinhamento do texto – center, left, right, justify */
border: largura tipo cor /* largura, tipo (solid, dotted, dashed), cor */

mais sobre:

Maujor.com
Maujor.com Tutorial
W3.org
W3.org Use Link
W3schools.com
W3schools.com examples
Wikipedia.org

XHTML – O que é?

Rogério Alencar Lino Filho — Mon, 03 Jul 2006 19:17:28 +0000

XHTML (Extensible Hypertext Markup Language) é uma linguagem de marcação baseada em XML escrita para substituir o HTML.

No XML podemos criar nossas próprias tags, e o XHTML já vem com as tags pré-definidas baseadas nas tags já conhecidas do HTML. Utilizando as regras do XML.

Já que o XHTML usa as tags do HTML para que utilizá-lo?

Imagine que para cada página da internet que você fosse ver um código diferente. E que cada pessoa fosse definir o seu padrão. Seria muito difícil verificar se aquele código estaria dentre os padrões. É aí que entra o XHTML.

Para construir uma página em XHTML você deverá seguir os padrões da W3C, padronizando os códigos e tornando mais fácil sua validação e a legibilidade.

Por exemplo: todas as tags e seus atributos devem ser escritos em letra minúscula, todo valor dos atributos devem estar entre “” (alt=”Olá”), e as tags simples devem ser fechadas com “/>” ().

Alguns exemplos:

Tags e atributos:

errado:

certo:

Aninhamento das tags:

errado:
parágrafo negrito

certo:
parágrafo negrito

O XHTML é dividido em três tipos (DOCTYPE):

Strict: o mais rigoroso, exige que seja seguido por completamente os padrões.
Transitional: transição da forma antiga de marcação para uma nova forma. Utilizado por quem ainda está preso à alguma forma antiga em seu site. Sendo um pouco menos rigoroso que o Strict.
Frameset: usado quando se utiliza frames no site.

Principais diferenças entre XHTML e HTML

Além das tags escritas em letra minúscula, o fechamento obrigatório das tags, e as aspas. Também a sintaxe dos atributos devem ser escritas por completo (
para
). E a “troca” do atributo name para o atributo id.

Logo veremos mais a fundo o que são DOCTYPE e como funcionam e a declaração de um XHTML.

mais sobre:
Maujor.com – Tutorial XHTML
W3.org – O que é XHTML?
W3schools – XHTML validation
W3Schools – Diferença entre XHTML e HTML
Revolução.ect.br – O que é XHTML?
Revolução.etc.br – Doctype
Linha de Código – Tutorial XHTML
Linha de Código – Escrevendo um XHTML válido

HTML – O que é?

Rogério Alencar Lino Filho — Fri, 30 Jun 2006 17:42:26 +0000

HTML (Hyper Text Markup Language) é uma linguagem interpretada por browsers (navegadores) para exibir textos e gráficos pela Web; Formado, estruturado, por Tag’s.
Para desenvolver uma página HTML não é necessário mais do que um simples Bloco de Notas, desde que salve como a extensão .html.

Exemplo de página HTML:

Minha Home Pag

Seja bem vindo!

no exemplo acima temos uma simples página com o seguinte conteúdo sendo exibido no corpo da página (body) : “Seja bem vindo!”, formatado pela Tag
que define o parágrafo. E no título (title) na barra do browser: “Minha Home Page”.

Repare que as todas as Tag’s do exemplo são fechadas com a repetição de seu nome acrescentando uma “/” na frente, o que mostra para o browser quando a Tag é fechada. O que veremos mais a fundo nos próximos tópicos sobre Tag’s.

mais sobre:
http://www.w3.org/MarkUp/
http://www.w3.org/MarkUp/Guide/
http://www.criarweb.com/artigos/7.php?manual=11