2021-04-05

最新推荐文章于 2022-03-01 18:06:57 发布

梅蝈蝈

最新推荐文章于 2022-03-01 18:06:57 发布

阅读量136

点赞数

本文链接：https://blog.csdn.net/weixin_44822786/article/details/115447326

版权

本文详细介绍了CSS中列表的样式设置，包括有序列表、无序列表和定义列表的使用，以及如何通过`list-style-type`改变列表符号。此外，还讲解了文本样式，如字间距、下划线、文本阴影等。接着，文章深入讨论了CSS过渡效果`transition`，以及如何创建简单的动画。最后，探讨了CSS变形`transform`，包括旋转、缩放、倾斜和偏移量的使用。

摘要由CSDN通过智能技术生成

3.29 列表

有序列表

祖先元素 ol li子元素

（默认）li元素前面自动添加有序的数字或者字母

Lorem ipsum dolor sit amet.

#### 无序列表 ul（unorder list）

祖先元素 ul li子元素

（默认）li元素前面自动添加小圆点
无序列表去除小圆点*/使用padding后将不占尺寸

padding: 0;（去除子盒子）


## 2

换样式 (设置次盒子内容为图片)*/去除有序无序列表的样式 子盒子依旧占有尺寸

list-style-image: url("");


## 3

list-style-type设置列表样式 

   square 实心正方形

   circle 空心圆

list-style-type: square;（实心正方形）

list-style-type: circle;（空心圆）


## 4

/* 设置有序列表样式 */

ol>li{

  list-style-type: upper-alpha;（大写字母）

  list-style-type: lower-alpha;（小写字母）
  
  list-style-type:lower-roman; （罗马数字小写）
   
  list-style-type:upper-roman;  （罗马大写）

}


**定义列表 dl （ defined list）**

祖先元素 dl   dt dd子元素

全额付的人

容器人确认人

```

dd是对dt的描述

全额付的人

容器人确认人

盒子阴影

第一个值 X轴偏移量

第二个值 Y轴偏移量

第三个值模糊值

boxshadow: 10px 8px 5px red；

文本阴影

text-shadow: 10px 8px 5px red;

3.30 伪元素选择器

first-line
设置第一行的样式

格式；元素::first-line（）声明块
header::first-line{
color: red;
}

first-letter
控制第一个字符的字体样式（大小颜色）

格式；元素::first-letter（）声明块 */

header::first-letter{
  font-size: 26px;
  color: aquamarine;
}

**设置选取页面内容的样式
#### 格式 ::selection {声明块}**

注；仅限于 background-color:和color:

header::selection{

background-color: rgba(255,0,0,0.5);

color: aquamarine;

}

属性选择器

第一种

格式元素 [属性名=“属性值”]

input[type=“text”]

第二种属性值开头用

input[type ^=“te”]

第三种属性值结束

input[type $=“t”]

第四种包含属性值

格式

元素名称【属性名~=属性值】

nav[class~=“box1”]

文本

/* 字间距 */ letter-spacing:

letter-spacing: 5px;

####   /* 添加下划线 */ text-decoration:

text-decoration: underline;


####   /* 上划线 */ text-decoration

text-decoration: overline;


####   /* 贯穿线 */  text-decoration:

text-decoration: line-through;


####  文本阴影 text-shadow:

  第一个值 X轴偏移量

  第二个值 Y轴偏移量

  第三个值 模糊值 */

text-shadow: 10px 8px 5px red;


#### 首行缩进 text-indent:

text-indent: 30px;

#### text-transform 

lowercase 小写字母

uppercase 大写字母

capitalize 单词首字母大写

text-transform: capitalize;


=================================================================
3.31 动画

### 简单动画通常称之为“过度”transition

css属性，在一定时间内，从一个值变化到另一个值。（也可以是多个值）


过度那些属性
transition-property: background-color,height;
过度时间
  transition-duration: 1000ms;

简写 all（所有）；liner（线性渐变）

transition: all linear 1000ms;

transition-property使用范围可以过度的属性

颜色、尺寸、透明度、距离

过度效果延迟出现

transition-delay:500ms

transition-duration: 过渡时间

property 可以过度的属性

clelay 延迟时间

duration

linear’ 匀速

infinite 无限次（正无穷）

text-indent

unorder

过渡方式

transition-timing-function: linear;(匀速过度)

transition-timing-function: ease-in;（由慢到快）

transition-timing-function: ease-out;（由快到慢）

transition-timing-function: ease-in-out;（先快后慢）

复杂动画

@keyframes

第一步定义动画

格式:@keyframes加上动画名称

动画效果 :百分比%{声明块}（注:百分比是声明块动画的时间）

第一条是动画的起始效果

最后一条是动画的结束效果

如果起始效果和结束效果相同，可以省略结束效果代码

 form {
    left: 0;
    background-color: red;   （form起始样式）
  }
  40% 
    left: 100px;
    background-color: rgb(34, 216, 27);
  }
  80% {
    left: 50px;
    background-color: rgb(27, 63, 226);
  }
  to {
    left: 0;
    background-color: red;
  }
}

/第二步

引用动画 animated

书写格式:animation: 动画名称动画时间动画播放次数