Olá Pessoal, vamos aqui dar continuidade no assunto CSS no Delphi for PHP. Hoje nesta Quick Tips veremos como utilizar o CSS e quais são as partes de um arquivo CSS. Então chega de papo e vamos ao que interessa.
Como utilizar CSS
Há três maneiras de utilizarmos CSS em nossas aplicações:
Metodo In-line
<Html>
<Head>
<Title>Metodo In-line</title>
</head>
<body style="background-color: #0000FF;">
<p>Página com fundo Azul</p>
</body>
</html>
Interno (a tag style)
<Html>
<Head>
<Title> Metodo Interno </title>
<style type="text/css">
body {background-color: #0000FF;}
</style>
</head>
<body>
<p> Página com fundo Azul </p>
</body>
</html>
Externo (link para uma folha de estilos)
<Html>
<Head>
<Title> Metodo Externo </title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<p>A cor do fundo será definida no arquivo Style.css</p>
</body>
</html>
O método recomendado é o de “linkar” a pagina para uma folha de estilos externa. Uma folha de estilos externa é um simples arquivo de texto com a extensão .css, tal como com qualquer outro tipo de arquivo você pode colocar uma folha de estilos tanto no servidor como no disco rígido. Trabalhando desta maneira podemos “linkar” uma ou varias paginas a um mesmo arquivo de estilo e com isso facilitarmos nosso trabalho.
Estrutura de um arquivo CSS
Os arquivos CSS baseam-se em regras que nada mais são do que uma declaração que segue uma sintaxe própria e que define como será aplicado o estilo a um ou mais elementos HTML Uma regra CSS, na sua forma mais simples possui três elementos: um seletor, uma propriedade e um valor e segue a sintaxe abaixo:
seletor { propriedade: valor; }
Onde Seletor é o elemento HTML identificado por sua tag, ou por uma classe, ou por uma ID, e para o qual a regra será aplicada (por exemplo: <body>, <table>, <h1>, .Myclass, #MyID, etc...). Propriedade seria o atributo HTML ao qual será aplicada a regra (por exemplo: font, color, background, etc...) e por fim Valor, como nome sugere é o valor que será atribuído a propriedade daquele seletor (por exemplo: fonte Negrito, cor Amarelo, fundo Azul, etc...)
Na sintaxe de uma regra CSS, escreve-se o seletor e a seguir a propriedade e valor separados por dois pontos e entre chaves {}. Quando mais de uma propriedade for definida na regra, deve-se usar ponto-e-vírgula para separá-las. O ponto-e-vírgula é facultativo no caso de propriedade única e também após a declaração da última propriedade no caso de mais de uma.
Veja na figura abaixo o que seira um arquivo CSS aberto pelo Delphi for PHP.
Bem pessoal vamos ficar por aqui, na próxima Quick Tips voltaremos ao assunto de CSS no D4PHP.
Abraços !!!!
