二、CSS 基本介绍

前言

本教程针对熟悉HTML4、初步使用过CSS的人。

 

基本概念

  • CSS(Cascade Style Sheet),即层级样式表。
  • HTML可以说只是给网页填充了内容,CSS则是对网页进行化妆、修饰,比如给文字设置字体、颜色、大小等。
  • 我们实现网页的第一步是使用DIV将页面划分成多个块,参见下面的"华东师范大学网页布局例子"。
  • 以前在HTML标签中能够通过设置属性的方式(比如<div width="80px">)为标签定义样式(类似CSS的功能),但是现在推荐使用CSS设置(div{width:80px;}),即"HTML与CSS分离",在web中还有“页面展示与逻辑处理分离”等概念。
  • 一般来说目前实现网页时不需要从零做起,网上有很多好的CSS代码可以使用(或者CSS框架,如:Yahoo Pure 等),但是为了能看懂那些代码(或更好地学习CSS框架),我们需要学习CSS的基本知识。

 

CSS组成部分

CSS的基本结构如下:

<selector>{
  <attr1>:<value1>;
  <attr2>:<value2>;
  <attr3>:<value3>;
  ......
  <attrN>:<valueN>;
}

解释:

  • <selector>的中文名叫“选择器”,表示对哪个元素设置样式。<selector>大括号内部设置具体的样式,如字体等。
  • 设置样式的方法是通过多对<attr>:<value>组合而成,中间用分号( ; )分隔。

这里举个简单的例子:

body{  //对<body>内的元素进行设置
  font-size:12px;                      //设置字体大小为12px,px是pixel的缩写,表示像素
  font-family:sans-serif,Georgia; //设置首选字体为sans-serif,如果本机内没安装此字体,则使用Georgia
}

 

CSS的规则

  1. 继承原则:如果父标签定义了某样式,则默认对应的子标签也应用该样式。
  2. 就近原则:离修饰标签越近的CSS样式优先级越高。

 

引入CSS样式的方法

这里只介绍两种最常用的:

  1. 内部样式表:在<head></head>内部添加:<style type="text/css">......</style>
  2. 外部样式表:将CSS放在文件(如home.css)中,并在<head></head>内部添加:<link rel="stylesheet" type="text/css" href="home.css"/>

 

颜色的表示

  • 在CSS中不可避免会遇到颜色设置,因此这里我们需要学习怎么表示颜色。
  • 共有4种颜色表示法:
    1. 预定义颜色:例如“color:black”中的black就是预定义的颜色。
    2. 十六进制表示法:#ABCDEF,其中AB、CD、EF分别对应R、G、B。例子:#FFFFFF 表示白色。
    3. 短十六进制表示法:这是对第二种表示法的特例,当A=B时A和B只写一个(同样地,C=D、E=F 时也类似)。例子:#FF00CC 可简写为 #F0C.
    4. rgb表示法:rgb(255,255,255) 表示白色。  

 

CSS Reset

  • 起因:在不同浏览器中的默认CSS样式可能是不同的,比如按钮,在IE中可能是样式A,在Chrome中是样式B,在Firefox中是样式C,这种不一致性会让开发者不爽。因此就需要CSS Reset来统一不同浏览器的默认样式。
  • CSS reset 通俗地说就是“一段CSS代码,这段代码能够初始化基本的标签,使得在不同浏览器中,各标签的显示样式是一样的。”
  • 可以在 http://www.cssreset.com/ 中寻找最近最流行的CSS Reset代码。
  • 最常用的CSS Reset代码是 Eric Meyer 写的“CSS Reset 2.0”,代码如下:
二、CSS 基本介绍
 1 /**
 2  * Eric Meyer‘s Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 3  * http://cssreset.com
 4  */
 5 html, body, div, span, applet, object, iframe,
 6 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 7 a, abbr, acronym, address, big, cite, code,
 8 del, dfn, em, img, ins, kbd, q, s, samp,
 9 small, strike, strong, sub, sup, tt, var,
10 b, u, i, center,
11 dl, dt, dd, ol, ul, li,
12 fieldset, form, label, legend,
13 table, caption, tbody, tfoot, thead, tr, th, td,
14 article, aside, canvas, details, embed, 
15 figure, figcaption, footer, header, hgroup, 
16 menu, nav, output, ruby, section, summary,
17 time, mark, audio, video {
18     margin: 0;
19     padding: 0;
20     border: 0;
21     font-size: 100%;
22     font: inherit;
23     vertical-align: baseline;
24 }
25 /* HTML5 display-role reset for older browsers */
26 article, aside, details, figcaption, figure, 
27 footer, header, hgroup, menu, nav, section {
28     display: block;
29 }
30 body {
31     line-height: 1;
32 }
33 ol, ul {
34     list-style: none;
35 }
36 blockquote, q {
37     quotes: none;
38 }
39 blockquote:before, blockquote:after,
40 q:before, q:after {
41     content: ‘‘;
42     content: none;
43 }
44 table {
45     border-collapse: collapse;
46     border-spacing: 0;
47 }
CSS Reset

 

