css3详解

一.什么是CSS3

CSS3是Cascading Style Sheets的第三个版本,是一种用于描述文档样式的语言(CSS3是CSS(层叠样式表)技术的升级版本)。它是前端开发中用于控制网页布局和样式的技术之一。CSS3引入了许多新的特性和功能,如圆角、阴影、渐变、动画等,大大增强了网页设计和交互的能力。与CSS2相比,CSS3提供了更多的选择和灵活性,使开发人员可以以更精细的方式控制网页的外观和表现。

二.css3相较于css有什么改进(优点)

  1. 模块化:CSS3将样式表分成了多个模块,每个模块负责一个特定的功能或特性。这种模块化的设计使得CSS3更加灵活和可扩展。
  2. 新特性:CSS3引入了大量新的特性,包括圆角、阴影、渐变、动画、多列布局等。这些新特性使得开发者能够更方便地实现复杂的样式效果。
  3. 增强样式选择器:CSS3引入了一些新的选择器,如属性选择器、伪类选择器和伪元素选择器等。这些新的选择器使得开发者能够更精确地选择DOM元素,从而灵活地应用样式。
  4. 响应式布局:CSS3引入了媒体查询功能,可以根据设备的不同,自动适应不同的屏幕尺寸和分辨率。这使得开发者能够更轻松地创建响应式布局,提供更好的用户体验。
  5. 字体支持:CSS3引入了新的字体模块,可以支持更多的字体格式和字体效果,提高了网页的设计效果。
  6. 2D和3D转换:CSS3新增了2D和3D转换的属性,可以实现元素的旋转、缩放、倾斜等效果,增强了用户体验和页面的动态效果。

总的来说,CSS3相比于CSS具有更多的功能和更灵活的样式选择器,能够更方便地实现复杂的样式效果和响应式布局。

三.css3必学的重点

CSS3 边框
CSS3 圆角
CSS3 背景
CSS3 渐变
CSS3 文本效果
CSS3 字体
CSS3 2D 转换CSS3 3D 转换(旋转)
CSS3 过渡
CSS3 动画
CSS3 多列
CSS3 用户界面
CSS3 图片
CSS3 按钮
CSS3 分页
CSS3 框大小
CSS3 弹性盒子
CSS3 多媒体查询
CSS3 多媒体查询实例
CSS 网格布局
CSS 网格容器Css 网格元素

四.新增重点特性

background属性


background-image:设置元素的背景图像。
background-origin:规定背景图片的定位区域。。
background-size:规定背景图片的尺寸。。
·background-repeat:设置是否及如何重复背景图像。

background-clip:用于确定背景画区

word-wrap属性


word-wrap 属性允许长单词或 URL 地址换行到下一行
注:所有主流浏览器都支持 word-wrap 属性。
基础语法:
word-wrap:normal break-word:


text-shadow属性


text-shadow 属性:向文本设置阴影。
text-shadow基础语法:
text-shadow:5px 5px 5px #FF0000:
参数分别表示:水平阴影,垂直阴影,模糊距离,阴影颜色;

font-face属性

font-face属性:定义自己的字体

transform 属性

提供了元素变形效果,也叫做变换。它可以将元素实现旋转、缩放和平移的功能。
属性值

border新增
  • border-radius:创建圆角边框

  • box-shadow:为元素添加阴影

  • border-image:使用图片来绘制边框

linear-gradient:(线性渐变)
radial-gradient :(径向渐变)

transition-property属性

定义:设置对象中的参与过渡的属性

语法:transition-property:none | all | property

特点

 没有属性改变

默认值,所有属性都改变

元素的属性名 width,color等

transition-duration属性

定义: 设置对象过渡的持续时间

语法:transition-duration:time

规定完成过渡效果需要花费的时间,以秒或者毫秒计,默认值0

transition-timing-function属性

定义:设置对象中过渡的动画类型,即规定过渡效果的速度曲线。

该属性允许过渡效果随着时间来改变其速度。

