css3基础知识总结

zmsup

已于 2022-06-27 08:56:00 修改

阅读量3.2k

点赞数 1

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

于 2022-06-24 11:01:27 首次发布

本文链接：https://blog.csdn.net/weixin_44431812/article/details/125440439

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

简言：本文主要以简要的方式记录CSS3的属性、语法、部分用法，以大家共同学习后日后巩固查询为目的，没事可以多翻阅，可以在一些特定样式的处理以及代码优化有所帮助。对前端初学者的基础学习和有一定能力前端开发者的能力加强巩固提升有很好的帮助。
文章底部附该文章的【腾讯在线文档链接】

一、起始
- - - 1. 兼容性
二、边框
- - - 1. 向盒子添加阴影——box-shadow
    - 2. 用图片设置边框——border-image
三、颜色
- - - 1. 颜色可设置透明度——RGBA
    - 2. 颜色渐变色彩——Gradient
四、文字及字体
- - - 1. 文字常用处理——text-overflow 与 word-wrap
    - 2. 嵌入字体——@font-face
五、背景
- - - 1. 元素背景图片的原始起始位置——background-origin
    - 2. 元素背景裁剪——background-clip
六、选择器
七、变形及动画
八、媒体查询
- - - 1. 引入媒体类型
    - 2. 引入媒体类型
腾讯文档链接

一、起始

1. 兼容性

编写CSS3样式时，不同的浏览器可能需要不同的前缀。是浏览器的私有属性，虽然目前较新版本的浏览器都是不需要前缀的，但为了更好的向前兼容前缀还是少不了的。在后面样式不生效的情况要检查是否是兼容性问题。

前缀	浏览器
-webkit	chrome和safar
-moz	firefox
-ms	IE
-o	opera

二、边框

1. 向盒子添加阴影——box-shadow

语法：box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
X轴偏移量：负数，向左偏移；正数，向右偏移；
Y轴偏移量：负数，向上偏移；正数，向下偏移；
[投影方式]：空(默认)：外阴影;
例：
● 外阴影：