选择器分类

  • * : 选择任何元素。格式为:*{...}
  • 标签选择器:选择指定标签。格式为:<tag>{...}
  • id选择器:选择指定 id 的元素。某个 id 在一个页面中是唯一的。格式为:#<id>{...}
  • class选择器:选择指定class的元素。格式为:.<class>{...}。值得一提的是,class选择器的变型:
    • 与标签选择器一起使用,格式为:<tag>.<class>。表示只选择具有class=<class>的<tag>标签。
    • 多个class一起使用,格式为:.<class1>.<class2>。表示class同时属于<class1>和<class2>的元素。
  • 后代选择器:选择指定元素的指定后代元素(后代和子元素是不同的,并不一定要紧跟在父元素里面)。格式为:<father> <空格><descendent> ,例如 div  h3 解释为“div元素的所有<h3>标签”。
  • 子元素选择器:选择指定元素的子元素(子元素指的是孩子,并不包含孙子...)。格式为:<father> > <child>
  • 属性选择器: 选择具有指定属性或指定属性具有特定值的元素。格式为:<selector>[<attribute1>][<attribute2>]<selector>[<attribute1>="<value1>"][<attribute2>="<value2>"]
    • 部分匹配属性值:<selector>[<attribute>*="<value>"] 表示只要<attribute>属性中包含<value>值即可。
  • 相邻兄弟选择器:选择(紧挨着的)相邻的兄弟的元素。格式为:<selector1> + <selector2>。表示选择紧跟在selector1后面的selector2。
  • 伪类选择器
    • <selector>:first-child{...} . 当<selector>为某个元素的第一个子元素时应用样式。 
    • <selector>:focus{...} . 当<selector>拥有键盘输入焦点时应用样式。
    • a:link{...} . 当<a>未被访问过时应用样式。
    • a:visited{...}. 当<a>已被访问时应用样式。
    • a:hover{...} . 当鼠标悬浮在<a>上时应用样式。
    • a:active{...}. 当<a>被激活(激活指的是鼠标按下且未松开的这段时间)时应用样式。
    • 注意:在css中一定要以:link -> visited -> hover -> active 的顺序进行声明!!!!
  • 伪元素选择器
    • <selector>:first-line{...}.  选择<selector>的第一行。注意:<selector>必须是块级元素。
    • <selector>:first-letter{...}. 选择<selector>的第一个字母。注意:<selector>必须是块级元素。
    • <selector>:before{content:"..."}. 在<selector>的前面插入内容。例如:h1:before{content:url(1.jpg)}表示在<h1>前面插入一张图片。
    • <selector>:after{content:"..."}. 在<selector>的后面插入内容。
  • 选择器分组:多个选择器可以用逗号(,)隔开,表示同时对多个选择器设置样式。格式为:<selector1>,<selector2>,<selector3>{...}

应用

  1. 选择一个有序列表中的第三行:ol > li:first-child + li + li
  2. 选择class="c1"的div:div.c1

选择器定义准则:

  1. 最常用的选择器:id选择器、class选择器。
  2. 尽量少使用复杂层级关系。
  3. 使用class代替层级关系。

在不同的框架中(如 JQuery)可能会新增很多其他选择器,但是以上的几个选择器是最基本的。

实例:实现“华东师范大学主页”布局

此处只是实现布局,而不是实现全部效果。

效果

 二、CSS 基本介绍

代码

二、CSS 基本介绍
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <style type="text/css">
 5             #container{
 6                 margin:0 auto;
 7                 max-width:980px;
 8                 background:gray;
 9             }
