CSS 基础-02

1.背景

属性名：background

子属性名：

​ background-color： 背景颜色

​ background-image: 背景图片 属性值：url（’ 链接地址 ‘）

​ background-repeat: 背景重复 属性值：no-repeat | repeat-x |repeat-y |repeat（默认）

​ position: X Y 若x和y的值为正数，向右或下移动；若x和y 的值为负数，向左或上移动

​ background-size： 背景大小

简写：background:[color | image | repeat | position[/size]]

注意：定位position尺寸必须放在size尺寸前面 10px 10px/200px

2.盒子阴影

属性名：box-shadow

属性值：s1，s2，s3，s4，s5（color），s6（insert）

1. s1 水平位移 可负值
2. s2 垂直位移 可负值
3. s3 模糊度 不能取负值，0为不模糊
4. s4 阴影面积 不能取负值，0为原大小，可以省略
5. s5 阴影颜色
6. 内阴影 后加inset，可省略 box-shadow: -104px -97px 0px 0px blue inset;

简写：box-shadow:s1 s2 s3 [s4] s5 [s6;]

拓展：

移动当前元素到页面中间margin:100px auto;

solid-实线 dashed-虚线 dotted-点状线 double-双实线

3.平滑过渡

属性名：transition

属性值：s1，s2，s3，s4

1. s1 过渡的标签名（transition-property）

   ​ 取值：all（所有可以过渡的属性） none（不指定过渡的属性） <标签名>

2. s2 过渡的持续时间（transition-duration）

   ​ 取值：<持续时间> 1 s = 1000 ms

3. s3 过渡速率（transition-timing-function）

   ​ 取值：linear（线性） ease（平滑） ease[-in|-out]（缓入、缓出、缓入缓出）

4. s4 延迟时间（transition-delay）

注意：transition能起作用的前提条件是该标签的属性值是可以进行 + / - 的值

eg：transition:a .5s ease / transition：all 1s ease ； / transition:p1,p2,p3 .5s ease

4.变形

属性名：transform

属性值：

1. none 不变形
2. rotate 旋转 单位：deg
3. skew 扭曲 单位：deg
   1. skewX 指定水平方向扭曲
   2. skewY 指定垂直方向扭曲
4. scale 中心缩放 单位：倍数
   1. scaleX 水平缩放 单位：倍数
   2. scaleY 垂直缩放 单位：倍数
5. translate 位移 单位：px
   1. translateX 指定x轴方向的位移
   2. translateY 指定y轴方向的位移

注意：skew扭曲为90*奇数倍时，都会被扭曲成一条线，导致看不见

5.列表样式

属性名：list-style

属性值：

1. list-style-image 项目列表标记图像
   1. none 不指定图像
   2. <url(‘ … ‘)> 使用指定图像作为项目列表标记
2. list-style-position
   1. outside 标记放在文本外，且文本不依据标记对齐
   2. inside 标记放置在文本内部，依据标记对其文本
3. list-style-type 项目列表标记类型
   1. disc 实心圆（默认）
   2. circle 空心圆
   3. square 实心方块
   4. none 不适用项目符号

简写：list-style[list-style-image]|[list-style-position]|[list-style-type]

6.溢出

属性名：overflow

包括overflow-x，和overflow-y

属性值：

1. visible 不剪切（默认）
2. hidden 将超出对象尺寸的内容进行裁剪，将不出现滚动条。
3. auto 将超出部分内容剪切，并以滚动条方式显示超出对象

常见属性

​ width height

​ mingwidth maxheight

​ minheight maxheight

7.文本

• text-indent: 首行缩进（也可控制图片）（单位：px ，%，em）

• text-align: 水平对齐方式（left center right）（对image标签也起作用）

• text-decoration 划线方式（underline overline line-through none blink）

• text-shadow 文本阴影

  格式：text-shadow：h-shadow v-shadow blur color;

• text-overflow 溢出文本处理

  • 属性值：clip 修建文本
  • 属性值：ellipsis 使用省略号代替省略的文本ellipsis

  强制转为一行：white-space:nowrap;

  将溢出内容隐藏：overflow:hidden

• vertical-align 垂直对齐（top middle bottom）

  ​ （默认情况情况下，是对外垂直对齐）

  ​ （若对内对齐，则需要配合display属性）

  将当前元素转为td单元display:table cell

  垂直居中：line-height:500px; vertical-align:middle;

8.鼠标样式

属性名：cursor（光标，指针）

属性值：

​ pointer 指向（手掌样式）

​ text 文本（大写的 i 字样式）

​ move 移动（十字箭头）

​ default 默认（鼠标指针）

​ none 隐藏箭头

补充：progress（正在进行）|wait（等待）|方向-size（双向箭头）|no-drop（无法拖动）|crosshair（十字准星）

9.字体图标

计算机中图片分为两类：位图、矢量图

位图：放大失真

矢量图：放大不失真

字体图标基本都是矢量图，可以使用字体的属性，但不能使用图片的属性

字体图标下载：阿里巴巴矢量图url（‘ https://www.iconfont.cn/ ’）

阿里字体图标使用：

​ 1.下载图标文件

​ 2.导入iconfont.css文件

​ 3.给需要使用字体图标的标签赋予class=”iconfont”

​ 4.给需要使用字体图标的位置填写相应的图标符号（查询demo_unicode.html文件）