Folhas de Estilo Incorporadas
- Método utilizado para aplicar estilo em qualquer elemento da página, por serem incorporados a tag <head>. Quando o style sheet é incluído desta maneira, as definições colocadas ali valem para toda a extensão daquele arquivo HTML. O atributo type="text/css" quer dizer que o estilo se trata de um tipo MIME, para que os browsers que não suportam CSS ignorem o código.
<html>
<head> <style type="text/css"> <!-- h1 {font-family:impact;background:yellow;color:red;} p {color:green;} --> </style> </head> <body> <h1> Este é um titulo HTML usando CSS</h1> <p>Cascading Style Sheet</p> </body> </html>
Exemplo utilizando método Folhas de estilo Incorporadas
Folhas de Estilo Externas
Com este método, pode-se fazer com que várias páginas HTML usem estilos definidos em um único arquivo central. A grande vantagem deste método é que, se você quiser fazer uma mudança nos estilos da página, basta alterar em um único local e todas as páginas vinculadas a ela serão alteradas também.
Exemplo:
<html> <head> <link rel="stylesheet" href="estilos.css" type="text/css"> </head> <body> <h1> Este é um titulo HTML usando CSS</h1> <p>Cascading Style Sheet</p> </body> </html>
Agora para criar o arquivo CSS:
h1{font-family:impact;background:yellow;color=red} p{color=green}
Salve o arquivo como estilos.css.
Exemplo utilizando método Externa
Importação de estilos
A importação de um style sheet é parecida com o método anterior. A diferença é que não se pode combinar o método de link com outros métodos de inserções de estilos, mas a importação pode ser combinada.
Exemplo:
<html> <head> <style type="text/css"> <!-- @import url(estilos.css); --> </style> </head> <body> <h1> Este é um título HTML usando CSS</h1> <p>Cascading Style Sheet</p> </body> </html>
Exemplo utilizando método Importação
Nenhum comentário:
Postar um comentário