css中选择器

选择符

一．元素选择符：

1. 通配符*{}

Hdml中所有标签属性

设置字体font-family：

设置字体大写font-size

1. 类选择器.hp{}

id

1. 选择符#hs

1. 类型选择符（标签选择符）：div{}

• 关系选择符

1. 子元素选择器div>p{}

父亲>儿子  不包括孙子

1. 兄弟选择器p~p{}

选择同级别的标签

1. 相邻选择器p+p{}

同一级别相邻的元素

1. 包含选择器div p{}

包含所有子孙

• 属性选择符

包含指定属性的标签，属性与属性值均匹配的标签

• 伪类选择符

1. 元素link：设置超链接a在未被访问时的样式a:link{}
2. 元素：visited：设置超链接a在其链接地址已被访问过时的样式a:visited{}
3. 元素：hover：设置元素在其鼠标悬停时的样式a:hover
4. 元素：active：设置元素在被用户激活（在鼠标点击与释放之间发生的时间）时的样式）a:active

注意：a:hover必须位于a:link和a:visited之后，a:active必须位于a:hover之后

• 伪对象选择符

1. 元素::befofe{}  设置在对象前发生的内容。用来和content属性一起使用，并且必须定义content属性
2. 元素::after{}    设置在对象前发生的内容。用来和content属性一起使用，并且必须定义content属性

li:befofe{

content:”>”

}

选择器的优先级

！Imporeant>内联>ID>类>标签|伪类|属性选择器>伪对象>继承>通配符

注意：！important要写在属性值后面，分号的后面

例如；

P{

color:red ! important

}

背景

background-attachment：	背景图像是否固定或者跟随滚动
background-image: url();	背景图插入
background-color：	背景颜色
background-position:	背景位置
background-size:	背景大小
background-repeat:	背景是否平铺

颜色

1. 颜色值

color：red

color：#ff0000;

rgb(red, green, blue)

Reba( , , , )

透明色 color：transparent

1. 属性

透明度opacity：

0完全透明

1不透明

字体

1. 字体样式font-style：

normal正常；italic斜体；oblique倾斜

1. 字体大小font-size：

1. 字体粗细font-weight：

bold加粗；bolder更粗；lighter更细；400等同于normal;700相当于bold；

4.字体名称font-family：