语法:只能使用一个属性值

有兴趣加一下社区:http://t.csdnimg.cn/nl4Fi

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/716489.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux常用操作命令大全

Linux常用操作命令大全 Linux,作为一款开源的操作系统,深受全世界开发者和系统管理员的喜爱。在Linux环境下,用户通过命令行界面可以执行各种操作,从而实现对系统的全面控制。本文将详细介绍Linux中常用的操作命令,帮助读者更好地理解和运用这些命令。 一、文件操作命令…

hexo图片显示不出且图片路径错误/.com//

参考博客: hexo 图片显示问题及使用typora设置图片路径-CSDN博客 javascript - hexo 图片路径错误/.com// - SegmentFault 思否 先说如何让hexo图片成功地显示出来 Step1: 修改config设置 将 _config.yml 设置文件中的 post_asset_folder 修改为 true 这一步的作…

平衡二叉树,二叉树的路径,左叶子之和

第六章 二叉树part04 今日内容: 110.平衡二叉树 257. 二叉树的所有路径 404.左叶子之和 110.平衡二叉树 (优先掌握递归) 给定一个二叉树,判断它是否是高度平衡的二叉树。 本题中,一棵高度平衡二叉树定义为&am…

【不可不知的考研复试秘籍 1】

----------------------------------------------------------------------------------------------------- 考研复试科研背景提升班 教你快速深入了解掌握考研复试面试中的常见问题以及注意事项,系统的教你如何在短期内快速提升自己的专业知识水平和编程以及英语…

windows下安装cnpm

cnpm是淘宝团队开发的一个针对中国用户的npm镜像源,它是npm的一个定制版本。由于国外的npm源在国内访问速度较慢,所以cnpm镜像源可以提供更快的下载速度。cnpm的使用方式与npm基本相同,只需将npm替换为cnpm即可。 要想使用cnpm等先安装node.…

反序列化逃逸 [安洵杯 2019]easy_serialize_php1

打开题目 题目源码&#xff1a; <?php$function $_GET[f];function filter($img){$filter_arr array(php,flag,php5,php4,fl1g);$filter /.implode(|,$filter_arr)./i;return preg_replace($filter,,$img); }if($_SESSION){unset($_SESSION); }$_SESSION["user&qu…

每日一题 KY148还是畅通工程

某省调查乡村交通状况&#xff0c;得到的统计表中列出了任意两村庄间的距离。省政府“畅通工程”的目标是使全省任何两个村庄间都可以实现公路交通&#xff08;但不一定有直接的公路相连&#xff0c;只要能间接通过公路可达即可&#xff09;&#xff0c;并要求铺设的公路总长度…

PostgreSQL对已有表增加自增序列

对已有表增加自增序列&#xff1a; 1、在PostgreSQL当中&#xff0c;我们要实现对已有表的ID字段自增。 首先需创建一个关联序列&#xff0c;以下sql语句是创建一个序列&#xff1a; CREATE SEQUENCE menu_id_seq START 6000001; 序列名称是menu_id_seq&#xff0c;起始…

sizeof 和 strlen的区别

