CSS3.0 基础

css3.0

1.css3 完全向后兼容，css2 的样式都可以用

2.多了一些增补和修订 onst

3.css3>子代，更多的选择器， 圆角   背景大小   背景渐变色   盒子阴影

4.兼容性，个别浏览器不支持。

新增选择器

此选择器只能找兄弟和孩子

**    属性选择器  **

[属性名 = ‘值’]  ^=     $=     *=

**     结构性伪类选择器**

.a.b 两个类挨在一起 表示选择两类都包含的元素

第几个孩子，不关注类型。一般和简单选择器配合使用。

：nth-child(n),  第几个孩子

：nth-child(2n),：偶数：第 2 个、第 4 个、第 6 个孩子……..

：nth-child(2n-1),：基数：第 1 个、第 3 个、第 5 个孩子……..

:nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n 从 0 开始计数。

n 可以是一个数字，一个关键字，或者一个公式。

或者： 3n..4n ..可以跟各种表达式。

：first-child    第一个孩子

：last-child  最后一个孩子

p:  only-child  p 元素是父元素唯一的孩子

第几个孩子，关注类型，一般和简单选择器配合使用

p：only-of-type  p 元素在只有一个

:nth-of-type

:last-of-type

:only-of-type

**   兄弟选择器**

**    **    哥哥选择器 ~  弟弟选择器    —选择所有符合条件的弟弟

哥哥选择器 + 弟弟选择器    —选择符合条件的相邻 弟弟

**    **

**   伪元素和伪类**

** **       :first-letter   –第一个字母

:first-line   —第一行

:before

:after

**    UI 状态伪类选择器**

**    **** ** **  a 标签独有的**  记忆技巧  lv ha  驴哈

a:link    链接样式

a:visited      点击后的样式

** a:hover    hover 可以配合其**他选择器 ** 鼠标悬停该元素上时的样式 **

a:active  点击时的样式

**                **

**        表单**

**    ****    ****    **   [type = ‘text’]:checked  选中的

:checked checkbox 或 radio 被选中时

:disabled  禁用的

:enabled  可用的

:focus  光标聚焦：光标所点击的地方

需要用 outline：none;取消默认样式

::-webkit-input-placeholder:  谷歌内核的占位符样式

li:not(另外选择器)  —所有 li 中除了‘另外选择器’以外剩下所有的 li。 

:first-letter    第一个字或字母

:first-line    第一行

after 和 before

**    ****    ****   ** 插入的内容相当于是行内元素

content 的内容可以是:

字符串

图片   url(‘图片的路径’)

属性   attr(属性的名字–date-xxx、title) ，可把属性头的值用于添加

unicode 编码    ‘\unicode 编码值’

============常见小问题=============

小缝隙问题

行内元素垂直方向边距的问题

---

字体阴影

https://blog.csdn.net/qq_37582010/article/details/84633648

=====fontface（iconfont） 字体图标=====

优点

1.内存小

2.放大不会变模糊

3.设置颜色灵活

缺点：  制作时间耗时，颜色相对单一。

---

css 中 可自定义字体

@font-face{

/_  自定义的字体 _/

font-famliy;’kkk’;

/_  字体地址 _/

src:local(‘微软雅黑’)

}

.自定义的类：before{

content:’ iconfont 码 ‘;

}

---

过渡效果 transition:

**   **     参与过渡的属性   过渡的时间   延迟时间

**  添加到要过渡改变的元素之中**，并非：hover 样式中

变幻  transform：

**    transform-origin: 0 0;  变换的圆心**

1. 旋转  rotate
   1. 默认以 Z 轴旋转     平面翻转
   2. rotateX（角度）  左右翻转
   3. rotateY(45deg)  上下翻转
   4. rotateZ(-45deg)
2. 缩放  scale 1. scale 一个值代表，宽高等比例缩放 2. scale(x,y)  水平方向，竖直方向的缩放 3. scale(负值)  代表水平和竖直方向向上的翻转
3. 移动  translate 注意这里的 100px 是移动到右边距离 100px 的地方，不是移动 100px,  而是相当是一个地址的定位。 1. translate(100px)  右 100px 2. translateY(100px)  下 100px 3. translateZ(50px)  屏幕外面 50px 4. translate(50px,100px) 右 50px. 下 100px
4. 扭曲  skew 1. skew(30deg,50deg)

多种过渡之间用空格隔开。

如果想元素本身就是怪异变形斜的，就在元素本身上添加 transform 样式

---

Border 骚操作

**   ** border-width:边框的宽度

**        border-right-color:****transparent ** **（****透明）**

---

自定义动画  animation

定义动画

@keyframes  动画名字{

form{

一开始的样式

}

to{

最终的样式

}

}

animation:

**   ** 第一个参数   动画名字

第二个参数   动画持续时间

第三个参数   动画过渡类型

linear  线性动画

ease-in  慢开始快结束

esase-out    快开始慢结束

第四个参数：延迟执行时间

animation-delay

第五个参数：重复执行的次数     infinite  无限执行，就这这个参数和前两个参数都行

**                    animation-iteration-count**

后面还可以添加的参数：

alternate  反向执行

forwards  停留在最终的状态

animation-fill-mode

---

animation-play-state:paused;  动画暂停 run 代表 动

---

复杂动画可用百分比表示

@keyframes  自定义名称**{**

百分比不用 100%结束，每个每个百分比都是按比例分配执行时间的

20%{…}

40%{…..}

60%,80%{….}

}