移动web界面样式

CSS３

• CSS3在移动web开发中使用的特性包括：
  • 增强的选择器
  • 阴影
  • 强大的背景设置
  • 圆角边框

选择器

• 属性选择器
  • 完全匹配属性选择器
  • 包含匹配选择器
  • 首字符匹配选择器
  • 尾字符匹配选择器

完全匹配属性选择器

<style type="text/css">
    /*当id的值为article时，使用该样式*/
    [id=article]{
        color:red; }
</style>

包含匹配选择器

<style type="text/css">
    /*当id的值包含article时，使用该样式*/
    [id*=article]{
        color:red; }
</style>

首字符匹配选择器

<style type="text/css">
    /*当id的值以article开头时，使用该样式*/
    [id^=article]{
        color:red; }
</style>

尾字符匹配选择器

<style type="text/css">
    /*当id的值以article结尾时，使用该样式*/
    [id$=article]{
        color:red; }
</style>

• 伪类选择器
  在css2.1时代，伪类选择器就存在，例如超链接的四个状态：a:link a:visited a:hover a:active 。CSS3增加了非常多的选择器，包括
  • first-line
  • first-letter
  • root
  • not
  • empty
  • target
    ...

before 在选择的元素之前插入内容
after 在选择的元素之后插入内容
first-child 指定元素列表第一个的样式
last-child 指定元素列表最后一个的样式
nth-child(n) 指定元素列表第n个的样式
nth-last-child(n)指定元素列表倒数第n个的样式
nth-child(even) 指定元素列表偶数个的样式
nth-child(odd) 指定元素列表奇数个的样式

li:nth-last-child(2){
    background-color: red;
}
    /*倒数第二个li元素下内容背景红色*/

阴影

• box-shadow 让元素具有阴影效果

box-shadow:<length> <length> <length> ||color;
第一个length阴影的水平偏移值，第二个垂直偏移值，第三个阴影模糊值，前两个可取正负值，如4px或者-4px

  <style type="text/css">
    div{  width: 100px；
        height:100px;
        box-shadow: 4px 2px 6px #f00 inset;
    }
  </style>

• text-shadow 文本内容的阴影效果或模糊效果，语法和box-shadow 基本一致
  <style type="text/css">
  div{
  box-shadow: 4px 2px 6px #f00 inset;
  text-shadow: -5px -3px 2px green;
  padding: 50px 100px 10px;
  color: blue;
  font-size: 20px;
  }
  </style>

背景

• background-size 用于设置背景图片的大小

background-size:100px 60px;

• background-clip用于确定背景的裁剪区域

background-clip:border-box | padding-box | content-box | no-clip

• background-origin

• background 可用来设置多重背景图片
  body{
  background: url(images/sf.jpg) left top no-repeat,
  url(images/p3.jpg) left top no-repeat;
  }

圆角边框

  input{
      border-radius: 10px 10px 10px 5px;
  }

注：border-radius属性不允许使用负值

Media Queries 移动设备样式

• viewport

viewport 虚拟窗口是在meta元素中定义的，主要作用是设置web页面适应移动设备的屏幕大小

  <meta name="viewport" 
      content="width=device-width,initial-scale=1.0,maximum-sacle=1.0,user-scalable=0" />

• Media Queries

当手机最大屏幕可视区是480px时，导入另外的css样式文件，并使用，语法如下：

 <link rel="stylesheet" media="screen and(max-device-width:480px)" href="small.css">

需要导入small.css样式文件，格式如下：

@media screen and (max-device-width: 480px){
    .demo{
        background: #CCC;
    }
}

small.css中大部分CSS和普通的css文件代码一样，唯一的区别是多了个@media元素括住整块css代码