IT兄弟连 HTML5教程 CSS3揭秘 CSS3概述
对于Web开发者来说,CSS3不只是一门新奇的技术,更重要的是这些全新概念的Web应用给开发人员带来了无限的可能性,也极大地提高了开发效率。我们不必再依赖图片或者JavaScript去完成圆角、多背景、用户自定义字体、3D动画、渐变、盒阴影、文字阴影、透明度等提高Web设计质量的特色应用。
1 CSS3在选择器上的支持
CSS3在选择器上的丰富支持使得开发人员可以灵活地控制样式。通过选择器的使用,开发人员不再需要在编辑样式时使用多余的、没有任何语义的class属性,而可以直接将样式与元素绑定起来,利用属性选择器可以很容易地根据属性值的开头或结尾选择某个元素,利用兄弟选择器可以选择同级兄弟节点或紧邻下一个节点的元素,利用伪类选择器可以选择某一类元素,从而节省在网站或Web应用程序设计完成后又要修改样式所花费的时间。
2 CSS3在样式上的支持
只要提起CSS3的特性是什么,回答最多的就是“圆角”。不错,圆角这个功能可以让前端布局节约大量的时间和精力去切图拼凑一个圆角。CSS3还支持阴影(盒阴影和文本阴影)和渐变;可以自定义字体(使用@font-face);对于连续文本换行也新增了一些属性,这既解决了连续英文字符出现页面错位的问题,也不需要后端程序去截取这个连续字符;可以给边框添加背景,支持背景调整大小和背景透明处理。
3 CSS3对于动画的支持
CSS3支持的动画类型有:变换、过渡和动画。你可以对特定的属性设置transition和animation的值实现动画效果。
4 在实际开发中该如何使用CSS3
首先应遵循一个优雅降级的原则,比如前面谈到的圆角,我们可以针对Firefox和Safari等支持圆角的浏览器应用CSS圆角,而那些不支持CSS圆角的浏览器则显示为直角。其次,对于不支持CSS3的浏览器,可以使用JavaScript脚本来实现。在向用户或企业推广新技术的同时也要关注他们的目标与可行性,不能为了技术而技术。
IT兄弟连 HTML5教程 CSS3揭秘 CSS3概述的更多相关文章
- IT兄弟连 HTML5教程 CSS3揭秘 小结及习题
小结 CSS3对于开发者来说,给web应用带来了更多的可能性,极大提高了开发效率.CSS3在选择器上的支持可谓是丰富多彩,使得我们能够灵活的控制样式,而不必为元素进行规范化的命名.CSS3支持的动画类 ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性5
9 透明属性 元素透明也是我们常用的样式,在CSS2中使用滤镜属性opacity实现透明效果.现在有了CSS3的rgba属性,就不用这么麻烦了,当然这也得要浏览器支持才行.通常我们定义颜色都是用十六 ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性4
7 多列布局属性 通过CSS3,开发人员能够创建多列来对文本进行布局.在CSS2时代,对于多列布局的设计,大多采用浮动布局和绝对定位布局两种方式.浮动布局比较灵活,但是需要编写大量的附加样式代码,而 ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性3
5 用户界面属性 在CSS3中,新的用户界面特性包括重设元素尺寸.盒尺寸及轮廓等.本小节着重介绍一下resize属性,只有Firefox 4和Safari 3浏览器支持此属性.resize属性可用于重 ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性2
3 背景属性 在CSS3中提供了多个背景属性,这里只介绍两个比较常用的属性,其他属性可以从手册中获取帮助.在CSS3中,通过background-image或者background属性可以为一个容器 ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性1
通过CSS选择器找到元素,就要使用CSS属性给找到的元素设置样式.尽管现在的浏览器已经支持了众多的CSS3属性,但作为初学者,最应该关注的就是一些“主流”的属性,如border-radius.box- ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS选择器2
4 结构性伪类选择器 在学习结构性伪类选择器之前,先了解两个概念:伪类选择器和伪元素选择器.伪类选择器是CSS中已经定义好的选择器,不能随便命名.常用的伪类选择器是使用在a元素上的几种,如a:lin ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS选择器1
要使用CSS对HTML页面中的元素实现一对一.一对多或者多对一的控制,就需要用到CSS选择器.选择器是CSS3中一个重要的内容,使用它可以大幅度地提高开发人员书写或修改样式表的效率.在大型网站中,样式 ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS规则的组成
CSS和HTML一样都是由W3C制定的标准,本章中介绍的特性和功能还是来源于CSS1和CSS2(CSS2是根据CSS1扩展的).W3C也有新的版本更新,称为CSS3.虽然浏览器已经准备开始实现CSS3 ...
随机推荐
- Nginx(一)--nginx的初步认识及配置
什么是Nginx 是一个高性能的反向代理服务器正向代理代理的是客户端反向代理代理的是服务端 Apache.Tomcat.Nginx 静态web服务器jsp/servlet服务器 tomcat 安装Ng ...
- 【Ubuntu 16.04.2_64】安装配置SVN
[Ubuntu 16.04.2_64]安装配置SVN 转载:https://www.cnblogs.com/yangchongxing/p/10190549.html 检查是否已安装svn # svn ...
- vivado三人表决仿真
概述 下面以三人表决电路的verilog仿真来了解一下vivado软件的使用. 编写设计文件 首先可以在开始的界面通过create new project来新建工程,也可以通过file-->pr ...
- oracle管理角色和权限
介绍 这一部分主要看看oracle中如何管理权限和角色,权限和角色的区别在哪里. 当刚刚建立用户时,用户没有任何权限,也不能执行任何操作.如果要执行某种特定的数据库操作,则必需为其授予系统的权限:如果 ...
- gulp遇到错误:The following tasks did not complete: default Did you forget to signal async completion?
运行之后会像下面一样报这个错误,因为事按着一个视频来写的,所以 原本的gulpfile.js如下 const gulp = require('gulp') gulp.task('default',() ...
- [ASP.NET Core 3框架揭秘] 依赖注入[10]:与第三方依赖注入框架的适配
.NET Core具有一个承载(Hosting)系统,承载需要在后台长时间运行的服务,一个ASP.NET Core应用仅仅是该系统承载的一种服务而已.承载系统总是采用依赖注入的方式来消费它在服务承载过 ...
- C#线程学习笔记八:async & await入门一
一.涉及内容 async & await是C# 5.0引入的,控制台输出所使用的$符号(拼接字符串)是C# 6.0引入的,其功能类似于string.Format()方法. 二.多线程.异步.同 ...
- JS---part5 课程介绍 & part4 复习
part5 课程介绍 另一个定时器 第一个定时器的小案例----练习 封装动画函数----------匀速的动画函数,过渡到=======>缓动的动画函数 简单的轮播图 左右焦点的轮播图 无缝连 ...
- docker拉取慢(net/http: request canceled while waiting for connection (Client.Timeout exceeded while awaiting head)
systemctl restart docker在docker-hub拉取慢,因为服务器在外网 直接配置阿里云镜像就可以 首先: vim /etc/docker/daemon.json加入下面的那句 ...
- ZKWeb网页框架2.2.1正式发布
2.2.1 更新的内容有 改进 EFCore 支持 支持自动 json 序列化字段 (通过 WithSerialization 选项) 支持懒加载 更新后 EFCore 可以使用所有默认插件 (ZKW ...