前端入门之CSS3

最新推荐文章于 2024-07-04 16:37:43 发布

春眠不觉晓喵喵

最新推荐文章于 2024-07-04 16:37:43 发布

阅读量301

点赞数

分类专栏：前端入门文章标签：前端 css3 css

本文链接：https://blog.csdn.net/qq_43364261/article/details/127680806

版权

前端入门专栏收录该内容

5 篇文章 0 订阅

订阅专栏

响应式布局

响应式布局是可以自动识别屏幕宽度、并做出相应调整的网页设计。CSS3的媒体查询(Media Query)用于定义不同媒体类型在不同CSS属性时的样式表现。可以使用CSS3的媒体查询(Media Query)做一些自适应的网页设计。

媒体类型（Media Type）

HTML页面，可能在不同的媒体类型中显示。

如何声明样式适用的媒体类型

<link>标签的media属性，声明链接式的xxx.css样式适用于媒体类型screen,print

<link rel=”stylesheet” type=”text/css” href=”xxx.css” media=”screen,print”/>

<style>标签的media属性，声明 <style>标签内的样式适用于媒体类型all

    <style media=”all” type=”text/css”>
        p{

            color: #ff0000
        }
    </style>

@import方式，声明导入式的xxx.css样式适用于媒体类型screen,print

 <style>
        @import url(“xxx.css”) “screen,print”;
 </style>

在style里为某些样式指定media，声明p的内部样式的文字颜色适用于媒体类型speech

 <style>
  	@media speech {
  		p{
  		 color: #ff0000; 
  		 }
        }
 </style>

media默认值为all，若没有指定，即此样式适用于所有媒体类型。

常见的媒体类型

媒体类型	备注	是否常用
`all`	匹配所有设备	是
`print`	打印模式	是
`screen`	电脑屏幕	是
`braille`	盲文设备	否
`embossed`	盲文打印	否
`handheld`	手持设备	否
`projection`	演示模式、幻灯片模式	否
`speech`	演讲	否
`tty`	固定字母间距的网格的媒体，比如电传打字机	否
`tv`	电视媒体	否

常用的媒体类型就all、print、screen这几种类型。其中screen要属于最常用的媒体类型了。在具体使用media type时，我们还可以使用not或者only这两个关键字修饰媒体类型。

@media not screen and (width: 888px) {
    /* your css code */
}

@media only screen and (width: 888px) {
    /* your css code */
}

其中，only修饰词表示@media设置的样式只对screen类型适用；not修饰词表示@media设置的样式对除了print类型之外的所有设备类型生效。

媒体查询（Media Query）

媒体查询就是针对不同媒体类型在不同CSS属性时的样式表现。由媒体类型和一个或多个检测媒体特征的条件表达式组成。

媒体查询使用步骤

设置Meta标签，在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

width=device-width 屏幕和设备同宽
initial-scale=1.0 初始的缩放比例
maximum-scale=1.0 允许用户缩放的最大比例（默认为1.0）
minimum-scale=1.0 允许用户缩放的最小比例（默认为1.0）
user-scalable=no 用户是否可以手动缩放（默认为no）

进行媒体查询

@media screen and (width: 920px) {
	p {
	color: pink;
	}
}

媒体查询中查询两字的含义就体现在screen和width: 920px上（可能更加倾向后者）。换句话说，screen和width: 920px其实都是查询的条件，当有多个条件时，我们使用and将他们连起来。上面的代码表示当页面在电脑屏幕上展现时，且屏幕的width: 920px时，设置所有的p标签元素的字体颜色为pink。

媒体查询使用方式

外联式：<style>或者<link>标签上增加属性media="only/not 媒体类型 and (媒体特性)"(这种主要针对媒体类型做区分)

//推荐使用
<link rel=”stylesheet” type=”text/css” href=”xxx.css” media="screen and (min-width: 920px)"/>

//
<style media="screen and (max-width:1024px)" >
	div{
		color:pink;
	}
</style>

内嵌式：@media 媒体类型 and (媒体特性) {样式}

//
@media screen and (max-width:1440px) {
	box_wrap .boxtext .box_bg {
		width: 26%;
	}
}
 
//多个条件联写
@media screen and (max-width:1366px)  and (max-height: 500px){
	box_wrap .boxtext .box_bg {
		height: 30%;
	}
}

语法关键字： 将媒体类型和媒体特性链接到一块

