当前位置：首页 > news >正文

周报(CSS3+HTML5)

news 2024/5/16 1:41:16

CSS3

CSS3新特性

选择器
阴影
形状转换
变形
动画(过渡动画,帧动画)
边框
多重背景
反射
文字
颜色(rgba/hsl/hsla)
滤镜(filter)
弹性布局
多列布局
盒模型
web字体
媒体查询

CSS3兼容情况

CSS3不是属于浏览器或同一浏览器的不同版本都支持,所以需要兼容处理,通常的做法就是加厂商前缀

主流浏览器内核

Trident:IE内核
webkit:chrome和safari内核
gecko:firefox内核
blink(是webkit的一个分支):chrome和opera内核

tips:
目前国内的浏览器大多都是双核的(IE内核+chrome内核)

厂商前缀

IE: -ms-
chrome&safari: -webkit-
firefox: -moz-
opera: -o-

CSS3新增选择器

属性选择器

p[class^=content]{
}

class属性值以content开头的元素(^)
class属性值以content结尾的元素($)
class属性值包含content的元素(*)

结构性伪类

:root 匹配html标签与boddy选择器效果一样
:nth-child(n) 第n个子元素
:first-child 第一个子元素
:nth-last-child(n) 倒数第n子元素
p:nth-of-type(n) 选择第n个兄弟p标签,如果第n个不是p标签,将跳过,继续向下寻找,直到找到为止
p:nth-child(3) 选择第三子元素,如果是p标签,就找到了,如果不是,就没找到,且不再继续查找
其他
:only-child 父元素中仅有一个子元素
:only-of-type 父元素中仅有一个兄弟元素
:empty 没有任何元素,包括文本元素,即查找空元素

目标伪类

:target 匹配相关url指向的元素(锚点)

UI(表单)元素状态伪类

:disabled
:checked(只在opera中有效)
::selection(被选中文本,前面双冒号)

否定伪类

:not§ 选中不是p标签的元素

通用兄弟元素选择器

E~F 选择E元素之后的F元素

CSS3文本

文本阴影(主流浏览器都支持)

text-shadow:设置文本阴影

语法:text-shadow=h-hadow v-shadow blur color;

属性值

h-shadow:必需,水平阴影的位置,允许负值
v-shadow:必需,垂直阴影的位置,允许负值
blur:可选,模糊的距离
color:可选,阴影的颜色

文本自动换行(主流浏览器都支持)

word-wrap:属性允许长单词或url地址换行到下一行

语法:world-wap:normal|break-world;

属性值:

normal:只在允许的断点换行(浏览器保持默认处理)
break-world:在长单词或URl地址内部换行

单词拆分

world-break:属性规定自动换行的处理方法

语法:world-break:normal|break-all|keep-all

属性值

normal:使用浏览器默认的换行规则
break-all:允许在单词内部换行
keep-all:只能在半角空格或连字符处换行

文本溢出

text-overflow:属性规定当文本溢出包含元素时发生的事情

语法:text-overflow:clip|ellipsis|string

clip:修剪文本
ellipsis:显示省略符号来代表被修剪的文本
string:使用给定的字符串来代替被修剪的文本

处理单行文字溢出

wite-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
width:300px;

多行文字溢出处理

white-space:normal;
display-box;
overflow:hidden;
text-overflow:ellipsis;
width:300px;
/* 保留两行 */
line-clamp:2;

CSS3边框

圆角边框

border-radius: 10px 20px;
第一个参数对应左上右下,第二个参数对应右上左下

边框阴影(IE9以上支持)

box-shadow: 水平偏移垂直偏移模糊距离阴影尺寸颜色 inset

边框图片(IE11以上支持)

border-imge: 图片向内偏移距离宽度图像区域超出边框的距离重复效果(round平铺/strech铺满/repeat拉伸)

CSS3背景

多重背景

background: 背景色背景图片平铺方式位置,背景色背景图片平铺方式位置,…
可以添加多张背景图

background-size

background-size:固定长度|百分比值|cover|contain

background-origin(指定背景图像的位置区域)

background-origin:padding-box|border-box|content-box;

background-clip(设定背景的绘制区域)

background-clip:padding-box|border-box|content-box;

CSS3颜色

rgba

