CSS常用样式属性锦集

以下快捷键针对webstorm，idea也可以用

一、文字属性

1、文字样式属性

格式：font-style: italic;
取值：normal:正常显示 italic:斜体

快捷键：
fs font-style: italic;
fsn font-style: normal;

2、文字粗细属性

格式：font-weight:bold;
取值：lighter:细线（默认） bold:加粗 bolder:加粗更粗

快捷键：
fw font-weight:;
fwb font-weight: bold;
fwbr font-weight: bolder;

3、文字大小属性

格式：font-size:30px;
单位：px

快捷键：
fz font-size:;
fz30 font-size: 30px;

4、文字字体属性

格式：font-family:;

注意：
1、中文需要双引号或单引号
2、设置的字体必须是用户电脑安装的字体
设置的字体不存在，系统使用默认字体显示，想要使用设置的字体，可设置备选方案，用逗号隔开
中文英文单独设置字体：
中文字体都包含英文
中文都有英文名称，能处理中文才是中文字体，因此先英文后中文
常见字体：中文：宋体、黑体、微软雅黑 英文：“Times New Roman”、“Arial”
快捷键：
ff font-family:;

简写连体：

font:style weight size family;

注意： 简写中，样式、粗细可省略，可交换位置；大小字体不能省略、交换位置。

 

二、文本属性：

1、文本装饰属性

格式：text-decoration: underline;
取值:underline下划线 line-through删除线 overline上划线

快捷键：
td text-decoration: none;
tdu text-decoration: underline;
tdl text-decoration: line-through;
tdo text-decoration: overline;

2、文本水平对齐属性

格式：text-align: left;
取值：left左 right右边 center中间

快捷键：
ta text-align: left;
tar text-align: right;
tac text-align: center;

3、文本缩进属性

格式： text-indent:;
取值：em,px

快捷键：
ti text-indent:;

4、文本颜色属性

格式：color: #000;
取值方式：英文单词、rgb（0,0,0）、rgba（0,0,0，亮度（0-1））、16进制（#000）

 

三、选择器

1、标签选择器

选中当前界面所有的标签

格式：

标签{
    属性:值；
    }

2、id选择器

根据制定的id选择对应的标签，具有唯一性，只能字母/数字、下划线组成，并且不能数字开头，大多数是给js使用

格式：

#id名称{
    属性:值；
    }

3、类选择器

根据制定的类选择对应的标签，具有重复性，命名方式与id一样，一个标签可设置多个类名，以空格隔开。

格式：

.类名称{
    属性:值；
    }

4、后代选择器

找到指定标签中所有指定标签

格式：

标签1 标签2{
    属性:值；
    }

5、子元素选择器

找到指定标签中所有特定子元素标签

格式：

标签1>标签2{
    属性:值；
    }

6、交集选择器

格式：

标签1标签2{
    属性:值；
    }

7、并集选择器

格式：

标签1.标签2{
    属性:值；
    }

8、兄弟选择器

相邻：给指定选择器后紧跟选择器选中的标签设置属性

格式：

标签1+标签2{
    属性:值；
    }

通用：给指定选择器后所有选择器选中的标签设置属性

格式：

标签1~标签2{
    属性:值；
    }

9、序选择器

同级别第几个：

:first-child同级别第一个
:last-child同级别最后一个
:nth-child(n)同级别n个
:last-child(n)同级别倒数n个
:only-child同级别唯一一个

:nth-child(odd)同级别奇数，
:nth-child(even)同级别偶数
:nth-child(xn+y)

同级别同类型第几个：

:first-of-type同级别同类型第一个
:last-of-type同级别同类型最后一个
:nth-of-type(n)同级别同类型n个
:last-of-type(n)同级别同类型倒数n个
:only-of-type同级别同类型唯一一个

:nth-of-type(odd)同级别同类型奇数，
:nth-of-type(even)同级别同类型偶数
:nth-of-type(xn+y)

10、属性选择器

根据指定的属性选择对应标签

格式：

