文章目录
一、前言
此篇文章是css基础中对css伪类、css过渡属性、css属性选择器、css动画、css渐变等知识的梳理。
二、css属性选择器
1.内容
| 名称 | 描述 |
|---|---|
| 属性选择器 | 选择了所有写了title(title代表的是标签的某种属性)的元素 |
| 属性和值选择器 — 多值 | 属性设置了多个值，多个值之间用空格隔开，(属性为title/lang)用~或|表示选择了的值是其中之一的元素 |
| 属性和值选择器 | 选择了title(同上)属性的值的元素 |
补充：CSS 属性选择器 ~=, |=, ^=, $=, *= 的区别
1.~=:属性的属性值包含一个独立的值；
2.|=:属性的属性值包含一个独立的值且以这个值开头；
3.^=:属性的属性值的前几个值为这个值就行,例：[att^="val"]；
4.*=:属性的属性值是后几个值为这个值就行,例：[att*="val"]；5.
$=:属性的属性值以这个值结尾，[att$="val"]属性att的值以"val"结尾的元素。
三、css伪类(伪类选择器)，表单伪类选择器
1.内容
| 伪类选择器名称 | 具体描述 |
|---|---|
| link | 表示未点击之前的样式 |
| hover | 表示鼠标停留在元素上方 |
| active | 表示鼠标点中某个元素,没有松开之时 |
| visited | 表示超链接访问过后 |
| 表单伪类选择器名称 | 具体描述 |
|---|---|
:enabled | 匹配表单中激活的元素 |
:disabled | 匹配表单中禁止的元素 |
:checked | 匹配表单中被选中的radio(单选框)或checkbox(复选框)元素 |
:focus | 可以设置输入框在获取焦点时的样式： |
:selection | 匹配用户当前选中的元素 |
2.代码如下(示例)
(1)伪类选择器
<style>
body{
font-size: 15px;
}
/*link表示未点击之前的样式*/
a:link{
color:red :
font-size: 30px ;
text-decoration: none;
}
</style>
<body>
<a href = "#">爱奇艺</a><br>
<a href = "#a" name = "a">百度</a><br>
<a href = "#b">aaaa</a><br>
注：此代码只展示link，其余三个的原理和link相同，只要按部就班就行。
<style>
input:enabled{
border:3px solid red ;
width:100px;
height:30px ;
}
input:disabled{
background-color: #008000;
}
input:checked{
width:50px ;
height:50px;
}
input:focus{
color:deeppink ;
font-size: 40px ;
}
</style>
<body>
<form>
<input type="text"><br>
<input type="text" disabled="disabled"><br>
<input type = "checkbox" value = "篮球">篮球<br>
<input type = "checkbox" value = "篮球">足球<br>
</form>
</body>
四、css圆角、渐变、过渡属性、图像透明/不透明
1.内容
(1)圆角(border-radius属性)：给任何元素制作圆角
| 属性值个数 | 描述 |
|---|---|
| 一个值 | 四个圆角值相同 |
| 两个值 | 第一个值为左上角和左下角、第二个值为右上角和右下角 |
| 三个值 | 第一个值为左上角，第二个值为右上角和左下角，第三个值为右下角 |
| 四个值 | 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角 |
(2)css渐变(径向和线向)
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义
线性渐变相关属性：background-image。
代码如下：
<style>
#d{
width:400px;
height: 200px;
/* border-radius: 50% 50%; */
background-image: radial-gradient(ellipse,red ,green 40%); /* 径向渐变*/
/* background-image: linear-gradient(to right,red 0% 15%,green 25% 40%,yellow 40% 60%,blue 60%);/* 线向渐变*/
}
</style>
<body>
<div id = "d"></div>
</body>
</html>
(3)css的过渡属性
| 名称 | 描述 |
|---|---|
移动translate() | 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动 |
旋转rotate() | 在一个给定度数旋转的元素。正值元素顺时针旋转，负值元素逆时针旋转。 |
缩放scale() | 该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数大小 |
倾斜skew() | 包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜;skewX()在X轴上倾斜，skewY()在Y轴上倾斜 |
代码如下(部分代码)：
<style>
#d{
position: absolute;
left:0;
width: 50px;
height: 20px;
background-color: #0000FF;
transition: transform 5s;
}
#d:hover{
position: absolute;
transform: translateX(500px);
}
/*旋转*/
img{
width: 150px ;
height: 150px;
border-radius: 50% 50%;
transition: transform 5s;
}
</style>
<body>
<div id = "d"></div>
<img src = "img/1.jpg" id = "img">
</body>
(4)css图像透明/不透明(opacity属性)
opacity属性：它的范围是0~1之间，它一般有悬停效果，当鼠标悬停在图片上时，图片变透明等。
五、css动画
1.内容
@keyframes 是创建动画。
(1)当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果;
(2)必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0;
(3)指定至少这两个CSS3的动画属性绑定向一个选择器：规定动画的名称/规定动画的时长。
2.代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style>
@keyframes myfirst{
from{
background-color: red;
}
to{
background-color: yellow;
}
}
@keyframes mySecond{
0%{
background-color: red;
}
30%{
background-color: yellow;
}
60%{
background-color: blue;
}
100%{
background-color: green;
}
}
#d{
width: 300px;
height: 300px;
border:1px solid blue ;
/* animation: myfirst 5s; */
animation: mySecond 10s linear 3s infinite reverse;
}
</style>
<body>
<div id = "d"></div>
</body>
</html>
六、总结
此篇文章是css基础梳理的终结篇，下篇将会梳理JavaScript知识。
412
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
