CSS2.1发布至今已经有7年的历史,在这7年里,互联网的发展已经发生了翻天覆地的变化。CSS2.1有时候难以满足快速提高性能、提升用户体验的Web应用的需求。CSS3标准的出现就是增强CSS2.1的功能,减少图片的使用次数以及解决HTML页面上的特殊效果。
在HTML5逐渐成为IT界最热门话题的同时,CSS3也开始慢慢地普及起来。目前,很多浏览器都开始支持CSS3部分特性,特别是基于Webkit内核的浏览器,其支持力度非常大。在Android和iOS等移动平台下,正是由于Apple和Google两家公司大力推广HTML5以及各自的Web浏览器的迅速发展,CSS3在移动Web浏览器下都能到很好的支持和应用。
CSS3作为在HTML页面担任页面布局和页面装饰的技术,可以更加有效地对页面布局、字体、颜色、背景或其他动画效果实现精确的控制。
目前,CSS3是移动Web开发的主要技术之一,它在界面修饰方面占有重要的地位。由于移动设备的Web浏览器都支持CSS3,对于不同浏览器之间的兼容性问题,它们之间的差异非常小。不过对于移动Web浏览器的某些CSS特性,仍然需要做一些兼容性的工作。
当前,CSS3技术最适合在移动Web开发中使用的特性包括:
接下来我们将会重点介绍如何使用这些CSS3特性来实现移动Web界面。
选择器
选择器是CSS3中一个重要的部分,通过使用CSS3的选择器,可以提高开发人员的工作效率。我们将为读者介绍属性选择器和伪类选择器的基本用法。
属性选择器
在CSS3中,我们可以使用HTML元素的属性名称选择性地定义CSS样式。其实,属性选择器早在CSS2中就被引入了,其主要作用就是为带有指定属性的HTML 元素设置样式。例如,通过指定div元素的id属性,设定相关样式。属性选择器一共分为4种匹配模式选择器:
- 完全匹配属性选择器
- 包含匹配选择器
- 首字符匹配选择器
- 尾字符匹配选择器
1.完全匹配属性选择器
其含义就是完全匹配字符串。当div元素的id属性值为test时,利用完全匹配选择器选择任何id值为test的元素都使用该样式。如下代码通过指定id值将属性设定为红色字体:
<div id=”article”>测试完全匹配属性选择器</div>
<style type=”text/css”>
[id=article]{
color:red;
}
</style>
2.包含匹配选择器
包含匹配比完全匹配范围更广。只要元素中的属性包含有指定的字符串,元素就使用该样式。其语法是:[attribute*=value]。其中attribute指的是属性名,value指的是属性值,包含匹配采用“*=”符号。
例如下面三个div元素都符合匹配选择器的选择,并将div元素内的字体设置为红色字体:
<div id=”article”>测试完全匹配属性选择器</div>
<div id=”subarticle”>测试完全匹配属性选择器</div>
<div id=”article1″>测试完全匹配属性选择器</div>
<style type=”text/css”>
[id*=article]{
color:red;
}
</style>
3.首字符匹配选择器
首字符匹配就是匹配属性值开头字符,只要开头字符符合匹配,则元素使用该样式。其语法是:[attribute^=value]。其中attribute指的是属性名,value指的是属性值,首字符匹配采用“^=”符号。例如下面三个div元素使用首字符匹配选择器后,只有id为article和article1的元素才被设置为红色字体。
<div id=”article”>测试完全匹配属性选择器</div>
<div id=”subarticle”>测试完全匹配属性选择器</div>
<div id=”article1″>测试完全匹配属性选择器</div>
<style type=”text/css”>
[id^=article]{
color:red;
}
</style>
4.尾字符匹配选择器
尾字符匹配跟首字符匹配原理一样。尾字符只匹配结尾的字符串,只要结尾字符串符合匹配,则元素使用该样式。其语法是:[attribute$=value]。其中attribute指的是属性名,value指的是属性值,尾字符匹配采用“$=”符号。例如下面三个div元素使用尾字符匹配选择器时,只有id为subarticle的元素才被设置为红色字体。
<div id=”article”>测试完全匹配属性选择器</div>
<div id=”subarticle”>测试完全匹配属性选择器</div>
<div id=”article1″>测试完全匹配属性选择器</div>
<style type=”text/css”>
[id$=article]{
color:red;
}
</style>
伪类选择器
在CSS3选择器中,伪类选择器种类非常多。然后在CSS2.1时代,伪类选择器就已经存在,例如超链接的四个状态选择器:a:link、a:visited、a:hover、a:active。CSS3增加了非常多的选择器,其中包括:
- first-line伪元素选择器
- first-letter伪元素选择器
- root选择器
- not选择器
- empty选择器
- target选择器
这些伪类选择器是CSS3新增的选择器,它们都能得到在Android和iOS平台下Web浏览器的支持。现在我们就为你介绍这部分的选择器。
1.before
before伪类元素选择器主要的作用是在选择某个元素之前插入内容,一般用于清除浮动。目前,before选择器得到支持的浏览器包括:IE8+、Firefox、Chrome、Safari、Opera、Android Browser和iOS Safari。
before选择器的语法是:
元素标签:before{
content:”插入的内容”
}
例如,在p元素之前插入“文字”:
p.before{
content:”文字”
}
2.after
after伪类元素选择器和before伪类元素选择器原理一样,但after是在选择某个元素之后插入内容。
目前,before选择器得到支持的浏览器包括:IE8+、Firefox、Chrome、Safari、Opera、Android Browser和iOS Safari。
after选择器的语法是:
元素标签:after{
content:”插入的内容”
}
3.first-child
指定元素列表中第一个元素的样式。语法如下:
li:first-child{
color:red;
}
4.last-child
和first-child是同类型的选择器。last-child指定元素列表中最后一个元素的样式。语法如下:
li:last-child{
color:red;
}
5.nth-child和nth-last-child
nth-child和nth-last-child可以指定某个元素的样式或从后数起某个元素的样式。例如:
//指定第2个li元素
li:nth-child(2){}
//指定倒数第2个li元素
li:nth-last-child{}
//指定偶数个li元素
li:nth-child(even){}
//指定奇数个li元素
li:nth-child(odd){}
在此我们只介绍了部分常用的CSS选择器,实际上选择器并不止这几种,其余的选择器不再详细介绍,有兴趣的读者可以阅读CSS3相关资料。
分享到:
相关推荐
第6章 移动Web界面样式 48 第7章 Geolocation地理定位 74 第8章 轻量级框架jQuery Mobile初探 79 第9章 重量级富框架Sencha Touch入门 187 第10章 跨平台的PhoneGap应用介绍 273 第11章 构建基于HTML5的生活轨迹Web ...
本书全面、系统地讲解了 HTML 5、CSS 3 和 jQuery Mobile 从 Web 界面设计到移动应用开发的各种技术和知识点。本书难度适中,知识结构严谨,内容由浅入深、从易到难,讲解通俗易懂,并注重读者兴趣的培养,在知识点...
媒体查询 CSS媒体查询允许开发者基于浏览网站的设备的特性来应用不同的样式申明,最常用的特性是视口宽度。 GCF 谷歌内嵌浏览器框架, 使用此插件,用户可以通过Internet Explorer的用户界面,以Chrome内核的渲染方式...
该实用指南通过逐步的样式练习为您提供了开发自定义Web和移动ArcGIS Server应用程序的动手经验。 除了向您介绍HTML / CSS / JavaScript技术堆栈之外,您还将学习在地图中添加直观的地理信息层,交互式查询和空间...
轻巧且易于使用CSS库,用于开发快速响应的Web界面! :grinning_face:目录概述用法CSS 只需将样式表<link>复制粘贴到您的<head>以加载我们CSS。 < link rel =" stylesheet " href =" ...
什么是React Pokedex? React Pokedex是使用ReactJS和NodeJS的简单Web Pokedex。... 样式化的组件-CSS-in-JS。安装: 在您的机器中安装npm或yarn。 npm install 或者 yarn install用法: npm start 或者 yarn st
只需一点HTML,JS和CSS,您就可以构建Web界面,设置其样式并添加交互。 经验教训 学分 一起写 :heart_suit: ( 通过CSS创建的玻璃容器受到Jakub Mandra的玻璃罐子。 艺术品由使用Procreate手工绘制。 w3schools...
H5UI H5UI是一种轻量,优雅的开源移动端UI样式库,目的是为了手机H5页面提供一个常用的组件库,减少重复工作。... 轻巧,优雅的开源移动用户界面样式库。 文献资料 H5UI 手机演示 执照 麻省理工学院
包括核心框架 Montage 和默认设置的针对移动设备优化的用户界面小部件 Digit。 由于 MontageJS 使用 CommonJS 模块系统,因此您可以利用 npm 生态系统获取其他模块。 要添加依赖项(例如,foo), npm install foo...
钢筋多租户SaaS样板+带有React,Material-UI,Relay,GraphQL,JWT,Node.js,C * DB的通用Web应用程序示例-Cassandra / Elassandra / Scylla。技术栈客户技术描述用于React应用程序的基于路由的可扩展路由。用于...
前言 <br>第一部分 Web设计核心问题 <br>第1章 什么是Web设计 <br>1.1 Web设计的金字塔 <br>1.2 建设Web站点 <br>1.3 为用户建设 <br>1.4 从纸张到软件 <br>1.5 Web的图形用户界面传统 ...
的Web和移动应用程序的固有,可变和确定性CSS框架webView.Toucaan是关于什么的设计“类应用”界面。 它是关于根据设备的类别,功能,物理大小和情况限制来优化UX / UI的方法。 根据的来分隔样式表。 将可访问性放在...
1.2 Web服务器的配置 3 1.3 创建虚拟目录 7 1.4 网页浏览器IE 6.0的配置 10 本章小结 12 思考题 12 第2章 HTML基础 13 2.1 网页与HTML概述 13 2.2 文档结构标记和格式标记 14 2.3 文本标记和链接标记 16 2.4...
CSS-CSS是一种样式表语言,用于描述以标记语言(例如HTML)编写的文档的表示形式。 -Bootstrap是一个免费的开源CSS框架,专门用于响应式,移动优先的前端Web开发。 它包含用于排版,表单,按钮,导航和其他界面组件...
16.5.3 Web服务器配置 16.5.4 Web应用的商业主机服务 16.6 数据库服务器的安全性 16.6.1 用户和权限系统 16.6.2发送数据至服务器 16.6.3 连接服务器 16.6.4 运行服务器 16.7 保护网络 16.7.1 安装防火墙 16.7.2使用...
CSS则负责页面的样式和布局,它使得网页元素能够以美观、易读的方式呈现出来。JavaScript则赋予了网页交互性,它能够实现各种动态效果和响应用户的操作。 前端开发的任务多样且繁重。开发者需要制作响应式的网站...
充分响应自适用手机端设备的后台模板,有很干净的用户界面和很多js组件,部件,UI元素。代码超级干净,可以很容易地定制,很容易转化为任何类型的web应用程序,包括自定义管理面板,数据分析仪表盘,电子商务后端、CMS、...
要查看此应用程序的实时运行,请访问: : 这些文件是必需的: index.php-表示Web UIHTML,包含一些PHP switch.php-主要逻辑,使用来自index.php的请求加载不同HTML视图/meta/styles/m.css-用于定义移动界面样式CSS ...