[attribute]
[attribute=value]

(1、)属性取值以什么开头

[attribute|=value] CSS2（只能找到value开头并-隔开的）
[attribute……=value] CSS3

(2、)属性取值以什么结尾

[attribute$=value] CSS3

(3、)属性取值包含某个特定值

[attribute~=value] CSS2
[attribute*=value] CSS3

11、通配符选择器

格式：

*{
    属性:值；
}

 

四、CSS三大特性

1、继承性

作用： 父元素设置的属性，子元素也能使用

注意：并不是所有的属性都可以继承
1、只有以color/font-/text-/line开头的属性才可以继承
2、不仅仅儿子可以继承，后代都可以继承

特殊性：
a标签的文字颜色和下划线不能继承，h标签的文字大小不能继承

继承应用： 设置网页的共用信息
 

2、层叠性

多个选择去选择同一标签，设置相同的属性才会发生层叠性
 

3、优先级

当多个选择去选择同一标签，设置相同的属性，如何层叠由优先级决定

优先级判断的三种方式：

1、间接选中指继承
谁离目标标签近听谁的

2、相同选择器（直接选中）
都是同类型选择器，写在后面的有效

3、不同选择器（直接选中）
不是同类型选择器，按选择器优先级层叠
id>类>标签>通配符>继承>浏览器默认

！important：用于提升某个直接选中标签的选择器中的某个属性的优先级，可以将被指定的属性的优先级提升为最高
只能用于直接选中，不能用于间接选中
通配符是直接选中标签
！important只能提升被指定属性的优先级，其他属性优先级不会被提升

优先级权重问题（直接选中）：

作用： 多个选择器混合在一起使用，可通过计算权重方式判断高优先级
计算规则： 先看id个数，相同则看类个数，再相同则看标签名称个数，之后不再计算，写在后面的有效

四、页面背景与盒模型

1、背景颜色

格式：background-color:;
取值：单词、rgb(0,0,0);、rgba(0,0,0,亮度);、#000;

2、背景图片

格式:background-image: url();

background-repeat:repeat;默认

background-repeat:no-repeat;
background-repeat:repeat-x;
background-repeat:repeat-y;

3、背景定位

background-position: 0 0;
取值： 具体方位名词（left center right top center bottom）或具体像素

关联方式：
格式：background-attachment:scroll;默认
取值：fixed，

背景属性简写：background：背景颜色 背景图片 平铺方式 关联方式;，任何一个属性都可省略

4、css精灵图

减少请求次数，降低服务器的压力
需要配合背景图片和背景定位使用

5、边框属性

格式：

连写1：

border：边框宽度 边框样式 边框颜色

快捷键：bd+
连写中：颜色可以省略，默认黑色，样式不能省略，宽度能省略

连写2：

border-top：边框宽度 边框样式 边框颜色
border-right：边框宽度 边框样式 边框颜色
border-left：边框宽度 边框样式 边框颜色
border-bottom：边框宽度 边框样式 边框颜色

连写3：

border-width：上 右 下 左
border-style：上 右 下 左
border-color：上 右 下 左

非连写：

border-top-width：
border-top-style：
border-top-color：

内边距属性：

非连写格式：

padding-top：

连写：

padding：上 右 下 左

省略取值与边框属性一样

外边距属性：

margin-top：

连写：

padding：上 右 下 左

省略取值与边框属性一样

外边距合并：
默认布局水平方向外边距进行叠加，垂直方向外边距取最大值

6、盒模型

内容区域+内边距+边框+外边距
内容的宽度和高度：内容区域
元素的宽度和高度：可视范围，内容区域+内边距+边框
元素空间的宽度和高度：元素所有区域，内容区域+内边距+边框+外边距

box-sizing属性
格式：box-sizing：border-box；

css3新增属性，盒子增加padding和border，盒子宽高不变，自动减去内容的宽高。
如果两个盒子是嵌套关系，设置了里面盒子顶部的外边距，大盒子与小盒子同时被顶下，需要给大盒子设置边框
padding是控制父子关系的间隙
margin是控制兄弟关系的间隙

