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 ...
随机推荐
- 轻松构建基于 Serverless 架构的弹性高可用音视频处理系统
前言 随着计算机技术和 Internet 的日新月异,视频点播技术因其良好的人机交互性和流媒体传输技术倍受教育.娱乐等行业青睐,而在当前, 云计算平台厂商的产品线不断成熟完善, 如果想要搭建视频点播类 ...
- 【Ubuntu 16.04.2_64】安装配置SVN
[Ubuntu 16.04.2_64]安装配置SVN 转载:https://www.cnblogs.com/yangchongxing/p/10190549.html 检查是否已安装svn # svn ...
- OPPO R11刷机初体验
刷机目的 最初打算是用旧手机搭一个服务器,首先想到的是刷一个Linux系统,但这太难了,我搞不定,然后就想着可以用一些软件比如KSWEB之类的来代替,但是想要访问80端口的话还是需要root,但是普通 ...
- android studio 项目生成的apk变小的原因
问题:感觉直接在apk文件夹下面拷出来的apk不能安装使用,而且apk比较小,可能就是这个问题引起的 Android Studio版本升级到2.3后,增加了instant run功能,对项目的buil ...
- 细解JavaScript ES7 ES8 ES9 新特性
题记:本文提供了一个在线PPT版本,方便您浏览 细解JAVASCRIPT ES7 ES8 ES9 新特性 在线PPT ver 本文的大部分内容译自作者Axel Rauschmayer博士的网站,想了解 ...
- UWP 更强大的文件获取能力
默认情况下,通用 Windows 平台 (UWP) 应用可以访问特定文件系统位置. 应用也可以通过文件选取器或通过声明功能访问其他位置. 在创建新的应用时,默认情况下你可以访问以下文件系统位置: 1. ...
- mySql中The user specified as a definer ('root'@'%') does not exist
背景 最近往现场导了个库,发现功能报错,一看是视图报错,navicat一看,哎呦,直接报错.The user specified as a definer ('root'@'%') does not ...
- More than one file was found with OS independent path 'lib/armeabi-v7a/libgnustl_shared.so'
More than one file was found with OS independent path 'xxx/xxx' 这个错误是在路径中出现了重复依赖. 解决办法是配置打包选项, 在 and ...
- 安卓JNI精细化讲解,让你彻底了解JNI(二):用法解析
目录 用法解析 ├── 1.JNI函数 │ ├── 1.1.extern "C" │ ├── 1.2.JNIEXPORT.JNICALL │ ├── 1.3.函数名 │ ├── 1 ...
- Information Management System
Information Management System 一.代码部分 #include <stdio.h> #include <stdlib.h> #include < ...