CSS no HTML - Métodos de Aplicação e Colocação
Você está em: Início Tutoriais CSS no HTML – Métodos de aplicação
CSS no HTML – Métodos de Aplicação.
CSS no HTML de sites é muito simples deste que se conheça os principais métodos de aplicação. Vejamos agora como se aplica estes método um por um de forma prática e bem simples usando CSS no HTML.
Uma maneira de aplicar CSS no HTML é pelo uso do atributo style do HTML. Tomando como base o exemplo mostrado anteriormente a cor vermelha para o fundo da página pode ser aplicada conforme mostrado a seguir:
Uma outra maneira de aplicar CSS no HTML é pelo uso da tag <style> do HTML. Como mostrado a seguir:
Salve o arquivo e rode no seu navegador e aparecerá a seguinte imagem:
Veja que é praticamente a mesma imagem do Modelo1, o que mudou foi apenas o código HTML.
O método mais recomendado é o de lincar para uma folha de estilos externa. Usaremos este método nos exemplos deste tutorial. Uma folha de estilos externa é um simples arquivo de texto com a extensão .css. Tal como com qualquer outro tipo de arquivo e você pode colocar uma folha de estilos tanto no servidor de sua hospedagem como no servidor local do seu disco rígido.
Vamos supor, por exemplo, que sua folha de estilos tenha sido nomeada de estilo.css e está localizada no diretório estilo (o que não é necessário, colocar em pasta separada do arquivo HTML). Tal situação está mostrada a seguir:
O que você tem a fazer é criar um link no documento HTML salvo no arquivo (índex.html) para a folha de estilos (estilo.css). O link é criado em uma simples linha de código HTML como mostrado a seguir:
<link rel="stylesheet" type="text/css" href="c:\~documentos~/estilo.css" />
Note que o caminho para a folha de estilos é indicado no atributo (href) e se você observar, verá que o arquivo foi salvo no disco rígido, diretório c:, pasta documentos e arquivo estilo.css. Mas o ideal é você salvar dentro da pasta do seu site, junto com o arquivo index.html, na pasta indicada do seu servidor.
A coisa realmente inteligente disto é que vários documentos HTML podem lincar para uma mesma folha de estilos. Em outras palavras isto significa que um simples arquivo será capaz de controlar a apresentação de muitos documentos HTML. Esta técnica pode economizar uma grande quantidade de trabalho. Se por exemplo, você quiser trocar a cor do fundo de um site com 100 páginas, a folha de estilos evita que você edite manualmente uma a uma as páginas para fazer a mudança nos 100 documentos HTML. Usando CSS no HTML a mudança se fará em uns poucos segundos trocando a cor em uma folha de estilos central.
Abra o bloco de notas NotePade+ + (ou equivalente em outro sistema operacional) e crie dois arquivos — um arquivo HTML (index.html) e um arquivo CSS (estilo.css) — com os seguintes conteúdos:
Salve os dois arquivos na mesma pasta, de predeferência com o nome do seu site e dentro do seu servidor local, caso você ainda não tenha um servidor local, pode salvar na sua área de trabalho para ficar mais fácil. Lembre-se de salvar os arquivos com a extensão apropriada (".css" e ".html")
Coloque dentro do index.html o seguinte código:
Agora coloque dentro do aquivo estilo.css o seguinte código:
Salve os dois arquivos, e abra index.html no seu navegador e veja se abre uma página com o fundo vermelho:
Parabéns! Você construiu sua primeira folha de estilos.
I just want to tell you that I am new to blogging and honestly loved your web-site. Very likely I'm want to bookmark your blog post . You absolutely have wonderful well written articles. Thanks a lot for sharing with us your web page.
Eu só quero te dizer que eu sou novo em blogs e honestamente amava seu web-site. É muito provável que eu estou deseja marcar seu blog. Você absolutamente maravilhosos artigos bem escritos. Muito obrigado por compartilhar conosco sua página web.