一起CSS

HTML 4 标签：h1-h6,p,ul,ol,dl…即使没有给他们定义样式属性值，他们在浏览器中显示时，也会具有各种样式属性(主要是字体大小和各种间距)。这是因为它们各自有自己的默认样式，或者是浏览器给它定义了默认样式。各种版本的浏览器给他们定义的默认样式可能略有差别，下面列举的一些常见标签自身默认样式和在 Firefox 1.5 和 IE6/7 中的默认样式。

HTML样式

html, address,blockquote,body, dd, div,dl, dt,
fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6,
noframes,ol, p, ul, center,dir, hr, menu, pre { display: block }
/*以上均为块状显示，未列出为内联元素显示，部分元素在XHTML1中将废弃*/
li { display: list-item }/*默认以列表显示*/
head { display: none }/*默认不显示*/
table { display: table }/*默认为表格显示*/
tr { display: table-row }/*默认为表格行显示*/
thead { display: table-header-group }/*默认为表格头部分组显示*/
tbody { display: table-row-group }/*默认为表格行分组显示*/
tfoot { display: table-footer-group }/*默认为表格底部分组显示*/
col { display: table-column }/*默认为表格列显示*/
colgroup { display: table-column-group }/*默认为表格列分组显示*/
td, th { display: table-cell; }/*默认为单元格显示*/
caption { display: table-caption }/*默认为表格标题显示*/
th { font-weight: bolder; text-align: center }
/*默认为表格标题显示，呈现加粗居中状态*/
caption { text-align: center }/*默认为表格标题显示，呈现居中状态*/
body { margin: 8px; line-height: 1.12 }
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu { margin: 1.12em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4, h5, h6, b,strong { font-weight: bolder }
blockquote { margin-left: 40px; margin-right: 40px }
i, cite, em,var, address { font-style: italic }
pre, tt, code, kbd, samp { font-family: monospace }
pre { white-space: pre }
button, textarea, input, object, select { display:inline-block; }
big { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub { vertical-align: sub }/*定义sub元素默认为下标显示*/
sup { vertical-align: super }/*定义sub元素默认为上标显示*/
table { border-spacing: 2px; }
thead, tbody, tfoot { vertical-align: middle }
/*定义表头、主体表、表脚元素默认为垂直对齐*/
td, th { vertical-align: inherit }
/*定义单元格、列标题默认为垂直对齐默认为继承*/
s, strike, del { text-decoration: line-through }
/*定义这些元素默认为删除线显示*/
hr { border: 1px inset }/*定义分割线默认为1px宽的3D凹边效果*/
ol, ul, dir, menu, dd { margin-left: 40px }
ol { list-style-type: decimal }
ol ul, ul ol, ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
u, ins { text-decoration: underline }
br:before { content: "A" }/*定义换行元素的伪对象内容样式*/
:before, :after { white-space: pre-line }/*定义伪对象空格字符的默认样式*/
center { text-align: center }
abbr, acronym { font-variant: small-caps; letter-spacing: 0.1em }
:link, :visited { text-decoration: underline }
:focus { outline: thin dotted invert }
 /* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }
/*定义BDO元素当其属性为DIR="ltr"时的默认文本读写显示顺序*/
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }
/*定义BDO元素当其属性为DIR="rtl"时的默认文本读写显示顺序*/
*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }
/*定义任何元素当其属性为DIR="ltr"时的默认文本读写显示顺序*/
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }
/*定义任何元素当其属性为DIR="rtl"时的默认文本读写显示顺序*/
@media print { /*定义标题和列表默认的打印样式*/
    h1 { page-break-before: always }
    h1, h2, h3,    h4, h5, h6 { page-break-after: avoid }
    ul, ol, dl { page-break-before: avoid }
}

浏览器默认样式

1、页边距

IE 默认为 10px，通过 body 的 margin 属性设置；FF 默认为 8px，通过 body 的 padding 属性设置。要清除页边距一定要清除这两个属性值：

