【读书笔记】HTML5移动Web开发指南 --- 移动Web界面样式

第6章 移动Web界面样式

---

CSS3

CSS3技术适合在移动Web开发中使用的特性有：

• 增强的选择器
• 阴影
• 强大的背景设置工具
• 圆角边框

---

选择器

属性选择器

CSS3中，可以使用HTML元素的属性名定义CSS样式。
属性选择器一共分为4种匹配模式选择器：

• 完全匹配属性选择器
• 包含匹配选择器
• 首字符匹配选择器
• 卫子夫匹配选择器

1.完全匹配属性选择器

比如通过指定id值将属性设定为红色字体：

<div id="test">测试div>
<style>
    [id=test]{
        color:red;
    }
style>

2.包含匹配选择器

只要元素中的属性包含指定的字符创，元素就是使用该样式。
【语法】
[attribute*=value];
attribute指的是属性名，value指的是属性值，包含匹配采用”*=”符号;
例如：

        <style>
            [id*=test]{
                color:red;
            }
        style>
        <div id="test">
            测试1
        div>
        <div id="test2">
            测试2
        div>
        <div id="test3">
            测试3
        div>

3.首字符匹配选择器

首字符匹配就是匹配属性值开头字符，只要开头字符符合匹配，则元素使用该样式
【语法】
[attribute^=value];

4.尾字符匹配选择器

【语法】
[attribute$=value];

---

伪类选择器

超链接4个状态选择器：a:link、a:visited、a:hover、a:active。
CSS3增加的选择器：

• first-line 伪元素选择器
• first-letter 伪元素选择器
• root 选择器
• not 选择器
• empty 选择器
• target 选择器

1. before

before 伪类选择器主要作用是：在选择某个元素之前插入内容，一般用于清除浮动。
支持的浏览器：IE8+、Firfox、chrome、safari、opera、Android browser 和 iOS Safari。
【语法】

元素标签:before{
    content:"插入的内容";
}

例如，在p元素之前插入”文字“:

p:before{
    content:"文字";
}

2. after

after 伪类元素选择器和 before伪类元素选择器原理一样。
【语法】

元素标签:after{
    content:"插入的内容";
}

3. first-child

指定元素列表中第一个元素的样式。
【语法】

li:first-child{
    color:red;
}

4. 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(2){

}

//指定偶数个li元素
li:nth-child(even){

}

//指定奇数个li元素
li:nth-child(odd){

}

---

阴影

阴影样式有两种：一种是文本内容的阴影效果，另一种元素阴影效果。

box-shadow

CSS3的box-shadow属性是让元素具有阴影效果，【语法】：

box-shadow:<length> <length> <length> || color;

第一个 length 为【阴影水平偏移值】;
第二个 length 为【阴影垂直偏移值】;
第三个 length 为 【阴影模糊值】;

基于 Webkit 的 Chrome 和 Safari 等浏览器使用 box-shadow属性，需要将属性的名称写成
-webkit-box-shadow 的形式。

Firefox 需要写成 -moz-box-shadow 的形式。

比如：
以下代码兼容 Chrome浏览器、Safari浏览器及Firefox浏览器

<style>
    div{    
        /* 其他浏览器 */
        box-shadow:3px 4px 2px #000;
        /* webkit浏览器 */
        -webkit-box-shadow:3px 4px 2px #000;
        /* Firefox浏览器 */
        -moz-box-shadow:3px 4px 2px #000;
    }
style>

text-shadow

text-shadow 属性用于设置文本内容的阴影效果或者模糊效果。

【语法】

text-shadow: <length> <length> <length> || color;

---

背景

background-size

background-size 属性用于设置背景图像的大小。
支持chrome浏览器，Safari浏览器、Opera浏览器，也支持Android和iOS平台的WEB浏览器。

webkit的 chrome和Safari浏览器下，写法为：
-webkit-background-size
Opera浏览器下不需要前缀，只需写成：
background-size

实际开发中，建议采用兼容模式的写法：

background-size:10px 5px;
-webkit-background-size:10px 5px;

background-clip

background-clip 属性用于确定背景的剪裁区域。
支持除IE外大部分浏览器，实际应用不多。

【语法】

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

border-box 是从 border 区域向外剪裁背景；
padding-box 是从 padding 区域向外裁剪背景；
content-box 是从内容区域外裁剪背景；
no-clip 是从 border 区域向外裁剪背景。

background-origin

background-origin 属性是指定 background-position 属性的参考坐标的起始位置。
background-origin 属性有三种值可以选择，
border 值指定从边框左上角开始；
content 值指定从内容区域的左上角坐标开始；
padding 值指定从padding 区域开始；

background

CSS3中，可以设置多重背景，例如：

background: url(background1.png) left top no-repeat,
            url(background2.png) left top no-repeat;

Webkit 的其中一种特性对背景采用颜色渐变，而非采用图片的方式。

【语法】

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

type 类型指的是 采用渐变类型，如线性渐变 linear 或径向渐变 radial。
比如：

background:-webkit-gradient(linear,0 0,0 100%,from(#fff),to(#000));

//以上代码表示，定义一个渐变背景色，线性渐变从白色到黑色渐变。
// 前面两个 0 表示是渐变开始的 X 和 Y坐标位置; 0 和 100% 表示是渐变结束的X 和Y 坐标的位置

---

圆角边框

border-radius:10px 5px;
-moz-border-radius:10px 5px;
-webkit-border-radius:10px 5px;

---

Media Queries 移动设备样式

viewport 设置适应移动设备屏幕大小

1. 什么是 viewport ？

Apple 为了解决移动版 Safari 的屏幕分辨率大小问题，专门定义了viewport 虚拟窗口。
主要作用是：允许创建一个虚拟的窗口，并自定义其窗口的大小或缩放功能。
如果没定义，默认大小为980像素。

不同浏览器 viewport 窗口默认大小：

• Android Browser 浏览器的默认值为 800像素
• IE默认值为 974像素
• opera 浏览器默认值为850像素

2. 如何使用 viewport

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

代码：

"viewport" content="width=device-width,initial-scale=1,user-scalable=0" />

// 自定义虚拟窗口，并指定虚拟窗口 width宽度为 device-width
// 初始缩放比例为 1倍
// 不允许手动缩放

content 属性定义三种参数。实际 6种参数：

• width 指定虚拟窗口的屏幕宽度大小
• height 指定虚拟窗口的屏幕高度大小
• initial-scale 指定初始缩放比例
• maximum-scale 指定允许用户缩放的最大比例
• minimum-scale 指定允许用户缩放最小比例
• user-scalable 指定是否允许手动缩放