本篇文章为 CSS 基础系列笔记第二篇,参考 黑马程序员pink老师前端入门教程
- 如有侵权联系删除,如有问题欢迎指出。
其他CSS基础相关文章:
CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表
CSS基础「三」盒子模型/产品模块案例/圆角边框/盒子阴影/文字阴影
CSS基础「七」精灵图 \ 字体图标 \ 三角 \ 用户界面样式 \ 页面初始化
文章目录
1. CSS 复合选择器
在 CSS 中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的
- 复合选择器可以更准确、更高效的选择目标元素(标签)
- 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的
- 常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等
1.1 后代选择器
后代选择器又称为包含选择器,可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。
语法格式
元素1 元素2 { 样式声明 }
- 元素2 可以是儿子,也可以是孙子等,只要是元素1 的后代即可
- 元素 1 和 元素 2 可以是任意基础选择器
- 简而言之,元素一就是起到一个限定的作用
示例
<head>
...
<style>
/* 将ol中li改为颜色改为绿色 */
ol li {
color: green;
}
ol li a {
color: indianred;
}
.nav li {
color: yellow;
}
</style>
</head>
<body>
<ol>
<li> ol 的孩子</li>
<li> ol 的孩子</li>
<li> ol 的孩子</li>
<li><a href="#"> ol 的孙子 </a></li>
</ol>
<ol class="nav">
<li> ol 的孩子</li>
<li> ol 的孩子</li>
<li> ol 的孩子</li>
</ol>
</body>
1.2 子元素选择器
子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。与后代选择器不同,子选择器只能选择自己的亲儿子,而不能选择孙子、重孙等等
语法格式
元素1 > 元素2 { 样式声明 }
对比一下,如果使用后代选择器
<head>
...
<style>
.nav a {
color: steelblue;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">我是儿子</a>
<p>
<a href="#">我是孙子</a>
</p>
</div>
</body>
如果使用的是子选择器,那么
<head>
...
<style>
.nav>a { /* 只修改了此处代码 */
color: violet;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">我是儿子</a>
<p>
<a href="#">我是孙子</a>
</p>
</div>
</body>
1.3 并集选择器
并集选择器可以选择多组标签,同时为他们定义相同的样式,通常用于集体声明
语法格式
元素1, 元素2 { 样式声明 }
- 并集选择器是各选择器通过英文逗号 “ , ” 连接而成,任何形式的选择器都可以作为并集选择器的一部分
- 逗号可以理解为和的意思
- 通常用于集体声明
示例
<style>
div,
p {
color: teal;
}
</style>
1.4 伪类选择器
伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果
伪类选择器书写最大的特点是用冒号 “ : ” 表示,比如:hover
、:first-child
伪类选择器很多,比如有链接伪类、结构伪类等,这里先给讲解常用的链接伪类选择器和:focus
伪类选择器
举例说明一下伪类选择器的作用,比如将鼠标放在链接上,会出现下面这种效果,这就依赖于伪类选择器
1、链接伪类选择器
a:link /* 选择所有未被访问的链接 */
a:visited /* 选择所有已被访问的链接 */
a:hover /* 选择鼠标指针位于其上的链接 */
a:active /* 选择活动链接(鼠标按下未弹起的链接)*/
- 为了确保生效,请按照此循顺序声明
:link
=>:visited
=>:hover
=>:active
- 理解记忆,LoVe HAte
- 因为 a 链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式
示例
<style>
/* 未访问的链接设置为黑色 */
a:link {
color: #333;
text-decoration: none;
}
/* 点击过的链接会变成黄色 */
a:visited {
color: orange;
}
/* 鼠标经过时链接变成蓝色 */
a:hover {
color: skyblue;
}
/* 鼠标按下但没有松开时显示红色 */
a:active {
color: red;
}
</style>
-
鼠标未放上时
-
鼠标放上但未按下时
-
鼠标按下但未松开时
实际开发中一般 a
和 a:hover
就足够用
/* a 是标签选择器 所有的链接 */
a {
color: gray;
}
/* :hover 是链接伪类选择器 鼠标经过 */
a:hover {
color: red; /* 鼠标经过的时候,由原来的 灰色 变成了红色 */
}
2、focus 伪类选择器
:focus
伪类选择器用于选取获得焦点的表单元素。焦点就是光标,一般情况<input>
类表单元素才能获取,因此这个选择器也主要针对于表单元素来说
语法格式
input:focus { 样式声明 }
示例
<head>
...
<style>
/* 把获得光标的 input 表单元素选取出来 */
input:focus {
background-color: skyblue;
color: tomato;
}
</style>
</head>
<body>
<input type="text"> <br>
<input type="text"> <br>
<input type="text">
</body>
2. CSS 元素显示模式
在CSS中,根据元素显示模式的不同元素标签被分为了两类:行内元素(inline-level)、块元素(block-level)
2.1 块元素
常见的块元素有
<h1>
~<h6>
、<p>
、<div>
、<ul>
、<ol>
、<li>
等,其中<div>
标签是最典型的块元素
块级元素的特点
- 自己独占一行
- 高度、宽度、外边距以及内边距都可以控制
- 宽度默认是容器(父级宽度)的100%
- 是一个容器及盒子,里面可以放行内或者块级元素
注意
- 文字类的元素内不能使用块级元素
<p>
标签主要用于存放文字,因此<p>
里面不能放块级元素,特别是不能放<div>
- 同理,
<h1>
~<h6>
等都是文字类块级标签,里面也不能放其他块级元素
2.2 行内元素
常见的行内元素有
<a>
、<strong>
、<b>
、<em>
、<i>
、<del>
、<s>
、<ins>
、<u>
、<span>
等,其中<span>
标签是最典型的行内元素。有的地方也将行内元素称为内联元素
特点
- 相邻行内元素在一行上,一行可以显示多个
- 高、宽直接设置是无效的
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或其他行内元素
注意
- 链接里面不能再放链接
- 特殊情况链接
<a>
里面可以放块级元素,但是给<a>
转换一下块级模式最安全
2.3 行内块元素
在行内元素中有几个特殊的标签 ——
<img />
、<input />
、<td>
,它们同时具有块元素和行内元素的特点,有些资料称它们为行内块元素
特点
- 和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙,一行可以显示多个(行内元素特点)
- 默认宽度就是它本身内容的宽度(行内元素特点)
- 高度、行高、外边距以及内边距都可以控制(块级元素特点)
2.4 元素显示模式转换
特殊情况下,我们需要元素模式的转换。简单理解: 一个模式的元素需要另外一种模式的特性,比如想要增加链接
<a>
的触发范围,给行内元素设置块级元素所具有的高度和宽度属性
语法格式
/* 转换为块元素 */
display:block;
/* 转换为行内元素 */
display:inline;
/* 转换为行内块元素 */
display:inline-block;
示例:将行内元素转换为块元素
- 直接对行内元素设置范围,没有变化
- 进行显示模式转换为块元素,可以设置宽度高度,且独占一行
示例:转换为行内块元素
<head>
...
<style>
span {
width: 150px;
height: 100px;
background-color: tomato;
display: inline-block;
}
</style>
</head>
<body>
<span>行内元素转换为行内块元素</span>
</body>
2.5 综合案例:侧边栏
实现小米官网侧边栏,效果如下
实现代码
<head>
...
<style>
a {
height: 40px;
width: 233px;
font-size: 14px;
color: #efefef;
background-color: #9d9b9b;
/* 当行间距和盒子高度相等时,可以实现文字垂直居中 */
line-height: 40px;
text-indent: 2em;
text-decoration: none;
/* 转换为块元素 */
display: block;
}
a:hover {
background-color: #ff6700;
}
</style>
</head>
<body>
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本 显示器</a>
<a href="#">家电 插线板</a>
<a href="#">出行 穿戴</a>
<a href="#">智能 路由器</a>
<a href="#">健康 儿童</a>
<a href="#">耳机 音箱</a>
<a href="#">生活 箱包</a>
</body>
- 当行间距和盒子高度相等时,可以实现文字垂直居中
3. CSS 背景
通过 CSS 背景属性,可以给页面元素添加背景样式
- 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等
3.1 背景颜色
background-color
属性定义了元素的背景颜色
background-color:颜色值;
一般情况下元素背景颜色默认值是 transparent(透明),我们也可以手动指定背景颜色为透明色
background-color:transparent;
3.2 背景图片
background-image
属性描述了元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片。优点是非常便于控制位置(精灵图也是一种运用场景)
background-image : none | url (url)
参数值 | 作用 |
---|---|
none | 无背景图(默认的) |
url | 使用绝对或相对地址指定背景图像 |
3.3 背景平铺
如果需要在 HTML 页面上对背景图像进行平铺,可以使用
background-repeat
属性
background-repeat: repeat | no-repeat | repeat-x | repeat-y
参数值 | 作用 |
---|---|
repeat | 背景图像在纵向和横向上平铺(默认) |
no-repeat | 图像不平铺 |
repeat-x | 背景图像在横轴上平铺 |
repeat-y | 背景图像在纵轴上平铺 |
- 页面元素可以同时添加背景颜色和背景图片,只不过背景图片会压住背景颜色,如下
3.4 背景图片位置
利用
background-position
属性可以改变图片在背景中的位置
background-position: x y;
- x、y 表示坐标,可以使用 方位名词 或 精确单位, 如下表
参数值 | 说明 |
---|---|
length | 百分数 或 由浮点数和单位标识符组成的长度值 |
position | top、center、bottom、left、right 方位名词 |
注意
1、参数是方位名词
- 如果指定的两个值都是方位名词,则两个值前后顺序无关,比如 left top 和 top left 效果一致
- 如果只指定了一个方位名词,另一个省略,则第二个默认居中对齐
2、参数是精确单位
- 如果参数值是精确坐标,那么第一个肯定是 x 坐标,第二个一定是 y 坐标
- 如果只指定一个数值,那么该数值一定是 x 坐标,另一个默认垂直居中
示例
- 这种标签样式的图片,一般不用插入图片的方式
<img src="" alt="">
进行,因为调整图片的位置比较麻烦。而是采用插入背景图片的方式。
3.5 背景图像固定(背景附着)
background-attachment
属性设置背景图像是否固定或者随着页面的其余部分滚动
background-attachment
后期可以制作视差滚动的效果
background-attachment : scroll | fixed
参数 | 作用 |
---|---|
scroll | 背景图像随着对象内容滚动,默认 |
fixed | 背景图像固定 |
3.6 背景复合写法
为了简化背景属性的代码,我们可以将这些属性合并简写在同一个属性
background
中,从而节约代码量
background: transparent url(image.jpg) repeat-y fixed top ;
- 当使用简写属性时,没有特定的书写顺序,一般习惯约定顺序为:
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
3.7 背景色半透明
CSS3 为我们提供了背景颜色半透明的效果
background: rgba(0, 0, 0, 0.3);
- 最后一个参数是 alpha 透明度,取值范围在 0~1之间
- 我们习惯把 0.3 的 0 省略掉,写为
background: rgba(0, 0, 0, .3);
- 注意:背景半透明是指盒子背景半透明,盒子里面的内容不受影响
- CSS3 新增属性,是 IE9+ 版本浏览器才支持的
3.8 综合案例:导航栏
实现的效果
练习价值
- 链接属于行内元素, 但是此时需要宽度高度,因此需要模式转换
- 里面文字需要水平居中和垂直居中. 因此需要单行文字垂直居中的代码
- 链接里面需要设置背景图片.因此需要用到背景的相关属性设置
- 鼠标经过变化背景图片,因此需要用到链接伪类选择器
实现代码
<head>
...
<style>
.nav a {
display: inline-block;
width: 120px;
height: 58px;
color: #fff;
font-size: 14px;
/* 水平居中 */
text-align: center;
/* 垂直居中 */
line-height: 50px;
text-decoration: none;
}
.nav .bg1 {
background: url(images/bg1.png) no-repeat;
}
.nav .bg1:hover {
background-image: url(images/bg5.png);
}
.nav .bg2 {
background: url(images/bg2.png) no-repeat;
}
.nav .bg2:hover {
background-image: url(images/bg3.png);
}
.nav .bg3 {
background: url(images/bg22.png) no-repeat;
}
.nav .bg3:hover {
background-image: url(images/bg1.png);
}
.nav .bg4 {
background: url(images/bg3.png) no-repeat;
}
.nav .bg4:hover {
background-image: url(images/bg4.png);
}
.nav .bg5 {
background: url(images/bg5.png) no-repeat;
}
.nav .bg5:hover {
background-image: url(images/bg1.png);
}
</style>
</head>
<body>
<div class="nav">
<a href="#" class="bg1">主站</a>
<a href="#" class="bg2">番剧</a>
<a href="#" class="bg3">游戏中心</a>
<a href="#" class="bg4">漫画</a>
<a href="#" class="bg5">赛事</a>
</div>
</body>
4. CSS 三大特性
CSS 有三个非常重要的三个特性:层叠性、继承性、优先级
4.1 层叠性
相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题
如下图所示,tomato
颜色被覆盖掉
层叠性原则
- 样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式
- 样式不冲突的部分,不会被层叠
4.2 继承性
CSS中的继承: 子标签会继承父标签的某些样式,如文本颜色和字号。简单的理解就是:子承父业
- 恰当地使用继承可以简化代码,降低 CSS 样式的复杂性
- 子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承,以及color属性)
这里强调一下行高的继承
body {
color: skyblue;
/* font: 22px/24px 'Microsoft Yahei'; */
font: 12px/1.5 'Microsoft Yahei';
}
div {
/* 子元素继承了父元素的行高 1.5,理应行高为 14 * 1.5 = 21px */
font-size: 14px;
}
- 行高可以跟单位也可以不跟单位
- 如果子元素没有设置行高,则会继承父元素的行高为 1.5
- 此时子元素的行高是:当前子元素的文字大小 * 1.5
- body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高
4.3 优先级
当同一个元素指定多个选择器,就会有优先级的产生
- 选择器相同,则执行层叠性
- 选择器不同,则根据选择器权重执行
选择器权重如下表
选择器 | 权重 |
---|---|
继承 或 * | 0,0,0,0 |
元素选择器 | 0,0,0,1 |
类选择器 | 0,0,1,0 |
ID选择器 | 0,1,0,0 |
行内样式style="" | 1,0,0,0 |
!important | 最高 |
注意
- 权重是有四组数字组成,但不会有进位问题
- 等级判断从左向右,如果某一位数值相同,则判断下一位数值
- 继承的权重是0, 如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是 0
示例
</head>
...
<style>
/* !important > style="" > #demo > .test > div */
div {
color: skyblue!important;
}
.test {
color: tomato;
}
#demo {
color: green;
}
</style>
</head>
<body>
<div class="test" id="demo" style="color:purple">听海哭的声音</div>
</body>
- 上述实例中权值:
!important > style="" > #demo > .test > div
权重叠加问题:如果是复合选择器,则会有权重叠加,需要计算权重
div ul li
=> 0,0,0,3.nav ul li
=> 0,0,1,2a:hover
=> 0,0,1,1.nav a
=> 0,0,1,1
示例
/* 复合选择器会有权重叠加问题 */
li {
color: tomato;
}
ul li {
color: skyblue;
}
ul li
权重为0,0,0,2
,li
权重为0,0,0,1
,因此<ul> <li>
中元素最终会显示为天蓝色
再举个栗子,直接看图
.nav
为继承,权重为零,因此后四段显示为li
中的天蓝色.tomato
为类选择器,权重比元素选择器高,因此第一段显示颜色为西红柿红
欢迎阅读下篇文章 CSS基础「三」盒子模型/产品模块案例/圆角边框/盒子阴影/文字阴影