myCss

CSS 简介

CSS 指层叠样式表(Cascading Style Sheets)，插入样式表的方法有以下3种。

如何插入样式表

外部样式表 - 使用外部 .css 文件。
内部样式表 - 在HTML文档头部 <head> 区域使用 <style> 元素来包含CSS。
内联样式 - 在HTML元素中使用"style"属性。

样式选择器种类


xxxxxxxxxx
25
1
<head>
2
    <style type="text/css">
3
        // id选择器
4
        #myId {color:red}
5
        // Class选择器
6
        .myClass {color:blue}
7
        // 元素选择器
8
        p {color:yellow}
9
        //------ 属性选择器 ------
10
        // 属性选择器
11
        [title] {color:red}
12
        // 属性和值选择器
13
        [title=w3cschool] {border:1px solid green}
14
        // 属性和值选择器 - 多值 : 一个单词包含
15
        [title~=hello] {color:blue}
16
        <h1 title="hello world">hello</h1>
17
        // 属性和值选择器 - 多值 : 用'-'分隔的第一个单词包含
18
        [title|=us]
19
        <p lang="us-xx-yy">Hi!</p>
20
        //------ 表单样式 ------
21
        // 属性选择器无需使用 class 和 id 的形式
22
        input[type="text"] {background-color:blue}
23
    </style>
24
</head>
25

多个选择器可以组合使用。


xxxxxxxxxx
4
1
// "和"关系 用 ','分隔
2
#myId,.myClass,p {color:red}
3
// "包含关系" 用 ' '分隔(有时.class前的空格会删掉)
4
#myId .myClass p

多重样式优先级

多重样式优先级顺序

下面是一份优先级逐级增加的选择器列表，其中数字 7 拥有最高的优先权：

通用选择器(*)
元素(类型)选择器
类选择器
属性选择器
伪类
ID 选择器
内联样式 style

!important 规则除外

与优先级无关，会覆盖CSS中任何其他的声明， 不建议使用 。

权重计算

内联样式权值 - 1000
ID 选择器权值 - 100
Class 类(伪类，属性)选择权值 - 10
HTML 标签(元素，伪元素)选择器 - 1

注意：权值计算不能进位，比如11个class类，不能算成11*10=110，该值最大不能超过100，所以可以当做99.99来看，不能进位。

下面的例子，利用选择器的权值计算，em 显示蓝色：


xxxxxxxxxx
26
1
<html>
2
<head>
3
<style type="text/css">
4
#redP p {    
5
/* 权值 = 100+1=101 */
6
color:#F00;  /* 红色 */    
7
}    
8
#redP .red em {    
9
/* 权值 = 100+10+1=111 */    
10
color:#00F; /* 蓝色 */    
11
}    
12
#redP p span em {    
13
/* 权值 = 100+1+1+1=103 */    
14
color:#FF0;/*黄色*/    
15
}    
16
</style>    
17
</head>    
18
<body>    
19
<div id="redP">   
20
  <p class="red">red
21
    <span><em>em red</em></span>    
22
  </p>    
23
  <p>red</p>    
24
</div>    
25
</body>   
26
</html>

CSS 优先级法则

选择器都有一个权值，权值越大越优先；
权值相等时，后出现的样式表设置要 优于先出现的样式表设置；
继承的 CSS 样式，不如后来指定的 CSS 样式；

CSS Backgrounds(背景)

背景颜色


xxxxxxxxxx
1
1
body {background-color:red}

背景图像


xxxxxxxxxx
1
1
body {background-image:url('paper.gif')}

背景图像 - 水平或垂直平铺


xxxxxxxxxx
12
1
body 
2
{
3
    background-image:url('paper.gif');
4
    background-repeat:repeat;
5
    /* 该属性有5个值 
6
    repeat: 水平和垂直方向重复，默认值；
7
    repeat-x: 只在水平方向重复；
8
    repeat-y: 只在垂直方向重复；
9
    no-repeat: 不重复；
10
    inherit: 该属性继承自父元素；
11
    */
12
}

背景图像 - 固定或滚动


xxxxxxxxxx
12
1
body
2
{
3
    background-image:url('paper.gif');
4
    background-attachment:scroll;
5
    /* 该属性有4个值
6
    scroll: 相对 元素 固定，在子滚动窗口中 不会 随滚动条滚动，默认值；
7
    local: 相对 元素内容 固定，在子滚动窗口中 会 随滚动条滚动；
8
    fixed: 相对 浏览器窗口 固定；
9
    inherit: 该属性继承自父元素；
10
    实例见 myCss-bgattach.html 。
11
    */
12
}

myCss-bgattach.html 。

