css相关总结

css的快捷键

快捷键：

fos 是表示像素

co是颜色

rgba（0，0，0，0.5）其中0.5是透明度

bgc是背景色

fwb字体加粗 fwn是不加粗

fsi是斜体 fsn是不斜体

tdu是下划线 tdn不加下划线

brc 按钮颜色设置

ts 是设置阴影颜色

border是边框，solid是实线，dotted是虚线

**white-space：nowrap；**是不换行快捷键

overlow：hidden

**text-overlow：ellipsis；**出现省略号

---

标签就是横线

伪类选择器：

hover用来表示定位元素的某种状态所显示的样式

1.动态伪类选择器：经常和标签使用，用来表示用户的某种行为状态

2.目标选择器：经常与标签使用，用来定位html页面中唯一一个目标元素

3.元素状态：与表单组件元素配合使用，用来表示表单组件1的某种状态

注意：

1. :not()伪类不能被嵌套，这意味着:not(:not(…))` 是无效的。

ID选择器：

**注意：**用ID选择器要注意用#号，但是同一页面内id不能重复，id是精准定位，但是

效率不高

我是使用id

后代选择器：div p 这里面是div加空格。

class选择器：

**注意：**任何的标签都可以携带class属性，class属性可以重复，class的使用是先在css中定义然后在html合适的敌方使用。同一个标签，可能同时属于多个类，用空格隔开。

**!!!**这是错误的使用方法：

<h3 class="zhong" class="xia">我是h3标签，我是错误的</h3>

类用在css中，id用在js中，类上样式，id上行为

高级：

空格加点是后代

div p{

}

**交集：**div.red 是交集 div加空格 .red 是后代的意思

**并集：**使用逗号来隔开，逗号得意思就和 例如：h3,li

通配符：“*”为通配符，用的地方比较少。

序选择器：

开头的：first—child

结尾的：last—child

中间的：nth—child（这里面放数）

可以继承的

颜色可以继承

texe—的可以继承

line—的可以继承

font—的可以以继承（这时设置字体）

背景颜色是不会被继承的

盒子型

3.1 盒子的区域

盒子目前两种，div和span、；‘

一个盒子中主要的属性就五个：width（宽度，是内容的宽度，不是盒子宽度），height（高度，是内容的高度，不是盒子高度），padding（内边距，是留白的地方），border（边界，边框），margin（外边距，一个盒子和另一个盒子的间距）。

padding分方向

第一种小属性：

1 padding—top：30px（上） 快捷键：pdt

2 padding—right：30px（右） 快捷键：pdr

3 padding—bottom：30px（下） 快捷键：pdb

4 padding—left：30px（左） 快捷键：pdl

综合属性：（比较简单）

padding：30px 20px 40px 100px：

上右下左，顺时针方向，用空格隔开。

给三个值:padding:30px 40px 30px ;

这时少的那个左的值和右的值相同

**给两个值:**padding:30px 40px;

这时少的下 左的值是上 右分别给。

border

border就是边框，边框有三个要素：粗细，线型，颜色

1，A dotted border(这个是点线)

2，A dashed border()

border的三元素拆开

 border-width: 20px;
        border-color: red;
        border-style: dotted;

块级元素和行内元素

降级：display：inline；（这是将块级元素降级为行内元素）

代码演示：

h1{  display: inline;
            width: 100px;
            height: 100px;
            background-color: red;
       }  

升级：display：block；（这是将行内元素升级为块级元素）

代码演示

span{display: block;
           width: 100px;
           height: 100px;
           padding: 30px;

脱离文档流

1）浮动

2）绝对定位

3）相对定位

浮动：

float：left；（向左浮动）

float：right；（向右浮动）

**浮动的性质 **：脱标，贴靠，字围

武器库

.pt15{padding-top:15px}.pt20{padding-top:20px}.pt30{padding-top:30px}.pt50{padding-top:50px}.pt70{padding-top:70px}.pt100{padding-top:100px}.pb1{padding-bottom:1px}.pb2{padding-bottom:2px}.pb3{padding-bottom:3px}.pb5{padding-bottom:5px}.pb8{padding-bottom:8px}.pb10{padding-bottom:10px}.pb15{padding-bottom:15px}.pb20{padding-bottom:20px}.pb30{padding-bottom:30px}.pb50{padding-bottom:50px}.pb70{padding-bottom:70px}.pb100{padding-bottom:100px}.m0{margin:0}.m1{margin:1px}.m2{margin:2px}.m3{margin:3px}.m5{margin:5px}.m8{margin:8px}.m10{margin:10px}.m15{margin:15px}.m20{margin:20px}.m30{margin:30px}.m50{margin:50px}.m70{margin:70px}.m100{margin:100px}.ml1{margin-left:1px}.ml2{margin-left:2px}.ml3{margin-left:3px}.ml5{margin-left:5px}.ml8{margin-left:8px}

行高

line—height这个是行高 快捷键LH

font—size这个是字号 快捷键FS

单行文本垂直居中：

（1）增加行高{行高等于盒子高}

多行文本垂直居中：

（1）使用盒子的padding

盒子高度-文字高度

注意： 增加padding时我们要减小height、

font属性

**使用的格式：**font：字号px/80px“字体”

font-size是字号

font-family是字体

line-height是行高

**font-weight：900；**这是加粗

伪类

al：表示没有点击过（a:link）

ah：表示鼠标悬停(a:hover)

aa：表示摁住不松手时(a:active)

去掉小圆点

list-style： none；

精灵类

background-image:（这个是导入图片）

background-repeat:（这个是图片铺设）

background-position:（这个是切割图片）

background-position:center center；（图片数水平居中）

缩写 background: 加上图片 加上图片铺设 加上图片居中

定位

fixed 是固定的意思

相对定位：

position：relative（top left） 主要用于做微调

绝对定位：

position：absolute

固定定位：

position：fixed

tac是文字居中

backtop这个是返回顶部的代码

取点小圆点：lsn