Microsoft Yahei(微软雅黑),SimSun(宋体),SimHei(黑体

Font：样式 粗细 大小 字体名称；

5.字体颜色color

6.字体引入

（阿里图标字体库：https://www.iconfont.cn/）

@font-face{

    font-family:"abc";

    src: url(/css/Day1/世纪园林/Americratika.ttf);

}

*{

    font-family: "abc";

}

文本

1. 文本颜色color
2. 文本水平对齐方式text-align

1. 垂直对齐方式vertical-align

1. 行高line-height

1. 文本大小写text-transform

capitalize 单词首字母大写    uppercase全大写 lowercase全小写

1. 文本缩进text-indent
2. 文本修饰

7.1 装饰线text-decoration-line:

下划线underline、删除线line-through、顶划线overline；

7.2 装饰线颜色 text-decoration-color：

7.3 装饰线样式 text-decoration-style：

solid(实线)dotted(点线)dashed(虚线)double(双线)wavy(波浪 线)

7.4 装饰线、文本阴影

text-shadow：水平位移 垂直位移 模糊度 颜色；

1. 文本超出盒子设置overflow:

hidden;超出之后隐藏 scrol超出展示下拉框 visible超出展示

1. 文本超出行设置text-overflow:

ellipsis;文本超出显示省略号

1. 单词换行：word-break:

nowrap;文本不换行

列表

列表项标记的类型;list-style-type：

列表标记的图像；list-style-image:

list-style-position:

inside;  边框内显示文本以内 inherit   outside边框外

表格

边框重叠border-collapse：

collapse重叠边框 separate边框独立

边框颜色border-color：

文字居中text-a'lign：center

背景色background-color：

元素

块级元素

可用{display：block}把内联元素设为块级元素

内联元素（行内元素）

可用{display：inline}把内联元素设为块级元素

内联块级元素

可用{display：inline-block}把元素设为内联块级元素

盒子模型

内边距：padding

边框：border

1. 边框宽度 border-width:
2. 边框样式 border-style:

solid(实线)dotted(点线)dashed(虚线)double(双线)

1. 边框颜色 border-color

1. 设置圆角边框border-radius

1. 设置对象阴影 box-shadow

6.边框背景图片 border-image

7.宽高包含区域box-sizing:

content-box(默认内容)

border-box;从边框开始

外边距：margin

盒内布局

1.盒子尺寸开始区域box-sizing:

content-box(默认内容)尺寸包含内边距外边距和边框

border-box;从边框开始尺寸包含内边距和边框

2.盒内布局（老）

定义浏览器内核

display: -webkit-box;  谷歌浏览器

Ie：ms

Opera：o

Firefox：moz

1. 子元素排列方式box-orient

默认值水平排列horizontal;

垂直排列vertical；

1. 水平居中box-pack

1. 垂直居中box-align

1. 子元素比例box-flex

1. 子元素排列顺序box-direction:

倒序排列reverse;

默认正序排列：

3.盒内布局（新）

1.按比例分配flex-grow

2.子元素排列方式flex-flow

3子元素flex-direction

4.子元素超出父级盒子后是否换行flex-wrap

1. 子元素出现顺序order

定位position

1. 默认没有定位：position: static；
2. 想对于浏览器窗口定位：position：fixed；
3. 相对定位，相对正常位置position：relative；
4. 绝对定位，相对不是static的父元素定位position：absolute；
5. 元素堆叠顺序值最大的在最上面：z-index:1;

fixed和absolute是不占据空间的，fixed不设置top，是相对于原来位置显示

除static外可根据top:；left:；right:；bottom:；设置上、左、右、下偏移量

浮动

1. 浮动float

左浮动float:left;

右浮动float:right;

1. 清除浮动

clear:both;

1》父级元素后加元素：

2》父级元素加::after{display:block;content:” ”;clear:both}

3》父级元素{overflow:hidden}

可视方式

是否可视visibility

1. 对象可视：visible
2. 对象隐藏：hidden

溢出展示方式overflow

1. 对溢出内容不做处理：overflow：visible；
2. 隐藏溢出容器的内容且不出现滚动条overflow：hidden；
3. 隐藏溢出内容，隐藏内容以滚动条方式展示overflow：scroll；
4. 按需出现滚动条auto

动画效果

2D/3Dtransform

2D效果

1. 移动translate：；

transform: translate(10px 10px);

1. 旋转rotate

1. 缩放scale

1. 倾斜skew

3D效果

1. rotateX
2. rotateY

过渡transition

1. 规定应用过度CSS属性名称transition-property
2. 过度效果时长transition-duration
3. 过渡时间曲线transition-timing-function

1. 线性过度linerar
2. 平滑过度ease
3. 由慢到快ease-in
4. 由快到慢ease-out
5. 由慢到快再到慢ease-in-out

1. 过渡延迟时间transition-delay

动画

@keyframes创建动画； animate.css

@keyframes myfirst

{

from{background:red;}

to{background:yellow;}

}

animation:动画名 2s;

animate.css扩展文件

多列columns

1. 列数column-count：
2. 每列宽度column-width
3. 列与列之间间隙column-gap
4. 列与列之间边框column-rule
5. 边框厚度column-rule-width
6. 边框样式column-rule-style
7. 边框颜色column-rule-color

媒体

检测浏览器尺寸并展示对应样式

居中总结

水平居中

1. margin：0 auto；
2. 文字居中：

line-height

text-alingn:center

1. 基于盒子居中

{dispalay：-webkit-box；

-webkit-box-pack：center；

-webkit-box-align：center；

}