body {
	margin-top:0;
	margin-bottom:0;
}

2、段间距

IE 默认为 19px，通过 p 的 margin-top 属性设置；FF 默认为 1.12em，通过 p 的 margin-bottom 属性设。p 默认为块状显示，要清除段间距，一般可以设置：

p {
	margin-top:0;
	margin-bottom:0;
}

3、列表样式

IE 默认为 40px，通过 ul、ol 的 margin 属性设置；FF 默认为 40px，通过 ul、ol 的padding 属性设置。dl 无缩进，但起内部的说明元素dd 默认缩进 40px，而名称元素 dt 没有缩进。要清除列表样式，一般可以设置：

ul, ol, dd {
	list-style-type:none;/*清除列表样式符*/
	margin-left:0;/*清除IE左缩进*/
	padding-left:0;/*清除非IE左缩进*/
}

4、元素居中

IE 默认为 text-align:center ；FF 默认为 margin-left:auto;margin-right:auto 。

5、鼠标样式

IE 默认为 cursor:hand ；FF 默认为 cursor:pointer 。该声明在IE中也有效。

更详细的介绍，您可以查看这里：http://www.w3.org/TR/CSS21/sample.html

文章整理自网络

相信大家都知道html和css，知道html结构和css表现分离，知道html语义化，这些都是这几年的热门关键字。语义化的html在国内也是一两年前才开始被追捧的，看看现在群里谈论的html结构，关于html结构的面试题，语义化的html占据了很大一部分。那么为什么要使用语义化的HTML？语义化的HTML到底有什么好处呢？

HTML是提供网页文档内容的上下文结构和含义；html本身是没有表现的，我们看到例如<h1>是粗体，字体大小2em，加粗；<strong>是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以首先我们要知道html和页面的表现是没有关系的，这些是css的事情。HTML在页面中的作用就是结构和含义，通俗点说就是划分内容，这里放什么，我们放的是什么。

语义化的HTML结构首先要强调HTML结构

HTML结构是页面的骨架，一个页面就好像一幢房子，HTML结构就是钢精钢筋混泥土的墙，一幢房子如果没有钢精钢筋混泥土的墙那就是一堆费砖头，不能住人，不能办公。css是装饰材料，是原木地板，是大理石，是油漆，是用来装饰房子的，CSS的强大就不用多说了，css如果没有html结构那就是一堆木板，一同油漆，没有了实际使用价值。CSS完全依靠引用它的(X)HTML文档。如果你想使CSS的能力充分发挥到极致，提供一个用既干净又有结构的内容的html是非常必要的，“HTML是在互联网上发布超文本的通用语……HTML使用标签来对文本结构化”

语义化的HTML结构怎么写？

HTML是一种对文本内容进行结构和意义（或者说“语义”）进行补充的方法。它会告诉我们说：“这行是一个标题，这几行组成了一个段落。这些文字是项目列表，这些文字是链接到互联网上另一个文件的超链接。”值得注意的是，不应该让HTML来告诉我们：“这些文字是蓝色的，这些文字又是红色的。这部分内容是最最靠右的一栏，这行内容是斜体字。”这些和表现相关的信息是CSS的工作。在做前端开发的时候要记住：HTML告诉我们一块内容是什么（或其意义），而不是它长的什么样子。当我们提到“语义标记”的时候，我们所说的HTML应该是完全脱离表现信息的，其中的标签应该都是语义化地定义了文档的结构。

写语义化的HTML结构其实很简单，首先掌握html中各个标签的语义，<div>是一个容器；<strong>是表示强调；<ul><li>是一个无序列表等等…在看到内容的时候想想用什么标签能更好的描述它，是什么就用什么标签。

语义化的HTML结构到底有什么好处？

我们知道HTML5新增的标签，比如<header>和<footer>，html正在朝着更加健壮的语义化的HTML结构发展，xhtml2在这点上没html5先进，这也是xhtml2死亡的一个原因，这一点也说明了语义化的HTML结构是html的发展趋势。