rgba(r,g,b,a)
r:红色取值范围:0-255
g:绿色取值范围:0-255
b:蓝色取值范围:0-255
a:不透明度取值范围:0-1

HSl

hsl(h,s,l)
h:色调取值范围0-360
s:饱和度取值范围0-100%
l:亮度取值范围0-100%

HSLA

hsl(h,s,l,a)
h:色调取值范围0-360
s:饱和度取值范围0-100%
l:亮度取值范围0-100%
a:不透明度取值范围:0-1

opacity

调整元素的不透明度,大多数情况下用于做元素的遮罩效果,取值范围0-1;
IE8以下不支持,处理兼容的方式,再添一行代码来处理不透明度
filter:alpha(opacity=数值) 数值范围0-100

线性渐变

background:linear-gradient(方向或角度,颜色1 百分比,颜色2 百分比,…)

方向:

to left
to right
to top
to bottom
to top left
to top right
to bottom left
to bottom right

角度:

45deg(表示45度角)

径向渐变(圆的半径方向渐变)

background:radial-gradient(形状渐变大小,位置,颜色1,颜色2,…)

形状:
ellipse:椭圆(默认)
circle:圆形

渐变大小:
farthest-corner:渐变的半径长度为从圆心到圆心最远的角(默认)
closest-side:渐变的半径长度为从圆心到圆心最近的边
closest-corner:渐变的半径长度为从圆心到圆心最近的角
farthest-side:渐变的半径长度为从圆心到圆心最远的边

位置:
center:设置圆心在中心
top:设置圆心在顶部
bottom:设置圆心在底部
at 圆心横坐标圆心纵坐标

文字渐变

background-image:线性渐变或径向渐变
background-clip:text;
text-fill-color:transparent;

CSS3动画

盒子的变形

盒子2D变形

变形(transform)

translate(x,y) 定义2D转换,沿着X和Y轴移动元素
scale(x,y)定义2D缩放转换,改变元素的宽度和高度,x,y表示两个方向缩放的倍数
rotate(angle)定义2D旋转,在参数中规定角度(顺时针旋转)(30deg)
skew(x-angle,y-angle)定义2D倾斜转换,沿着X和Y轴
matrix() 把所有2D转换方法组合在一起
matrix(a,b,c,d,e,f) 定义2D变形.使用了6个值的矩阵

a c e
b d f
0 0 1

matrix用一个3行3列的矩阵表示,ab列表示x轴,cd列表示y轴,ef列表示z轴

a和d表示缩放(如果没有缩放,值为1)
b和c表示扭曲(如果没有扭曲,值为0)
e和f表示位移(如果没有位移,值为0)

如果旋转角度为n,它会影响到abcd的值
a = cos n
b = sin n
c = -sin n
d = cos n

如果扭曲skew(n1,n2),会影响到b和c的值
b = tan n1
c = tan n2

每次旋转和扭曲都会产生一个新的矩阵,最终形成的多个矩阵要做乘法运算.
如果对一个元素同时有旋转,扭曲,缩放和位移,这里需要用到多个矩阵相乘,要优先考虑旋转和缩放(旋转矩阵*缩放矩阵)

transform-origin属性:调整元素的基点(默认绕中心点旋转)

transform-origin:x-axis y-axis z-axis;(left top)

盒子3D变形

perspective属性(让子元素获得透视效果)

属性定义3D元素视图的距离,以像素计.该属性允许您改变3D元素查看3D元素的视图
当定义为perspective属性是,其子元素会获得透视效果,而不是元素本身

transform-style属性

transform-style属性规定如何在3D空间中呈现被嵌套的元素

transform-style:flat(子元素将不保留其3D位置)|preserve-3d(子元素将保留其3D位置);

rotateX

通过rotateX,元素围绕其X轴以给定的度数进行旋转

通过rotateY,元素围绕其Y轴以给定的度数进行旋转

通过rotateZ,元素围绕其Z轴以给定的度数进行旋转

transition(过渡动画)

transition:属性名|all duration timing-function delay

可用的属性有
颜色:
color background-color border-color outline-color

位置:
background-position left right top bottom

长度
mix-height min-height max-width border-width margin font-size line-height…

数字
opacity visibility z-index font-weight zoom

组合
text-shadow transform box-shadow clip