10             #header{
11                 background:red;
12                 height:100px;
13             }
14             #nav{
15                 background:orange;
16                 height:50px;
17             }
18             #banner{
19                 background:blue;
20                 height:300px;
21             }
22             #news{
23                 background:green;
24                 width:30%;
25                 height:100px;
26                 float:left;
27             }
28             #focus{
29                 background:yellow;
30                 width:30%;
31                 height:100px;
32                 float:left;
33             }
34             #resources{
35                 background:gray;
36                 width:40%;
37                 height:100px;
38                 float:right;
39             }
40             #footer{
41                 background:purple;
42                 height:100px;
43                 clear:left;
44             }
45         </style>
46     </head>
47     <body>
48         <div id="container">
49             <div id="header">header</div>
50             <div id="nav">nav</div>
51             <div id="banner">banner</div>
52             <div id="main">
53                 <div id="news">news</div>
54                 <div id="focus">focus</div>
55                 <div id="resources">resources</div>
56             </div>
57             <div id="footer">footer</div>
58         </div>
59     </body>
60 </html>
二、CSS 基本介绍

 

float(浮动)

  • 定义:我们可以把一个HTML页面看成有两层,高层是浮动层(存放浮动元素),低层是一般层(存放一般元素)。而浮动元素会放在浮动层中(官方解释为“脱离文档流”)。如果浮动层元素和一般层元素重叠,则浮动层覆盖一般层。
  • 将DIV设置为浮动后会使得DIV不再独占一行。
  • 如果父DIV是非浮动的,而其子DIV是浮动的,则父DIV的高度是0,即父DIV的高度并没有被子DIV撑起来。下面的例子中就体现了这一点:
二、CSS 基本介绍
 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <style type="text/css">
 7     #child1{
 8         float:left;
 9         width:300px;
10         height:300px;
11         background:yellow;
12     }
13     #child2{
14         float:left;
15         width:300px;
16         height:300px;
17         background:blue;
18     } 
19 </style>
20 </head>
21 <body>
22     <div id="father"> 
23         <div id="child1"></div>
24         <div id="child2"></div>
25     </div>
26 </body>
27 </html>
二、CSS 基本介绍

 

盒子模型

  • 为什么要叫盒子模型?前面已经说过一个网页的设计布局其实就是怎么嵌套DIV标签(参见:"华东师范大学网页布局例子"),每个DIV就是一个块(这个块就是盒子),因此盒子模型就是对DIV标签的介绍。
  • 注意:盒子模型仅适用于块级元素。
  • 盒子模型的核心元素有 DIV标签、对应的CSS属性: width(存放内容的宽度)、height(存放内容的高度)、padding(内边距)、border(边框)、margin(外边距)。图示如下所示:

 二、CSS 基本介绍

 

实例:实现“田字格”布局

效果

二、CSS 基本介绍

说明

  • 此实例主要使用“浮动”(float)、“清除浮动”(clear)两个知识点。对四个div使用左浮动,对第三个div使用清除左浮动,使得第三个div的左侧不允许有浮动元素。

代码

二、CSS 基本介绍
 1 <!--实现了田字格布局-->
 2 <!DOCTYPE html>
 3 <html>
 4     <head>
 5         <style type="text/css">
 6             div{
 7                 border-style: solid;    
 8                 border-color: #000000; 
 9                 border-width:5px;    
10                 margin:10px;        
11                 width:100px;        
12                 height:100px;        
13             }
14             #c1,#c2,#c3,#c4{
15                 float:left;
16             }
17             #c3{
18                 clear:left;
19             }
20         </style>
21     </head>
22     <body>
23         <div id="c1"></div>
24         <div id="c2"></div>
25         <div id="c3"></div>
26         <div id="c4"></div>
27     </body>
28 </html>
二、CSS 基本介绍

 

实例:实现metro风格布局

如何文字在div中垂直居中?

  • 将 line-height 属性和 height 属性的值设置成一样即可。

效果:

二、CSS 基本介绍

代码:

二、CSS 基本介绍
  1 <!DOCTYPE HTML>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 <title>实现metro布局</title>
  6 <style>
  7     html{
  8         font-family:"Microsoft YaHei UI";
  9         color:white;
 10     }
 11     #container{
 12         width:655px;
 13         height:90px;
 14     }
 15     #d1,#d2,#d3,#d4,#d5,#d6,#d7,#d8,#d9,#d10{
 16         float:left;
 17         text-align:center;    /*文字水平居中*/
 18         margin:1px;        
 19     }
 20     #d1{
 21         background-color:#CC3333;
 22         width:106px;
 23         height:58px;
 24         line-height:58px;    /*将height和line-height设置为一样可以使文字垂直居中*/
 25         font-size:20px;
 26     }
 27     #d2{
 28         background-color:#0048BE;
 29         font-size:25px;
 30         width:215px;
 31         height:58px;
 32         line-height:58px;
 33     }
 34     #d3{
 35         background-color:#FF9900;
 36         font-size:12px;
 37         width:107px;
 38         height:28px;
 39         line-height:28px;
 40     }
 41     #d4{
 42         background-color:#FF9900;
 43         font-size:12px;
 44         width:107px;
 45         height:28px;
 46         line-height:28px;
 47         margin-left:0px;
 48     }
 49     #d5{
 50         background-color:#91009E;
 51         font-size:20px;
 52         width:106px;
 53         height:58px;
 54         line-height:58px;
 55     }
 56     #d6{
 57         background-color:#00839A;
 58         font-size:12px;
 59         width:106px;
 60         height:30px;
 61         line-height:30px;
 62     }
 63     #d7{
 64         background-color:#542FB0;
 65         font-size:12px;
 66         width:107px;
 67         height:30px;
 68         line-height:30px;
 69     }
 70     #d8{
 71         background-color:#FF9900;
 72         font-size:12px;
 73         width:107px;
 74         height:30px;
 75         line-height:30px;
 76         margin-left:0px;
 77     }
 78     #d9{
 79         background-color:#0048BE;
 80         font-size:25px;
 81         width:215px;
 82         height:60px;
 83         line-height:60px;
 84         margin-top:-29px;
 85     }
 86     #d10{
 87         background-color:#542FB0;
 88         font-size:12px;
 89         width:106px;
 90         height:30px;
 91         line-height:30px;
 92     }
 93 </style>
 94 </head>
 95 
 96 <body>
 97     <div id="container">
 98         <div id="d1">燕麦食品</div>
 99         <div id="d2">自学电脑</div>
100         <div id="d3">51我要自学网</div>
101         <div id="d4">机械设计与制造</div>
102         <div id="d5">汽车年审</div>
103         <div id="d6">自学计算机</div>
104         <div id="d7">入门吉他</div>
105         <div id="d8">图标设计</div>
106         <div id="d9">Javascript框架</div>
107         <div id="d10">木吉他入门教学</div>
108     </div>
109 </body>
110 </html>
metro风格布局

 

实例:画三角形

效果如下

二、CSS 基本介绍

分析

  • 这里最重要的是要了解相邻边框(比如左边框与下边框)的衔接处的效果。
  • 在HTML5中,我们可以使用canvas技术画图,并且实现效果更加美观,这里只是为了熟悉CSS的知识而已。

HTML4代码

二、CSS 基本介绍
 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>使用CSS画一个三角形</title>
 6 <style type="text/css">
 7     #child{
 8         width:0px;
 9         height:0px;
10         border:100px solid red;
11         border-top-color:transparent;
12         border-left-color:transparent;
13         border-right-color:transparent;
14     }
15 </style>
16 </head>
17 <body>
18     <div id="child"></div>
19 </body>
20 </html>
二、CSS 基本介绍

这里补充使用HTML5 Canvas 画一个三角形,canvas技术可以理解为“把页面当作一个画布,你可以在画布上画任何的图形”。canvas的使用请查阅额外资料。

HTML5代码

二、CSS 基本介绍
 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>使用HTML5 Canvas 画一个三角形</title>
 6 </head>
 7 <body>
 8     <canvas id="canvas" width="300" height="300">
 9         该浏览器不支持 canvas api
10     </canvas>
11 </body>
12 <script type="text/javascript">
13     var canvas = document.getElementById("canvas");
14     var context = canvas.getContext("2d");
15     context.fillStyle="red";    //填充颜色为红色
16     context.beginPath();        //开始路径
17     context.moveTo(100,100);    //起始点为(100,100)
18     context.lineTo(75,125);        //从(100,100)到(75,125)有一条线
19     context.lineTo(125,125);    //从(75,125)到(125,125)有一条线
20     context.closePath();        //从(125,125)到(100,100)有一条线
21     context.fill();                //填充
22 </script>
23 </html>
二、CSS 基本介绍

 

实例:画一棵树

效果如下

二、CSS 基本介绍

分析:利用CSS中的border属性画两个三角形和一个矩形。

代码

二、CSS 基本介绍
 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>CSS画一棵树</title>
 6 <style type="text/css">
 7     #child1{
 8         width:0px;
 9         height:0px;