and 可以将多个媒体特性链接到一块,相当于且
not 排除某个媒体特性相当于非,可以省略
only 指定某个特定的媒体类型, 可以省略

媒体查询用到的媒体属性

媒体属性	备注	是否常用
`width`	定义输出设备中的页面可见区域宽度（可加`max min`前缀）	是
`height`	定义输出设备中的页面可见区域高度（可加`max min`前缀）	是
`device-width`	定义输出设备中的屏幕可见区域宽度（可加`max min`前缀）	是
`device-height`	定义输出设备中的屏幕可见区域高度（可加`max min`前缀）	是
`orientation`	定义height是否大于或等于`width`。值`portrait`代表是（竖屏），`landscape`代表否（横屏）	是
`aspect-ratio`	定义`width`与`height`的比率（宽高比）（可加`max min`前缀）	是
`device-aspect-ratio`	定义`device-width`与`device-height`的比率（宽高比）。如常见的显示器比率：4/3, 16/9, 16/10 （可加`max min`前缀）	是
`color`	定义每一组输出设备的彩色原件个数。如果不是彩色设备，则等于0（可加`max min`前缀）	否
`color-index`	定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则等于0（可加`max min`前缀）	否
`monochrome`	定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则等于0（可加`max min`前缀）	否
`scan`	定义电视类设备的扫描工序（`progressive/interlaced`）	否
`grid`	用来查询输出设备是否使用栅格或点阵。只有1和0才是有效值，1代表是，0代表否	否
`resolution`	定义设备的分辨率。如：96dpi, 300dpi, 118dpcm（可加`max min`前缀）	否

动画(animation)

通过CSS3，我们可以创建动画，它可以取代许多网页动画图像，Flash动画，和JAVAScripts。

CSS3 @keyframes 规则

@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式将逐步从目前的样式更改为新的样式。

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

可以改变任意多的样式任意多的次数。可以用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。

animation属性

当在@keyframe创建动画后，需要把它绑定到一个选择器，否则动画不会有任何效果。
指定至少两个CSS3的动画属性绑定向一个选择器：

规定动画的名称 animation-name
规定动画的时长 animation-duration

所有动画属性

属性	描述
`@keyframes`	规定动画
`animation`	所有动画属性的简写属性，除了 animation-play-state 属性。
`animation-name`	规定 @keyframes 动画的名称。
`animation-duration`	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
`animation-timing-function`	规定动画的速度曲线。默认是 “ease”。
`animation-delay`	规定动画何时开始。默认是 0。
`animation-iteration-count`	规定动画被播放的次数。默认是 1。
`animation-direction`	规定动画是否在下一周期逆向地播放。默认是 “normal”。
`animation-play-state`	规定动画是否正在运行或暂停。默认是 “running”。

过渡(transition)

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

transition如何实现效果

transition属性需要添加到对应的选择器，必须规定两项属性：

要添加效果的CSS属性
效果的持续时间。

div
{
//给divt添加transition属性，transition: CSS属性 数字s;
transition: width 2s; 
}  

//要添加多个样式的变换效果，添加的属性由逗号分隔
div
{
transition: width 2s, height 2s, transform 2s;
}

transition属性

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。
transition-delay	规定过渡效果何时开始。默认是 0。

渐变(gradients)

CSS3 渐变可以两个或多个指定的颜色之间显示平稳过渡。CSS3 定义了两种类型的渐变：线性渐变、径向渐变

线性渐变

需要至少定义两种颜色结点。颜色结点即想要呈现平稳过渡的颜色。
需要设置一个起点和一个方向（或一个角度），向下/向上/向左/向右/对角方向

语法：
background: linear-gradient(direction, start-color, ..., last-color);

线性渐变 - 从上到下（默认情况下）

从第一个颜色开始，从上到下进行颜色渐变，to bottom

语法
background: linear-gradient(red, blue，pink);

线性渐变 - 从左到右边

从第一个颜色开始，从左到右进行颜色渐变,to right

语法
background: linear-gradient(to right, red , blue);

线性渐变 - 对角

从第一个颜色开始，通过指定的水平和垂直的起始位置来一个对角的颜色渐变。右下角to bottom right

语法
background: linear-gradient(to bottom right, red , blue);

线性渐变 - 自定义角度

如果想要在渐变的方向上做更多的控制，可以定义一个角度。角度是指水平线和渐变线之间的角度，顺时针方向计算。0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

语法
background: linear-gradient(180deg, red, blue);

线性渐变 - 其他

