Tutorial básica sobre css.
Bom, tem muita gente que programa sites mas não sabe o que é CSS, é uma linguagem para estilos que define o layout de documentos HTML, ou PHP. Por exemplo, CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos e muito mais, é muito útil pois você não precisará ficar mechendo arquivo por arquivo, para mudar, cores, marguens, tam. de fontes e etc.
1° - Benefícios do css.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- maior precisão no controle do layout;
- aplicação de diferentes layouts para servir diferentes mídias (tela, impressora, etc.);
- emprego de variadas, sofisticadas e avançadas técnicas de desenvolvimento.
2° - Criando o .css e botando o script nele. (criar e configurar um script simples usando o DW ou o bloco de notas)
Código:
Ex 1 : body {background-color: #FF0000; margin: 0px; }
Aqui voce estária configurando o background geral da página e a margem dela, o "body" é a página inteira,use sempre o ";" para separar as propriedades "{" para iniciar o código e "}" para fechar o código, crie um arquivo .css para botar o script (aconselho usar o DreamWeaver) entenda um pouco mais nesta imagem.
[Only registered and activated users can see links. Click Here To Register...]
Código:
Ex 2 : .menuprin {background-color:#000000; padding: 0px 0px 0px 0px; }
Aqui estamos configurando uma table que supostamente seria o menu superior do site, se você deseja usar ela somente uma vez no site utilize "#" antes do script, mas como usarei denovo, botei "." antes do script.
3° - Integrando o que você fez no .css em seu site
Quando o arquivo vem de fora do seu arquivo php, por exemplo.
[Only registered and activated users can see links. Click Here To Register...]
Neste caso o script para você botar em seu "index.php" no caso seria:
Código:
<html>
<head>
<title>Meu documento</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
Este link informa ao navegador para usar o arquivo CSS na renderização e apresentação do layout do documento HTML ou PHP, ou seja, com uma mudança no .css, você podera mudar em todos os arquivos do site por um único arquivo sem ter nescessidade de ficar mudando arquivo por arquivo. Veja um exemplo na imagem abaixo.
[Only registered and activated users can see links. Click Here To Register...]
Agora, incluindo o script na sua tabela, se lembram do ".menuprin" ??
Código:
<td class="menuprin"></td>
Pronto, você agora pode manuziar essa tabela do jeito que quizer em vários arquivos modificando apenas um arquivo, espero que tenham gostado. E se eu tiver explicado algo errado me corrijam, pois é meu primeiro tutorial e também quem tiver alguma dúvida entrar em contato comigo via MP.
Créditos
- DarkADM, por montar e fazer a tutorial.
- Html.net, por fornecer as imagens.
