查看: 82|回复: 0

[HTML/CSS] CSS3构成移动Web界面样式

[复制链接]
大话设计 发表于 2018-3-23 19:04:24 | 显示全部楼层 |阅读模式
生活圈制作
  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值将属性设定为红色字体:

  1. <div id=”article”>测试完全匹配属性选择器</div>
  2. <style type=”text/css”>
  3. [id=article]{
  4. color:red;
  5. }
  6. </style>
复制代码
  2.包含匹配选择器

  包含匹配比完全匹配范围更广。只要元素中的属性包含有指定的字符串,元素就使用该样式。其语法是:[attribute*=value]。其中attribute指的是属性名,value指的是属性值,包含匹配采用“*=”符号。

  例如下面三个div元素都符合匹配选择器的选择,并将div元素内的字体设置为红色字体:

  1. <div id=”article”>测试完全匹配属性选择器</div>
  2. <div id=”subarticle”>测试完全匹配属性选择器</div>
  3. <div id=”article1″>测试完全匹配属性选择器</div>
  4. <style type=”text/css”>
  5. [id*=article]{
  6. color:red;
  7. }
  8. </style>
复制代码
  3.首字符匹配选择器

  首字符匹配就是匹配属性值开头字符,只要开头字符符合匹配,则元素使用该样式。其语法是:[attribute^=value]。其中attribute指的是属性名,value指的是属性值,首字符匹配采用“^=”符号。例如下面三个div元素使用首字符匹配选择器后,只有id为article和article1的元素才被设置为红色字体。

  1. <div id=”article”>测试完全匹配属性选择器</div>
  2. <div id=”subarticle”>测试完全匹配属性选择器</div>
  3. <div id=”article1″>测试完全匹配属性选择器</div>
  4. <style type=”text/css”>
  5. [id^=article]{
  6. color:red;
  7. }
  8. </style>
复制代码
  4.尾字符匹配选择器

  尾字符匹配跟首字符匹配原理一样。尾字符只匹配结尾的字符串,只要结尾字符串符合匹配,则元素使用该样式。其语法是:[attribute$=value]。其中attribute指的是属性名,value指的是属性值,尾字符匹配采用“$=”符号。例如下面三个div元素使用尾字符匹配选择器时,只有id为subarticle的元素才被设置为红色字体。

  1. <div id=”article”>测试完全匹配属性选择器</div>
  2. <div id=”subarticle”>测试完全匹配属性选择器</div>
  3. <div id=”article1″>测试完全匹配属性选择器</div>
  4. <style type=”text/css”>
  5. [id$=article]{
  6. color:red;
  7. }
  8. </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。

  1. before选择器的语法是:

  2. 元素标签:before{

  3. content:”插入的内容”
  4. }

  5. 例如,在p元素之前插入“文字”:

  6. p.before{

  7. content:”文字”
  8. }
复制代码
  2.after

  after伪类元素选择器和before伪类元素选择器原理一样,但after是在选择某个元素之后插入内容。

  目前,before选择器得到支持的浏览器包括:IE8+、Firefox、Chrome、Safari、Opera、Android Browser和iOS Safari。

  1. after选择器的语法是:

  2. 元素标签:after{

  3. content:”插入的内容”

  4. <span style="background-color: white;">}</span>
复制代码
  3.first-child

  指定元素列表中第一个元素的样式。语法如下:

  1. li:first-child{

  2. color:red;

  3. }
复制代码
  4.last-child

  和first-child是同类型的选择器。last-child指定元素列表中最后一个元素的样式。语法如下:

  1. li:last-child{

  2. color:red;

  3. }
复制代码
  5.nth-child和nth-last-child

  nth-child和nth-last-child可以指定某个元素的样式或从后数起某个元素的样式。例如:

  1. //指定第2个li元素

  2. li:nth-child(2){}

  3. //指定倒数第2个li元素

  4. li:nth-last-child{}

  5. //指定偶数个li元素

  6. li:nth-child(even){}

  7. //指定奇数个li元素

  8. li:nth-child(odd){}
复制代码


最近访问 头像模式 列表模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表