可以使用透明度（Transparency）。使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。
重复的线性渐变。repeating-linear-gradient() 函数用于重复线性渐变
语法：
background: repeating-linear-gradient(red, yellow 10%, green 20%);

径向渐变

渐变由它们的中心定义。

语法
background: radial-gradient(position,shape, size, start-color, ..., last-color);

径向渐变 - 颜色结点均匀分布（默认情况下）

从第一个颜色开始，从元素中心进行均匀的颜色渐变。positon参数的值为center，shape参数的值为ellipse。

语法
background: radial-gradient(red, green, blue);

径向渐变 - 颜色结点不均匀分布

从第一个颜色开始，从元素中心进行不均匀的颜色渐变。在颜色结点后面设置对应的比例。

语法
background: radial-gradient(red 5%, green 15%, blue 60%);

径向渐变的形状

circle 圆形
ellipse 椭圆形，默认的形状

不同尺寸大小关键字的使用

size 参数定义了渐变的大小。它可以是以下四个值：

closest-side
farthest-side
closest-corner
farthest-corner（默认）

语法
background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);

重复的径向渐变

repeating-radial-gradient() 函数用于重复径向渐变。

语法
background: repeating-radial-gradient(red, yellow 10%, green 15%);

背景

CSS3更新了几个新的背景属性，通过这几个背景属性，能够做出更加精美的样式。

background-image (添加背景图片)
background-size (指定背景图像的大小)
background-origin (指定背景图像的位置区域)
background-clip (背景剪裁属性是从指定位置开始绘制)

background-image属性

CSS3中可以通过background-image属性添加背景图片。CSS3 允许在元素中添加多个背景图像。多张背景图用逗号隔开，所有的图片中显示在最顶端的为第一张。

语法：
background-image: url(picture1.gif), ……,url(picture2.gif);

background-size属性

CSS3以前，背景图像大小由图像的实际大小决定。CSS3中background-size指定背景图像的大小。指定像素或百分比大小。指定的百分比大小是相对于父元素的宽度和高度的百分比大小。

语法：
background-size:80% 60%;

background-origin属性

background-Origin属性指定了背景图像的位置区域。

background-Origin属性可取的值：

content-box 盒子的内容区域内可以放置背景图像。
padding-box 盒子内边距的区域内可以放置背景图像，默认值。
border-box区 盒子的边框区域内可以放置背景图像。

语法：
background-origin:content-box;

background-clip属性

CSS3中background-clip背景剪裁属性是从指定位置开始绘制

background-clip属性可取的值：

content-box 背景从盒子的内容区域开始绘制。
padding-box 背景从盒子内边距的区域开始绘制。
border-box区 背景从盒子的边框区域开始绘制，默认值。

语法：
background-clip:content-box;

边框

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

边框属性：

border-radius 创建圆角
box-shadow 添加阴影
border-image 用图像创建一个边框

border-radius属性

语法：
border-radius:25px; 给四角创建25px的圆角
border-radius:25px 50px; 给左上/右下创建25px的圆角，右上/左下创建50px的圆角
border-radius:25px 50px 100px; 给左上创建25px的圆角，右上/左下创建50px的圆角，给右下创建100px的圆角
border-radius:25px 50px 75px 100px; 从左上开始顺时针给四个角依次创建对应尺寸的创建圆角

box-shadow属性

语法：
box-shadow: offset-x offset-y blur spread color position;

offset-x 必选项。声明阴影的水平偏移。当值为正数，阴影就位于元素右侧，值为负数，阴影位于元素的左侧。
offset-y 必选项。声明阴影的垂直偏移，当值为正数，阴影就位于元素下侧，值为负数，阴影位于元素的上侧。
blur 可选项，默认为0。声明阴影的模糊半径。值为0意味着阴影完全不模糊。blur值越大，阴影越模糊。不允许取负值。
spread 可选项，默认为0，表示阴影和元素尺寸一致。声明阴影的大小。当值为正数，阴影会向四周扩展。若值为负数，阴影会收缩，小于元素尺寸。
color 可选项，默认为黑色。声明阴影的颜色。可以是任何颜色单位。
position 可选项，默认为外部阴影，不用声明。声明阴影的位置，想使用内部阴影可以通过使用inset关键字来制作内部阴影，inset用在最前面最后都可以。

border-image属性

语法：
border-image:source slice width outset repeat;

