请写出对以下三组CSS选择符的理解:#test, .test, .test.subTest.

html-css015

请写出对以下三组CSS选择符的理解:#test, .test, .test.subTest.,第1张

#test代表对ID='test'的标记的样式应用,如<div id='test'></div>

.test代表对class='test'的标记的样式应用,如<div class='test'></div>

.test.subTest代表class='test'的标记下有class='subTest'的所有子标记或者孙标记中的样式应用,如

<div id='test'>

<ul class='subTest'>

<li class="subTest">

<b class="subTest"></b>

</li>

</ul>

</div>

响应式Web设计的方法

介绍完响应式Web的背景和概念之后,是时候该介绍具体的实现方法了,其实响应式Web设计的方法很简单,就是利用CSS3的媒体查询Media Queries和Viewport来解决问题的。

首先我们一起来看看Media Queries,这里我只会对其做一个简单的列举介绍。

通过媒体查询的设置,我们可以根据屏幕宽度、屏幕方向等各个属性来加载不同场景下不同的CSS文件来渲染页面的视觉风格。具体的使用方法有以下两种:

1、通过link标签:

<link rel="stylesheet" type="text/css" media="screen and (max-width: 479px)" href="testcssbywidth1.css" />

示例代码代表当当前屏幕宽度小于479px的时候,加载testcssbywidth1.css文件来渲染页面。

2、CSS中直接设置:

@media screen and (max-width:479px) {

/* 具体的CSS属性设置 */

}

对于Media Queries的一些常用属性,只对常用的几个做一个简单列举说明,其他的属性请各位自行查阅相关资料:

width:描述终端设备显示区域的宽度,接受max/min的前缀;

height:描述终端设备显示区域的高度,接受max/min的前缀;

device-width:描述终端设备屏幕的宽度,接受max/min的前缀;

device-height:描述终端设备屏幕的高度,接受max/min的前缀;

orientation:描述终端设备处于横屏还是竖屏的状态,取值分别为:landscape/portrait。

当我们调整浏览器大小的时候,上面通过媒体查询属性的操作就可以完成响应式Web设计的工作,但是这却不能满足移动终端的浏览器,因为移动浏览器默认页面是为宽屏幕设计的,所以会把他缩小来适应小屏幕,但是终端设备却无法识别正确的宽度,所以光靠媒体查询是解决不了移动终端设备的响应式Web设计的

<style>

//这里放texst.css里面的CSS,如下:

.top{

height:100px

width:100px

background:#ccc

}

</style>

<body>

.....

</body>