CSS基础

浏览数：10 / 时间：2015年06月09日

1、引入CSS的四种方式

行内样式、内嵌样式、链接样式、导入样式。

2、CSS选择器

基本选择器：标签选择器，ID选择器，类选择器，通用选择器。

通用选择器：*{css代码}。

通用选择器作用：对整个网页中所有HTML标签进行样式定义。
常见用法：定义*{margin:0;padding:0}通用样式，并置于CSS文件最顶端，用于对HTML内所有的标签进行重置以保证页面能兼容多种浏览器。
原因：每种浏览器都自带CSS文件，如果一个页面在浏览器加载后，发现没有CSS文件，浏览器就会自动将自身带的CSS样式应用到该页面元素上，而不同的浏览器自带CSS样式不一样，如果想让页面在不同浏览器显示效果相同则需要对HTML标签进行重置。由于HTML标签有近百个，使用上面的通用样式则会在页面加载CSS的时候，先对所有的标签都应用{margin:0;padding:0;}，影响页面显示效率。

建议只对所用到的标签进行重置，比如下面定义的样式：

body,div,p,a,ul,li{margin:0;padding:0;}

3、盒子模型

四要素：content内容，border边框，padding内边距，margin外边距。

4、块状元素和内联元素

块状元素：一般是其他元素癿容器，可容纳内联元素和其他块状元素。块状元素排斥其他元素，不与其他元素共处一行，宽度(width)和高度(height)起作用。常见坑状元素为div 和 p。

内联元素：内联元素能容纳文本或者其他内联元素，它允讲其他内联元素和其共处一行，但宽度(width)和高度(height)不起作用，可以通过display:block将内联元素转换为块状元素。常见内联元素为“a”。

5、浮动

浮动：float：left 或 float：right，用于消除块状元素不让其他元素与其共处一行的特性，常用于网站布局。对于浮动的解释存在浏览器差异，如果浮动后出现区域重叠的情况可以将float：left 或 float：right加到所有的块状元素内。IE6浏览器在下面3个条件同时满足的情况会出现双边距Bug，分别是为块状元素，且左侧浮动，还要有左外边距(margin-left)，此时IE6显示的是margin-left值的两倍。一般现在浏览器都升级了，所以影响不大，需要修复的话可以在样式中加入display：inline解决。

清除浮动：clear：both，clear：left 或 clear：right，用于清除其他块状元素的float影响。对于其他块状元素的float，如果不清除的话，后续块状元素也会出现浮动。

6、定位

定位：position，网页内每个元素都有默认的position，且属性值均为static。
绝对定位：position：absolute，默认参照浏览器的左上角，配合TOP，RIGHT，BOTTOM，LEFT(简称TRBL)进行定位。
相对定位：position：relative，默认参考父级的原始点作为原始点，配合TRBL进行定位。当父级内有padding等css属性时，当前级的原始点则参照父级内容区的原始点进行定位。此处父级为：原有盒子外面再套一层宽度和高度大于原有盒子尺寸的盒子。
总结：如果用定位来布局页面，父级元素的 position 属性必须为 relative，而定位于父级内部某个位置的元素，最好用 absolute，因为它不受父级元素的 padding 的属性影响，当然你也可以用 relative，计算的时候不要忘记计算 padding 的值。
7、CSS Hack

CSS Hack：解决页面不能很好兼容多种浏览器的技巧方法。

常用的hack如下：

!important：用来解决一些在 IE6 上显示的效果与IE7/IE8/IE9/FireFox 上的效果不一样的情况。

#content{
height:960px !important;
height:900px;
}

说明：IE7/IE8/IE9/FireFox可以识别上面附加的“!important”语句。由于“!important”语句拥有绝对优先级，所以对于这些浏览器来说，看到该语句后就不会执行第二句。 IE6 无法识别附加的“!important”语句，所以IE6会跳过该语句，直接去执行第二句“height:900px“。
*(星号)：用来解决一些在IE6/IE7上显示的效果与IE8/IE9/FireFox上的不一样的情况。

#content{
height:960px;
*height:900px;
}

说明：IE8/IE9/FireFox不能识别附加有*的 CSS 属性语句，所以这些浏览器只会读取第一句而忽略第二句。IE6/IE7 可以识别附加有*的 CSS 属性语句，也就是说第一句和第二句都认识，所以它们先读第一句，将高度定为 960px，而后又读第二句“*height:900px;”，将高度从 960px 修改为 900px，即 IE 中最终显示的高度为900px。

其他hack语句可以从网上收集。

8、CSS Sprites

CSS Sprites：CSS精灵，是一种图片整合技术，将所有用到的图片放到一张大的图片中，然后通过移动像素等操作显示需要的图片。

9、首行缩进

用text-indent：2em实现文字缩进2个，em是相对单位，此属性只能加在块状元素上，内联元素不起作用。

10、简易导航条

效果：

代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>CSS学习-导航条制作</title>
		<style type="text/css">
			body,div,ul,li{
				margin: 0px;
				padding: 0px;
			}
			#nav{
				width: 960px;
				height:35px;
				margin:0 auto;
				margin-top:30px;
				background-color: #CCC;
			}
			#nav ul{
				width:960px;
				height:35px;
				list-style: none;
			}
			#nav ul li{
				float:left;
				line-height:35px;
				text-align:center;
			}
			#nav ul li a{
				height:35px;
				display:block;
				font-size: 12px;
				color:#333;
				text-decoration: none;
				float:left;
				padding:0 10px;
			}
			#nav ul li a:hover{
				color:#fff;
				text-decoration: underline;
				background-color: #000;
			}
		</style>
	</head>
	<body>
		<div id="nav">
			<ul>
				<li><a href="#">公司首页</a></li>
				<li><a href="#">公司介绍</a></li>
				<li><a href="#">诚聘英才</a></li>
				<li><a href="#">联系我们</a></li>
				<li><a href="#">疑难解析</a></li>
			</ul>
		</div>
	</body>
</html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

CSS基础