source 可选项，默认none。声明边框图像的路径。值为none时为默认边框样式，边框还可以设置为渐变，用 linear-gradient() 函数定义渐变色。
slice 可选项，默认无分割。声明边框图像从什么位置开始分割。
width 可选项，默认为1。边框图像的宽度。
outset 可选项，默认为。边框图像的外延尺寸。
repeat 可选项，默认为stretch。边框图像的平铺方式，有：重复repeat、拉伸stretch、铺满round。

字体

在CSS3之前，web设计师必须使用已在用户计算机上安装好的字体，不能够使用离线字体。通过CSS3，web设计师可以使用他们喜欢的任意字体。当找到或购买到希望使用的字体时，可将该字体文件存放到web服务器上，它会在需要时被自动下载到用户的计算机上。"自己的"的字体是在 CSS3 @font-face 规则中定义的。

CSS3 @font-face 规则

在新的 @font-face 规则中，必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

语法：

<style>
//定义字体
	@font-face
	{
	   font-family: myFirstFont;
	   src: url(sansation_light.woff);
	}
//应用字体
	div
	{
 	  font-family:myFirstFont;
	}
</style>

CSS3 字体描述

描述符	值	描述
`font-family`	`name`	必需。规定字体的名称。
`src`	`URL`	必需。定义字体文件的 URL。
`font-stretch`	`normal、condensed、expanded` 等	可选。定义如何拉伸字体。默认是 `normal`。
`font-style`	`normal、italic、oblique`	可选。定义字体的样式。默认是 `normal`。
`font-weight`	`normal、blod、数值`	可选。定义字体的粗细。默认是 `normal`。
`unicode-range`	`unicode-range`	可选。定义字体支持的 UNICODE 字符范围。默认是 “U+0-10FFFF”。

2D转换

变换的效果，让某个元素改变形状，大小和位置。
2D变换方法有：translate()、rotate()、scale()、skew()、matrix()

translate()–移动

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的值，从当前元素位置进行移动。

语法：
transform: translate(50px,100px);

元素向右边移动50个像素，向下面移动100像素。

rotate()–旋转

rotate()方法，根据给定度数顺时针旋转元素。负值代表元素逆时针旋转。

语法：
transform: rotate(30deg);

元素顺时针旋转30度。

scale()–缩放

scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。

语法：
transform: scale(2,4);

宽度转变为原来的大小的2倍，高度转变为原来大小4倍的高度。

skew()–倾斜

skew()方法包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

语法：
transform: skew(30deg,20deg);

元素在X轴和Y轴上倾斜30度和20度。

matrix()–缩放

matrix() 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

语法：
transform: matrix(0.866,0.5,-0.5,0.866,0,0);

元素在X轴和Y轴上倾斜30度和20度。

3D转换

CSS3 允许您使用 3D 转换来对元素进行格式化。

3D转换属性

属性	描述
`transform`	向元素应用 2D 或 3D 转换。
`transform-origin`	允许你改变被转换元素的位置。
`transform-style`	规定被嵌套元素如何在 3D 空间中显示。
`perspective`	规定 3D 元素的透视效果。
`perspective-origin`	规定 3D 元素的底部位置。
`backface-visibility`	定义元素在不面对屏幕时是否可见。

3D转换方法

函数	描述
`matrix3d(n,n, n,n,n, n ,n,n,n ,n,n,n , n,n,n ,n )`	定义 3D 转换，使用 16 个值的 4x4 矩阵。
`translate3d(x,y,z)`	定义 3D 转化。
`translateX(x)`	定义 3D 转化，仅使用用于 X 轴的值。
`translateY(y)`	定义 3D 转化，仅使用用于 Y 轴的值。
`translateZ(z)`	定义 3D 转化，仅使用用于 Z 轴的值。
`scale3d(x,y,z)`	定义 3D 缩放转换。
`scaleX(x)`	定义 3D 缩放转换，通过给定一个 X 轴的值。
`scaleY(y)`	定义 3D 缩放转换，通过给定一个 Y 轴的值。
`scaleZ(z)`	定义 3D 缩放转换，通过给定一个 Z 轴的值。
`rotate3d(x,y,z,angle)`	定义 3D 旋转。
`rotateX(angle)`	定义沿 X 轴的 3D 旋转。
`rotateY(angle)`	定义沿 Y 轴的 3D 旋转。
`rotateZ(angle)`	定义沿 Z 轴的 3D 旋转。
`perspective(n)`	定义 3D 转换元素的透视视图。