.box{width:100px;height:100px;box-shadow:-4px 4px 6px #666; }

● 内阴影：

.box{width:100px;height:100px;box-shadow:-4px 4px 6px #666  inset; }

PS：可对一个盒子进行多种阴影添加，【,】隔开

2. 用图片设置边框——border-image

语法：background:[url(图片地址)] [上边框切割宽度] [右边框切割宽度] [下边框切割宽度] [左边框切割宽度] [延伸方式];
[切割宽度]：单位可以px也可以百分比；
[延伸方式]：round(平铺)、repeat(重复)、stretch(拉伸)；
例：
● 四边都取70px：

.border_image {...(其他样式设置)	border:500px solid #ccc;  border-image:url(xxx) 70 repeat;}

三、颜色

1. 颜色可设置透明度——RGBA

语法：color：rgba(R,G,B,A);
[R]：红;
[G]：绿;
[B]：蓝;
[A]：alpha透明度(0-1);
例：
● 透明度为50%：

background-color:rgba(100,120,60,0.5);

2. 颜色渐变色彩——Gradient

语法：[渐变类型]-gradient([渐变方向],渐变颜色1,渐变颜色2,渐变颜色3,...);
[渐变类型]：线性渐变(linear)和径向渐变(radial);
[渐变方向]：①角度：0-360deg②英文：to (top\right\bottom\left\top left\top right…);
[渐变颜色]：可以多个颜色;
例：
● 从右到左线性渐变背景：

background-image:linear-gradient(to left, red, orange,yellow,green);

PS：用英文to(top left\top right…)时，起点为他目标点相反的位置，如to top left,则起点时右下角，终点是左上角

四、文字及字体

1. 文字常用处理——text-overflow 与 word-wrap

语法：white-space:[normal|break-word](文字是否换行); text-overflow:[clip|ellipsis](文字溢出处理方式);
[normal]：内容在边界内不换行;
[break-word]：内容在边界内换行;
[clip]：剪切处理;
[ellipsis]：溢出文本显示省略号;
例：
● 超出宽度省略：

.text{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:200px; }

PS：超出宽度省略该方法需要搭配溢出内容为隐藏(overflow:hidden)

2. 嵌入字体——@font-face

语法： @font-face {font-family : 字体名称;src : 字体文件在服务器上的相对或绝对路径; }
加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体
例：

@font-face {font-family: "xxx Font";src: url("xxx");}
.txt { font-size :12px;font-family : "My Fonxxx Font;/*必须项，设置@font-face中font-family同样的值*/ }

3、 (text-shadow)设置文本的阴影效果

语法： text-shadow: [X-Offset] [Y-Offset] [blur] [color];
[X-Offset]：阴影的水平偏移距离，正值时阴影向右偏移，反之向左偏移；
[Y-Offset]：阴影的垂直偏移距离，正值时阴影向下偏移，反之向上偏移；
[blur]：阴影的模糊程度，值越大，阴影越模糊，反之阴影越清晰;
[color]：阴影的颜色;

 .txt {text-shadow: 2px 2px 0 red;}`

五、背景

1. 元素背景图片的原始起始位置——background-origin

语法： background-origin ： [border-box] | [padding-box] | [content-box];
[border-box]：起始位置为边框；
[padding-box]：起始位置为内边距（默认值）；
[content-box]：起始位置为内容区域;
PS：如果背景不是no-repeat，这个属性无效，它会从边框开始显示

2. 元素背景裁剪——background-clip

语法：background-clip ： [border-box] | [padding-box] | [content-box] | [no-clip];
[border-box]：裁剪起始位置为边框（默认值）；
[padding-box]：起始位置为内边距；
[content-box]：起始位置为内容区域;
[no-clip]：不裁剪;
3、 (background-size )设置背景图片的大小
语法：background-size: [auto] | [长度值] | [百分比] | [cover] | [contain];
[auto]：默认值，不改变背景图片的原高度和原宽度;[长度值]：(任意数值)px (任意数值)px,将其作为图片宽度值来等比缩放;[百分比]：0％~100％;[cover]：等比缩放以填满整个容器;[contain]：背景图片等比缩放至某一边紧贴容器边缘为止;
例：
● 使背景图片填满整个容器：

background-size:100% 100%;//方式一
background-size:cover;//方式二

以上两种方式为常用处理填满整个容器的方法

六、选择器

1. 属性选择器

语法：[元素][[属性][通配符]=["属性值"]]
[元素]：(a\span\div\p…);
[属性]：(class\id\title\href…);
[通配符]：①^：以[“属性值”]开头的任意字符串
②$：以[“属性值”]结尾的任意字符串
③*：[“属性值”]在任意字符串中任意位置相匹配;
[“属性值”]：对[属性]所定义的值;
例：

<body><a href="asd##dsa"  class="columnVideo">文字1</a></body>
<style>
a[class^="column"]{background:red;}//方式一
a[href*="##"]{background:red;}//方式二
</style>

2. 结构性伪类选择器——:root

语法：:root{样式}
根选择器：匹配元素所在文档的根元素
例：

<body><div>Root选择器修改HTML元素的背景颜色</div></body>
<style>:root { background:blue; }</style>

扩展：
变量通常声明在:root中

:root {--var-red: red;background: var(--var-red);}
div {color: var(--var-red);border: 1px solid;}

3. 结构性伪类选择器——:not

语法：[元素]:not([[属性]="[属性值]"]){样式}
否定选择器：可以选择除某个元素之外的所有元素
[元素]：(a\span\div\p…);
[属性]：(class\id\title\href…);
[“属性值”]：对[属性]所定义的值;
例：

<body><div id="page">页体</div><div id="footer">页脚</div></body>
<style>div :not([id="footer"]){background: orange;}</style>

4. 结构性伪类选择器——:empty

语法：[元素]:empty{样式}
用来选择没有任何内容的元素
[元素]：(a\span\div\p…);
例：

<body><p> </p></body>
<style>p:empty {display: none; }</style>

PS：没有任何内容是指连空格都没有

5. 结构性伪类选择器——:target

语法：[url的某个标志符] :target{样式}
目标选择器：用来匹配文档(页面)的url的某个标志符的目标元素
[url的某个标志符]：是指Brand中的#brand;
例：

<body><a href="#brand">Brand</a><p id="brand">p内容</p></body>
<style>#brand:target {   background: orange;   color: #fff; }</style>

6. 选择器——first-child

语法：[元素]:first-child{样式}
选择父元素的第一个子元素
[元素]：(a\span\div\p…);
例：

<body><ol><li>1</li> <li>2</li></ol></body>
<style>ol > li:first-child{color: red; }</style>

7. 选择器——last-child

语法：[元素]:last-child{样式}
选择父元素的最后一个子元素
[元素]：(a\span\div\p…);
例：

<body><ol><li>1</li> <li>2</li></ol></body>
<style>ol > li:last-child{color: red; }</style>

8. 选择器——nth-child(n)

语法：[元素]:nth-child([n]){样式}
定位某个父元素的一个或多个特定的子元素
[元素]：(a\span\div\p…);
[n]：起始值为1，可以为整数值，也可以是表达式;
例：
● 将偶数行设置字体颜色

<style>ol > li:nth-child(2n){color: red; }</style>

● 将奇数行设置字体颜色

<style>ol > li:nth-child(3n){color: red; }</style>

9. 选择器——nth-last-child(n)

语法：[元素]:nth-last-child([n]){样式}
定位某个父元素的倒数的一个或多个特定的子元素
[元素]：(a\span\div\p…);
[n]：起始值为倒数1，可以为整数值，也可以是表达式;
例：
● 将倒数偶数行设置字体颜色

<style>ol > li:nth-last-child(2n){color: red; }</style>

● 将倒数奇数行设置字体颜色

<style>ol > li:nth-last-child(3n){color: red; }</style>

10. 选择器——first-of-type

语法：[元素]:first-of-type{样式}
定位一个父元素下的某个类型的第一个子元素
[元素]：(a\span\div\p…);
例：
● 将第一个段落颜色字体为红色：

<body><div class="D"><p>1</p> <p>2</p></div></body>
<style>.D > p:first-of-type{color: red; }</style>

11. 选择器——last-of-type

语法：[元素]:last-of-type{样式}
定位一个父元素下的某个类型的最后一个子元素
[元素]：(a\span\div\p…·);
例：
● 将最后一个段落颜色字体为红色：

<body><div class="D"><p>1</p> <p>2</p></div></body>
<style>.D > p:first-of-type{color: red; }</style>

12. 选择器——nth-of-type(n)

语法：[元素]:nth-of-type([n]){样式}
定位父元素中指定的某种类型的子元素
[元素]：(a\span\div\p…);
[n]：起始值为1，可以为整数值，也可以是表达式;
例：
● 将第偶数个div设置字体颜色

<style>.D > div:nth-child(2n){color: red; }</style>`

● 将第奇数个div设置字体颜色

<style>.D > div:nth-child(3n){color: red; }</style>

13. 选择器——nth-last-of-type(n)

语法：[元素]:nth-last-of-type([n]){样式}
定位父元素中指定的倒数的某种类型的子元素
[元素]：(a\span\div\p…);
[n]：起始值为倒数1，可以为整数值，也可以是表达式;
例：
● 将第偶数个div设置字体颜色

<style>.D > div:nth-last-of-type(2n){color: red; }</style>

● 将第奇数个div设置字体颜色

<style>.D > div:nth-last-of-type(3n){color: red; }</style>

14. 选择器——only-child

语法：[元素]:only-child{样式}
定位父元素中仅有一个子元素，而且是一个唯一的子元素
[元素]：(a\span\div\p…);
例：

<style>.D > div:only-child{color: red; }</style>

15. 选择器——only-of-type

语法：[元素]:only-of-type{样式}
选中这个元素中的唯一一个类型子元素
[元素]：(a\span\div\p…);
例：
● 将class="D"下唯一一个div设置背景颜色

<style>.D > div:only-of-type { background: orange;}</style>

16. 伪选择器——:enabled

语法：[元素]:enabled{样式}
用来选择可用表单元素
[元素]：(a\span\div\p…);
例：
● 为不可用的表单元素设置红色边框：

<input type="text" name="name" id="name" placeholder="可用输入框" disabled />
<style>input[type="text"]:disabled {border:1px solid green; }</style>

17. 伪选择器——:disabled

语法：[元素]:disabled{样式}
用来选择不可用表单元素
[元素]：(a\span\div\p…);
例：
● 为不可用的表单元素设置红色边框：

<input type="text" name="name" id="name" placeholder="不可用输入框" disabled />
<style>input[type="text"]:disabled {border:1px solid red; }</style>

18. 伪选择器——:checked

语法：[元素]:checked{样式}
设置单选按钮和复选按钮的选中状态
[元素]：(a\span\div\p…);
例：
● 为选中的设置红色边框设置红色边框：

<input type="radio" checked="checked"  id`="boy" name="1" />
<style>input[type="radio"]:checked{border:1px solid red; }</style>

19. 伪选择器——::selection

语法：[元素]::selection{样式}
设置用鼠标选择文本时的文本样式
[元素]：(a\span\div\p…);
例：
● 为选中的文字设置红色颜色：

<p class="txt">123</p>
<style>.txt::selection{color: red;}</style>

PS：当使用Firefox浏览器还需要添加前缀-moz,如：::-moz-selection

20. 伪选择器——:read-only

语法：[元素]:read-only{样式}
设置指定处于只读状态元素的样式
[元素]：(a\span\div\p…);
例：
● 为只读的文字设置红色颜色：

<p class="txt" readonly="readonly">123</p>
<style>.txt:read-only{color: red;}</style>

PS：当使用Firefox浏览器还需要添加前缀-moz,如：:-moz-read-only

21. 伪选择器——:read-write

语法：[元素]:read-write{样式}
设置指定处于非只读状态元素的样式
[元素]：(a\span\div\p…);
例：
● 为只读的文字设置红色颜色：

<p class="txt" >123</p>
<style>.txt:read-write{color: red;}</style>

PS：当使用Firefox浏览器还需要添加前缀-moz,如：:-moz-read-write

22. 伪选择器——::before和::after

语法：[元素]::before{样式}|| [元素]::after{样式}
给元素的前面或后面插入内容
[元素]：(a\span\div\p…);
例：
● 为文字前后增加"!"

<p class="txt" >123</p>
<style>.txt.clearfix::before,.clearfix::after {content: ".";}</style>

PS:常和"content"配合使用，使用的场景最多的就是清除浮动

七、变形及动画

1. 旋转——rotate()

语法：transform:rotate(平面旋转值)||rotateX(3D旋转值)||rotateY(3D旋转值)
通过指定的角度参数使元素相对原点进行旋转
例：
● 将文字旋转90度

<p class="txt" >123</p>
<style>.txt{transform: rotate(90deg);}</style>

PS：设置rotateX(旋转值)||rotateY(旋转值)实现3D旋转需要设置舞台属性进行透视属性表达（perspective）

2. 扭曲——skew()

语法：transform:[skew(x角度值,y角度值)]||[skewX(角度值)]||[skewY(角度值)]
以其对象的中心位置围绕着X轴和Y轴按照一定的角度倾斜
[skew(x,y)]使元素在水平和垂直方向同时扭曲
[skewX(x)]仅使元素在水平方向扭曲变形
[skewY(y)]仅使元素在垂直方向扭曲变形
例：
● 将长方形变成平行四边形

<div class="wrapper "></div>
<style>.wrapper{width: 300px;height:100px;transform:skew(45deg);}</style>

3. 缩放——scale()

语法：transform:[scale(x缩放比例,y缩放比例)]||[scaleX(缩放比例)]||[scaleY(缩放比例)]
以其对象的中心位置围绕着X轴和Y轴按照一定的比例缩放
[scale(x,y)]使元素在水平和垂直方向同时缩放
[scaleX(x)]仅使元素在水平方向缩放
[scaleY(y)]仅使元素在垂直方向缩放
例：
● 将长方形缩放一倍

<div class="wrapper "></div>
<style>.wrapper{width: 300px;   height: 100px;transform: scale(0.5);}</style>

4. 平移——translate()

语法：transform:[translate(x平移距离,y平移距离)]||[translateX(平移距离)]||[translateY(平移距离)]
将元素向指定的方向移动
[translate(x,y)]使元素在水平和垂直方向同时移动
[translateX(x)]仅使元素在水平方向移动
[translateY(y)]仅使元素在垂直方向移动
例：
● 将长方形右移100px

<div class="wrapper "></div>
<style>.wrapper{width: 300px;   height: 100px;transform: translateX(100px);}</style>

5. 原点——transform-origin

语法：transform-origin :[关键词]||[百分比]
使元素原点不在元素的中心位置，以达到需要的原点位置
[关键词]：有top\bottom\center\left\right(x轴位置 y轴位置)如：top center/bottom right…
[百分比]：0%~100%(x轴位置 y轴位置)如：50%/0 50%…
例：
● 将原点移至左上角

<div class="wrapper "></div>
<style>.wrapper{width: 300px;   height: 100px;transform-orgin: (0% 0%);}</style>

6. 过渡属性——transition-property

语法：transition-property :[属性]
通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值[属性]：height\color\font-size…

7. 过渡函数——transition-timing-function

语法：transition-timing-function :[函数]
主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况
[函数]：ease(由快到慢)、linear(恒速)、ease-in(速度越来越快)、ease-out(速度越来越慢)、ease-in-out(先加速后减速)

8. 过渡延迟时间——transition-timing-function

语法：transition-delay:[时间长度]
当改变元素属性值后多长时间开始执行
[函数时间长度]：例如:0.6s

9. 关键帧——Keyframes

语法：Keyframes:{[百分比]:{},[百分比]:{},[百分比]:{}...}
分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果
例：
● 通过“@keyframes”声明一个名叫“dh”的动画，从“0%”开始到“100%”结束，同时还经历了一个“40%”和“60%”两个过程

@keyframes dh {0% {margin-left: 100px;background:green;} 40% {margin-left:150px;  background:orange;   } 100% {margin-left: 100px;     background: red;} }

PS：0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。

10. 调用动画——animation-name

语法：animation-name:[none]||[动画名]
用来调用 @keyframes 定义好的动画
例：
● 调用上面通过@keyframes定义好的动画：dh

div:hover{   animation: dh; }

11. 设置动画播放时间——animation-duration

语法：animation-duration:[时间长度]
用来设置 @keyframes 定义好的动画所持续的时间
例：
● 调用上面通过@keyframes定义好的动画：dh

div:hover{   animation: dh 6s; }

12. 过渡函数——transition-timing-function

语法：animation-timing-function:[函数]
用来设置动画播放方式，主要让元素根据时间的推进来改变属性值的变换速率
[函数]：ease(由快到慢)、linear(恒速)、ease-in(速度越来越快)、ease-out(速度越来越慢)、ease-in-out(先加速后减速)
例：
● 调用上面通过@keyframes定义好的动画：dh

div:hover{   animation: dh 6s; animation-timing-function:ease;}

13. 动画开始播放的时间——animation-delay

语法：animation-delay:[时间长度]
定义动画开始播放的时间，用来触发动画播放的时间点
[时间长度]：例如:0.6s
例：
● 调用上面通过@keyframes定义好的动画：dh

div:hover{   animation: dh 6s; animation-timing-function:ease; animation-delay:2s;}

14. 动画播放次数——animation-iteration-count

语法：animation-iteration-count:[infinite]||[number]
定义动画开始播放的时间，用来触发动画播放的时间点
[infinite]：动画将会无限次的播放
[number]：number>=0
例：
● 调用上面通过@keyframes定义好的动画：dh

div:hover{   animation: dh 6s; animation-timing-function:ease; animation-delay:2s;animation-iteration-count:6}

15. 动画播放方向——animation-direction

语法：animation-direction:[normal] || [alternate]
定义动画开始播放的时间，用来触发动画播放的时间点
[normal]：动画的每次循环都是向前播放
[alternate]：动画播放在第偶数次向前播放，第奇数次向反方向播放
例：
● 调用上面通过@keyframes定义好的动画：dh

div:hover{   animation: dh 6s; animation-timing-function:ease; animation-delay:2s;animation-iteration-count:6;animation-direction:alternate}

16. 动画播放状态——animation-play-state

语法：animation-play-state:[running] || [paused]
控制元素动画的播放状态
[running]：播放
[paused]：暂停
例：
● 调用上面通过@keyframes定义好的动画：dh

div:hover span{animation-play-state:running;}

PS：可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放

17. 动画动画时间外属性——animation-fill-mode

语法：animation-fill-mode:[none] || [forwards] || [backwords] || [both]
定义在动画开始之前和结束之后发生的操作
[none]：动画完成其最后一帧时，动画会反转到初始帧处
[forwards]：结束后停留在最后的关键帧的位置
[backwards]：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值
[forwards]：向前(backwards)和向后(forwards)填充模式都被应用。
例：
● 调用上面通过@keyframes定义好的动画：dh

div{animation-play-state:running;}

八、媒体查询

1. 引入媒体类型

方式一：link方法

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

方式二：@import方法

<style type="text/css">     @importurl(style.css) all; </style>

方式三：@media方法

<style type="text/css">     @media screen{     选择器{/*你的样式代码写在这里…*/} } </style>

2. 引入媒体类型

语法：@media [媒体类型] and [媒体特性]{样式}
[媒体类型]：All(所有设备)\Screen(电脑显示器)\Print(打印用纸或打印预览视图)…
[媒体特性]：①min-width||max-width(宽度)
②and关键词(多个媒体特性使用)
③and关键词(多个媒体特性使用)
④Device Width(设备屏幕的输出宽度)
⑤not关键词(对后面的表达式执行取反操作)
⑥only关键词(指定某种特定的媒体类型)

腾讯文档链接

https://docs.qq.com/doc/DYmxlcE1SelhXVGFO
如果对你有所帮助，期望能点赞+收藏支持一下，感谢

zmsup

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
css3基础知识总结

本文主要以简要的方式记录CSS3的属性、语法、部分用法，以大家共同学习后日后巩固查询为目的，没事可以多翻阅，可以在一些特定样式的处理以及代码优化有所帮助。对前端初学者的基础学习和有一定能力前端开发者的能力加强巩固提升有很好的帮助。..................
复制链接

扫一扫