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代码