背景图像 - 位置


xxxxxxxxxx
12
1
body
2
{
3
    background-image:url('paper.gif');
4
    background-position: top right;
5
    /* 该属性有三种写法
6
    写法1： top、bottom、left、right、center，另一个关键字默认为center
7
    写法2：数字。图片左上角相对于元素左上角的x，y轴偏移量。
8
    50px 100px: 即往右偏移50px，往下偏移100px；
9
    写法3：百分比。类似写法2。
10
    66% 33%： 即往右偏移66%，往下偏移33%；
11
    */
12
}

合并写法


xxxxxxxxxx
1
1
body {background:#ffffff url('paper.gif') no-repeat right top;}

CSS Text(文本)

文本对齐


xxxxxxxxxx
1
1
p.main {text-align:justify;}      //每一行被展开为宽度相等，左、右外边距对齐

文本修饰


xxxxxxxxxx
5
1
a {text-decoration:none;}     //删除下划线
2
h1 {text-decoration:overline}     //文本上一条线
3
h2 {text-decoration:underline}      //文本下一条线
4
h3 {text-decoration:line-through}   //穿过文本下的一条线
5
p.detail {text-decoration:blink}    //闪烁的文本

文本转换


xxxxxxxxxx
3
1
p.uppercase {text-transform:uppercase;}   //整句大写
2
p.lowercase {text-transform:lowercase;}   //整句小写
3
p.capitalize {text-transform:capitalize;} //每个单词首字母大写

文本缩进


xxxxxxxxxx
1
1
p {text-indent:50px}

文本间隔


xxxxxxxxxx
1
1
p {word-spacing:30px}

CSS Fonts(字体)

CSS 颜色(color)

CSS的颜色有三种表示方法，分别是：

单词：red，blue，green之类；
十六进制：按 红，绿，蓝 每种比例组合，数值大小表示对应颜色浓度；
RGB：按 红，绿，蓝 每种比例组合，数值大小表示对应颜色浓度；


xxxxxxxxxx
22
1
p 
2
{
3
    /* 单词 */
4
    background-color: red;
5
    /* 十六进制，可以缩写，00~FF */
6
    background-color: #FF0000;      //红色
7
    background-color: #00FF00;      //绿色
8
    background-color: #0000FF;      //蓝色
9
    background-color: #000000;      //黑色
10
    background-color: #FFFFFF;      //白色
11
    background-color: #F00;     //红色
12
    background-color: #0F0;     //绿色
13
    background-color: #00F;     //蓝色
14
    background-color: #000;     //黑色
15
    background-color: #FFF;     //白色    
16
    /* RGB，0~255 */
17
    background-color: rgb(255,0,0)    //红色
18
    background-color: rgb(0,255,0)    //绿色
19
    background-color: rgb(0,0,255)    //蓝色
20
    background-color: rgb(0,0,0)    //黑色
21
    background-color: rgb(255,255,255)    //白色
22
}

CSS link(链接)


xxxxxxxxxx
8
1
a:link {color:#FF0000;}   //未访问链接
2
a:visited {color:#00FF00} //已访问链接
3
a:hover {color:#FF00FF}   //鼠标移到链接上
4
a:active {color:#0000FF}  //鼠标单击链接
5
/* 
6
  hover必须跟在link和visited后面
7
  active必须跟在hover后面
8
*/

CSS ul(列表样式)

不同的列表项标记


xxxxxxxxxx
15
1
ul.a {list-style-type:none;}
2
/* 该属性有4个值
3
  none: 不使用项目符号；
4
  disc: 实心圆；
5
  circle: 空心圆；
6
  square: 实心方块；
7
*/
8
ol.a {list-style-type:demical;}
9
/* 该属性有5个值
10
  decimal: 阿拉伯数字；
11
  lower-alpha: 小写英文字母；
12
  upper-alpha: 大写英文字母；
13
  lower-roman: 小写罗马数字；
14
  upper-roman: 大写罗马数字；
15
*/

列表项标记的图像


xxxxxxxxxx
1
1
ul {list-style-image:url('square.gif');}

浏览器兼容性解决方案


xxxxxxxxxx
12
1
/* 用图像表示li */
2
ul {
3
    list-style-type:none;
4
    padding:0px;
5
    margin:0px;
6
}
7
ul li{
8
    background-image: url('square.gif');
9
    background-repeat: no-repeat;
10
    background-position: 0px 5px;
11
    padding-left: 14px;
12
}

列表 - 缩写属性


xxxxxxxxxx
11
1
ul {
2
    list-style: square url('square.gif');
3
}
4
/* 用单个属性指定所有的列表属性，用list-style
5
顺序是：
6
  list-style-type；
7
  list-style-position；
8
  list-style-image；
9
10
  另：url('square.gif') 会覆盖square的样式
11
*/

CSS Table(列表)

表格 - 折叠边框


xxxxxxxxxx
13
1
tbale
2
{
3
    border-collapse:collapse;
4
}
5
table, th, td
6
{
7
    border: 1px solid block
8
}
9
/* border-collapse属性有3个值
10
  separate: 边框会被分开，默认值；
11
  collapse: 边框不会被分开；
12
  inherit: 该属性继承自父元素；
13
*/

表格 - 文字对齐


xxxxxxxxxx
11
1
/* 水平对齐 */
2
td 
3
{
4
    text-align:left;    //center;right
5
} 
6
/* 垂直对其 */
7
td 
8
{
9
    height: 50px;
10
    vertical-align: bottom; //top,middle,bottom
11
}

CSS 盒子模型

Margin + Border + Padding + Content
border-style值：
- none：默认无边框
- dotted：一个点线框
- dashed：一个虚线框
- solid：实线边界
- double：2个边界，2个边界的宽度和border-width的值同宽

CSS 轮廓(outline)属性

Border外侧的一条线

CSS Margin和Padding

CSS 尺寸

CSS Display(显示)和Visibility(可见性)

2个属性都可以隐藏某个元素，不同的是：
- display：none，隐藏后不占空间。
- visibility：hidden，隐藏后仍占原来的空间。

利用display的属性，可以改变元素的显示，即 内联元素 <==> 块元素


xxxxxxxxxx
4
1
/* 块元素==>内联元素，不换行了 */
2
li {display:inline}
3
/* 内联元素==>块元素，换行了 */
4
span {display:block}

visibility 的hidden 和collapse
- 在其他场景下，都是一样的，即隐藏 同时占据原来的空间
- 在表格Table中，collapse 删除行列后不占空间，hidden会占空间

CSS Positioning(定位)

Static 定位

默认值，没有定位，出现在正常的流中，不会受到top，bottom，left，right影响。

Fixed 定位


xxxxxxxxxx
9
1
/* 相对浏览器窗口是固定位置
2
   可以与其他元素重叠，不占空间
3
*/
4
p.pos_fixed
5
{
6
    position:fixed;
7
    top:30px;
8
    right:5px;
9
}

Relative 定位


xxxxxxxxxx
8
1
/* 相对正常位置的定位
2
   可以与其他元素重叠，原本所占的空间不会改变
3
*/
4
h2.pos_left
5
{
6
    position:relative;
7
    left:-20px;
8
}

Absolute 定位


xxxxxxxxxx
3
1
/* 相对最近的已定位的父元素的定位
2
   可以与其他元素重叠，不占空间
3
*/

重叠的元素

z-index：指定了元素的堆叠顺序，大的放前面，小的放后面。
如果2个元素重叠且都没有z-index，最后定位 在HTML代码中的元素将显示在 最前面 。


xxxxxxxxxx
7
1
img
2
{
3
    position:absolute;
4
    left:0px;
5
    top:0px;
6
    z-index:-1;
7
}

CSS Float(浮动)

浮动元素会生成一个 块级框，会使元素向左或向右移动，周围的元素也会重新排列。

清除浮动 - 使用 clear


xxxxxxxxxx
11
1
.text_line
2
{
3
    clear:both;
4
}
5
/* 该元素属性有5个值：
6
  left: 左侧不允许浮动元素；
7
  right: 右侧允许浮动元素；
8
  both: 左右两侧不允许浮动元素；
9
  none: 默认值，左右两侧允许浮动值；
10
  inherit: 该属性继承自父元素；
11
*/

CSS 对齐

中心对齐，使用margin属性


xxxxxxxxxx
8
1
.center
2
{
3
    margin-left:auto;
4
    margin-right:auto;
5
    width:70%;
6
    background-color:#b0e0e6;
7
}
8
/* 宽度设置成100%是没有效的 */

使用position属性设置左，右对齐


xxxxxxxxxx
7
1
.right
2
{
3
    position:absolute;
4
    right:0px;
5
    width:300px;
6
    background-color:#b0e0e6;
7
}

使用float属性设置左，右对齐


xxxxxxxxxx
6
1
.right
2
{
3
    float:right;
4
    width:300px;
5
    background-color:#b0e0e6;
6
}

使用Padding设置垂直居中对齐


xxxxxxxxxx
7
1
/* 头部使用Padding，上下间距设置成一样高 */
2
.center 
3
{
4
    padding: 70px 0;
5
    border: 1px solid green;
6
    text-align: center;
7
}

CSS 组合选择符

CSS3 中包含了四种组合方式：
- 后代选取器(以空格分隔)
- 子元素选择器(以大于号分隔)
- 相邻兄弟选择器(以加号分隔)
- 普通兄弟选择器(以波浪号分隔)

后代选取器

匹配所有指定元素的后代元素


xxxxxxxxxx
4
1
div p 
2
{
3
    background-color: yellow;
4
}

子元素选择器

只能选择某元素子元素的元素(只能1层关系的子元素)


xxxxxxxxxx
4
1
div>p
2
{
3
    background-color: yellow;
4
}

相邻兄弟选择器

选择紧连在另一元素后的一个元素，且 二者具有相同的父元素 。


xxxxxxxxxx
4
1
div+p
2
{
3
    background-color: yellow;
4
}

普通兄弟选择器

选择所有指定元素的相邻兄弟元素，不需要 具有相同的父元素。


xxxxxxxxxx
4
1
div~p
2
{
3
    background-color: yellow;
4
}

CSS 伪类和伪元素

伪类 - 简介

CSS 伪类是用来添加一些选择器的特殊效果。
由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；但它状态改变时，又会失去这个样式。

伪类 - 语法


xxxxxxxxxx
4
1
/* 伪类的语法 */
2
selector:pseudo-class {property:value;}
3
/* CSS类也可以使用伪类*/
4
selector.class:pseudo-class {property:value}

伪类 - 常用


xxxxxxxxxx
4
1
a:link {color:#FF0000;} /* 未访问的链接 */ 
2
a:visited {color:#00FF00;} /* 已访问的链接 */ 
3
a:hover {color:#FF00FF;} /* 鼠标划过链接 */ 
4
a:active {color:#0000FF;} /* 已选中的链接 */


xxxxxxxxxx
3
1
<!-- 伪类可以与 CSS 类配合使用 -->
2
a.red:visited {color:#FF0000;}       
3
<a class="red" href="css-syntax.html">CSS Syntax</a>


xxxxxxxxxx
8
1
/* 匹配任何元素的第一个子元素的 <p> 元素 */
2
p:first-child {color:blue;}
3
/* 选择元素输入后具有焦点 */
4
input:focus {background-color:yellow;}
5
/* 在每个元素之前插入内容 */
6
p:before {content:"Read this: "}
7
/* 在每个元素之后插入内容 */
8
p:after {content:" Finished."}

CSS 导航栏

水平导航栏

<li> 元素和 <a> 元素组合，生成水平导航栏。
方式1：<li> 转换成 内联元素 ，缺点是 <a> 标签的长度不能设定。


xxxxxxxxxx
1
1
li {display:inline;}

方法2：<a> 元素转换成块元素，然后使用 float 水平排列，优点是 <a> 标签的长度可以设定。


xxxxxxxxxx
6
1
li {float:left;}
2
a 
3
{
4
    display:block;
5
    width:60px;
6
}

CSS 下拉菜单


xxxxxxxxxx
56
1
<style>
2
/* 下拉按钮样式 */
3
.dropbtn {
4
    background-color: #4CAF50;
5
    color: white;
6
    padding: 16px;
7
    font-size: 16px;
8
    border: none;
9
    cursor: pointer;
10
}
11
12
/* 容器 <div> - 需要定位下拉内容 */
13
.dropdown {
14
    position: relative;
15
    display: inline-block;
16
}
17
18
/* 下拉内容 (默认隐藏) */
19
.dropdown-content {
20
    display: none;
21
    position: absolute;
22
    background-color: #f9f9f9;
23
    min-width: 160px;
24
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
25
}
26
27
/* 下拉菜单的链接 */
28
.dropdown-content a {
29
    color: black;
30
    padding: 12px 16px;
31
    text-decoration: none;
32
    display: block;
33
}
34
35
/* 鼠标移上去后修改下拉菜单链接颜色 */
36
.dropdown-content a:hover {background-color: #f1f1f1}
37
38
/* 在鼠标移上去后显示下拉菜单 */
39
.dropdown:hover .dropdown-content {
40
    display: block;
41
}
42
43
/* 当下拉内容显示后修改下拉按钮的背景颜色 */
44
.dropdown:hover .dropbtn {
45
    background-color: #3e8e41;
46
}
47
</style>
48
49
<div class="dropdown">
50
  <button class="dropbtn">下拉菜单</button>
51
  <div class="dropdown-content">
52
    <a href="#">W3Cschool教程 1</a>
53
    <a href="#">W3Cschool教程 2</a>
54
    <a href="#">W3Cschool教程 3</a>
55
  </div>
56
</div>

CSS 图片廊

使用 float 和 hover 属性。


xxxxxxxxxx
60
1
<html>
2
<head>
3
<style>
4
div.img
5
  {
6
  margin:2px;
7
  border:1px solid #0000ff;
8
  height:auto;
9
  width:auto;
10
  float:left;
11
  text-align:center;
12
  }
13
div.img img
14
  {
15
  display:inline;
16
  margin:3px;
17
  border:1px solid #ffffff;
18
  }
19
div.img a:hover img
20
  {
21
  border:1px solid #0000ff;
22
  }
23
div.desc
24
  {
25
  text-align:center;
26
  font-weight:normal;
27
  width:120px;
28
  margin:2px;
29
  }
30
</style>
31
</head>
32
<body>
33
34
<div class="img">
35
  <a target="_blank" href="klematis_big.htm">
36
  <img src="klematis_small.jpg" alt="Klematis" width="110" height="90">
37
  </a>
38
  <div class="desc">Add a description of the image here</div>
39
</div>
40
<div class="img">
41
  <a target="_blank" href="klematis2_big.htm">
42
  <img src="klematis2_small.jpg" alt="Klematis" width="110" height="90">
43
  </a>
44
  <div class="desc">Add a description of the image here</div>
45
</div>
46
<div class="img">
47
  <a target="_blank" href="klematis3_big.htm">
48
  <img src="klematis3_small.jpg" alt="Klematis" width="110" height="90">
49
  </a>
50
  <div class="desc">Add a description of the image here</div>
51
</div>
52
<div class="img">
53
  <a target="_blank" href="klematis4_big.htm">
54
  <img src="klematis4_small.jpg" alt="Klematis" width="110" height="90">
55
  </a>
56
  <div class="desc">Add a description of the image here</div>
57
</div>
58
59
</body>
60
</html>

CSS 图片透明


xxxxxxxxxx
10
1
/* 使用opacity来显示透明度；
2
  范围0~1，数字越小越透明；
3
  IE8和早期版本使用滤镜：alpha(opacity=x)，x取值0-100，值越低元素越透明；
4
  利用：hover属性改变透明度，效果更好
5
*/
6
img 
7
{
8
    opacity:0.4;
9
    filter:alpha(opacity=40); /* For IE8 and earlier */
10
}

CSS 图片拼合技术

加载时加载一张大图片，单个图像的集合。使用时截图图像中的单个图片使用。


xxxxxxxxxx
12
1
img.home
2
{
3
    width:46px;
4
    height:44px;
5
    background:url('img_navsprites.gif') 0 0;
6
}
7
img.next
8
{
9
    width:43px;
10
    height:44px;
11
    background:url('img_navsprites.gif') -91px 0;
12
}

CSS 媒体类型

媒体类型允许你指定文件将如何在不同媒体呈现。
@media规则允许在相同样式表 为不同媒体 设置 不同的样式 。


xxxxxxxxxx
22
1
<html>
2
<head>
3
<style>
4
@media screen
5
{
6
  p.test {font-family:verdana,sans-serif;font-size:14px;}
7
}
8
@media print
9
{
10
  p.test {font-family:times,serif;font-size:10px;}
11
}
12
@media screen,print
13
{
14
  p.test {font-weight:bold;}
15
}
16
</style>
17
</head>
18
19
<body>
20
....
21
</body>
22
</html>

其他媒体类型。

媒体类型	描述
all	用于所有的媒体设备
aural	已废弃。用于语音和音频合成器
braille	已废弃。用于盲人用点字法触觉回馈设备
embossed	已废弃。用于分页的盲人用点字法打印机
handheld	已废弃。用于小的手持的设备
print	用于打印机和打印预览
projection	已废弃。用于投影设备方案展示，比如幻灯片
screen	用于电脑显示器，平板电脑，智能手机等。
tty	已废弃。用于使用固定密度字母栅格的媒体，比如电传打字机和终端
tv	已废弃。用于电视机类型的设备

CSS 响应式设计

Viewport

viewport 是用户网页的可视区域，中文叫视区。
viewport 常用标签如下：
- width：浏览器宽度，控制 viewport 的大小。
- device-width：设备宽度。
- height：和 width 对应，浏览器高度。
- initial-scale：初始缩放比例，也是当页面第一次 load 的时候缩放比例。
- maximum-scale：允许用户缩放到的最大比例。
- minimum-scale：允许用户缩放到的最小比例。
- user-scalable：用户是否可以手动缩放。
- ```
xxxxxxxxxx
3
1
<head>
2
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
3
</head>
```

网格视图

简介

将一个页面分成12列，在浏览器窗口大小调整时会自动伸缩。

创建响应式网格视图

确保所有元素的 宽度和高度 包含边框


x
1
* {
2
    box-sizing: border-box;
3
}
4
/* 该属性有3个值
5
  content-box: 元素的宽高，只包含content，不包含padding，border，margin，outline等。
6
  border-box: 元素的宽高，包含content，padding，border，不包含margin，outline等。
7
  默认是content-box。某些需求下使用border-box，更符合使用习惯(不需要担心padding，border导致的元素变形等)
8
*/


xxxxxxxxxx
8
1
/* class名包含AA的 class */
2
[class*="AA"] {
3
    color: blue;
4
}
5
/* class名以AA开头的 class */
6
[class^="AA"] {
7
    color: red;
8
}

实例见 myCss-gridview.html 文件


xxxxxxxxxx
81
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Gridview</title>
6
    <style>
7
        * {
8
            box-sizing: border-box;
9
        }
10
        .row:after {
11
            content: "";
12
            clear: both;
13
            display: block;
14
        }
15
        [class*="col-"] {
16
            float: left;
17
            padding: 15px;
18
        }
19
20
        .col-1 {width:8.33%;}
21
        .col-2 {width:16.66%;}
22
        .col-3 {width:25%;}
23
        .col-4 {width:33.33%;}
24
        .col-5 {width:41.66%;}
25
        .col-6 {width:50%;}
26
        .col-7 {width:58.33%;}
27
        .col-8 {width:66.66%;}
28
        .col-9 {width:75%;}
29
        .col-10 {width:83.33%;}
30
        .col-11 {width:91.66%;}
31
        .col-12 {width:100%;}
32
33
        html {
34
            font-family: "Lucida Sans", sans-serif;
35
        }
36
        .header {
37
            background-color: #9933cc;
38
            color: #ffffff;
39
            padding: 15px;
40
        }
41
        .menu ul {
42
            list-style-type: none;
43
            margin: 0px;
44
            padding: 0px;
45
        }
46
        .menu li {
47
            padding: 8px;
48
            margin-bottom: 7px;
49
            background-color: #33b5e5;
50
            color: #ffffff;
51
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
52
        }
53
        .menu li:hover {
54
            background-color: #0099cc;
55
        }
56
57
    </style>
58
</head>
59
<body>
60
<div class="header">
61
    <h1>Chania</h1>
62
</div>
63
64
<div class="row">
65
    <div class="menu col-3">
66
        <ul>
67
            <li>The Flight</li>
68
            <li>The City</li>
69
            <li>The Island</li>
70
            <li>The Food</li>
71
        </ul>
72
    </div>
73
    <div class="col-9">
74
        <h1>The City</h1>
75
        <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the
76
            old town and the modern city.</p>
77
        <p>Resize the browser window to see how the content respond to the resizing.</p>
78
    </div>
79
</div>
80
</body>
81
</html>

媒体查询

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。


xxxxxxxxxx
4
1
/* 如果浏览器窗口小于 500px，背景将变成浅蓝色 */
2
@media only screen and (max-width: 500px) {
3
    background-color: lightblue;
4
}

添加断点

为 不同尺寸 的设备，设计 不同的样式 。


xxxxxxxxxx
21
1
/* 当屏幕(浏览器窗口)小于 768px，每一列的宽度是100% */
2
/* For desktop: */
3
.col-1 {width: 8.33%;}
4
.col-2 {width: 16.66%;}
5
.col-3 {width: 25%;}
6
.col-4 {width: 33.33%;}
7
.col-5 {width: 41.66%;}
8
.col-6 {width: 50%;}
9
.col-7 {width: 58.33%;}
10
.col-8 {width: 66.66%;}
11
.col-9 {width: 75%;}
12
.col-10 {width: 83.33%;}
13
.col-11 {width: 91.66%;}
14
.col-12 {width: 100%;}
15
16
@media only screen and (max-width: 768px) {
17
    /* For mobile phones: */
18
    [class*="col-"] {
19
        width: 100%;
20
    }
21
}

实例见 myCss-media.html 文件


xxxxxxxxxx
141
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>media</title>
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
    <style>
8
        * {
9
            box-sizing: border-box;
10
        }
11
        video {
12
            max-width: 100%;
13
            height: auto;
14
        }
15
        .row:after {
16
            content: "";
17
            clear: both;
18
            display: block;
19
        }
20
        [class*="col-"] {
21
            width: 100%;
22
            float: left;
23
            padding: 15px;
24
        }
25
26
        /* 大于600px，小于768px，平板电脑 */
27
        @media only screen and (min-width: 600px) {
28
            .col-s-1 {width: 8.33%;}
29
            .col-s-2 {width: 16.66%;}
30
            .col-s-3 {width: 25%;}
31
            .col-s-4 {width: 33.33%;}
32
            .col-s-5 {width: 41.66%;}
33
            .col-s-6 {width: 50%;}
34
            .col-s-7 {width: 58.33%;}
35
            .col-s-8 {width: 66.66%;}
36
            .col-s-9 {width: 75%;}
37
            .col-s-10 {width: 83.33%;}
38
            .col-s-11 {width: 91.66%;}
39
            .col-s-12 {width: 100%;}
40
            body {color: blue}
41
        }
42
43
        /* 大于768px，电脑屏幕 */
44
        @media only screen and (min-width: 768px) {
45
            .col-1 {width: 8.33%;}
46
            .col-2 {width: 16.66%;}
47
            .col-3 {width: 25%;}
48
            .col-4 {width: 33.33%;}
49
            .col-5 {width: 41.66%;}
50
            .col-6 {width: 50%;}
51
            .col-7 {width: 58.33%;}
52
            .col-8 {width: 66.66%;}
53
            .col-9 {width: 75%;}
54
            .col-10 {width: 83.33%;}
55
            .col-11 {width: 91.66%;}
56
            .col-12 {width: 100%;}
57
            body {color: red}
58
        }
59
60
        html {
61
            font-family: "Lucida Sans", sans-serif;
62
        }
63
        .header {
64
            background-color: #9933cc;
65
            color: #ffffff;
66
            padding: 15px;
67
        }
68
        .menu ul {
69
            list-style-type: none;
70
            margin: 0px;
71
            padding: 0px;
72
        }
73
        .menu li {
74
            padding: 8px;
75
            margin-bottom: 7px;
76
            background-color: #33b5e5;
77
            color: #ffffff;
78
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
79
        }
80
        .menu li:hover {
81
            background-color: #0099cc;
82
        }
83
        .aside {
84
            background-color: #33b5e5;
85
            padding: 15px;
86
            color: #ffffff;
87
            text-align: center;
88
            font-size: 14px;
89
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
90
        }
91
        .footer p {
92
            height: 70px;
93
            background-color: #0099cc;
94
            color: #ffffff;
95
            text-align: center;
96
            font-size: 12px;
97
            padding: 25px;
98
        }
99
    </style>
100
</head>
101
<body>
102
<div class="header">
103
    <h1>Chania</h1>
104
</div>
105
<div class="row">
106
    <div class="col-3 col-s-3 menu">
107
        <ul>
108
            <li>The Flight</li>
109
            <li>The City</li>
110
            <li>The Island</li>
111
            <li>The Food</li>
112
        </ul>
113
    </div>
114
115
    <div class="col-6 col-s-9">
116
        <h1>The City</h1>
117
        <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the
118
            old town and the modern city.</p>
119
        <video>
120
            <source src="https://www.w3cschool.cn/statics/demosource/mov_bbb.mp4" type="video/mp4">
121
            <source src="https://www.w3cschool.cn/statics/demosource/mov_bbb.ogg" type="video/ogg">
122
            Your browser does not support HTML5 video.
123
        </video>
124
    </div>
125
126
    <div class="col-3 col-s-12">
127
        <div class="aside">
128
            <h2>What?</h2>
129
            <p>Chania is a city on the island of Crete.</p>
130
            <h2>Where?</h2>
131
            <p>Crete is a Greek island in the Mediterranean Sea.</p>
132
            <h2>How?</h2>
133
            <p>You can reach Chania airport from all over Europe.</p>
134
        </div>
135
    </div>
136
</div>
137
<div class="footer">
138
    <p>Resize the browser window to see how the content respond to the resizing.</p>
139
</div>
140
</body>
141
</html>

方向：横屏/竖屏

语法


xxxxxxxxxx
1
1
orientation: portrait | landscape

portrait：竖屏，指定输出设备中的页面 可见区域高度 大于或等于宽度。
landscape“：横屏，除 portrait 外，都是 landscape 。

实例


xxxxxxxxxx
8
1
@media only screen and (orientation: landscape) {
2
    body {
3
        background-color: lightblue;
4
    }
5
    h1 {
6
        color: red;
7
    }
8
}

图片

width：100% - 根据上下范围自动实现响应式功能，可能会比原始图片更大。


xxxxxxxxxx
4
1
img {
2
    width: 100%;
3
    height: auto;
4
}

max-width：100% - 最大值100%，永远 不会大于 其原始大小。


xxxxxxxxxx
4
1
img {
2
    max-width: 100%;
3
    height: auto;
4
}

背景图片

background-size 属性有4个值，分别是 length，percentage，cover，contain。


xxxxxxxxxx
9
1
/* length：以固定长度来设置，
2
  如设置1个值，另一个为auto，
3
  图像可能变形
4
*/
5
div {
6
    background-image: url('paper.gif');
7
    background-repeat: no-repeat;
8
    background-size: 500px 200px;
9
}


xxxxxxxxxx
9
1
/* percentage: 以父元素的百分比来设置，
2
  如设置1个值，另一个为auto，
3
  图像可能变形
4
*/
5
div {
6
    background-image: url('paper.gif');
7
    background-repeat: no-repeat;
8
    background-size: 80% 50%；
9
}


xxxxxxxxxx
9
1
/* cover: 按比例把图像伸缩，
2
  直至背景图像完全覆盖背景区域
3
  图像不变形
4
*/
5
div {
6
    background-image: url('paper.gif');
7
    background-repeat: no-repeat;
8
    background-size: cover;
9
}


xxxxxxxxxx
11
1
/* contain: 按比例把图像伸缩
2
  直至背景图像自适应内容区域(背景图像的一边填满内容区域)
3
  图像不变形
4
*/
5
div {
6
    width: 100%;
7
    height: auto;
8
    background-image: url('paper.gif');
9
    background-repeat: no-repeat;
10
    background-size: contain;
11
}

为不同设备添加背景图片

使用 @media 来确定不同设备，进而选择不同的图片或格式。


xxxxxxxxxx
18
1
/* For width smaller than 400px: */
2
body {
3
    background-image: url('img_smallflowers.jpg');
4
}
5
6
/* For 浏览器 width 400px and larger: */
7
@media only screen and (min-width: 400px) {
8
    body {
9
        background-image: url('img_flowers.jpg');
10
    }
11
}
12
13
/* For 设备 width 400px and larger: */
14
@media only screen and (min-device-width: 400px) {
15
    body {
16
        background-image: url('img_flowers.jpg');
17
    }
18
}

HTML5 <picture> 元素

类似于 <video> 和 <audio> 元素，可以设置不同的资源，设置的第一个资源为首选使用。


xxxxxxxxxx
5
1
<picture>
2
  <source srcset="img_smallflowers.jpg" media="(max-width: 400px)">
3
    <source srcset="img_flowers.jpg">
4
    <img src="img_flowers.jpg" alt="Flowers">
5
</picture>

srcset 属性是必须的，定义了图片资源。
media 属性是可选的，定义了媒体查询。

视频

和图片类似，使用 width 和 max-width 来控制元素大小。

框架

响应式 Web 设计框架 Bootstrap 。


xxxxxxxxxx
6
1
<head>
2
    <meta name="viewport" content="width=device-width, initial-scale=1">
3
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
4
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
5
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
6
</head>

CSS 教程

CSS 简介

如何插入样式表

样式选择器种类

多重样式优先级

多重样式优先级顺序

!important 规则除外

权重计算

CSS 优先级法则

CSS Backgrounds(背景)

背景颜色

背景图像

背景图像 - 水平或垂直平铺

背景图像 - 固定或滚动

背景图像 - 位置

合并写法

CSS Text(文本)

文本对齐

文本修饰

文本转换

文本缩进

文本间隔

CSS Fonts(字体)

CSS 颜色(color)

CSS link(链接)

CSS ul(列表样式)

不同的列表项标记

列表项标记的图像

浏览器兼容性解决方案

列表 - 缩写属性

CSS Table(列表)

表格 - 折叠边框

表格 - 文字对齐

CSS 盒子模型

CSS 轮廓(outline)属性

CSS Margin和Padding

CSS 尺寸

CSS Display(显示)和Visibility(可见性)

CSS Positioning(定位)

Static 定位

Fixed 定位

Relative 定位

Absolute 定位

重叠的元素

CSS Float(浮动)

CSS 对齐

中心对齐，使用margin属性

使用position属性设置左，右对齐

使用float属性设置左，右对齐

使用Padding设置垂直居中对齐

CSS 组合选择符

后代选取器

子元素选择器

相邻兄弟选择器

普通兄弟选择器

CSS 伪类和伪元素

伪类 - 简介

伪类 - 语法

伪类 - 常用

CSS 导航栏

水平导航栏

CSS 下拉菜单

CSS 图片廊

CSS 图片透明

CSS 图片拼合技术

CSS 媒体类型

CSS 响应式设计

Viewport

网格视图

简介

创建响应式网格视图

媒体查询

媒体查询

添加断点

方向：横屏/竖屏

语法

实例

图片

图片

背景图片