在HTML中新建CSS文件的方法有很多,这里我将详细介绍两种常用的方法:通过HTML的<link>
标签引入外部CSS文件和使用<style>
标签内嵌CSS样式。
方法一:通过HTML的<link>
标签引入外部CSS文件
1、在你的项目文件夹中创建一个CSS文件,你可以使用任何文本编辑器来创建这个文件,例如Notepad++、Sublime Text或者Visual Studio Code等,将文件命名为styles.css
(或者你喜欢的任何名称,但建议使用.css
扩展名)。
2、打开你的HTML文件,在<head>
标签内添加一个<link>
标签,指向刚刚创建的CSS文件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF8"> <meta name="viewport" content="width=devicewidth, initialscale=1.0"> <title>Document</title> <!在这里添加 <link> 标签 > <link rel="stylesheet" href="styles.css"> </head> <body> <!页面内容 > </body> </html>
3、现在,你可以在CSS文件中编写样式规则了,为body
元素设置背景颜色和字体大小:
body { backgroundcolor: lightblue; fontsize: 18px; }
4、保存CSS文件和HTML文件,然后在浏览器中打开HTML文件,你应该能看到页面的背景颜色已经变成了浅蓝色,字体大小也有所改变。
方法二:使用<style>
标签内嵌CSS样式
1、打开你的HTML文件,在<head>
标签内添加一个<style>
标签。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF8"> <meta name="viewport" content="width=devicewidth, initialscale=1.0"> <title>Document</title> <!在这里添加 <style> 标签 > <style> body { backgroundcolor: lightblue; fontsize: 18px; } </style> </head> <body> <!页面内容 > </body> </html>
2、现在,你可以在<style>
标签内编写样式规则了,为body
元素设置背景颜色和字体大小:
body { backgroundcolor: lightblue; fontsize: 18px; }
3、保存HTML文件,然后在浏览器中打开HTML文件,你应该能看到页面的背景颜色已经变成了浅蓝色,字体大小也有所改变。
在HTML中新建CSS文件有两种方法:通过HTML的<link>
标签引入外部CSS文件和使用<style>
标签内嵌CSS样式,这两种方法各有优缺点,你可以根据自己的需求和喜好选择合适的方法,如果你需要为多个HTML文件共享相同的样式,建议使用外部CSS文件;如果你只需要为单个HTML文件设置样式,可以使用内嵌CSS样式。
最新评论
本站CDN与莫名CDN同款、亚太CDN、速度还不错,值得推荐。
感谢推荐我们公司产品、有什么活动会第一时间公布!
我在用这类站群服务器、还可以. 用很多年了。