10         border:100px solid green;
11         border-top-color:transparent;
12         border-left-color:transparent;
13         border-right-color:transparent;
14     }
15     #child2{
16         width:0px;
17         height:0px;
18         border:100px solid green;
19         border-top-style:none;
20         border-top-color:transparent;
21         border-left-color:transparent;
22         border-right-color:transparent;
23     }
24     #child3{
25         width:80px;
26         height:50px;
27         float:left;
28     }
29     #child4{
30         float:left;
31         width:0px;
32         height:50px;
33         border:20px solid brown;
34     }
35 </style>
36 </head>
37 <body>
38     <div id="child1"></div>    <!--第一片叶子 -->
39     <div id="child2"></div> <!--第二片叶子 -->
40     <div id="child3"></div> <!--透明支撑物,为了将树干放到叶子中间-->
41     <div id="child4"></div> <!--树干-->
42 </body>
43 </html>
二、CSS 基本介绍

 

设置字体属性

  • font-style: 设置斜体。可选值有:normal(正常), italic(斜体).
  • font-weight: 设置粗体。可选值有:normal(正常), bold(粗体).
  • font-size: 设置字号。
  • line-height: 设置行高,即一行的高度。
  • font-family: 设置字体。这里值得一提的是可以同时写多个字体,如:"font-family:‘雅黑‘,‘宋体‘,‘黑体‘;",因为不同机器上拥有的字体可能不一样,如果有的机器没有雅黑字体,则使用宋体,如果没有宋体,最后使用黑体。
  • color: 设置字的颜色。

 

设置段落属性

  • text-indent: 设置缩进大小。可选值为数字即可。
  • text-align: 文字对齐方式。可选值有:left(左对齐,默认), right(右对齐), center(居中), justify(两端对齐).
  • text-decoration: 设置段落的额外装饰。可选值有:underline(下划线), overline(上划线), line-through(删除线), none(无,默认).
  • letter-spacing: 设置字符间距。

 

设置背景及背景图片的属性

  • background-color: 设置背景颜色。
  • background-image: 设置背景图片。值类似:url(1.jpg)
  • background-repeat: 设置背景图片是否重复。可选值有:repeat(不断重复), no-repeat(不重复), repeat-x(在x轴方向重复), repeat-y(在y轴方向重复).
  • background-attachment: 设置背景图像是否固定还是随内容滚动。可选值有:fixed(固定),scroll(滚动).
  • background-position: 设置背景图片的位置。可选值有
    • <position><空格><position>: <position>可填:top, center, bottom; left, center, right.
    • <x-length><空格><y-length>: <length>可填像素值,表示将背景图片移动多少像素。

 

自定义列表标志

  • 列表标志就是(最简单的例子是本行最前面那个黑点,那是无序列表的默认标志)。本例想要实现将自定义图片变成列表标志。
  • 下面的例子是从腾讯官网上摘录下来的,那个图片也是腾讯的。

效果:

二、CSS 基本介绍

分析:

  • 很显然那个标志是图片,但是值得一提的是标志的源图片如下所示:

二、CSS 基本介绍

  • 这就需要我们使用background-image把这个作为列表项的背景图片,然后利用background-position将指定的图片移到适当的位置。

代码:

二、CSS 基本介绍
 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7     li{
 8         list-style-type:none;
 9         background-image:url(icon.png);
10         background-repeat:no-repeat;
11         background-position:0px -272px;
12         padding-left:26px;
13     }
14 </style>
15 </head>
16 
17 <body>
18     <ul>
19         <li>国信办将严打网络淫秽色情及低俗信息</li>
20         <li>*领导看望XXXXXX等老同志</li>
21         <li>春节期间我国将遇强冷空气 局地降温14℃</li>
22     </ul>
23 </body>
24 </html>
二、CSS 基本介绍

 

display常用属性

  • block: 块级元素。该元素前后都要换行(即独占一行)。默认的块级元素有<div>、<p>、<ul>、<ol>、<h1>~<h6>、<form>、<table>、<pre>、<dl>、<dt>、<dd>、<blockquote>等。
  • inline: 内联元素(也称行内元素)。默认的行内元素有<span>、<a>、<b>、<br>、<code>、<img>、<input>、<label>、<sub>、<sup>、<textarea>等。
  • none: 隐藏元素。即如果设置为此值,则该元素将不会被显示,且不占空间。
  • inline-block: 该属性兼备了内联元素和块元素的特点,在外面看来他像是内联元素,因为他并不会另起一行,但是在内看来,他又像是块元素,因为它能设置盒子模型的属性。

 关于块级元素、内联元素的区别:

  • 块级元素能够设置盒子模型中的属性,而内联元素只能设置margin-left, margin-right, padding-left, padding-right.

 

inline-block去除间距

场景:我们需要实现一个导航栏。

问题:相邻 inline-block 之间会有间隔。

效果

