Funcionamento Do
Exames: Funcionamento Do. Pesquise 862.000+ trabalhos acadêmicosPor: andrepeteca • 22/9/2013 • 474 Palavras (2 Páginas) • 244 Visualizações
Funcionamento do CSS → muitas das propriedades usadas em CSS são semelhante aquelas do HTML, uma sintaxe básica do CSS, suponhamos que desejamos uma cor de fundo vermelho para a página web.
HTML → <body bgcolor="#FF0000">
CSS → {body "background-color:#FF0000">}
Aplicando CSS a um documento THML → Podemos aplicar CSS para um documento HTML de três maneiras distintas.
Método 1: In-line (atribuindo style) → tomando como base 0 exemplo anterior (cor vermelha para o fundo da página)
<html>
<head>
<title> Meu documentos HTML </title>
</head>
<body style="background-color:#FF0000">
<p>Pagina com o fundo vermelho</p>
</body>
</html>
Método 2: Interno (tag style)
<html>
<head>
<title> Meu documentos HTML </title>
<style type="text/css">
body{background-color:#FF0000;}
</style>
</head>
<body>
<p>Pagina com o fundo vermelho</p>
</body>
</html>
Método 2: Externo (link para uma folha de estilo) → o método recomendado é o de link para a folha de estilo externa.
Este método será utilizado em outro exemplos.
Uma folha de estilo externa e um simples arquivo de texto com a extensão .CSS tal como qualquer outro tipo de arquivo, você do colocar uma folha de estilo tanto no servidor como no disco rígido.
Por exemplo que sua folha de estilo tenha sido nomeada de style.css e está localizada no diretório style tal situação e mostrada a baixo.
O "truque" é criar um link no documento HTML (default.htm) para a folha de estilos (style.css). O link é criado em uma simples linha de código HTML como mostrado a seguir:
<link rel="stylesheet" type="text/css" href="style/style.css" />
Notar que o caminho para a folha de estilos é indicado no atributo href.
Esta linha de código deve ser inserida na seção header do documento HTML, isto é, entre as tags <head> e </head>. Conforme mostrado abaixo:
<html>
<head>
<title> Meu documentos HTML </title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<p>Pagina com o fundo vermelho</p>
</body>
</html>
Este link informa ao navegador para usar o arquivo CSS na renderização e apresentação
...