CSS的引入方式:
- 内联样式(行内样式 style):
缺点:样式与结构冗余
优点:优先级较高
内联样式表就是把css代码直接写在现有的HTML标签中,具体的使用方法如下面所示:
<div style="color:red">设置文字的颜色为红色</div>
这种样式只会对当前标签起作用,在测试的时候可以使用,不能对样式进行复用,不方便后期维护,不推荐使用。
- 内部样式表:
缺点:样式的复用率较低
优点:样式与结构分离
将样式表编写到head中的style标签中
<style type="text/css">
p{
color:red;
background-color:yellow;
}
</style>
注意点: style标签要写在head标签的开始标签和结束标签之间(也就是和title标签是兄弟关系)
- 外部样式表
优点:样式与结构分离,解耦;样式的复用率高(框架:例如bootstrap), 共用,定义好的css文件可以应用到多个页面中。
1.将样式表编写到外部的CSS文件中,然后通过link标签将外部文件引入
<link rel="stylesheet" type="text/css" href="引入文件的路径"/>
将样式编写到外部样式表中,可以在不同的页面中使用同一个样式表,完全将表现和结构分离,方便后期的维护,推荐使用的方式
2.@import url(),还可通过import方式导入CSS文件
@import引入方式会先加载html,再加载css;当网络环境较差时,会出导致页面效果较差的现象,所以该方式不建议使用;
<style>
/*要写在style标签的最前面,否则不会生效 或者直接在外部css文件中直接使用*/
@import url('./style.css');
</style>
优先级:行内样式>内部样式/外部引入
CSS选择器
标签选择器
作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性
格式: 标签名称{
属性:值;
}
注意点:
1.标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签
2.标签选择器无论标签藏得多深都能选中
3.只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input....)
id选择器
作用: 根据指定的id名称找到对应的标签, 然后设置属性
格式: #id名称{
属性:值;
}
类选择器
作用: 根据指定的类名称找到对应的标签, 然后设置属性 格式:
.类名{
属性:值;
}
- 后代选择器
作用: 找到指定标签的所有特定的后代标签, 设置属性
格式: 标签名称1 标签名称2{
属性:值;
}
先找到所有名称叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签, 然后在设置属性
例如:div p{}
注意点: 1.后代选择器必须用空格隔开
2.后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
- 子元素选择器
作用: 找到指定标签中所有特定的直接子元素, 然后设置属性
格式: 标签名称1>标签名称2{
属性:值;
}
注意点: 1.子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
2.子元素选择器之间需要用>符号连接, 并且不能有空格