sizeof sizeof是单目操作符,sizeof计算变量所栈内存空间大小,单位是字节,如果操作数是类型的话,会计算类型所占大小,sizeof指在乎占用内存空间大小不在乎内容是什么. int main() {int a 0;printf("%zd\n", sizeof(a));printf("%zd\n", sizeof a );printf…

巧【二叉搜索树的最近公共祖先】【二叉搜索树的性质】Leetcode 235. 二叉搜索树的最近公共祖先

【二叉搜索树的最近公共祖先】【二叉搜索树性质】Leetcode 235. 二叉搜索树的最近公共祖先 【巧】解法1 利用二叉搜索树有序的性质解法2 采用二叉树求最近公共祖先的方法——后序遍历 ---------------&#x1f388;&#x1f388;235. 二叉搜索树的最近公共祖先 题目链接&#x…

huggingface上传或发布自己的模型(大语言模型LLM)

创建huggingface账号和token 在https://huggingface.co/join注册huggingface账号&#xff0c;登录账号后&#xff0c;在https://huggingface.co/settings/tokens创建token&#xff0c;注意需要将token的类型设置为WRITE。 安装必要软件包和初始化环境 安装git lfs curl -s …

Springboot+vue的制造装备物联及生产管理ERP系统(有报告)。Javaee项目,springboot vue前后端分离项目。

演示视频&#xff1a; Springbootvue的制造装备物联及生产管理ERP系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot vue前后端分离项 项目介绍&#xff1a; 本文设计了一个基于Springbootvue的制造装备物联及生产管理ERP系统&#xff0c;采用M&#xff…

WebSocket协议及其在实时通信中的重要性

本文深入介绍了WebSocket协议及其在实时通信中的重要性。从HTTP的限制到WebSocket的优势&#xff0c;再到连接建立和实际应用&#xff0c;全面阐述了WebSocket的工作原理及其在实际业务中的应用场景。 一、引言 在生产中&#xff0c;有时需要服务端向客户端发送消息&#xff0…

三元组的最小距离

题目链接&#xff1a; 三元组最小距离 定义三元组 $(a, b, c)$&#xff08;$a,b,c$ 均为整数&#xff09;的距离 $D|a-b||b-c||c-a|$。 给定 $3$ 个非空整数集合 $S_1, S_2, S_3$&#xff0c;按升序分别存储在 $3$ 个数组中。 请设计一个尽可能高效的算法&#xff0c;计算并…

AI学习集合-前瞻

AI学习前瞻 工作岗位 算法工程师机器学习工程师图像算法工程师ai工程师NLP高级算法工程师 学习路线 应用场景 计算机视觉技术应用场景 自然语言应用 AI流程 AI拟人流程 机器人历史数据经验模型规律依据模型预测未来依据规律做出判断 AI基本流程 术语所用到的技术手段数据数…

javascript中对包含关系判断介绍

本文将为您详细讲解 JavaScript 中对包含关系的判断&#xff0c;包括数组、字符串等&#xff0c;并提供相应的代码例子。 1. 数组包含关系判断 在 JavaScript 中&#xff0c;数组包含关系判断通常使用 Array.prototype.includes() 方法。这个方法返回一个布尔值&#xff0c;表示…

牛客网C++专项题目整理(2)

1.参加位运算的数据可以是任何类型的数据。请问这句话的说法是正确的吗&#xff1f; 答案&#xff1a;错误 位运算符主要用于整型数据&#xff08;如int、unsigned int、long、unsigned long等&#xff09;和字符型数据&#xff08;如char和unsigned char&#xff09;&#x…

mac 本地使用dockerfile启动 springboot项目

1.创建Dockerfile放在项目的根目录下 2.编写Dockerfile FROM openjdk:11 MAINTAINER ChengLinADD target/JiaLi-0.0.1-SNAPSHOT.jar /app.jar# 暴露 Spring Boot 应用的端口号 EXPOSE 8088 # 启动 Spring Boot 应用 CMD ["java", "-jar", "app.jar&q…

前端学习第四天-css提升

达标要求 掌握css复合选择器 块级元素和行内元素及行内块的区别? 哪些元素是块元素,行内元素及行内块元素? 熟练掌握display的用法 能够说出css三大特性 熟练运用背景样式 1. CSS复合选择器 复合选择器是由两个或多个基础选择器&#xff0c;通过不同的方式组合而成的…

vue2结合electron开发跨平台应用(桌面端应用)

1.确定nodejs和electron的版本号 确定nodejs和electron的版本号及其重要&#xff0c;因为electron的开发版本需要指定的nodejs版本支持。 本文安装测试使用的是: 1.node18.19.0 2.npm10.2.3 3.vue-cli5.0.8 4.electron29.0.0 2.创建vue2项目 vue create elctron29.0.0_no…