titulo

> INTRODUÇÃO (CLASS E ID): A estrutura do css: CLASS: .texto { font-family: Arial, Helvetica, sans-serif; } ou ID: #texto { font-family: Arial, Helvetica, sans-serif; } Uma diferença de se usar '.' ou '#' é o modo de chama-lo no html. Com '.' chama-se por 'class' (

), Já com '#' chama-se por 'id' (

) Outra diferença está ligado ao nivel hierarquico, caso uma tag receba dois estilos, um por 'class' e outro por 'id', a característica dominante será o 'id' (

do html receberá as características escritas no css. Outras opções: #content table#tabela { /* classifica toda tabela (de id="tabela") dentro da div id="content" */ } #content table#tabela a{ /* classifica todos os links da tabela (de id="tabela") dentro da div id="content" */ } body form.formulario { /* classifica toda tag form (de class="formulario") dentro do body */ } body div#content div.info * { /* os ASTERISCOS irá classificar TUDO que está dentro do body > div id="content" > div class="info" */ } PS:O NÍVEL HIRARQUICO:

Estilos para determinar a características do filho: .filho {}; < #filho {}; < div#filho {}; < #pai div#filho {}; < div#pai div#filho {}; < body div#pai div#filho {}; "#filho {};" vale menos do que um estilo mais epecifico como "body div#pai div#filho {};", por exemplo. Independentemente da ordem de processamento do browser. Se existir mais de um estilo ligado ao mesmo ID, vale a última a ser processada pelo browser, seguindo a seguinte ordem: 1ª - inline: é mais forte, pois está dentro da tag e, certamente, será a última a ser processada pelo navegador, ex:

2ª - incorporada Depende! A que vier por ÚLTIMO dentro da tag será a última a ser ou linkada processada pelo navegador. ou importada .incorporada: .linkada: .importada: @import url(outro.css) Exemplo: O estilo ".texto" que estiver dentro do arquivo.css ganha, porem se nele existir um @import url(), dependerá se o import estiver antes ou depois do ".texto" do primeiro css. ////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////// > 3 MODOS PARA CHAMAR O CSS: Existem 3 modos para chamar o css, cada um com sua particulariedade, podemos qualquer um dos três, dependendo do projeto. .................................................................. > MODO 1 - FOLHA DE ESTILO INLINE [MODO SPAN] O css fica dentro do html, servirá quando for necessário criar uma característica de maneira rápida e particular. . O estilo é colocado direto na tag como atributo 'style'

conteúdo

ps:o span tb pode entrar no modo tableless, ou seja vc usaria ... .................................................................. > MODO 1 - FOLHAS DE ESTILO INCORPORADAS [USADO PELO DREAMWEAVER] O css fica dentro do html - temos um único arquivo neste caso, conteúdo e estilo juntos. . O estilo é chamado dentro da tag head: titulo . E é invocado como atributo 'class' na tag html:

texto

.................................................................. > MODO 3a - FOLHAS DE ESTILO LINKADA [MODO TABLELESS] O css fica fora do html - teremos dois arquivos, o html [sem tabelas, usando div's] e o css [folha de estilo], esse é o tableless. O conteúdo fica separado do estilo. . Primeiro invocamos a folha de estilo dentro da tag head do html: titulo . O arquivo.css escreverá as características: #texto{ font-family: Arial, Helvetica, sans-serif; font-size:10px; } . Em seguida chamaremos o estilo dentro do html:

conteúdo

> MODO 3b - FOLHAS DE ESTILO IMPORTADA [MODO TABLELESS] Através de um css linkado no html por: Usa-se: "@import url(outro.css);" sem aspas a fim de importar outra folha de estilo. ////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////