注意： 嵌套关系中，利用margin：0 auto， 控制里面元素水平居中与外面元素

盒子居中与内容居中：
盒子居中：margin：0 auto；
内容居中：text-align:center；

五、网页布局方式：

1、标准流排版：

块级：垂直排版
行内/行内块级：水平排版
浏览器默认排版方式

2、浮动流排版

半脱离标准流排版，只能水平排版

注意： 浮动流没有居中对齐，margin：0 auto；在浮动流中无效
特点： 在浮动流中不区分块级、行内块级、行内元素；并且都可以设置宽高。

浮动元素脱标：相当于在标准流删除

浮动元素排序规则：
相同方向的浮动，先浮动的会显示在前面
不同方向的浮动，左浮动会对应左浮动，有浮动会对应右浮动
浮动元素浮动之后位置会根据浮动之前标准流的位置确定

清除浮动

在标准流中内容可以撑起父元素的高度，而在浮动中不能撑起

方式1：
给前面一个父元素设置高度（在企业开发中能不写高度就尽量不写），因此不常用

方式2：
给后面的盒子添加clear属性
clear取值：left，right，both，none
注意：设置了clear属性，margin属性会失效

方式3：隔墙法（不常用）
1、外墙法：
两个盒子中间添加块级元素并清除浮动
注意：可以让第二个盒子使用margin-top属性，但不能让第一个盒子使用margin-bottom，可直接设置高度达到margin效果

2、内墙法：
第一个盒子最后添加块级元素并清除浮动

注意点： 可以让第二个盒子使用margin-top属性，也能让第一个盒子使用margin-bottom，可直接设置高度达到margin效果

区别： 外墙法不能撑起第一个盒子的高度，内墙法能撑起第一个盒子的高度

伪元素选择器：
1、给指定标签的内容前面或后面添加一个子元素
格式：

标签名称::before{
    属性名称：值；
    }

2、给指定标签前面添加一个子元素
格式：

标签名称::after{
    属性名称：值；
    }

给指定标签后面添加一个子元素

div::before{
    content"添加的内容"
}在div内容的前面添加内容

方式4：
设置添加的子元素内容为空、块级元素、高度为0，添加的子元素看不见并清除浮动（类似内墙法）
ie6兼容：

.box{
    *zoom:1;
}

方式5：

设置第一个盒子的overflow：hidden；属性进行清除浮动，ie6下兼容增加*zoom：1；
overflow其他用途：
overflow：hidden；可以将超出标签范围的内容清除掉
可以通过里面的盒子设置margin-top，外面的盒子设置overflow：hidden；不会被顶下

3、定位流排版

定位流： 相对定位、绝对定位、固定定位、静态定位

相对定位
格式：

position: relative;
	垂直方向：;
	水平方向：;

相对于以前在标准流的位置进行移动
注意： 不脱离标准流，在标准流定位占用空间，同一方向只能设置一个属性，区分行内元素和块级元素
应用： 微调、配合绝对定位

绝对定位
格式：

position: absolute;
        垂直方向：;
        水平方向：;

相对于body的位置移动

注意： 脱离标准流，在标准流定位不占用空间，同一方向只能设置一个属性，不区分行内元素和块级元素
默认所有绝对定位以body为参考点移动，若祖先元素有定位流（相对、绝对、固定），默认以最近祖先元素为参考点移动
1、绝对定位的元素以body作为参考点，是以首屏网页作为参考点，不是以整个网页作为参考点
2、绝对定位会忽略祖先元素的padding

元素水平居中：

left：50%
margin-left：元素宽度一半

固定定位

格式：

 position: fixed;
    垂直方向：；
    水平方向：；

注意： 脱离标准流，在标准流定位不占用空间，不区分行内元素和块级元素

z-index属性： 控制定位流元素覆盖关系
默认情况下，所有元素都有z-index属性，取值为0；
定位流元素会盖住标准流元素，后定位元素会盖住先定位元素，
先看父元素z-index属性，再看子元素

