O HTML só pode apresentar algumas informações e tem capacidades de desempenho muito limitadas. Ele precisa ser usado em conjunto com CSS para deixar a página mais bonita. Em uma página da web, todo o código de estilo pode ser movido do documento HTML para uma folha de estilos separada.
Os estilos CSS podem ser introduzidos em documentos HTML como arquivos separados (arquivos do tipo .css) ou escritos diretamente em documentos HTML. Eles podem ser divididos nos quatro métodos a seguir:
1. Folha de estilo incorporada
Incorporado: concentre os estilos CSS no par de tags <style></style> do par de tags <head></head> da página da web;
Adicionar estilos CSS à tag <style> na tag <head> do HTML. Os estilos CSS definidos usando folhas de estilo incorporadas só podem ser usados na página da web atual.
<!DOCTYPEhtml><html><head><title>Estilo embutido</title><style>body{background-color:linen;}h1{color:maroon;margin-left:40px;}</style>< / head><body><h1>Estilo</h1></body></html>Como a folha de estilo incorporada precisa definir o estilo CSS dentro do documento HTML, ela aumentará o tamanho do documento e, quando outros documentos também precisarem usar o mesmo estilo na folha de estilo incorporada, ele não poderá ser introduzido em outros documentos e deve ser redefinido em outros documentos levará à redundância de código e não é propício para manutenção posterior.
2. Estilos embutidos
Inline: Também chamado de inline, o estilo CSS é definido no atributo style da tag. Esta abordagem não reflete as vantagens do CSS;
O estilo inline consiste em definir as informações de estilo diretamente no atributo style da tag HTML. Como o estilo inline é definido dentro da tag, ele só é válido para a tag na qual está localizado.
<!DOCTYPEhtml><html><head><title>Inline</title></head><body><h1style=color:maroon;margin-left:40px>Inline</h1></body </html >Embora o estilo inline possa facilmente fornecer estilos CSS às tags HTML, suas deficiências também são muito óbvias e não é recomendado usá-lo muito.
(1) A definição de estilos embutidos requer a definição do atributo de estilo em cada tag HTML, o que é muito inconveniente;
(2) Tenha especial cuidado ao usar aspas duplas ou aspas simples em estilos embutidos, porque os atributos das tags HTML geralmente usam aspas duplas para envolver o valor do atributo, como <input type=text>;
(3) Os estilos definidos em estilos embutidos não podem ser reutilizados em nenhum outro lugar;
(4) Os estilos inline são muito inconvenientes na manutenção posterior, porque um site geralmente consiste em muitas páginas e, ao modificar o estilo da página, as páginas precisam ser modificadas uma por uma;
(5) Adicionar muitos estilos embutidos fará com que o tamanho do documento HTML aumente.
3. Folhas de estilo externas
Tipo de link: como o quarto tipo de importação, é chamado de tipo externo ou tipo de link externo. Use link para fazer referência a arquivos CSS externos;
Folhas de estilo externas são a forma mais comum e recomendada de referenciar CSS. Você só precisa definir o estilo CSS em um arquivo de formato .css e, em seguida, usar a tag HTML <link> para aplicar o arquivo de estilo de formato .css ao HTML. o documento.
<!DOCTYPEhtml><html><head><title></title><linkrel=stylesheethref=./style.css></head><body><h1>Folha de estilo externa</h1></body>< / HTML>
Como o estilo CSS é definido em um arquivo de formato .css separado, ele pode ser referenciado entre várias páginas. Se você quiser modificar o estilo de uma página da web, basta modificar esse arquivo de estilo CSS, o que é muito conveniente.
4. Importar folha de estilo
Importado: Use @import para fazer referência a arquivos CSS externos;
Você também pode usar @import para fazer referência a folhas de estilo externas, o que é semelhante ao uso da tag <link>. Crie primeiro um style.css geral e importe todos os estilos para style.css primeiro.
HTML:
<!DOCTYPEhtml><html><head><title></title><linkrel=stylesheethref=style.css></head><body><h1>Folha de estilos externa</h1></body></html >
estilo.css:
@import1.css;@import2.css;@import3.css;@import4.css;
1.css: (os css de 1 a 4 são iguais, todos adicionam estilos)
.top1{tipo de estilo de lista:none;margem:0;preenchimento:0;}