duration:动画持续时间,一般以秒(s)或毫秒(ms)为单位

timing-function:动画函数

linear:匀速
ease:变速(慢,快,慢)
ease-in:变速(慢,快)
ease-out:变速(快,慢)
ease-in-out:变速(慢速开始,慢速结束)
cubic-bezier(n,n,n,n):自行设定变速,n的值在0-1之间

delay:动画延时时间

关键帧动画

步骤:

设置关键帧
- 如果只有两个关键帧
  @keyframes 动画名{
  0%:{样式表}
  100%:{样式表}
  }
  或
  @keyframes 动画名{
  from:{样式表}
  to:{样式表}
  }
- 如果是多个关键帧
  @keyframes 动画名{
  0%:{样式表}
  20%:{样式表}
  40%:{样式表}
  50%:{样式表}
  …
  70%:{样式表}
  100%:{样式表}
  }
  注意:这里的百分比一般是升序值,可以是0%-100%的任意值,也可以是倒叙
实施动画
- 常规用法
  animation-name: 来自于@keyfreams的动画名
  animation-duration: 动画持续时间,一般以秒(s)或毫秒(ms)为单位
  animation-timing-function
  animation-delay
  animation-iteration-count
  1. number:按设定次数循环
  2. infinite :一直循环
    animation-direation
    动画播放玩后是否反向播放
    normal
    alternate(反向)
    animation-play-state
    动画播放或停止播放
    paused:停止播放
    running:播放
- 简洁用法
  animation:动画名(name) 动画持续时间(duration) 动画函数(匀/变速)(timing-function) 动画延时时间(delay) 是否循环(iteration-count) 是否反向(direation)

CSS3布局

多列(分栏)

colum

colum-count 规定元素应该被分隔的列数(栏数)
colum-gap 规定列之间的间隔
colum-rule 设置所有 column-rule-* 属性的简写属性(设置栏间分割线)
colum-rule-style:设置线形
none
hidden:隐藏
dashed:虚线
dotted:点状
solid:实线
double:双线
groove:3D grooved,该效果取决于宽度和颜色值
ridge:3D ridged,该效果取决于宽度和颜色值
inset:3D inset,该效果取决于宽度和颜色值
outset:3D outset,该效果取决于宽度和颜色值
3D效果在分栏中没有效果
colum-rule-width:设置线宽
colum-width 规定列的宽度(栏宽)
colums 规定设置 colums-width 和column-count 的简写属性
colums: width count

flex布局

弹性盒子定义方式

弹性容器通过设置display属性值为flex或inline-flex将其定义为弹性容器
弹性盒子只定义了弹性子元素如何在弹性容器内布局
弹性子元素通常在弹性盒子的最后一行显示,默认情况每个容器只有一行

常用属性

flex-direction
指定了弹性子元素在父容器中的位置,此属性作用于父容器
row:左->右(默认)
row-reverse:右->左
column:上->下
colum-reverse:上->下
justify-content
把弹性项沿着弹性容器的主轴线对齐
justify-content:flex-start | flex-end | center |space-between | space-around
参数
flex-start 紧凑左对齐
flex-end 紧凑右对齐
center 紧凑居中
space-between 除首尾外,其他元素等分空白区域
space-around 所有子元素等分空白区域
align-item
设置子元素在纵轴方向上的对齐方式
flex-start 顶端对齐
flex-end 底端对齐
center 垂直居中对齐
baseline 沿纵轴基线对齐
stretch 纵向拉伸对齐
flex-grow(应用于子元素)
设置子元素的放大比例
flex-grow:数值
flex
规定弹性子元素如何分配空间
flex: ;
auto
initial
none
inherit

可以带1-3个参数
1. 带1个参数
  - 无单位:这个数值会被当作flex-grow的值
  - 带单位:这个数值会被当做flex-basis(基本宽度)的值
2. 带2个参数
  第一个必须是无单位数值,会被当做flex-grow的值
  第二个参数
  - 无单位这个数值会被当做收缩比率的值
  - 带单位这个数值会被当做基本宽度的值
3. 带3个参数
  第一个必须是无单位数值,会被当做flex-grow的值
  第二个必须是无单位数值,这个数值会被当做收缩比率的值
  第三个必须是一个有效的宽度值,它会被当做基本宽度的值