css3样式

CSS3属性

CSS 用于控制网页的样式和布局。CSS3 是最新的 CSS 标准。

1.选择器 2.盒模型 3.背景和边框 4.文字特效

5.2D/3D转换 6.过渡 7.动画

CSS3高级选择器

p:first-of-type : 返回指定p元素的第一个

p:last-of-type : 返回指定p元素的最后一个

p:first-child : 返回其父元素的首个子元素p

p:last-child : 返回其父元素的最后一个子元素p

p:nth-child(n) : 返回第n个p元素

伪元素选择器

P::before 在p元素内部的前面插入内容

P::after 在p元素内部的后面插入内容

要结合content属性使用。可以把这个看成一个盒子,是行内元素 可以转换

div::before {

content:”开始” ; }

div::after {

content:”结束”; }

注意
伪元素:before和:after添加的内容默认是inline元素；这个两个伪元素的content属性，表示伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作用。

属性选择器: 选取标签带有某些特殊属性的选择器 我们称为属性选择器

/* 获取到 拥有 该属性的元素 */

div[class] { 选出所有 带有 class 属性的

background-color: pink;                    }

div[class=’demo’] { 选出 class = demo 的

background-color: pink;                    }

弹性盒模型

父级 display:flex 子级:flex:1

表示: 若有三个子元素, 则父级会被划分为3等分 , 每个子元素占一等分

CSS3 边框

用 CSS3，你可以创建圆角边框，添加阴影框

· border-radius 圆角边框 ———->5px 或 5% 可以给一个值到四个值

· box-shadow 阴影边框 ——>六个值(前两个值必写) 单位 : px

水平阴影(可负值) 垂直阴影(可负值) 模糊距离 阴影尺寸 阴影颜色 外部阴影(outset)改为内部阴影(inset)

· border-image 用图片创建边框—-了解

· text-shadow 文本阴影 —>水平阴影(可负值) 垂直阴影(可负值) 模糊距离 阴影颜色

自定义字体

@font-face { font-family: 自定义字体名字; src: url(字体路径); }

div { font-family:自定义字体名字; }

CSS3 背景

CSS3中包含几个新的背景属性，提供更大背景元素控制。

· background-size : 指定背景图像的大小

· background-origin :设置背景图像的位置区域。border-box padding-box content-box

· background-clip : 设置某个部分以外被裁减 border-box padding-box content-box

background-size：100% 100%;—按容器比例撑满，图片变形；

background-size：cover;—把背景图片放大到适合元素容器的尺寸，图片比例不变。

设置多个背景图片 background:url(img/1.png) no-repeat 0px 0px

过渡 : 值元素从一种样式值逐渐改变为另一种样式值的效果

语法 transition: property duration timing-function delay

过渡名称 花费时间 过度时间曲线(可省略) 等待时间(可省略)–>时间有顺序

如果有多组属性变化，还是用逗号隔开。

| 属性 | 描述 | CSS |

| ————————– | ———————– | —- |

| transition | 简写属性，用于在一个属性中设置四个过渡属性。

| transition-property | 规定应用过渡的 CSS 属性的名称。

| transition-duration | 定义过渡效果花费的时间。默认是 0。 单位 : s

| transition-timing-function | 规定过渡效果的时间曲线。默认是 “ease”。

| transition-delay | 规定过渡效果何时开始。默认是 0。 单位 : s

如果想要所有的属性都变化过渡， 写一个all 就可以

例:transition: all 1s linear 2s;

过渡时间曲线值: linear匀速 ease先慢再快最后慢

2D转换 transform
· translate(*x,y) 位移 横纵坐标 translateX(*n) 沿着 X 轴移动元素

· rotate(30deg) 旋转,可负值

· scale() 缩放 里面的值是倍数 ,没有单位

· skew() 倾斜 X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示 向相反方向倾斜

transform-origin : x y ; 旋转的基点 可写px 或 left,right 或%

3D 转换 transform

transform-style : preserve-3d; 显示3d舞台

perspective : 1000px; 规定 3D 元素的透视效果—>近大远小,只有设置,才有z轴