一.Css中组合选择器
1.1 id选择器
通过id选择器设置样式时一般用#app定为对应的id属性对应的标签，直接上代码
#app {
color:red;
}
1.2 class选择器
通过class选择器设置样式时一般用.app定为对应的id属性对应的标签，直接上代码
.app {
color:red;
}
1.3 css组合选择器之后代选择器
后代选择器指定元素的后代元素，后代选取器(以空格分隔 " ")，代码如下
div p {
color:red;
}
1.4 css组合选择器之子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素，只能时儿子节点元素，不能时孙子节点等
子元素选择器(以大于号分隔">")
div>p
{
background-color:yellow;
}
1.5 css组合选择器之相邻兄弟选择器
相邻兄弟选择器（以加号分隔"+"）
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
以下实例选取了所有位于\ <div> 元素后的第一个 <p> 元素:
div+p
{
background-color:yellow;
}
1.6 css组合选择器之普通相邻兄弟选择器
普通兄弟选择器选取所有指定元素之后的相邻兄弟元素。（在指定元素后面）
以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素\ <p> :
普通兄弟选择器（以波浪号分隔 “~”）
div~p
{
background-color:yellow;
}
1.7 css属性选择器
CSS 属性选择器
顾名思义，CSS 属性选择器就是指可以根据元素的属性以及属性值来选择元素
[title]
{
color:blue; }
属性和值选择器
[title=w3cschool]
{
border:5px solid green; }
属性和值的选择器 - 多值
[title~=hello] {
color:blue; }
表单样式
属性选择器样式无需使用 class 或 id 的形式:
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow; }
input[type="button"]
{
width:120px;
margin-left:35px;
display:block; }
二.Css响应式web设计
2.1 Css响应式设计-viewport
什么是 Viewport?
viewport 是用户网页的可视区域。
viewport 翻译为中文可以叫做"视区"。
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
设置 Viewport
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：
width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放
直接上代码
<html><head>
<meta http-equiv="content-type" content="text/html; charset=gbk">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
max-width:100%;
height:auto;
}
</style>
<script charset="utf-8" async="true" src="i8.js"></script></head>
<body>
<img src="img_chania.jpg" alt="Chania" height="345" width="460">
<p>
测试段落
</p>
</body>
</html>
2.2 响应式web媒体media查询
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>响应式网格设计</title>
<link rel="stylesheet" href="myCss.css">
<style>
* {
margin:0;
padding:0;
box-sizing: border-box;
}
html {
font-family: 'Lucida Sans', sans-serif;
}
.header {
border: 1px solid read;
padding: 15px;
background-color: #9933cc;
color: #ffffff;
}
.menu ul {
list-style-type: none;
margin:0;
padding:0;
}
.menu li {
padding:8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
}
.menu li:hover {
background-color: #0099cc;
}
.raw:after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.aside {
background-color: #33b5e5;
padding:15px;
color:#ffffff;
text-align: center;
font-size:14px;
box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
}
.footer {
background-color: #0099cc;
color:#ffffff;
text-align: center;
font-size:14px;
padding:15px;
}
}
.col-1 {
width: 8.33%;}
.col-2 {
width: 16.66%;}
.col-3 {
width: 25%;}
.col-4 {
width: 33.33%;}
.col-5 {
width: 41.66%;}
.col-6 {
width: 50%;}
.col-7 {
width: 58.33%;}
.col-8 {
width: 66.66%;}
.col-9 {
width: 75%;}
.col-10 {
width: 83.33%;}
.col-11 {
width: 91.66%;}
.col-12 {
width: 100%;}
@media only screen and(max-width:768px){
/* For mobile phones */
[class*="col-"] {
width:100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="row"></div>
<div class="col-3 menu">
<ul>
<li>The Fight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-6">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
<div class="col-3 right">
<div class="aside">
<h2>What?</h2>
<p>Chania is a city on the island of Crete.</p>
<h2>Where?</h2>
<p>Crete is a Greek island in the Mediterranean Sea.</p>
<h2>How?</h2>
<p>You can reach Chania airport from all over Europe.</p>
</div>
</div>
<div class="footer">
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</body>
</html>
2.3 响应式web-网格设计
响应式网格视图通常是12列，宽度为100%
100 /12 = 8.33333…3
例如设计如下网格页面
myCss.css
* {
margin:0;
padding:0;
box-sizing: border-box;
}
html {
font-family: 'Lucida Sans', sans-serif;
}
.header {
border: 1px solid read;
padding: 15px;
background-color: #9933cc;
color: #ffffff;
}
.menu ul {
list-style-type: none;
margin:0;
padding:0;
}
.menu li {
padding:8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
}
.menu li:hover {
background-color: #0099cc;
}
.raw:after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;}
.col-1 {
width: 8.33%;}
.col-2 {
width: 16.66%;}
.col-3 {
width: 25%;}
.col-4 {
width: 33.33%;}
.col-5 {
width: 41.66%;}
.col-6 {
width: 50%;}
.col-7 {
width: 58.33%;}
.col-8 {
width: 66.66%;}
.col-9 {
width: 75%;}
.col-10 {
width: 83.33%;}
.col-11 {
width: 91.66%;}
.col-12 {
width: 100%;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>响应式网格设计</title>
<link rel="stylesheet" href="myCss.css">
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="row"></div>
<div class="col-3 menu">
<ul>
<li>The Fight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-9">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</body>
</html>