CSS引用方法有两种,一种是内部引用,一种是外部引用。
内部引用
<!DOCTYPE html> <html> <head> <style> body { background-color: lightblue; } h1 { color: white; text-align: center; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
在这种方法中,样式代码位于HTML文档的头部,使用<style>标签包裹。可以在一个文档中定义多个样式,从而使得整个文档的外观能够保持一致。但是,这种方法的缺点是如果需要在不同的页面使用相同的样式,需要在每个页面中都使用相同的代码,增加了代码的冗余。
外部引用
外部引用CSS文件是将CSS代码从HTML文档中分离出来,放置在单独的CSS文件中。使用<link>标签将CSS文件与HTML文档链接起来,以便浏览器能够正确地获取文档的外观。
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
这种方法的优点是能够轻松地维护整个网站的外观,只需在CSS文件中修改样式即可使整个站点的外观发生变化。缺点是需要另外创建一个CSS文件,增加了文件的数量和下载时间。
综上所述,CSS引用方法的选择取决于具体的应用场景。在对整个站点的外观进行统一设计时,外部引用是更好的选择。在某个页面需要特定的样式时,内部引用更为方便。在使用CSS时,应充分考虑其优缺点,选择合适的引用方式。