文章目录
一、设置CSS样式
有三种设置方式。
1、在HTML标签内设置：仅对当前标签有效。
①代码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>这是网页标题</title></head><body><divstyle="border: 2px double black;width: 100px;height: 100px;"></div></body></html>
②显示效果
2、在head标签内设置：对当前页面有效
①代码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>这是网页标题</title><styletype="text/css">.one{width: 100px;height: 100px;border: 2px solid rgb(25, 23, 27);background-color: green;margin-top: 20px;margin-left: 10px;}</style></head><body><divclass="one"></div><divclass="one"></div><divclass="one"></div></body></html>
②显示效果
3、引入外部CSS样式文件
①代码
html文件
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>这是网页标题</title><linkrel="stylesheet"href="divstyle.css"></head><body><divclass="one"></div><divclass="one"></div><divclass="one"></div></body></html>
css文件
.one{width: 100px;height: 100px;border: 2px solid rgb(25, 23, 27);background-color: blue;margin-top: 20px;margin-left: 10px;}
②显示效果
二、CSS代码语法
①CSS样式由选择器和声明组成，而声明又由属性和值组成。
②属性和值之间用冒号隔开。
③多条声明之间用分号隔开。
④使用/* … */声明注释。
三、CSS选择器
1、标签选择器
①代码
HTML代码：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>这是网页标题</title><linkrel="stylesheet"href="divstyle.css"></head><body><p>这是第一个段落！</p><p>这是第二个段落！</p><p>这是第三个段落！</p></body></html>
css代码：
p{font-size: 32px;color: blueviolet;font-family:"微软雅黑";}
②显示效果
2、id选择器
①代码
HTML代码：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>这是网页标题</title><linkrel="stylesheet"href="divstyle.css"></head><body><p>这是第一个段落！</p><pid="two">这是第二个段落！</p><p>这是第三个段落！</p></body></html>
css代码：
#two{font-size: 20px;color: blueviolet;background-color: aqua;}
②显示效果
3、类选择器
①代码
HTML代码：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>这是网页标题</title><linkrel="stylesheet"href="divstyle.css"></head><body><pclass="one">这是第一个段落！</p><pid="two">这是第二个段落！</p><p>这是第三个段落！</p></body></html>
css代码：
.one{font-size: 12px;color: blue;background-color: red;}
②显示效果
JavaScript在下一篇文章
本文转载自: https://blog.csdn.net/m0_46653805/article/details/122807565
版权归原作者 叶绿体不忘呼吸 所有， 如有侵权，请联系我们删除。
版权归原作者 叶绿体不忘呼吸 所有， 如有侵权，请联系我们删除。