CSS的引入样式
-
内联样式(行内样式)
优点: 优先级较高
缺点: 样式与结构冗余内联样式表就是把css代码直接写在现有的HTML标签中,具体的使用方法如下面所示:
<div style="background-color: aqua;">我是一个div</div> //如果有多条css样式代码设置可以写在一起,中间用分号隔开 设置字体颜色为红色,并且字体大小为14px <div style="color:red;font-size:14px"> </div>
注意:这种样式只会对当前标签起作用,在测试的时候可以使用,不能对样式进行复用,不方便后期维护,不推荐使用
-
内部样式表
优点:样式与结构分离
缺点:样式的复用率较低将样式表编写到head中的style标签中
<style> div { /* 字体大小 */ font-size: 28px; } </style>
-style标签要写在head标签的开始标签和结束标签之间
-
外部样式表
优点:样式与结构分离,解耦;样式的复用率高;定义好的css文件可以应用到多个页面中将样式表编写到外部css文件中,通过link标签将外部文件引入
<link rel="stylesheet" type="text/css" href="文件的路径"/>
将样式编写到外部样式表中,可以在不同的页面中使用同一个样式表,完全将表现和结构分离,方便后期的维护,推荐使用的方式
引入方式的优先级:行内样式 > 内部样式 / 外部样式