Sintaxe CSS
Olá pessoal!
Vou estar fazendo uma seqüencia de artigos relacionado a CSS, quem ainda não leu o post anterior Introdução a CSS, leia para poder ficar por dentro dessa ferramenta. É bem simples seu entendimento, no artigo de hoje vou falar sobre a sintaxe que é bem simples. Vamos lá?
A sintaxe CSS e formada por seletor, propriedade e valor.
seletor { propriedade:valor; }
Seletor:
O seletor é o que indica ao CSS qual tag que será formatada. Ela pode ser de três formas, tag HTML, class ou ID.
Ex
Tag HTML: p, a, ul, div, etc
Class: .menu, .topo, .geral
ID: #menu, #geral, #conteudo
Detalhe, de acordo com as recomendações da W3C, as ID’s são unicas dentro de um documento (X)HTML ou seja, se criou dois menus, eles não poderão ter a mesma ID. Veja o exemplo.
Errado:
<div id=”menu”>Menu 1</div>
<div id=”menu”>Menu 2</div>
Certo:
<div id=”menu”>Menu 1</div>
<div id=”submenu”>Menu 2</div>
Já as class elas podem ser repetidas dentro de um mesmo documento diferente da ID.
Ex:
<div class=”menu”>Menu 1</div>
<div class=”submenu”>Menu 2</div>
Exemplo de seletor:
p { propriedade:valor;}
.menu { propriedade:valor;}
#geral { propriedade:valor;}
No exemplo acima mostra como o seletor é aplicado a sintaxe.
Propriedade:
A propriedade é onde definimos como será nossa formatação, como cor do texto, margem, tamanho… Veja no exemplo abaixo o nome de algumas propriedade.
Ex:
Color: Cor do texto;
Background-color: Cor de fundo;
margin: Margem;
font-size: Tamanho do texto;
Existe varias propriedade, apenas citei algumas.
Valor:
As propriedade mencionadas acima necessitam de um valor próprio para que elas funcionem.
Ex:
Color: Cor em exadecimal (#FFFFFF) ou RGB(255,255,255)
Background-color: Também utliza exadecimal ou RGB;
margin: A margem pode ser definada em pixel, cm… ;
font-size: Pode usar px, pt…;
Agora vamos ver como ficaria o código CSS. Nesse exemplo vou apenas colorir a cor de fundo e alterar a cor e tamanho do texto.
Ex:
<style type=”text/css”>
body { color:#FFFFFF; background-color:#1F1BE3; font-size:12pt;}
p { text-align:center;}
</style>
<body>
<p>MXStudio</p>
</body>
Como puderam observar utilizei mais de uma propriedade em um mesmo seletor, isso e totalmente valido, desde que separados por ponto-e-virgula(;). Nos próximos artigos vou estar mostrando há fazer varias coisas com CSS, como, menu, layout…
Bom pessoal por hoje é só! Até++!
Escrito por Jean_Carlos
on abril 28, 2008. Arquivado em CSS.
Você pode seguir as respostas a esse artigo pelo RSS 2.0.
Você pode deixar respostas para esse artigo
Gostei. Bem prático, ótimo para quem está iniciando em CSS.
parabéns,muito legal