A um mesmo elemento podemos designar distintas classes da seguinte maneira:
<div class="primeira segunda terceira">…</div>
As classes devem ser declaradas dessa forma, separadando com espaço os nomes dos seletores podemos aplicar quantas classes quisermos ao mesmo elemento. Você conhecia esse truque? Conte-me aqui a sua experiência!
Diferentemente de outras linguagens, tais como Perl ou C++, nas quais você precisa escrever vários comandos para produzir uma simples pagina HTML, em PHP você precisa apenas somar o HTML aos comandos PHP, demarcando-os por meio de tags (marcadores) especiais.
Nota: É importante que você já conheça um pouco de HTML para dar continuidade a este estudo, se esse não é seu caso, sugiro que aprenda HTML antes.
< ?php
echo “forma mais usada de marcação HTML” ;
?>
<? echo “forma simplificada” ?>
Existem ainda outras duas formas uma que são semelhantes ás declarações de JavaScript e a outra do ASP, sendo esta última necessária uma configuração particular para funcionar que não vem ao caso explicar aqui, pois vamos nos ater ao estilo de marcação 1. Vamos criar uma pasta em \WOS\WWW com o nome de exe_2 e criar um arquivo dessa forma, abra esse arquivo e cole o código em seu editor.
É gente, além de escrever para esse humilde blog, agora também vou começar a escrever para o site Oficina da Net, um portal direcionado aos desenvolvedores web. Estou escrevendo na coluna XHTML, que pode ser acessada aqui. Nesse 1° artigo eu publiquei uma matéria que havia colocado aqui no meu blog, que se chama: Uma vez programando errado, sempre dará errado. Eu acho importante isso, manter o código sempre organizado que para uma eventual manutenção, não ocorra problemas.
Os pseudo elementos :after e :before servem para inserir conteúdo gerado depois ou antes de cada elemento. Um exemplo de uso seria se quisessemos inserir conteúdo depois e antes dos links. Veja o código:
<div id="link1">
<a href="#">Contato</a>
</div>
<div id="link2">
<a href="#">Sobre</a>
</div>
E o nosso CSS fica da seguinte forma:
#link1:after { content: "Exemplo de After"; }
#link2:before { content: "Exemplo de Before"; }
Veja um exemplo em funcionamento, mas se você usa o IE como browser, não vai conseguir ver essa propriedade em funcionamento, eu aconselho você então a usar um outro browser como o Opera, ou o Firefox.
Com a propriedade font podemos alterar o estilo(style), o peso(weight), o variant(mostrar o texto em maiúsculas), o tamanho(size), o line-height(altura da linha), e a própria propriedade font.
font: italic bold normal small/1.4em Verdana, sans-serif;
o código acima pode ser lido da seguinte maneira: Da esquerda pra direita, o primeiro item deixaria nosso texto em itálico, com um peso bold, o variant normal, um tamanho relativo, depois a altura da linha setada em 1.4em e a font definida como Verdana, ou se não for encontrada no sistema, sans-serif.
Aqui é onde definimos uma “família de fontes”. A 2 possíveis valores:
Se você adicionar um nome da família, é aconselhável também adicionar a família genéria em sua extremidade. Por que isso é priorizado na lista. Assim, se o usuário não tiver o nome o nome da font especificado em font-family, ele usará a mesma família genérica.
font-family: Verdana, sans-serif;