二、CSS 基本介绍

代码

二、CSS 基本介绍
 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>inline-block间隔</title>
 6 <style>
 7     #nav a{
 8         display:inline-block;     //设置inline-block后,相邻会有间隔
 9         padding:4px;
10         width: 120px;
11         text-align:center;
12         background:#BEBEBE;
13         text-decoration:none;
14         font-family:‘Microsoft YaHei‘, 微软雅黑;
15         font-weight:bold;
16         font-size:20px;
17         color:white;
18     }
19     
20 </style>
21 </head>
22 <body>
23     <div id="nav">
24         <a href="#">HOME</a>
25         <a href="#">ARTICLES</a>
26         <a href="#">ABOUT</a>
27     </div>
28 </body>
29 </html>
二、CSS 基本介绍

那么怎么去除间隔呢?解决方法是在<style>标签中加入:html{font-size:0px} 即可。

效果

二、CSS 基本介绍

 

例子:垂直居中对齐

场景:这里我们实现一个404页面。

效果

二、CSS 基本介绍

分析

  • 页面中其实只有一张用DIV包裹的404的图片。
  • 主要使用vertical-align实现页面垂直居中。

原理图

二、CSS 基本介绍

代码

二、CSS 基本介绍
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <style>
 5             html,body{
 6                 height:100%;    /*高度撑满*/
 7                 margin:0px;        /*页边不留空白*/
 8                 background:gray;
 9             }
10             #container{
11                 margin:0 auto;  /*水平居中*/
12                 height:100%;    /*高度撑满*/
13                 width:500px;
14 
15             }
16             #image1{
17                 width:490px;
18                 margin:0 auto;
19                 vertical-align:middle;
20                 display:inline-block;
21             }
22             #dummyspan{
23                 width:0px;
24                 height:100%;
25                 display:inline-block;
26                 vertical-align:middle;
27             }
28         </style>
29     </head>
30     <body>
31         <div id="container">
32             <span id="dummyspan"></span>    <!--插入一个高度撑满,宽度为0的虚拟元素-->
33             <a href="#"><img src="404错误.jpg" id="image1"></a>
34         </div>
35     </body>
36 </html>
二、CSS 基本介绍

 

position属性

  • CSS 的 position 属性值有static(默认值), relative, absolute, fixed。分为两大类:positioned(relative,absolute,fixed)和unpositioned(static).
  • static: 默认值。表示该元素没有被定位。
  • relative: 相对定位。如果将元素设置为相对定位,则可以通过设置 top, bottom, left, right 属性使得该元素相对于正常位置偏离多少。
  • fixed: 固定定位。固定在视窗(即显示屏)的某个位置,即不管你怎么滚动页面,该元素总是在那个位置固定不动(像广告,导航都使用了fixed),可以通过设置 top, bottom, left, right 属性设置相对视窗的位置。
  • absolute: 绝对定位。相对于最近的positioned祖先元素偏移(当该元素的父元素都不是positioned,则相对于body元素偏移)。通过设置 top, bottom, left, right 属性设置偏移。
    • 绝对定位可以这样理解:HTML页面是地面,绝对定位的元素则把它从文档流中脱离出来,并且默认盖在HTML页面上面。本文章的右下角的目录功能就是通过绝对定位实现。
    • 当有多个absolute元素重叠时,怎么决定他们的上下关系,这就需要一个特殊的属性:z-index,可以把他理解成这个绝对定位元素在第几层。默认z-index=0,即该元素就盖在地面上,z-index=-1则表示该元素在地面下面,z-index越高,则表示该元素在越高层。

 

案例:实现顶部导航

  • 这个导航就是腾讯主页的顶部导航:www.qq.com

效果:

二、CSS 基本介绍

代码:

