{"id":25,"date":"2008-12-22T13:20:57","date_gmt":"2008-12-22T15:20:57","guid":{"rendered":"http:\/\/www.blog.kadunew.com\/?p=25"},"modified":"2009-02-15T12:16:55","modified_gmt":"2009-02-15T14:16:55","slug":"introducao-as-css","status":"publish","type":"post","link":"https:\/\/www.kadunew.com\/blog\/css\/introducao-as-css","title":{"rendered":"Introdu\u00e7\u00e3o as CSS"},"content":{"rendered":"

N\u00e3o satisfeito com a maneira que as p\u00e1ginas da Internet eram formatadas o Noruegu\u00eas H\u00e5kon Wium Lie cria em 1994 as CSS.<\/p>\n

CSS \u00e9 a abrevia\u00e7\u00e3o para o termo em ingl\u00eas Cascading Style Shet, traduzido para o portugu\u00eas como folha de estilo em cascata. A defini\u00e7\u00e3o para CSS que est\u00e1 no site do W3C \u00e9:<\/p>\n

\u201cFolha de estilo em cascata \u00e9 um mecanismo simples para adicionar estilos (por exemplo: fontes, cores, espa\u00e7amentos) aos documentos Web\u201d<\/p><\/blockquote>\n


\nAs CSS tem por finalidade criar a apresenta\u00e7\u00e3o das informa\u00e7\u00f5es marcadas com (X)HTML. A (X)HTML foi criada para ser uma linguagem de marca\u00e7\u00e3o e estrutura\u00e7\u00e3o de conte\u00fados na Web. N\u00e3o cabe \u00e0 (X)HTML fazer apresenta\u00e7\u00e3o dos elementos, como por exemplo: cores, tamanhos de fontes, alinhamentos. Para a (X)HTML fica apenas a marca\u00e7\u00e3o, por exemplo: definir qual \u00e9 o t\u00edtulo principal da p\u00e1gina, estruturar os par\u00e1grafos, cita\u00e7\u00f5es, etc. Resumidamente podemos dizer:
\n(X)HTML para estruturar e CSS para apresentar
\nAssim em nosso projeto n\u00e3o temos um acoplamento, temos em uma camada a estrutura do documento e em outra camada a apresenta\u00e7\u00e3o do mesmo. N\u00e3o se misturam.<\/p>\n

Sintaxe CSS<\/h3>\n
\"sintaxe
sintaxe css<\/figcaption><\/figure>\n

Uma regra CSS pode ter mais de uma declara\u00e7\u00e3o que devem ser separadas por \u201c ; \u201d.<\/p>\n

Por exemplo:<\/h3>\n
P{\r\n  color:#000000;\r\n  text-align:right;\r\n  background:#cccccc;\r\n  font-family:\u201dtimes new roman\u201d, verdana, arial;\r\n}\r\n<\/pre>\n
A regra CSS acima estiliza os par\u00e1grafos da seguinte forma: Cor do texto preto, alinhamento \u00e0 direita e uma cor de fundo cinza, definimos tamb\u00e9m uma fam\u00edlia de fontes. O navegador do usu\u00e1rio procura primeiro a fonte Times New roman, caso esta fonte n\u00e3o esteja instalada no computador do usu\u00e1rio a pr\u00f3xima a ser procurada ser\u00e1 verdana e assim por diante. Repare que no primeiro nome de fonte tivemos que usar \u201c \u201c (aspas) porque o nome da fonte \u00e9 uma palavra composta.
\nA regra acima tamb\u00e9m pode ser escrita assim:<\/p>\n
p{color:#000000;text-align:right;background:#cccccc;  font-family:\u201dtimes new roman\u201d, verdana, arial;}<\/pre>\n
O ponto e virgula \u00e9 facultativo no caso de uma declara\u00e7\u00e3o ou ap\u00f3s a \u00faltima declara\u00e7\u00e3o.
\nAs regras CSS n\u00e3o s\u00e3o case sensitive (voc\u00ea pode usar letras mai\u00fasculas e min\u00fasculas)
\nVoc\u00ea pode tamb\u00e9m dar m\u00faltiplos espa\u00e7os, que ser\u00e3o tratados como espa\u00e7os simples. <\/p>\n
Exemplo:<\/h3>\n
p{   color: #000000; }<\/pre>\n
Vinculando folha de estilos aos seus documentos.<\/h3>\n
Temos tr\u00eas formas de utilizar CSS nos documentos.<\/p>\n
Estilo inline:<\/strong> Escrever a regra CSS diretamente dentro da tag de abertura do documento.<\/p>\n
<p style=\u201dcolor:#ffffff;font-size:16px;\u201d><\/pre>\n
Estilo incorporado:<\/strong> Outra forma de escrever estilos diretamente no documento. Nesse m\u00e9todo voc\u00ea escreve as regras dentro das tags <\/p>\n