a标签伪类选择器
修改a标签不同状态的样式
状态：
默认：a：link{}
点击后：a：visited{}
鼠标移入：a:hover{}（hover可用于任何标签）
鼠标长按：a：active{}
注意：一起出现，必须按照顺序编写，否则失效

过渡模块：
transition-property: ;(哪个属性需要执行过渡效果)
transition-duration: ;（过渡效果持续时长）
transition-timing-function: ;（延迟开始过渡时间）
transition-delay: ;（过渡效果运动速度）

注意： 要过渡，必须满足三要素（属性变化、哪个属性发生过渡、过渡时长），多个属性过渡用“，”隔开

简写：transition：过渡属性 过渡时长 运动速度 延迟时间；

多个属性运动速度、延迟时间、持续时间一致，简写为：transition：all （）s;

六、2D3D转换模块

基础：
deg是单位，代表旋转多少度

transform:rotate(45deg);

第一个参数:水平方向，第二个参数:垂直方向

transform: translate(-100px, 50px);

第一个参数:水平方向，第二个参数:垂直方向,相同参数可用一个参数

transform:scale(1, 1.5);

transform:rotate（）；旋转相关属性：

形变中心点：
默认情况下以中心为参考点旋转
第一个参数：水平方向，第二个参数：垂直方向。取值：具体像素、百分比、特殊关键字（top bottom left right）。
格式：transform-origin: 0 0;

旋转轴向：
默认情况下所有元素围绕z轴旋转,*代表轴向（X、Y、Z）
格式：transform:rotate*();

透视属性：
特点：近大远小，像素代表离物体距离
格式：perspective：px；
注意：透视属性必须添加到呈现近大远小父元素上面

盒子阴影与文字阴影：
盒子阴影（默认外阴影）：
box-shadow:h-shadow(水平偏移) v-shadow(垂直偏移) blur（模糊度） spread（阴影扩展） color（阴影颜色） inset（内外阴影）;
快速添加阴影需要添加3个参数：ox-shadow:h-shadow(水平偏移) v-shadow(垂直偏移) blur（模糊度）；

默认情况下，阴影颜色与盒子内容颜色一致

文字阴影：
box-shadow:h-shadow(水平偏移) v-shadow(垂直偏移) blur（模糊度） color（阴影颜色）；
默认情况下，阴影颜色文字颜色一致

七、动画模块

1、过渡与动画之间的区别

不同点：
1)、过渡必须人为触发才会生效
2)、动画不需要人为触发就能执行

相同点：
1)、都是给元素添加动画的
2)、都是系统新增的属性
3)、都需要满足三要素才能有动画效果

2、动画步骤格式

1、告诉系统需要执行哪个动画

animation-name:xxx;

2、告诉系统需要自己创建一个名称叫xxx的动画

方式1：

@keyframes xxx{
    from{
    }
    to{
    }
}

方式2：

@keyframes xxx{
    1%{
    }
    2%{
    }
    ...%{
    }
}

3、告诉系统动画持续时长

animation-duration: 3s;

3、其他属性

1、动画执行的速度

animation-timing-function: linear;

2、动画执行次数

 animation-iteration-count: 1;

3、动画是否需要做往返动画

   animation-direction: alternate;

4、动画执行状态

animation-play-state: paused;

5、执行动画等待状态与结束状态样式
取值：
none:默认
forwards：动画元素结束处于最后一帧状态样式
baxkwards:动画元素开始处于第一帧状态样式
both:动画元素结束处于最后一帧状态样式，动画元素开始处于第一帧状态样式
animation-fill-mode: ;

连写格式：

animation:动画名称 动画时长 动画运动速度 延迟时长 执行次数 往返动画；

前端编码步骤：

1、 重置样式，设置全局样式
2、 引入全局样式表，引入单页样式表
3、 搭建网页结构及样式结构
4、 布局划分，区块化编写