二、CSS 基本介绍
  1 <!DOCTYPE HTML>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 <title>顶部导航</title>
  6 <style>
  7     html{
  8         height:2000px;        /*为了体现导航是固定在顶端的,这里将页面故意设的高一点*/
  9     }
 10     *{
 11         font-family: ‘Microsoft YaHei‘, 微软雅黑;
 12         font-size:12px;
 13         color:#666;
 14     }
 15     a{
 16         text-decoration:none;
 17         color:#666;
 18     }
 19     #nav{
 20         background-color:#fdfdfd;
 21         width: 100%;
 22         height: 28px;
 23         position:fixed;        /*固定布局*/
 24         top:0px;            /*固定的具体位置*/
 25         border-bottom: 1px solid #ebebeb;
 26     }
 27     #navInner{
 28         margin:0 auto;
 29         width:960px;
 30         height:100%;
 31         
 32     }
 33     #left{
 34         float:left;
 35         margin-top: 8px;
 36     }
 37     #mobileIcon{
 38         background-image:url(icon.png);
 39         background-repeat:no-repeat;
 40         padding-left:12px;
 41         margin-right: 11px;
 42     }
 43     #wap{
 44         margin-right: 10px;
 45     }
 46     #forIndex{
 47         margin:0px 12px 0px 10px;
 48     }
 49     #webmap{
 50         margin:0 10px 0 0;
 51         
 52     }
 53     #qqHelpLink{
 54         padding-right: 11px;
 55         background-image:url(icon.png);
 56         background-repeat:no-repeat;
 57         background-position:right -115px;
 58     }
 59     #right{
 60         float:right;
 61     }
 62     #onekey,#weibo,#qzone,#qmail,#dingyue,#ilike{
 63         background-image:url(loginall_1.5.1.png);
 64         background-repeat:no-repeat;
 65         height:28px;
 66         display:block;
 67         float:right;
 68     }
 69     #onekey{
 70         background-position: left -450px;
 71         width:70px;
 72     }
 73     #weibo{
 74         background-position: right -50px;
 75         width:30px;    
 76     }
 77     #qzone{
 78         background-position: right -100px;
 79         width:30px;
 80     }
 81     #qmail{
 82         background-position: right -150px;
 83         width:30px;
 84     }
 85     #dingyue{
 86         background-position: right -549px;
 87         width:30px;
 88     }
 89     #ilike{
 90         background-position: -76px -645px;
 91         width:30px;
 92     }
 93 </style>
 94 </head>
 95 
 96 <body>
 97     <div id="nav">
 98         <div id="navInner">
 99             <div id="left">
100                 <a href="#" id="mobileIcon">手机新闻客户端</a>
101                 <a href="#" id="wap">WAP版</a>
102                 |
103                 <a href="#" id="forIndex">设为首页</a>
104                 <a href="#" id="webmap">网站地图</a>
105                 <a href="#" id="qqHelpLink">帮助</a>
106             </div>
107             <div id="right">
108                 <a href="#" id="ilike"></a>
109                 <a href="#" id="dingyue"></a>
110                 <a href="#" id="qmail"></a>
111                 <a href="#" id="qzone"></a>
112                 <a href="#" id="weibo"></a>
113                 <a href="#" id="onekey"></a>                
114             </div>
115         </div>
116     </div>
117 </body>
118 </html>
顶部导航

 

案例:实现登录界面

下面的例子本来使用Bootstrap来实现的,现在我们从零开始实现,这样能够充分回顾我们CSS学习的知识。

原地址:http://runjs.cn/detail/8z2mwcfa

效果:

二、CSS 基本介绍

分析:

  • 第一步当然是用DIV布局。如图:

二、CSS 基本介绍

  • 布局完后,就是将内容填进去,并且设置好样式即可。

代码:

二、CSS 基本介绍
 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7     html,body{
 8         height:100%;
 9         width:100%;
10         background-image:url(login_bg.PNG);    /*背景*/
11         font-family:"Microsoft YaHei UI";    /*默认字体是微软雅黑*/
12     }
13     
14     #container{
15         width:480px;
16         height:100%;;
17         margin:0 auto;
18         vertical-align:middle;
19     }
20     #dummy{
21         width:0px;
22         height:100%;
23         vertical-align:middle;
24         display:inline-block;
25     }
26     #loginbox{
27         width:470px;
28         height:230px;
29         display:inline-block;
30         border-radius: 8px;        /*    实现圆角边框 */
31         background:#F5F5F5;
32     }
33     #left{
34         width:55%;
35         height:230px;
36         float:left;
37     }
38     #right{
39         border-left: 1px solid #ccc;
40         width:43%;
41         height:230px;
42         float:left;
43     }
44     .nametxt{
45         width:220px;
46         height:30px;
47         margin-left:20px;
48         margin-bottom:15px;
49         border-radius:5px;
50         border: 1px solid #ccc;
51     }
52     #loginbtn{
53         width:62px;
54         height:30px;
55         color:white;
56         float:right;
57         margin-right:20px;
58         font-size: 14px;
59         padding: 4px 12px;
60         background-image: linear-gradient(to bottom,#08c,#04c);
61         border-radius: 4px;
62         border: 1px solid #bbb;
63     }
64     #registerbtn{
65         background-image: linear-gradient(to bottom,#fff,#e6e6e6);
66         padding: 4px 12px;
67         margin-bottom: 0;
68         width:62px;
69         height:30px;
70         font-size: 14px;
71         line-height: 20px;
72         border-radius: 4px;
73         border: 1px solid #bbb;
74         margin-left:8px;
75     }
76 </style>
77 </head>
78 <body>
79     <div id="container">
80         <span id="dummy"></span>
81         <div id="loginbox">
82             <form>
83                 <div id="left">
84                     <h2 style="font-size:20px;font-weight:normal;padding:10px 10px 10px 20px;">商户登录</h2>
85                     <input type="text" class="nametxt"/><br/>
86                     <input type="text" class="nametxt"/><br/>
87                     <input type="checkbox" style="margin-left:20px"> 下次自动登录 <button id="loginbtn">登录</button>
88                 </div>
89                 <div id="right">
90                     <h2 style="font-size:20px;font-weight:normal;padding:8px;">没有账户 ?</h2>
91                     <div style="font-size:11px;padding:8px;line-height:18px">这里有一段文字啊,很多的文字啊,太多太多的文字了,主要可以介绍介绍注册的好处和公司或者项目概况。。。</div>
92                     <button id="registerbtn">注册</button>
93                 </div>
94             </form>
95         </div>
96     </div>
97 </body>
98 </html>
登录界面

 

