查字典图书网
查字典图书网
CSS3 CSS2.1发布至今已经有7年的历史，在这7年里，互联网的发展已经发生了翻天覆地的变化。CSS2.1有时候难以满足快速提高性能、提升用户体验的Web应用的需求。CSS3标准的出现就是增强CSS2.1的功能，减少图片的使用次数以及解决HTML页面上的特殊效果。 在HTML5逐渐成为IT界... 查看全部[ 6.1 CSS3 ]
选择器 选择器是CSS3中一个重要的部分，通过使用CSS3的选择器，可以提高开发人员的工作效率。在本节中，我们将为读者介绍属性选择器和伪类选择器的基本用法。... 查看全部[ 6.2 选择器 ]
属性选择器 在CSS3中，我们可以使用HTML元素的属性名称选择性地定义CSS样式。其实，属性选择器早在CSS2中就被引入了，其主要作用就是为带有指定属性的HTML 元素设置样式。例如，通过指定div元素的id属性，设定相关样式。 属性选择器一共分为4种匹配模式选择器： 完全匹配属性选择器... 查看全部[ 6.2.1 属性选择器 ]
伪类选择器 在CSS3选择器中，伪类选择器种类非常多。然后在CSS2.1时代，伪类选择器就已经存在，例如超链接的四个状态选择器：a:link、a:visited、a:hover、a:active。 CSS3增加了非常多的选择器，其中包括: first-line伪元素选择器 first... 查看全部[ 6.2.2 伪类选择器 ]
阴影 现在，CSS3样式已经支持阴影样式效果。目前可以使用的阴影样式一共分成两种：一种是文本内容的阴影效果，另一种是元素阴影效果。下面我们就来为读者介绍这两种阴影样式。... 查看全部[ 6.3 阴影 ]
box-shadow CSS3的box-shadow属性是让元素具有阴影效果，其语法是： box-shadow:<length> <length> <length> || color; 其中，第一个length值是阴影水平偏移值；第二个length值是阴影垂... 查看全部[ 6.3.1 box-shadow ]
text-shadow text-shadow属性用于设置文本内容的阴影效果或模糊效果。 目前，text-shadow属性已经得到Safari浏览器、Firefox浏览器、Chrome浏览器和Opera浏览器的支持。IE8版本以下的IE浏览器都不支持该特性。从Web浏览器支持的情况来看，大部分移... 查看全部[ 6.3.2 text-shadow ]
背景 在过去，我们经常使用CSS的背景属性对页面进行美化修饰，可惜的是，背景属性功能单一，往往无法满足页面修饰的需求。 在CSS3规范中，CSS3对背景属性增加了很多新特性。它既能支持背景的显示范围，也支持多图片背景。最重要的是它可以通过属性设置，为背景的颜色设置渐变或任何颜色效果，功能非常丰富... 查看全部[ 6.4 背景 ]
background-size background-size属性用于设置背景图像的大小。 目前，background-size属性已经得到Chrome浏览器、Safari浏览器、Opera浏览器的支持，同时该属性也支持Android和iOS平台的Web浏览器。 background-size... 查看全部[ 6.4.1 background-size ]
background-clip background-clip属性用于确定背景的裁剪区域。 虽然background-clip属性支持除IE以外的大部分Web浏览器，但在实际项目应用中应用范围不广。其语法是： background-clip:border-box | padding-box |... 查看全部[ 6.4.2 background-clip ]
background-origin background-origin属性是指定background-position属性的参考坐标的起始位置。 background-origin属性有三种值可以选择，border值指定从边框的左上角坐标开始；content值指定从内容区域的左上角坐标开始；pa... 查看全部[ 6.4.3 background-origin ]
background background属性在CSS3中被赋予非常强大的功能。其中一个非常重要的功能就是多重背景。在过去设置图片背景时，只能使用一张图片，而在CSS3中，则可以设置多重背景图片，例如代码： background:url(background1.png) left top no-... 查看全部[ 6.4.4 background ]
圆角边框 以前，我们在Web开发过程中，经常需要实现一些圆角的功能，一般的解决方案是使用图像文件实现边框圆角的效果。 现在，CSS3已经能够轻松地实现圆角效果，代码中只要定义border-radius属性，就可以随意实现圆角效果。 到目前为止，border-radius属性已经得到Chro... 查看全部[ 6.5 圆角边框 ]
Media Queries移动设备样式 本节我们将为你带来一种全新的样式技术。通过Media Queries样式模块，可以实现根据移动设备的屏幕大小，定制网站页面的不同布局效果。它的优点是开发者只需要实现一套页面，就能够在所有平台的浏览器下访问网站的不同效果。... 查看全部[ 6.6 Media Queries移动设备样式 ]
传统网站在iPhone上的显示问题
在开始介绍Media Queries知识之前，先来看看一个传统的网站在各种移动设备上的页面显示效果。
首先，图6-1所示的是Google首页传统网站在iPhone Safari浏览器下的效果图。
查看全部[ 6.6.1 传统网站在iPhone上的显示问题 ]
viewport设置适应移动设备屏幕大小 1．什么是viewport Apple为了解决移动版Safari的屏幕分辨率大小问题，专门定义了viewport虚拟窗口。它的主要作用是允许开发者创建一个虚拟的窗口（viewport），并自定义其窗口的大小或缩放功能。 如果开发者没有定义这个虚拟窗口，... 查看全部[ 6.6.2 viewport设置适应移动设备屏幕大小 ]
Media Queries如何工作
前面提到，Media Queries样式模块在传统网页布局向移动版本网页布局转换中起着最重要的作用。为什么Media Queries能够作为在移动Web设备中进行页面布局的解决方案呢？首先来看一下如图6-3所示的效果。
查看全部[ 6.6.3 Media Queries如何工作 ]