本篇文章为 CSS 基础系列笔记第二篇，参考 黑马程序员pink老师前端入门教程
- 如有侵权联系删除，如有问题欢迎指出。
其他CSS基础相关文章：
CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表
CSS选择器。CSS基础「三」盒子模型/产品模块案例/圆角边框/盒子阴影/文字阴影
CSS基础「四」浮动 \ 常见网页布局
CSS基础「五」定位
CSS基础「六」元素的显示与隐藏
css标签选择器？CSS基础「七」精灵图 \ 字体图标 \ 三角 \ 用户界面样式 \ 页面初始化
在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的
后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
css高级选择器有哪些。语法格式
元素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 { 样式声明 }
对比一下，如果使用后代选择器
<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, 元素2 { 样式声明 }
示例
<style>div,p {color: teal;}
</style>
css选择器中的元素选择器？伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果
伪类选择器书写最大的特点是用冒号 “ : ” 表示，比如:hover、:first-child
伪类选择器很多，比如有链接伪类、结构伪类等，这里先给讲解常用的链接伪类选择器和:focus伪类选择器
举例说明一下伪类选择器的作用，比如将鼠标放在链接上，会出现下面这种效果，这就依赖于伪类选择器
1、链接伪类选择器
a:link /* 选择所有未被访问的链接 */a:visited /* 选择所有已被访问的链接 */a:hover /* 选择鼠标指针位于其上的链接 */a:active /* 选择活动链接（鼠标按下未弹起的链接）*/
:link => :visited => :hover => :active示例
<style>/* 未访问的链接设置为黑色 */a:link {color: #333;text-decoration: none;}/* 点击过的链接会变成黄色 */a:visited {color: orange;}/* 鼠标经过时链接变成蓝色 */a:hover {color: skyblue;}/* 鼠标按下但没有松开时显示红色 */a:active {color: red;}
</style>
css高级选择器、鼠标未放上时
鼠标放上但未按下时
鼠标按下但未松开时
实际开发中一般 a 和 a:hover 就足够用
/* a 是标签选择器 所有的链接 */
a { color: gray;
}
/* :hover 是链接伪类选择器 鼠标经过 */
a:hover { color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
}
css复合选择器三种。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>
伪元素选择器、
在CSS中，根据元素显示模式的不同元素标签被分为了两类：行内元素（inline-level）、块元素（block-level）
常见的块元素有
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素
块级元素的特点
web复合选择器。注意
<p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放 <div><h1>~<h6> 等都是文字类块级标签，里面也不能放其他块级元素常见的行内元素有
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素
特点
注意
<a> 里面可以放块级元素，但是给 <a> 转换一下块级模式最安全在行内元素中有几个特殊的标签 ——
<img />、<input />、<td>，它们同时具有块元素和行内元素的特点，有些资料称它们为行内块元素
特点
特殊情况下，我们需要元素模式的转换。简单理解： 一个模式的元素需要另外一种模式的特性，比如想要增加链接
<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>
实现小米官网侧边栏，效果如下
实现代码
<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>
通过 CSS 背景属性，可以给页面元素添加背景样式
- 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等
background-color属性定义了元素的背景颜色
background-color:颜色值;
一般情况下元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色
background-color:transparent;
background-image属性描述了元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片。优点是非常便于控制位置（精灵图也是一种运用场景）
background-image : none | url (url)
| 参数值 | 作用 |
|---|---|
| none | 无背景图（默认的） |
| url | 使用绝对或相对地址指定背景图像 |
如果需要在 HTML 页面上对背景图像进行平铺，可以使用
background-repeat属性
background-repeat: repeat | no-repeat | repeat-x | repeat-y
| 参数值 | 作用 |
|---|---|
| repeat | 背景图像在纵向和横向上平铺（默认） |
| no-repeat | 图像不平铺 |
| repeat-x | 背景图像在横轴上平铺 |
| repeat-y | 背景图像在纵轴上平铺 |
利用
background-position属性可以改变图片在背景中的位置
background-position: x y;
| 参数值 | 说明 |
|---|---|
| length | 百分数 或 由浮点数和单位标识符组成的长度值 |
| position | top、center、bottom、left、right 方位名词 |
注意
1、参数是方位名词
2、参数是精确单位
示例
<img src="" alt="">进行，因为调整图片的位置比较麻烦。而是采用插入背景图片的方式。
background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动
background-attachment后期可以制作视差滚动的效果
background-attachment : scroll | fixed
| 参数 | 作用 |
|---|---|
| scroll | 背景图像随着对象内容滚动，默认 |
| fixed | 背景图像固定 |
为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性
background中，从而节约代码量
background: transparent url(image.jpg) repeat-y fixed top ;
CSS3 为我们提供了背景颜色半透明的效果
background: rgba(0, 0, 0, 0.3);
background: rgba(0, 0, 0, .3);实现的效果
练习价值
实现代码
<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>
CSS 有三个非常重要的三个特性：层叠性、继承性、优先级
相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题
如下图所示，tomato颜色被覆盖掉
层叠性原则
CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。简单的理解就是：子承父业
这里强调一下行高的继承
body {color: skyblue;/* font: 22px/24px 'Microsoft Yahei'; */font: 12px/1.5 'Microsoft Yahei';}div {/* 子元素继承了父元素的行高 1.5，理应行高为 14 * 1.5 = 21px */font-size: 14px;}
当同一个元素指定多个选择器，就会有优先级的产生
- 选择器相同，则执行层叠性
- 选择器不同，则根据选择器权重执行
选择器权重如下表
| 选择器 | 权重 |
|---|---|
| 继承 或 * | 0,0,0,0 |
| 元素选择器 | 0,0,0,1 |
| 类选择器 | 0,0,1,0 |
| ID选择器 | 0,1,0,0 |
行内样式style="" | 1,0,0,0 |
!important | 最高 |
注意
示例
</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基础「三」盒子模型/产品模块案例/圆角边框/盒子阴影/文字阴影
版权声明：本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。
工作时间：8:00-18:00
客服电话
电子邮件
admin@qq.com
扫码二维码
获取最新动态