IE 6 双倍margin的bug

  • 问题:当对div设置浮动并且设置margin-left或margin-right为x时,在IE 6 下显示的margin-left为2x.
  • 解决方法:添加 _display:inline,因为_display只有IE才认识。

 

overflow属性

  • 该属性决定内容溢出元素框时的处理方法。可选值有:
    • visible: 默认值。如果溢出,则继续显示。
    • auto: 如果溢出,则加入滚动条,否则正常显示。
    • scroll: 不管是否溢出,都加滚动条。
    • hidden: 如果溢出,则隐藏溢出的区域。

 

单页面设计

  • 现在单页面设计是一个趋势,而且这种形式展现页面更具有表现力。
  • 定义:将页面内容呈现在一个屏幕放得下的页面或通过用户像切换slides那样切换页面内容,无需用户进行鼠标滚动等其他繁琐动作。
  • 页面要求:简洁、大方、炫、文字要少。
  • 目的:吸引用户、让用户一目了然地知道网页的内容。
  • 例子http://www.adamwoodhouse.co.uk/

 

响应式设计

  • 定义:编写了一个网页,这个网页能够根据设备分辨率的改变自动调整。
  • 好处:写了一个网页,在任何设备上显示都过得去(有时候显示的也不好看)。
  • 框架:Bootstrap、Foundation等都是非常优秀的响应式页面的前端框架。
  • 原理:用三个步骤实现响应式设计
  • 例子:http://www.ecnu.edu.cn/

 

常用工具

  1. RGB颜色对照工具:http://tool.oschina.net/commons?type=3
  2. 网页颜色的RGB值工具:HTML Color
  3. 标尺工具:FastStone Capture

 

参考文献

[1] 学习CSS很好的教程:http://zh.learnlayout.com/

[2] Metro UI CSS 中文版首页:http://www.w3cplus.com/MetroUICSS/index.php

[3] Bootstrap 中文版首页:http://www.bootcss.com/

[4] 默认的块级元素和内联元素:http://www.cnblogs.com/double-bin/archive/2011/12/19/2293090.html

[5] inline-block与float的区别:http://www.vanseodesign.com/blog/demo/inline-block/

[6] float详解:http://www.w3cplus.com/css/float.html

[7] 实现商品列表:http://blog.teamtreehouse.com/using-inline-block-to-display-a-product-grid-view

[8] 使用vertical-align实现垂直居中:http://www.cnblogs.com/xueming/archive/2012/03/21/VerticalAlign.html

[9] CSS选择器解释:http://www.ruanyifeng.com/blog/2009/03/css_selectors.html

[10] A Beginner‘s Guide to HTML & CSS: http://learn.shayhowe.com/html-css/

[11] An Advanced Guide to HTML & CSS: http://learn.shayhowe.com/advanced-html-css/

[12] Yahoo Pure CSS 框架: http://purecss.io/

[13] CSS3实现圆角:http://www.ruanyifeng.com/blog/2010/12/detailed_explanation_of_css3_rounded_corners.html

[14] 颜色的表示:http://www.dreamdu.com/css/css_colors/

二、CSS 基本介绍

上一篇:learning nodejs 2 - connect middleware


下一篇:AspxSpy2014 Final