quinta-feira, 9 de agosto de 2012

HTML + CSS: Conceitos básicos

Como você já sabe, o HTML lhe oferece uma maneira de descrever a estrutura do conteúdo em seus arquivos. Quando o broswer exibe seu HTML, ele utiliza seu próprio estilo padrão para apresentar essa estrutura. Entretanto, confiar o estilo ao browser obviamente não fará você ganhar algum premio  de "designer do mês". Aqui que entra a CSS. As CSS lhe oferecem uma maneira de descrever o modo como o seu conteúdo deve ser apresentado.



Cascading Styke Sheets(CSS) nada mais é que uma linguagem de estilo que é utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML.

então:
HTML é usado para  estruturar conteúdos. CSS é usado para formatar conteúdos estruturados.

Principais benefícios do CSS:

  • Controle do layout de vários documentos a partir de uma simples folha de estilo;
  • Maior precisão no controle de layout;
  • emprego de variadas, sofisticadas e avançadas técnicas de desenvolvimento;
Para incrementar sua pagina WEB com CSS existe diferentes maneiras. Irei apresentar as duas mais comuns.
Na primeira você deverá adicionar à sua pagina o elemento <style>  como mostra a figura abaixo.



Na segunda opção, cria-se um arquivo separado com as configurações do CSS, exemplo style.css, bastando apenas referencia-lo no seu HTML. 
OBS: Neste exemplo o arquivo está na mesma pasta do arquivo HTML.


Está técnica pode economizar uma grande quantidade de trabalho. Pois toda a configuração de seu site estarão em apenas um arquivo, não precisando alterar em todos caso seja necessário.



O conteúdo do código acima com nenhum atributo definido no CSS terá a forma seguinte:




Agora vamos definir alguns atributos. Pegue o mesmo código e adicione o seguinte conteúdo dentro do retângulo vermelho(1º opção) ou cole no arquivo criado (2º opção):



  • background-color -> define a cor de fundo como dourado.
  • margin-left: 20%; -> define a margem a esquerda.
  • margin-right: 20%; ->  define a margem a esquerda
  • border: 1px dotted gray; -> define a borda pontilhada e cinza em torno do corpo.
  • padding:10px 10px 10px 10px; -> cria um pouco de enchimento em torno da página.
  • font-family: sans-serif -> define a fonte a ser usada no texto.
Pergunta: Pra que serve aquele body { 
                                                              
                                                                } ??????
Resposta: O "body" na CSS significa que todo o código CSS entre o "{" e "}" se aplica ao conteudo dentro do elemento <body> do HTML.

Com essas CSS a página já ganha um visual mais agradável.





HTML e CSS como pode ser notado são linguagens completamente diferentes, sendo que isso acontece porque elas tem funções totalmente diferentes. Cada uma é boa naquilo que faz.


Lista de propriedades com exemplos: Clique aqui!


Recapitulando


  • HTML é usada para estruturar a sua página WEB.
  • CSS é utilizada para controlar a apresentação do seu HTML.

Fonte:
Serie Use a Cabeça HTML com CSS & XHTML 2º ediação de Elizabeth Freeman & Eric Freeman.!  Confira.!
Fonte 02
Fonte 03

Nenhum comentário:

Postar um comentário