HTML solo puede presentar cierta información y tiene capacidades de rendimiento muy limitadas. Debe usarse junto con CSS para hacer que la página sea más hermosa. En una página web, todo el código de estilo se puede sacar del documento HTML y colocarlo en una hoja de estilo separada.
Los estilos CSS se pueden introducir en documentos HTML como archivos separados (archivos de tipo .css) o escribirse directamente en documentos HTML. Se pueden dividir aproximadamente en los siguientes cuatro métodos:
1. Hoja de estilo integrada
Incrustado: concentre los estilos CSS en el par de etiquetas <style></style> del par de etiquetas <head></head> de la página web;
Agregue estilos CSS a la etiqueta <style> en la etiqueta <head> de HTML. Los estilos CSS definidos mediante hojas de estilos en línea solo se pueden usar dentro de la página web actual.
<!DOCTYPEhtml><html><head><title>Estilo en línea</title><style>cuerpo{background-color:linen;}h1{color:maroon;margin-left:40px;}</style>< / cabeza><cuerpo><h1>Estilo</h1></body></html>Debido a que la hoja de estilos incrustada necesita definir el estilo CSS dentro del documento HTML, aumentará el tamaño del documento, y cuando otros documentos también necesitan usar el mismo estilo en la hoja de estilos incrustada, no se puede introducir en otros documentos y debe ser Redefinirlo en otros documentos dará lugar a una redundancia de código y no favorecerá un mantenimiento posterior.
2. Estilos en línea
En línea: también llamado en línea, el estilo CSS se establece en el atributo de estilo de la etiqueta. Este enfoque no refleja las ventajas de CSS;
El estilo en línea consiste en definir la información de estilo directamente en el atributo de estilo de la etiqueta HTML. Dado que el estilo en línea se define dentro de la etiqueta, solo es válido para la etiqueta en la que se encuentra.
<!DOCTYPEhtml><html><head><title>En línea</title></head><body><h1style=color:maroon;margin-left:40px>En línea</h1></body >>html > Aunque el estilo en línea puede dar fácilmente estilos CSS a etiquetas HTML, sus deficiencias también son muy obvias y no se recomienda usarlo demasiado.
(1) Definir estilos en línea requiere definir el atributo de estilo en cada etiqueta HTML, lo cual es muy inconveniente;
(2) Tenga especial cuidado al utilizar comillas dobles o comillas simples en estilos en línea, porque los atributos de las etiquetas HTML suelen utilizar comillas dobles para envolver el valor del atributo, como <input type=text>;
(3) Los estilos definidos en estilos en línea no se pueden reutilizar en ningún otro lugar;
(4) Los estilos en línea son muy inconvenientes para el mantenimiento posterior, porque un sitio web generalmente consta de muchas páginas y, al modificar el estilo de la página, las páginas deben modificarse una por una;
(5) Agregar demasiados estilos en línea hará que aumente el tamaño del documento HTML.
3. Hojas de estilo externas
Tipo de enlace: al igual que el cuarto tipo de importación, ambos se denominan tipo externo o tipo de enlace externo. Utilice un enlace para hacer referencia a archivos CSS externos;
Las hojas de estilo externas son la forma más común y recomendada de hacer referencia a CSS. Solo necesita definir el estilo CSS en un archivo de formato .css y luego usar la etiqueta HTML <link> para aplicar el archivo de estilo de formato .css a HTML. el documento.
<!DOCTYPEhtml><html><head><title></title><linkrel=stylesheethref=./style.css></head><body><h1>Hoja de estilo externa</h1></body>< / HTML>
Debido a que el estilo CSS se define en un archivo de formato .css separado, se puede hacer referencia a él entre varias páginas. Si desea modificar el estilo de una página web, solo necesita modificar este archivo de estilo CSS, lo cual es muy conveniente.
4. Importar hoja de estilo
Importado: utilice @import para hacer referencia a archivos CSS externos;
También puedes usar @import para hacer referencia a hojas de estilo externas, lo cual es similar a usar la etiqueta <link>. Primero cree un style.css general y primero importe todos los estilos a style.css.
HTML:
<!DOCTYPEhtml><html><head><title></title><linkrel=stylesheethref=style.css></head><body><h1>Hoja de estilos externa</h1></body></html >
estilo.css:
@import1.css;@import2.css;@import3.css;@import4.css;
1.css: (los css del 1 al 4 son iguales, todos añaden estilos)
.top1{tipo-estilo-lista:none;margin:0;padding:0;}