image.png
HTML中引入CSS 3种方式
image.png
调试
image.png
image.png
选中相应元素后，在灰色的element.style｛｝中直接可以新增样式
新增的样式如果和旧样式属性重复，则旧样式会自动显示删除线。
image.png
CSS通过什么作用到HTML元素？
选择器
五大类选择器
image.png
id选择器特点：
全局唯一
类选择器特点：
image.png
*{} .className{} #idName{} element{} 这四种都是基本类型选择器
image.png
关系型 选择器也是4种
- ~波浪号能够选择其后（不紧跟也是可以的，+ 选择器号必须紧跟）的所有指定兄弟元素，中间可以有其它兄弟隔开
- +加号只能选择紧跟其后的一个兄弟元素，只能选择一个
image.png
伪类选择器分两种
- 链接状态化伪类
- 结构化伪类
链接状态化伪类
:link 链接未点击的状态
:hover 鼠标移入当前链接元素的状态
:active 鼠标点击（但未释放）：
:visited 鼠标点击后的状态
:focus 应用于拥有键盘输入焦点的元素。
下图正是点击未释放的链接
image
结构化伪类
image.png
CSS属性中的颜色值
image.png
16进制换算过程
image.png
currentColor
image.png
transparent:设置颜色值为透明
image.png
border三个属性
image.png
border四个方向，三种属性
image.png
border属性对四个边框
其中有些简写：
1个值：此值代表 上右下左 边框的值
2个值 第一个值代表上下 第二个值代表左右边框
3个值 第一个值代码上边框 第二个值代表左右边框 第个值代表下边框
4个值 分析对应上右下左
image.png
练习题：
<!DOCTYPE html>
<html>
<style>
.hover-tips .tips-tt {
width: 170px;
background-color: #ccc;
line-height: 36px;
text-align: center;
border-radius: 5px;
border: 10x ;
}
/*
默认二维码隐藏，鼠标滑过显示
边框为“1px solid #ccc”
圆角为“5px”
*/
.hover-tips .tips-bd {
border: 1px solid #ccc;
border-radius: 5px;
width: 170px;
height: 170px;
background: url(http://coding.imweb.io/img/p2/qr-bg.png) no-repeat;
box-shadow: rgba(0, 0, 0, .3);
display: none;
}
.hover-tips:hover .tips-bd {
display: block;
}
</style>
<head>
<meta charset="UTF-8">
<title>切换元素显示</title>
</head>
<body>
<div class="hover-tips">
<p class="tips-tt">app 下载</p>
<div class="tips-bd"></div>
</div>
</body>
</html>
效果如下：
image.png
background
image.png
CSS Sprite：雪碧图（音译），精灵图
示例代码：http://coding.imweb.io/demo/p2/sprite.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>雪碧图的应用</title>
<style type="text/css">
.sprite {
display:inline-block;
width: 96px;
height: 96px;
background: url("http://coding.imweb.io/img/p2/sprite-base.png") no-repeat; /* 设置背景 */
}
.happy {
background-position: 0 0; /* 设置图标位置 */
}
.cry {
background-position: -192px -96px; /* 设置图标位置 */
}
</style>
</head>
<body>
<h1>雪碧图的应用</h1>
<h2>开心表情</h2>
<div class="sprite happy"></div>
<h2>哭泣表情</h2>
<div class="sprite cry"></div>
</body>
</html>
雪比图的操作就像我们用放大镜去看物体，只不过css是通过操作css的background-position属性来实现，图片要左移，所以一般都是负值才能实现。
网友评论