Tutoriais
Informática Tutoriais e Programação CSS Pequeno laboratório de CSS I
Novo na Info
Na Aldeia
3630 registros
0 hoje
14 nesta semana
4 neste mêsEstatística
Membros: 3639Artigos: 1045
Links: 90
Leituras: 6681229
Login
Kanji da hora
好
Faça contato
|
Seg 17 Abr 2006 12:43 |
|
Página 1 de 7
IntroduçãoAqui vão algumas considerações importantes. A origem do CSSOriginalmente as tags da linguagem HTML foram projetadas para definir o conteúdo de documentos. Assim "isto é um cabeçalho", "isto é um parágrafo" e "isto é uma tabela" é definido com as tags <h1>, <p> e <table>. O layout do documento ficava por conta do navegador e não havia tags de formatação. Como a evolução dos navegadores não parou, novas tags foram criadas (como <font> e atributos de cor) e foi ficando cada vez mais difícil separar o conteúdo do layout de apresentação. Para resolver este problema, o W3C, o consórcio responsável pela padronização do HTML, criou os STYLES (estilos) na versão 4.0 do HTML. Características do CSSFolhas de estilo definem COMO os elementos HTML são mostrados, da mesma forma que as tags font e os atributos de cor faziam em versões anteriores. Normalmente os estilos são guardados em arquivos externos do tipo .css e podem ser atrelados a uma, várias ou até a todas páginas de um site. Isto facilita enormemente a manutenção - ao invés de alterar trocentas páginas, altera-se apenas um (ou alguns poucos) arquivo de estilo. As informações de estilo podem ser especificadas de várias formas. O estilo pode ser especificado dentro de um determinado elemento HTML, dentro do elemento <HEAD> de uma página HTML ou num arquivo externo. Até mesmo vários arquivos externos podem ser referenciados dentro de um único documento HTML. Quando há mais de uma fonte, os estilos são "cascateados" numa nova folha de estilos "virtual" obedecendo a seguinte prioridade:
Isto significa que, um atributo definido dentro da tag de um elemento terá preferência, mesmo que o mesmo atributo esteja definido numa folha de estilo interna, numa folha de estilo externa ou seja o default do navegador. Sintaxe CSSA sintaxe CSS pede três partes: um seletor, uma propriedade e um valor. O seletor, normalmente, é um elemento ou uma tag HTML e a propriedade é o atributo que se quer alterar atribuindo-lhe um novo valor. A propriedade deve ser separada do valor por dois pontos e ambos ficam entre chaves. Por exemplo, para definir que o corpo do documento seja preto, usa-se: body { color: black } Para um mesmo elemento podemos definir várias propriedades. Por exemplo: p { font-family: "Sans Serif"; text-align: center; color: red; } Observe algumas particularidades:
Agrupamentos também são permitidos. Por exemplo, podemos indicar várias famílias de fontes ou vários elementos. Neste caso, o separador é a vírgula. No caso das famílias de fontes, o navegador procura pela primeira; se não encontrar a fonte, escolhe a segunda e assim sucessivamente. Veja os exemplos abaixo: h1, h2, h3 { color: green; } p { font-family: "Sans Serif", Arial, Verdana; } O seletor classPode-se criar classes para os seletores. A vantagem é que podemos usar o mesmo elemento de diversas formas. Por exemplo, se quisermos ter duas classes diferentes de parágrafos, um com o texto alinhado à direita e outro com o texto centralizado, basta definir: p.direita { text-align: right; } p.centro { text-align: center; } Depois, no documento HTML, é só indicar: <p class="direita">Este texto ficará alinhado à direita</p> <p class="centro">Este texto ficará centralizado</p> 
Apenas UMA classe de atributo pode ser usada num mesmo elemento! <p class="direita" class="centro">este é um parágrafo</p> está errado! As classes não precisam necessariamente estar associadas a um elemento. Estas classes genéricas podem ser usadas com vários elementos que as aceitem, por exemplo: .centro { text-align: center; } que depois pode ser usada em <h1 class="centro">Título centralizado</h1> <p class="centro">Parágrafo centralizado</p> O seletor idTambém podemos definir estilos para elementos HTML com o seletor id. O seletor id é definido como #. Se definirmos um id como #verde { color: green; } poderemos atribuir este estilo para qualquer elemento identificado como "verde". Por exemplo: <p id="verde">Este texto aparecerá em verde</p> <h2 id="verde">Este título aparecerá em verde</h2> Se quisermos restringir a id a algum elemento, como por exemplo o parágrafo, determinamos: p#vermelho { color: red; }
NÃO comece o nome de uma classe ou de uma id com um número. ComentáriosSe você quiser inserir comentários nos seus arquivos .css (e deve mesmo, porque depois de alguns meses você não vai lembrar chongas do que fez), você pode usar os delimitadores de área /* e */ ou o comentário de linha //. /* Toda esta área fica invisível. Os navegadores não tomam conhecimento da sua existência */ p { color : black; font-size: 10px; } // esta linha também será solenemente ignorada! |
|||||||||
| Última atualização ( Qua, 15.04.2009 12:03 ) |
CSS é a abreviação de Cascading Style Sheets. Estilos (styles) normalmente definem a aparência de elementos