1.去掉或样式丢失的时候能让页面呈现清晰的结构

html本身是没有表现的，我们看到例如<h1>是粗体，字体大小2em，加粗；<strong>是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。

2.屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页

例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对它完整发音。

3.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）

使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的任务是符合设备本身的条件来渲染网页.

语义标记为设备提供了所需的相关信息,就省去了你自己去考虑所有可能的显示情况（包括现有的或者将来新的设备）.例如,一部手机可以选择使一段标记了标题的文字以粗体显示.而掌上电脑可能会以比较大的字体来显示.无论哪种方式一旦你对文本标记为标题,您就可以确信读取设备将根据其自身的条件来合适地显示页面.

4.搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重

过去你可能还没有考虑搜索引擎的爬虫也是网站的“访客”,但现在它们他们实际上是极其宝贵的用户.没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问。

5.你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记

因此,如果页面文件的标题被标记,而不是,那么这个页面在搜索结果的位置可能会比较靠后.除了提升易用性外,语义标记有利于正确使用CSS和JavaScript,因为其本身提供了许多“钩钩”来应用页面的样式与行为。SEO主要还是靠你网站的内容和外部链接的。

6.便于团队开发和维护

W3C给我们定了一个很好的标准，在团队中大家都遵循这个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现实现模块化开发。

如有不同观点，补充，欢迎留言讨论。

文章转载自：WEB前段开发

原文地址：http://www.css88.com/archives/1668

最近做一个网站，需要用上一个大幅点的幻灯片，幻灯片这东西网上一搜一大把，所以就想去“淘”一个，省点工夫，但"淘"了好一些都不满意，不是太老土、不美观，就是不兼容或到不到想要的结果等等，最后决定自己就写了一个。 看看代码咯。

XHTML 代码：

<div id="slide">
	<a href="#" id="this_a"><img src="images/1.jpg" id="this_pic" alt="" /></a>
	<ul id="pic_list">
		<li><a href="http://www.qq.com"><img src="images/1.jpg" alt="" /></a></li>
		<li><a href="http://www.sina.com"><img src="images/2.jpg" alt="" /></a></li>
		<li><a href="http://www.163.com"><img src="images/3.jpg" alt="" /></a></li>
		<li><a href="http://www.baidu.com"><img src="images/4.jpg" alt="" /></a></li>
		<li><a href="http://www.17css.com"><img src="images/5.jpg" alt="" /></a></li>
	</ul>
	<span id="transparence"></span>
</div>

说明：#slide是最外面的容器，#this_pic是要显示的大图，#pic_list是图片缩略图，#transparence是一个半透明的层，因为想给#pic_list和里的缩略图应用半透明效果，但半透明效果会继承，无法更改，所以模拟了这个层。

CSS 代码：

#slide {
	position:relative;
	width:740px;
	height:240px;
	margin:20px auto;
}
#pic_list {
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	list-style: none;
	overflow:hidden;
	z-index:2;
}
#pic_list li {
	float:left;
	width:100px;
	height:52px;
	padding-top:10px;
}
#pic_list li img {
	position:absolute;
	top:18px;
	width:65px;
	height:35px;
	margin:0 20px;
	border:1px solid #fff;
}
#this_pic {
	position:absolute;
	width:100%;
	height:100%;
	border:none;
}
#transparence {
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:50px;
	border-top:1px solid #fff;
	background:#000;
	z-index:1;
}

jQuery 代码：

