css技巧学习总结_能否通过啥快捷键快速找到class样式在哪里不-CSDN博客

如何查看DIV被设置什么CSS样式

如何查看DIV被设置什么CSS样式呢？可以扩展到了解查看任何HTML标签被设置什么CSS样式。DIVCSS5教

大家掌握如何使用谷歌浏览器查找网页中某局部DIV布局结构以及对应设置什么CSS样式。
一、直接观察div标签被设置什么样式

比较简单的布局，我们直接从浏览器上观察效果就能分析一下地方被设置什么样式。
简单直观分析DIV CSS布局用什么样式图
简单直观分析DIV CSS布局用什么样式图
如上图，可以大致分析对应样式有哪些，比如使用背景图片，设置宽度多少、设置CSS高度多少、字体大

小、文字靠左、距离左多少。
以上分析只是直观能看到的能分析的大致使用什么CSS样式，但如果要想精确的分析对应布局CSS样式到

底设置什么，那必须的看对应CSS代码。
实在分析观察不出的，那就需要去查看DIV对应CLASS或ID对应CSS选择器的样式。
二、查找div里的class或id对应样式

分析网页某布局局部CSS截图
要分析对应DIV CSS案例截图
1、工具：DIVCSS5使用谷歌浏览器（Google Chrome）进行分析
2、查找分析某处DIV布局使用什么CSS样式的流程
2-1：首先打开网页
谷歌浏览器打开DIVCSS5主页
打开www.divcss5.com截图
2-2：查看源代码
在网页空白处鼠标右键-》查看网页源代码
查看源代码
查看源代码
对应HTML源代码会在谷歌浏览器选项卡自动新建打开。
对应网页源代码截图
对应网页HTML源代码截图
2-3：找到对应要查找地方DIV
可以使用快捷键“ctrl+F”查找要找DIV布局处。
查找到对应内容与DIV结构
通过对比原来网页内容找到对应内容并获取对应DIV布局结构信息
查找技巧，使用浏览器自带查找工具，然后对比所要找DIV内容与原来正常访问时内容，找到确定的DIV

布局结构。
这里找到对应内容DIV布局内容代码：
<h2 class="home"><a href="http://www.divcss5.com/" title="转到 CSS教程首

页">DIVCSS5</a></h2>
从以上代码可以得到，需要分析那个布局使用H2标签进行布局，同时使用class="home"。
记住对应ID和CLASS命名，这里是用class命名为“home”，可以想到CSS肯定使用".home{.....}"的选择

器。
2-3：打开CSS代码
如果CSS是使用HTML引入外部CSS文件，那需要打开对应这个页面外部CSS文件，以便查找CSS代码里对应

Id或Class命名,从而获取得到对应DIV布局使用了什么CSS样式。
找到HTML引人CSS代码
找到link引入外部CSS文件代码
打开CSS文件：在谷歌浏览器中直接点击link对应CSS文件URL即可，在谷歌浏览器打开CSS文件。
打开对应CSS文件查看到对应CSS代码
打开对应CSS文件查看到对应CSS代码
2-4：使用查找工具找到对应CSS选择器
使用谷歌浏览器查找工具，快捷键“Ctrl+F”打开查找工具，将HTML分析的id或class命名拷贝到查找输

入框进行查找，这里是使用“class="home"”,我们知道class对应CSS就是以半角英文小写句号“.”为

