1. CSS和HTML的结合方式
-
内联样式/行内样式
在标签内部，通过style属性设置元素的样式
key:value value;（由于内联样式的复用性非常差，所以开发中基本不使用内联样式）
<div style="border: 1px solid red;">div标签</div> -
内部样式表
将样式编写到head中的style标签中，然后通过CSS选择器来选中元素并为其设置各种样式
<!DOCTYPE html> <html> <head> <style> /*注意css内的注释方式与html不同*/ div{ border: 1px solid red; } span{ border: 2px solid yellow; } </style> </head> </html> -
外部样式表
把css样式编写到一个外部的CSS文件中，然后通过link标签来引入外部的CSS文件
样式可以在不同页面之间进行复用，同时能利用缓存机制加快网页的加载速度，提高用户的体验
/*css文件内*/ div{ border: 1px solid red; } span{ border: 2px solid yellow; }<!--html文件内--> <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="WebTest.css"/> </head> </html>