$(function (){
	$('#pic_list img').mouseover(function(){
	//如果鼠标移到的缩略图的地址和大图地址相等，则返回
	if($('#this_pic').attr('src') == $(this).attr('src')) return;
		//大幅图片淡出
		$('#this_pic').fadeOut(0).fadeIn(500).attr('src',$(this).attr('src'));
		//把缩略图的链接地址传给大图的链接
		$('#this_a').attr('href',$(this).parents('a').attr('href'));
		//除此之外的缩略图位置和半透明还原
		$(this).parents('li').nextAll('li').find('img').animate({top:18,opacity:0.6},500);
		$(this).parents('li').prevAll('li').find('img').animate({top:18,opacity:0.6},500);
		//当前的缩略图上升动画效果
		$(this).animate({top:0},500).css('opacity','1');
	});
});
//初始化
$(function(){
	//模拟层半透明
	$('#transparence').css('opacity','0.4');
	//所有缩略图半透明
	$('#pic_list img').css({'opacity':'0.6'});
	//第一张缩略图的位置和不透明
	$('#pic_list img:eq(0)').css({'top':'0','opacity':'1'});
	//阻止缩略图链接
	$('#pic_list a').click(function(){return false});
});

为了通过验证，把半透明的代码写在 JS 里，半透效果的 CSS 代码不能通过验证就不用说了吧，而且要兼容浏览器得写三句。

查看Dome

代码不多，但效果我觉得还可以。如果您觉得有什么地方不够好，或有更好的实现方法，欢迎留言。

margin 叠加是什么？就是当垂直外边距相遇时，它们将叠加，叠加的高度取较大的。下面按各种情况及附图来说明。

当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加，如图：

元素的顶边界与前面元素的底边界发生叠加。

当一个元素包含在另一个元素中时（假设没有填充或边框将边界分隔开），它们的顶和/或底边界也发生叠加，如图：

元素的顶边界与父元素的顶边界发生叠加。

尽管初看上去有点儿奇怪，但是边界甚至可以与本身发生叠加。假设有一个空元素，它有边界，但是没有边框或填充。在这种情况下，顶边界与底边界就碰到了一起，它们会发生叠加，如图：

元素的顶边界与底边界发生叠加。

如果这个边界碰到另一个元素的边界，它还会发生叠加，如图：

空元素中已经叠加的边界与另一个空元素的边界发生叠加。

边界叠加初看上去可能有点儿奇怪，但是它实际上是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的顶边界。如果没有边界叠加，后续所有段落之间的边界将是相邻顶边界和底边界的和。这意味着段落之间的空间是页面顶部的两倍。如果发生边界叠加，段落之间的顶边界和底边界就叠加在一起，这样各处的距离就一致了，如图：

边界叠加在元素之间维护了一致的距离。

margin 叠加只发生在普通文档流中块框的垂直，行内框、浮动框或绝对定位框之间的边界不会叠加。

margin 叠加虽然是合理的，但如果处理不当，会产生不期望的效果，解决的办法有以下几种：

1. 用外元素的 pading 代替元素的 margin；
2. 给外元素加透明边框，即：border:1px solid transparent; 也就是有分隔的时候不会产生 margin 叠加；
3. 元素绝对定位；
4. 外元素设置 overflow:hidden；
5. ……

链接点击后会出现虚线框，因为链接一般都有跳转页面，所以不容易看出来。如果没有跳转或阻止了这个行为的话，就能很明显的看到虚线。这个虚线在某些情况下会影响美观，所以可以考虑把它去掉。虽然在《去除点击链接时出现的虚线框》中说了几种方法，而且一起使用也能兼容 IE 和 FF ，但未免麻烦了点。前两天看到使用 jQuery 解决这个问题问题的方法，很简单，而且兼容性很好，所以把它“拿”过来了。具体代码如下：

$(function(){
	$('a').bind('focus',function(){
		if(this.blur){ //如果支持 this.blur
			this.blur();
		};
	});
});

细心的您可能发现了按钮点击后也会出现虚线框，那就一起把它去掉吧：

$(function(){
	$('a,input[type="button"],input[type="submit"]').bind('focus',function(){
		if(this.blur){ //如果支持 this.blur
			this.blur();
		};
	});
});

查看Demo

很简单吧，简单的都没有什么技术含量了。。。