选择符号开头命名的“.home”，进行查找
查找到两处对应CSS样式
查找到两处对应CSS样式
对应DIV CSS布局的CSS代码如下：
h2.home{height:24px;line-height:20px;font-size:14px;color:#000;text-indent:25px;
background:url(divcss5-left-li.gif) no-repeat 0 0}
h2.home a{color:#000;text-decoration:none}
分析得出对应地方设置CSS样式为：
2-4-1：对应H2标签设置高度为24px、css上下居中文字的行高为24px、字体大小为14px、字体颜色为黑

色“#000”、设置CSS缩进25px、设置图片为背景不重复不平铺（可以从网页实践效果看出是对应的那个

图标）；
2-4-2：设置对应h2标签内的超链接文字字体颜色为黑色“#000”、CSS去掉超链接字体下划线。
以上就是DIVCSS5介绍如何分析一个网页某处局部使用什么标签布局、对应设置了什么CSS样式，这样分

析可以有助于大家平时借鉴别人CSS布局、从而自己掌握不太会的DIV+CSS布局方法技巧。
========

css设置body背景图片随内容增加多少显示多少

在CSS布局时，可能有时会遇到对body直接设置图片作为网页背景水平纵向平铺（从上到下居中平铺），

此时整个网页无论内容是否占满一屏幕，css背景都会从上到下铺（纵向）满整个屏幕。但有时我们不需

要这样的一个效果，需要内容占用多高，body背景就纵向从上到下铺满多少高度。很明显这样就达不到

我们想要的效果。
解决方法：
对html再设置个背景（无论图片还是纯色，推荐设置纯颜色的背景颜色）
接下来DIVCSS5通过实例为大家介绍此技巧，首先DIVCSS5分为两个案例，一个是直接对body设置背景图

片从上到下平铺，我们会观察到无论网页内容是否占满一屏幕，背景都会从上到下满铺。
一、未解决背景纵向平铺CSS DIV案例

1、DIV CSS案例描述
首先对body设置一个背景图片（bg.gif）从上到下平铺，设置一个div盒子宽度为274px,高度为

200px;div背景颜色为蓝色。
2、案例HTML源代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS案例在线演示 DIVCSS5</title>
<link href="images/style.css" rel="stylesheet" type="text/css" />

</head>
<body>
<div class="divbox">DIVCSS5实例内容</div>

</body>
</html>
3、案例CSS代码：
@charset "utf-8";
/* DIVCSS5-CSS初始化模板-www.divcss5.com */
body, div {margin:0; padding:0;font-style: normal;font:12px/22px "\5B8B\4F53",Arial,

Helvetica, sans-serif}
/* \5B8B\4F53 代表宋体，更多中文字体转 Unicode http://www.divcss5.com/jiqiao/j325.shtml */
ol, ul ,li{list-style:none}
body{color:#FFF;background:#E2E2E2 url(bg.gif) repeat-y center 0; text-align:center}

.divbox{ margin:0 auto; width:274px; height:200px; background:#00F}
4、实例截图
对body设置纵向平铺背景图片显示截图
对body设置纵向平铺背景图片显示案例截图
从以上图上看到对body设置背景图片从上到下纵向平铺时，无论内容是否占满1屏幕，其背景都会从上到

下都会平铺满整个屏幕，此时就不那么好看了，接下来第二个案例在此基础上进行解决背景随内容占用

多个显示多个平铺图片背景。
5、在线演示：查看案例
二、解决内容多高body设置背景图片平铺显示多高

1、解决说明
我们只需要在CSS代码中对html加一个背景色即可，当然这个背景设置需要根据布局实际情况而设置，这

里因为背景颜色为“#E2E2E2”，此时我们就只需要对html设置一个CSS背景色为“#E2E2E2”即可解决实

现完美背景图片纵向从上到下平铺问题。
2、CSS代码：
@charset "utf-8";
/* DIVCSS5-CSS初始化模板-www.divcss5.com */
body, div {margin:0; padding:0;font-style: normal;font:12px/22px "\5B8B\4F53",Arial,

Helvetica, sans-serif}
/* \5B8B\4F53 代表宋体，更多中文字体转 Unicode http://www.divcss5.com/jiqiao/j325.shtml */
ol, ul ,li{list-style:none}
html{background:#E2E2E2}/* CSS注释说明：对html设置背景颜色 */
body{color:#FFF;background:#E2E2E2 url(bg.gif) repeat-y center 0; text-align:center}

.divbox{ margin:0 auto; width:274px; height:200px; background:#00F}
3、案例截图
css解决body背景图片平铺过于显示
解决body背景图片纵向平铺内容占多高背景图片显示多高
以上实现body设置从上到下平铺背景图片随html网页内容占多高显示多高紧贴内容方法，希望对大家有

用。
4、在线演示：查看案例
5、完整DIV+CSS案例打包下载
========

CSS div内放长英文字母或长数字自动换行 CSS一行排不下自动打断换行

CSS实现div放英文字母或数字自动换行 CSS一行排不下自动打断换行
在div css布局中，遇到连续英文字母或连续数字在div、p、h2、h1等盒子里排成一排显示不会自动随盒

子宽度限制而自动换行。这里DIVCSS5为大家介绍使用css样式简单实现DIV内放字母英文或数字自动换行

。
当然中文字在DIV或任意盒子中均会自动换行不需要CSS样式实现，只有连续的字母或数字会出现不自动

换行问题，所以需要CSS解决。
英文字母或数字在DIV不换行溢出DIV的问题效果截图
英文字母或数字在DIV不换行溢出DIV的问题效果截图
但通常很少出现在一个盒子里一排排不完的连续不断的字母或数字，当然出现就可以使用以下CSS DIV教

程来解决。
一、CSS解决

word-wrap:break-word
解释：使用break-word时，是将强制换行。
兼容各版本IE浏览器，兼容谷歌浏览器。
二、CSS自动换行实例代码与效果截图

1、完整HTML+CSS代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIVCSS5 CSS英文自动换行在线实例</title>
<style>
.divcss5{ border:1px solid #00F; height:120px; width:200px;word-wrap:break-word}
</style>
</head>
<body>
<div class="divcss5">
aabbfjdlkfldsjfldsjfldjfljdlafjldsjflkdjflkdsjfldfjdlj<br />
138787843748927493274392749327493
</div>
</body>
</html>
2、实例效果截图
DIV CSS英文字母自动换行 CSS数字自动换行效果截图
DIV CSS英文字母自动换行 CSS数字自动换行效果截图
3、在线演示
查看案例
4、打包下载代码
========

div浮动居中单div盒子和三列布局中间div盒子浮动居中方法

div浮动居中单div盒子和三列布局中间div盒子浮动居中方法，在CSS样式中float没有居中属性，如果左

中右布局的三个盒子如何让中间div盒子居中呢？单独的div对象又如何实现布局居中呢？
一、单独div布局居中

单div对象布局居中的实现，是提供对div盒子设置margin:0 auto样式即可实现居中。
1、div css完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>单独盒子居中</title>
<style>
.divcss5{ margin:0 auto; width:400px; height:80px; border:1px solid #00F}
</style>
</head>
<body>
<div class="divcss5">单div盒子居中</div>
</body>
</html>
2、div+css单独div实例效果截图
单独div实现布局居中截图
css实例效果截图
3、小结，这里为了观察到效果所以我们对此案例div加了边框、宽度、高度，并使用margin:0 auto实现
居中。
4、相关css div教程
1)、 div css居中条件
2)、 css居中
3)、 div水平居中
4)、 div居中代码
5)、 div css字体居中
6)、 html文字居中
二、三列中间div居中技巧方法

在三列div盒子布局中，最左边和最右边的div盒子可以通过使用float:left靠左和float:right靠右实现

左右布局，而中间的div盒子要在其左右中间排版，而float没有居中浮动的样式，只有通过float:left

和float:right实现居中布局。
通常对最左和中间的div设置float:left对最右的div设置float:right即可实现并列三列布局，但需要注

意三盒子设置宽度+设置css 边框+宽度+padding等样式总宽度一定要小于或等于外层的父级div宽度，不

然就会出现css错位兼容问题。
三列并列居中首先外层要设置一个div盒子，再到此对象里布局3个盒子实现css并列并排。
1、完整html+div+css代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>三列布局居中</title>
<style>
.divcss5{ margin:0 auto; width:400px; height:120px; border:1px solid #00F}
.divcss5-l{ float:left; width:120px; height:120px; border-right:1px solid #00F}
.divcss5-c{ float:left; width:158px;height:120px; background:#CCC}/* 这里宽度是400-120-120

-2 */
.divcss5-r{ float:right; width:120px;height:120px; border-left:1px solid #00F}
</style>
</head>
<body>
<div class="divcss5">
<div class="divcss5-l">左</div>
<div class="divcss5-c">中</div>
<div class="divcss5-r">右</div>
</div>
</body>
</html>
2、三列布局中中间css布局截图
三列中中间css div实现浮动居中布局效果截图
三列中中间div使用浮动实现居中布局效果截图
这里注意三个盒子宽度计算，在我们培训中也特别说明了盒子宽度计算方法技巧，这里中间div盒

子“.divcss5-c”divcss5实例中使用了float:left实现需要布局样式，使用浮动样式让div盒子居中。
3、在线演示：查看案例
4、html源代码+css实例的完整打包下载
========

div垂直居中 css div盒子上下垂直居中

div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水

平居中和上下垂直居中。
div垂直居中常用于单个盒子，如一个页面里只有一个登录布局，使用div css让这个登录布局水平和css

垂直居中。
这里介绍一种最简单兼容性最好的水平居中与上下垂直居中的方法。
1、具体实例代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>上下垂直居中在线演示 DIVCSS5</title>
<style>
#main {position: absolute;width:400px;height:200px;left:50%;top:50%;
margin-left:-200px;margin-top:-100px;border:1px solid #00F}
/*css注释：为了方便截图，对CSS代码进行换行*/
</style>
<body>
<div id="main">DIV水平居中和上下垂直居中</div>
</body>
</html>
这里设置一个“#main”对象样式，宽400px,高200px，使用了绝对定位position样式同时使用绝对定位

left和top，并且同时设置margin-top和margin-left,为了观察到效果，所以对此div盒子加了个红色边

框。
2、实例截图
div+css实现div对象同时上下垂直居中和水平居中截图
div+css实现div对象同时上下垂直居中和水平居中截图
3、水平垂直居中原理介绍
这里使用了绝对定位position:absolute，使用left和top设置对象距离上和左为50%，但如果设置50%，

实际上盒子是没有实现居中效果，所以又设置margin-left:-200px;margin-top:-100px;，这里有个技巧

是，margin-left的值是宽度一半，margin-top的值也是对象高度一半，同时设置为负，这样就实现了水

平和垂直居中。
相关CSS教程推荐：
1）、CSS图片居中
2）、html文字居中
3）、css字体居中
4)、div水平居中
5）、css字体垂直居中
6）、div css布局居中代码
7）、ie9文字字体垂直居中
4、在线演示：查看案例
========

div对齐 CSS实现DIV居中对齐 div居右对齐 div居左对齐

使用CSS浮动属性实现DIV各种对齐，比如DIV层左对齐，DIV居中对齐，DIV居右对齐等（DIV靠右居中

靠左对齐介绍篇）
实现DIV对齐用到关键属性有两个，一个为float一个为margin。
第一个float,可以让你div层居左居右对齐，另外一个margin实现div盒子居中对齐。
接下来DIVCSS5使用分别实例介绍DIV布局对齐。
为了过程DIV对齐变化，DIVCSS5设置3个DIV盒子，分别CSS 命名为“.divcss5-left”、“.divcss5-

right”、“.divcss5-cent”，同时设置三者宽度、高度、边框相同属性。
三者相同样式CSS代码：
width:250px; height:50px; border:1px solid #F00
一、div css布局之div左对齐

1、div左对齐条件与方法
只需要对要靠左对齐（局左）的div样式加float:left即可。
2、DIV+CSS布局完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>div对齐实例在线演示 DIVCSS5</title>
<style>
.divcss5-left{float:left;width:250px;height:50px;border:1px solid #F00}
</style>
</head>
<body>
<div class="divcss5-left">此DIV靠左对齐显示</div>
</body>
</html>
3、实例截图：
div居左对齐实例截图
div居左靠左对齐实例截图
二、居右靠右css+div实例

1、div右对齐条件与方法
只需要对要靠右对齐（局右）的div样式加float:right即可。
2、div css布局完整html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>div对齐实例在线演示 DIVCSS5</title>
<style>
.divcss5-right{float:left;width:250px;height:50px;border:1px solid #F00}
</style>
</head>
<body>
<div class="divcss5-right">此DIV靠右对齐显示</div>
</body>
</html>
3、靠右对齐实例截图

div css布局实现div居右对齐实例截图
css实现div居右对齐实例截图
二、div居中对齐css div实例

1、div居中对齐条件与方法
只需要对要居中对齐的div样式加margin:0 auto，不再需要加float样式。
因为float没有居中的浮动，所以我们需要去掉float样式，为了兼容各大浏览器让div居中对齐，我们需

要对div对应样式加margin:0 auto即可。
2、css+div布局完整HTML源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>div对齐实例在线演示 DIVCSS5</title>
<style>
.divcss5-cent{margin:0 auto;width:250px;height:50px;border:1px solid #F00}
</style>
</head>
<body>
<div class="divcss5-cent">此DIV居中右对齐显示</div>
</body>
</html>
3、css布局实例截图

div盒子居中对齐演示效果截图
div盒子居中对齐演示效果截图
四、演示与下载

1、在线演示：查看案例
========

10个必须要知道CSS DIV技巧

1.css font的简写规则

　　当我们写字体样式的时候，我们也许会这样子写
font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: verdana,serif
其实，这样写是完全多余的，我可以只用font 来写就OK了。
　　比如：
font: 1em/1.5em bold italic small-caps verdana,serif
2.把几个class属性写在一起

　　通常情况写，属性里面的class只有一个值，但这并不是意外着你只能给它
　　赋一个class名，我们可以赋2个以上。比如
<p class="text side">...</p>
　　不过，需要注意的是，class里面是用空格把他们分开来的，而不是“，”，这点需要注意一下。这

样运用了，那么text和side的class 就会运用到p元素中。
3.CSS的 border的默认值

　　border也就是边框的值，我在做项目开发的时候，很习惯的做法是：
border:1px solid red;
第一个指的是框的大小，第二个是指样式，第三个是指颜色。不过，这里3个并非都是必须要的

，必须要用的是border的样式。其余2个有默认值。
　　比如，你这样写：
border: solid
　　如果你这样写了，那么默认值第一个大小的默认值是：medium(相对于3px或4px左右)以及颜色指的

是文本里面的颜色。
4.!important 在IE中会被忽视

　　因为浏览器之间的不兼容性，我们在写css的时候，为了保证网站能在各个
　　浏览器之间保持兼容性，所以我们需要使用!important这个属性。
　　如果你在css使用了这个，那么它的优先级会比和它同名属性的优先级高。
　　这个是给除了给IE以外的浏览器用的。
　　比如
margin-top: 3.5em !important; margin-top: 2em
　　上面指的是，除IE之外的浏览器是3.5em，而IE是2em。这个很有用。
5.Image的alt属性

　　我们在网站开发的时候，我们常常被建议使用HTML标签来显示文本，而不是图像。这样可以使得网

站具有更快的加载速度以及可访问性。举个例子说，你开发了一个网站，你想在你网站的每一个页面的

页面顶端放一个"购买物品"。现在加入你是一个卖家，那么你很期望你的物品能被搜索引擎找到，也许

你会这么做：
<h1><img src="widget-image.gif" alt="购买物品" /></h1>
　　实现了，但是这里需要注意的是，搜索引擎并不会关注img标签alt里的关键字因为现在很多的卖家

都是这样子)，所以白搭。所以，我们可以用css来代替
　　如下：
<h1><span>购买物品</span></h1>
　　然后定义css：
h1
{
background: url(widget-image.gif) no-repeat;
}

h1 span
{
position: absolute;
left:-2000px
}
　　这样子就OK了，迎合了搜索引擎的口味。所以呀，搜索引擎真的伤不起呀。
6.盒模型hack问题

　　这个问题比较难，不过说实在话的现在用的机会也比较少。因为它涉及到IE5问题，现在谁敢说还在

用IE5?拉出去毙了。
　　不管如何，我们还了解一下总没有坏处。
　　IE5和其他浏览器(IE 6+ 以及chrome等等)对边框的计算是不一样的呢，怎么说呢?请看下图
CSS DIV盒子截图
CSS盒子模型

css盒子模型
DIVCSS盒子
图1是我们现在正确的理解，就是说整个box盒子的width的值是：内容的width+padding+boder 3个值的

相加。
　　然而，在IE5中不是这样子的哦，请看上图，它的内容只有170px。所以这就出现了问题了。
　　比如代码说明：
#sidebar {

width: 200px;

padding: 10px;

border: 5px solid black;

}
　　把宽度设定为200像素,但是侧边栏实际需要230像素的空间,除了IE5 for Windows以外. IE5 for

Windows 里侧边栏总共会占用200像素,把内补丁和边框都算在里面.图2 显示的是当width属性指定为200

像素时,边框和内补丁会占用内容空间,而不是内容空间之外.
　　对IE5 for Windows来说,则需要把宽度指定为230像素(加上两侧内补丁和边框的宽度),接着再以200

像素覆盖回来,让符合标准的浏览器得到正确的宽度.
#sidebar {

padding: 10px;

border: 5px solid black;

width: 230px; /* for IE5/Win */

voice-family: "\"}\"";

voice-family: inherit;

width: 200px; /* actual value */

}
　　留意IE5 for Windows的值先出现,接着几条让IE5 for Windows认为声明已经结束的规则,在此我们

使用voice-family属性,原因单纯只是浏览器认得它的话也不会改变视觉效果,最后指定实际的宽度,覆盖

最初的width规则,第二个width规则会被IE5 for Windows忽略.
　　结果在IE5 for Windows以及其他所有兼容CSS2的浏览器上看起来应该完全相同.没有使用这个hack

的话,IE5 for Windows的使用者就会看到比设计还瘦的栏宽。
7.块级元素的居中效果

　　块级元素?你不会这个都不懂了。不懂，我就罗嗦一下，就是指div、h1、table这类元素。相对应的

就是inline元素了，比如label等等。
　　通俗点就是，一个会占一行(当然在没有其他属性的支持下)，另一个不会。OK。
　　一般来说，对div居中，我都会写下面的写法：
#content

{

width: 700px;

margin: 0 auto;

}
　　然后，我们很高兴的就能在正常的浏览器到效果，请注意，我说了正常2个子，那这也说明，有不

正常的情况下?什么情况呢?和上面的第六点一样，也是IE5的问题，在IE5下面，它根本就不懂这个，你

说它能解决问题嘛?。
　　所以，我们只好按照下面的来实现：
body

{

text-align: center;

}

#content

{

text-align: left;

width: 700px;

margin: 0 auto;

}
　　OK，就样就能很好的兼容了。
8.垂直调整(vertical aligning)

　　当我们在使用table的时候，如果我们需要把一列的内容居中排列怎么做?不用问，我们理所当然的

是，用下面的这行句话：
　　vertical-align: middle
　　很多时候，这样可以工作，可总有例外。比方说，你现在有一个导航菜单，它的高度是2em，如果你

插入这个命令的话，sorry，它不会进行执行，并且会把文字放到顶端。
　　那怎么解决呢?很简单。
　　你只需要把box模型的的高度的line-height指定成一样就可以了。如下：
　　line-height: 2em
9.绝对定位和相对定位

　　这个应该是在css教程里比较难的部分吧，一下子也真的很难说清楚，有兴趣的可以找找资料看。给

个例子：
<style>
#container { position: relative }
</style>
<div id="container"><div id="navigation">...</div></div>
　　接着我设定里面navigation的样式
#navigation

{

position: absolute;

left: 30px;

top: 5px

}
　　这个说明了里面的navigationo相对于外面的来说进行CSS定位。
10.不需要给背景图片路径加引号

　　比如：
background:url("images/***.gif") #333;
　　你应该把CSS background属性引号去掉
background:url(images/***.gif) #333;
　　如果你加了引号，反而会引起一些浏览器的错误。
========

网页中使用h1、h2、h3标签的好处

在制作网页的时候我们要习惯用一些标签，虽然使用这些标签我们还需要对他的CSS样式进行设置，但是

为了网站的SEO方面我们尽量适应。
<h1>标签具有标题意思，一个网页唯一标题的意思，对于搜索引擎来说遇到此标签说明此标签内内容有

点重要，所以有让搜索引擎知道此处具有重要性内容，这个网页也是围绕此标题内容进行或相关的内容

，我们把关键字放入此标签在某种程度说我们通过浏览器看起效果没什么不同但是对于搜索引擎优化

（SEO）具有好处。
<h2>和<h3>标签在一个网页中就不像<h1>标签那样唯一性，但是也说明此两个标签内内容也重要，我们

在制作网页时候可以适当加入此标签。
h1标签是否可以在一个网页（html）里出现多次（以<h1>开始以</h1>闭合结束，这样算一组，算出现一

次）？答案是不能因为h1在一个网页中具有唯一的意思，所以只能用一次，假如我们用多次，给搜索引

擎来说不知道此页面重点是什么一样。
h2和h3比起h1来说就没有唯一意思，所以可以在一个页面中适当使用几次。
通过h1,h2,h3,b加粗等方式可以使得一个网页在搜索引擎看了有层次和重点，更符合SEO优化，有利于搜

索引擎排名。
特别说明h1,h2,h3的样式（如文字大小等）可以通过CSS样式设置来设定，以便于美化网页。
浏览过此页用户还浏览以下内容：
1、浅谈DIV+CSS设计开发对SEO优化的影响
2、seo优化ul li标签使用重要性
========

制作网页前初始化CSS必要性

每次制作网页时候我们都应该对此网页的CSS或Html中标签进行必要的初始化。
为什么要初始化CSS呢，有什么作用？
每次新开发网站或新网页时候我们通过初始化CSS样式的属性，为我们将用到的CSS或html标签更加方便

准确。假如我们不初始化CSS样式属性，将会增大CSS代码量，为我们节约网页代码，节约网页下载时间

；还会使得我们开发网页内容时更加方便简洁，不用考虑很多。如果不初始化CSS我们在开发比较复杂的

网页时候就不会知道自己是否已经设置了此处的CSS属性，是否和前面的CSS属性相同，是否统一整个网

页的风格和样式。
需要初始化地方有哪些：
大致一般需要初始化有h1到h4标签、table、文字大小、文字没有链接颜色、超链接样式、DIV、居中、

ol、 ul、li、img等等的样式，这里我们总结了初始化后CSS文件或叫CSS模板供大家参考使用，可根据

自己实际增减。
阅读本文的人还阅读以下相关文章：
CSS模板与HTML模板
========

CSS中min-height使用技巧

DIV+CSS中最小高度设定min-height设定
最小高度可以设定一个BOX的最小高度，当其内容较少时时，也能保持BOX的高度为一定，超出就自动向

下延伸，但到目前为止，只有Opera 和 Mozilla 支持，IE7以上版本支持，如何在现有基础上（IE6 80

-90%），合理、妙用最小高度了？
假定有二个BOX（box1和box2），我们都设置最小高度为150PX。
以下是引用CSS片段：
div.box1,div.box2{width: 300px; min-height: 150px;background: #EEE;float: left;margin-

right: 20px;}
以下是引用HTML源代码片段：
<div class="box1">IE6中没保持最小高度为150px</div>
<div class="box2">所有IE支持保持最小高度为150px</div>
现在的效果，IE6及部分IE7版本中没保持最小高度为150px。
解决的方法
提供css hack来设定IE6高度
以下是引用CSS片段：
div.box1,div.box2{width: 300px; min-height: 150px;background: #EEE;float: left; margin-

right: 20px;}
div.box2{*height:auto !important;*height:150px; min-height: 150px;}
以上是通过对box2设置说明如下：
*height:auto !important;*height:150px;来区别IE6,IE7,及其它浏览器来实现兼容最小高度-你可能需

要了解CSS hack之区别不同浏览器的写法。
通过以上div+css实例希望你能了解各浏览器支持最小高度（min-height:）方法，这里用了css hack方

法来区别ie6和部分ie7中不支持min-height方法。
查看min-height在线演示
========

CSS命名规范与团队合作

CSS命名规范与团队合作的重要性
随着以后的趋势从现在的html4+css2.0到html5+css3.0的发展升级，现在的css命名规范显得相当重要了

，当然发展到html 5+css 3.0完全兼容至少还需要5-8年时间，但是现在可以从点滴积累做起。

html5+css3.0完全兼容至少还需要5-8年时间是怎么得来的，可以推算从IE6到现在IE8的发展，而现在还

有很多用户在使用IE6浏览器，IE6现在还没有被微软淘汰或不能使用，从ie6开始到现在也经历了大概有

8年时间，可想如果要发展到html5+css3.0各个浏览器都兼容至少需要8年时间。
CSS命名规范重要性
1、为以后html5+css3.0发展方向打下基础。
现在命名头部、底部等大家习惯用 header、footer来命名，最终html调用css样式既是<div

class="header">这种形式，以后html5+css3.0标准将是直接用<header>标签来表示头部部分了，所以为

以后版本升级规范有一定好处，虽然达到兼容html5+css3.0浏览器还早，但是可以为div+css开发者来说

可以先注意一下。
2、css命名规范可以节约团队开发时间。
特别在团队合作开发网站项目中，大家规范的来制作一套共识的css命名，将节约开发时间及成本，如果

开发项目中div+css开发者乱命名css，将给后来的程序员的解读带来不便。
3、css命名规范可为以后维护带来方便
Div+css开发好后网站项目制作好后，很难保证以后不调整及优化，这样自己没有自己一套css命名特点

，将为自己以后的维护带来不便。
总结：
无论是考虑团队开发、以后的维护、html5+css3的升级，DIV CSS开发伪类的命名都相当重要。
现在通常我们都是在html 4.0 和css 2.0基础上开发的div+css符合w3c标准的网站，至于html 5+css

3.0可以了解，如果要运用至少又将等几年，等浏览器IE6-IE8的淘汰不能使用，这时我们将合理的运用

html 5+css 3.0 。
========

div css隐藏内容样式方法

div+css隐藏内容方法
一般情况下，css隐藏的用途,如下：
1、对文本的隐藏
2、隐藏超链接（另类黑链）
3、对统计代码隐藏
4、隐藏超出图片
5、css隐藏滚动条
6、css隐藏div层
一、使用css隐藏方法用到CSS样式单词及对应解释

1、使用display:none;来隐藏所有信息（无空白位占据）推荐，CSS display手册查看
2、使用overflow:hidden;来隐藏溢出的文字或图片适用推荐，css overflow手册查看
3、使用overflow-y:hidden;和overflow-x:hidden控制滚动条的隐藏与否，css overflow-y手册查看，

css手册查看overflow-x
二、常见div css隐藏案例

1、css隐藏DIV及内容，完全隐藏内容与布局
解释：使用CSS单词display:none;完全隐藏文本及图片
<div style="display:none;">你是看不见我的</div>
使用div 中css样式display:none;将使得div内的内容隐藏通过浏览器什么也看不见，并且隐藏的内容也

不会占用空间，通常用于JS特效隐藏、隐藏统计代码显示图标。
扩展阅读：
1）、通过对象盒子设置缩进样式（text-indent:-9999px）方法可以隐藏超链接文本内容
2）、隐藏图片上方文字
进入了解更详细：css隐藏div html内容
2、overflow: hidden 隐藏溢出DIV内容或图片
实例代码如：
我是可以看见的<br/><br/>
<div style="overflow: hidden; width:30px; height:20px;">你是看不见我的。</div>
<br/>
同样我也是可以看见的
案例截图：

隐藏溢出内容截图
使用css样式通过对“你是看不见我的”div css层设置固定的高和宽，然后通过overflow: hidden样式

即可使得超出（溢出）固定的高宽内容隐藏同时也不占用被隐藏地方位置。
进入了解更详细：css隐藏溢出DIV的内容
3、css隐藏滚动条
使用overflow-y:hidden;和overflow-x:hidden来隐藏或显示对应横或竖方向的滚动条。此案例可以进入

css手册的overflow-y和css在线手册的overflow-x有详细的讲解对滚动条的设置隐藏或显示方法。
扩展阅读：
1、css隐藏图片上文字
========

12 个 CSS 高级技巧汇总

使用 :not() 在菜单上应用/取消应用边框
给body添加行高
所有一切都垂直居中
逗号分隔的列表
使用负的 nth-child 选择项目
对图标使用SVG
优化显示文本
对纯CSS滑块使用 max-height
继承 box-sizing
表格单元格等宽
用Flexbox摆脱外边距的各种hack
使用属性选择器用于空链接
使用 :not() 在菜单上应用/取消应用边框

先给每一个菜单项添加边框

/* add border */
.nav li {
border-right: 1px solid #666;
}
……然后再除去最后一个元素……

//* remove border */

.nav li:last-child {
border-right: none;
}
……可以直接使用 :not() 伪类来应用元素：

.nav li:not(:last-child) {
border-right: 1px solid #666;
}
这样代码就干净，易读，易于理解了。

当然，如果你的新元素有兄弟元素的话，也可以使用通用的兄弟选择符（~）：

..nav li:first-child ~ li {

border-left: 1px solid #666;
}
给 body添加行高

你不需要分别添加 line-height 到每个 <p>，<h*>等。只要添加到 body 即可：

body {
line-height: 1;
}
这样文本元素就可以很容易地从 body 继承。

所有一切都垂直居中

要将所有元素垂直居中，太简单了：

html, body {
height: 100%;
margin: 0;
}

body {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
}
看，是不是很简单。

注：在IE11中要小心flexbox。

逗号分隔的列表

让HTML列表项看上去像一个真正的，用逗号分隔的列表：

ul > li:not(:last-child)::after {
content: ",";
}
对最后一个列表项使用 :not() 伪类。

使用负的 nth-child 选择项目

在CSS中使用负的 nth-child 选择项目1到项目n。

li {
display: none;
}

/* select items 1 through 3 and display them */
li:nth-child(-n+3) {
display: block;
}
就是这么容易。

对图标使用SVG

我们没有理由不对图标使用SVG：

.logo {
background: url("logo.svg");
}
SVG对所有的分辨率类型都具有良好的扩展性，并支持所有浏览器都回归到IE9。这样可以避

开.png、.jpg或.gif文件了。

优化显示文本

有时，字体并不能在所有设备上都达到最佳的显示，所以可以让设备浏览器来帮助你：

html {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
注：请负责任地使用 optimizeLegibility。此外，IE /Edge没有 text-rendering 支持。

对纯CSS滑块使用 max-height

使用 max-height 和溢出隐藏来实现只有CSS的滑块：

.slider ul {
max-height: 0;
overlow: hidden;
}

.slider:hover ul {
max-height: 1000px;
transition: .3s ease;
}
继承 box-sizing

让 box-sizing 继承 html：

html {
box-sizing: border-box;
}

*, *:before, *:after {
box-sizing: inherit;
}
这样在插件或杠杆其他行为的其他组件中就能更容易地改变 box-sizing 了。

表格单元格等宽

表格工作起来很麻烦，所以务必尽量使用 table-layout: fixed 来保持单元格的等宽：

.calendar {
table-layout: fixed;
}
用Flexbox摆脱外边距的各种hack

当需要用到列分隔符时，通过flexbox的 space-between 属性，你就可以摆脱nth-，first-，和 last-

child 的hack了：

.list {
display: flex;
justify-content: space-between;
}

.list .person {
flex-basis: 23%;
}
现在，列表分隔符就会在均匀间隔的位置出现。

使用属性选择器用于空链接

当 <a> 元素没有文本值，但 href 属性有链接的时候显示链接：

a[href^="http"]:empty::before {
content: attr(href);
}
相当方便。

支持

这些高级技巧在Chrome、Firefox、Safari、Edge的当前版本，以及IE11中都能有效工作。

========

二十个最常用的CSS经典技巧

1、CSS字体属性简写规则

一般用CSS设定字体属性是这样做的：

font-weight: bold;
font-style: italic;
font-varient: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif
但也可以把它们全部写到一行上去：

font: bold italic small-caps 1em/1.5em verdana,sans-serif
真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。

而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记

上。

2、同时使用两个类

一般只能给一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你可以这样：

<p class="text side">...</p>
同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它

们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。

3、CSS border的缺省值

通常可以设定边界的颜色，宽度和风格，如：

border: 3px solid #000
这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。

如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个

像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。

4、CSS用于文档打印

许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。

也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：

<link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen" />

<link type="text/css" rel="stylesheet" href="printstyle.css" media="print" />
第1行就是显示，第2行是打印，注意其中的media属性。

但应该在打印CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS

设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一

些导航按钮。要想了解更多，可以看“打印差异”这一篇。

5、图片替换技巧

一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一

些特殊字体时，就只能用图片了。

比如你想整个卖东西的图标，你就用了这个图片：

<h1><img src="widget-image.gif" alt="Buy widgets" /></h1>
这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许

多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的：

<h1>Buy widgets</h1>
但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS：

h1
{
background: url(widget-image.gif) no-repeat;
height: image height
text-indent: -2000px
}
注意把image height换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定

了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说

，可能全部看不到了，这点要注意。

6、CSS box模型的另一种调整技巧

这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。比如

：

#box
{
width: 100px;
border: 5px;
padding: 20px
}
这样调用它：

<div id="box">...</div>
这时盒子的全宽应该是150点，这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样

的浏览器上，它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。

但用CSS也可以达到同样的目的，让它们显示效果一致。

#box
{
width: 150px
}

#box div
{
border: 5px;
padding: 20px
}
这样调用：

<div id="box"><div>...</div></div>
这样，不管什么浏览器，宽度都是150点了。

7、块元素居中对齐

如果想做个固定宽度的网页并且想让网页水平居中的话，通常是这样：

#content
{
width: 700px;
margin: 0 auto
}
你会使用 <div id="content"> 来围上所有元素。这很简单，但不够好，IE6之前版本会显示不出这种效

果。改CSS如下：

body
{
text-align: center
}

#content
{
text-align: left;
width: 700px;
margin: 0 auto
}
这会把网页内容都居中，所以在Content中又加入了

text-align: left;
8、用CSS来处理垂直对齐

垂直对齐用表格可以很方便地实现，设定表格单元 vertical-align: middle 就可以了。但对CSS来说这

没用。如果你想设定一个导航条是2em高，而想让导航文字垂直居中的话，设定这个属性是没用的。

CSS方法是什么呢？对了，把这些文字的行高设为 2em：line-height: 2em ，这就可以了。

9、CSS在容器内定位

CSS的一个好处是可以把一个元素任意定位，在一个容器内也可以。比如对这个容器：

#container
{
position: relative
}
这样容器内所有的元素都会相对定位，可以这样用：

<div id="container"><div id="navigation">...</div></div>
如果想定位到距左30点，距上5点，可以这样：

#navigation
{
position: absolute;
left: 30px;
top: 5px
}
当然，你还可以这样：

margin: 5px 0 0 30px
注意4个数字的顺序是：上、右、下、左。当然，有时候定位的方法而不是边距的方法更好些。

10、直通到屏幕底部的背景色

在垂直方向是进行控制是CSS所不能的。如果你想让导航栏和内容栏一样直通到页面底部，用表格是很方

便的，但如果只用这样的CSS：

#navigation
{
background: blue;
width: 150px
}
较短的导航条是不会直通到底部的，半路内容结束时它就结束了。该怎么办呢？

不幸的是，只能采用欺骗的手段了，给这较短的一栏加上个背景图，宽度和栏宽一样，并让它的颜色和

设定的背景色一样。

body
{
background: url(blue-image.gif) 0 0 repeat-y
}
此时不能用em做单位，因为那样的话，一旦读者改变了字体大小，这个花招就会露馅，只能使用px。

再来10个你可能不知道的CSS技巧

11、Block和inline元素对比

所有的HTML元素都属于block和inline之一。block元素的特点是：

总是在新行上开始；

高度，行高以及顶和底边距都可控制；

宽度缺省是它的容器的100%，除非设定一个宽度

<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。相反地，inline元素的特点是：

和其他元素都在一行上；

高，行高及顶和底边距不可改变；

宽度就是它的文字或图片的宽度，不可改变。

<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

用code class="inline">display: inline 或display: block命令就可以改变一个元素的这一特性。什

么时候需要改变这一属性呢？

让一个inline元素从新行开始；

让块元素和其他元素保持在一行上；

控制inline元素的宽度（对导航条特别有用）；

控制inline元素的高度；

无须设定宽度即可为一个块元素设定与文字同宽的背景色。

12、再来一个box hack方法

之所以有这么多box hack方法，是因为IE在6之前对box的理解跟别人都不一样，它的宽度要包含边线宽

和空白。要想让IE5等同其他浏览器保持一致，可以用CSS的方法：

padding: 2em;
border: 1em solid green;
width: 20em;
width/**/:/**/ 14em;
第一个宽度所有浏览器都认得，但IE5.x不认得第2行的宽度设置，只因为那一行上有空白的注释符号（

多么蠢的语法分析！），所以IE5.x就用20减掉一些空白，而其他浏览器会用14这个宽度，因为它是第2

行，会覆盖掉第1行。

13、页面的最小宽度

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直

正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把

一个<div> 放到 <body> 标签下，然后为div指定一个类：

<body>
<div class="container“>
然后CSS这样设计：

#container
{
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文

档不太正规。它实际上通过Javascript的判断来实现最小宽度。

同样的办法也可以为IE实现最大宽度：

#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth >

1200? ”1200px“ : ”auto");
}
14、IE与宽度和高度的问题

IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，

如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下

面根本等于没有设置宽度和高度。

比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：

.box
{
width: 80px;
height: 35px;
}

html>body .box
{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}
所有的浏览器都可以使用第一个box设置，但IE不认得第2段设置，因为其中用到了子选择器命令。第2个

设置更特殊些，所以它会覆盖掉第1个设置。

15、字体变形命令

text-transform 命令很有用，它有3个值：text-transform: uppercase, text-transform: lowercase

和 text-transform: capitalize。第1个会把文字变成全大写，第2个变成全小写，第3个变成首字母大

写。这对拼音文字非常有用，即使输入时有大小写错误，在网页上也看不到。

16、IE中图片文字消失的问题

有时会遇到文字或背景图突然消失的问题，刷新一下又出现了，这在靠近漂浮元素时更容易发生（注：

没见过）。此时，可以为消失的元素设定： position: relative ，如果不行，再考虑为这些元素指定

一个宽度试试。

17、不可见文字

不论因为何种原因希望某些网页文字不在浏览器中显示，比如为了打印或为了小屏幕而让某些文字不显

示，都可以用 display: none 。这非常简单，但有时对某些人这有点没用，他们能去掉这个控制，这时

就要用到： position: absolute; left: -9000px 。

这实际上是把文字指定在页面以外显示。

18、为手持设备设计专门的CSS

也就是手机／PDA等小屏幕用户，可以专门设计一个CSS来让网页显示更舒服些。为此，可以把浏览器窗

口调整到150点宽来看效果。指定专门的手持设备的CSS的语法是：

<link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld" />
也可以阅读专门的手持设备可用性。

19、3D效果的按钮

以前要想制作带有3D效果，并且点击下去还会变化的按钮，就得用图片替换的方法，现在CSS就可以了：
a
{
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}

a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}
至于效果，还可以自己调整了。

20、在不同页面上使用同样的导航代码

许多网页上都有导航菜单，当进入某页时，菜单上相应这一项就应该变灰，而其他页亮起来。一般要实

现这个效果，需要写程序或专门为每一页做设计，现在靠CSS就可以实现这个效果。

首先，在导航代码中使用CSS类：

<ul>
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="about">About us</a></li>
<li><a href="#" class="contact">Contact us</a></li>
</ul>
然后分别为每一页的Body指定一个id，和上面类同名。如<body id="contact">。

然后设计CSS如下：

#home .home, #about .about, #about .about
{
commands for highlighted navigation go here
}
这里，当id设为home时，.home就会起作用，也就是class设为home的那一行导航条就会显示出特殊效果

来。其他页也是如此。
========