CSS2.0学习

一、基本知识

（一）、行内式

直接在body中有需要的地方，加上style

<p style="color:red; font-size:20px;"> 测试 </p>

（二）、内嵌式

内嵌式主要的特征是写在head里，并且上下加上style标签

1、标记选择器

选择器名字对应相应标签
如，要给段落加样式，就写个p;加给标题，就写个h1

在上面的head里：

<style type="text/css">
	body{
		margin:0px;			将内容填充满页面
		background-color:#DFDFDF;
	}
	p{
		color:red;
		font-size:20px;
		lineheight:1.5;		行距
		text-indent:2em;	段首缩进
	}
	img{
		width:150px;
		height:180px;
		float:Left;			文字绕着图片左悬浮
		margin:5px;			图片边框
	}
</style>

下面body里的对应段就会显示出定义的样式

真正写起来不大可能一种标签统一都一个样。所以，一些可以灵活加工的选择器应运而生

2、.r .b是类别选择器

选择器名字自取
使用.a .b格式；引用时采用 class=“a” 格式

类别选择器可以重复引用；

在上面的head里：

<style type="text/css">
	.r{
		color:red;
		font-size:20px;
	}

	.b{
		color:blue;
		font-size:20px;
		lineheight:1.5;
	}
</style>

在下面的body里：

<p class="r"> 测试1 </p>
<p class="b"> 测试2 </p>

3、#p1,#p2是id选择器

选择器名字自取
使用#a #b 格式，引用时采用id="a"格式

id选择器是一次性利用的，不能重复引用

在上面的head里：

<style type="text/css">
	#p1{
		color:red;
	}

	#p2{
		color:blue;
		font-size:20px;
		text-indent:2em;
	}
</style>

在下面的body里：

<p id="p1"> 测试1 </p>
<p id="p2"> 测试2 </p>

（三）、链接式

先专门写一个css文件，然后在head里写上文件链接

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

不同样式冲突时优先级：
行内式最高，其他二者的优先级要根据具体的位置而定
总的规律来说，后面的样式会覆盖前面的样式。

二、其他选择器

（一）、交集选择器

同时对一个对象，应用多种功能。
这样，下文不用额外声明段落就有了字体大小，颜色和下划线

p{
	font-size:30px;
}

p.c{
	color:blue;
	text-decoration:underline;
	/*text-decoration指的是下划线*/
}

（二）、并集选择器

同时对多个对象，应用一个功能
这样，段落，标题，以及一个类别选择器和一个id选择器都拥有了灰色的背景

p,h1,.c,#d1{
	background-color:gray;
}

（三）、后代选择器

使用p span 对span 的样式进行重写
这样，第一行便是红色，第二行便是蓝色

span{
	color:blue;
}
p span{
	color:red;
}


<div><p><span> test1 </span></p><div/>
<span> test2 </span>

（四）、子选择器

如果直接是 div span，那么优先级高于span，所有子类都会显示粉红色
改造成div>span便可以使得它只对直接子类起作用
下文第一条是粉红色，第二条是正常色

div>span{
	color:pink;
}

<div>
	<span> 儿子 </span>
	<p><span> 孙子 </span></p>
<div/>

三、特性

（一）、继承特性

下面的.c会继承上面的.c特性
这里，一 和 1.1 1.2 1.3都会变成红色

.c{
	color:red;
}

<ul>
	<li class="c"> 一 
		<ul>
			<li> 1.1 </li>
			<li> 1.2 </li>
			<li> 1.3 </li>
		</ul>
	</li>
	<li> 二 </li>
	<li> 三 </li>
</ul>

（二）、层叠特性

不同样式会引起层叠（冲突）
经过实验，优先级为：行内样式>id选择器>类别选择器>标记选择器

p{
	color:blue;
}
.red{
	color:red;
}
#p3{
	color:green;
}

<p> 1 </p>
<p class="red"> 2 </p>
<p class="red" id="p3"> 3 </p>
<p style="color:orange;" class="red" id="p3" > 4 </p>

四、设置文本样式

这里拿内嵌式做例子

p{
	font-family:"宋体";		/*字体*/
	font-style:italic;		/*设置成斜体*/
	font-weight:bold;		/*设置成粗体*/
	font-size:30px;			/*字体的大小*/
	text-transform:uppercase;		/*设置成全部大写*/
	textdecoration:line-through;	/*删除线*/
	text-indent:2em;		/*缩进两个字*/
	word-spacing:10px;		/*单词之间的举例*/
	letter-spacing:2px;		/*字母之间的间距*/
	line-height:1.5；		/*行距*/
	margin:1px;				/*段落之间的距离*/
	text-align:center;		/*文本居中*/
	color:blue;				/*设置颜色*/
	background-color:red;	/*设置背景颜色*/
}

五、设置图像效果

（一）、设置图片边框样式

这里以类别选择器为例

/*一种方式*/
.i1{
border-width:1px;		/*边框宽度*/
border-color:red;		/*边框颜色*/
border-style:solid;		/*实线边框*/
}

/*另一种简洁的方式*/
.i1{
border:2px red dashed;
}

/*除了对边框整体设置样式，也可以对边框分段设置*/
.i2{
border-top:2px red dashed;
border-bottom:2px red dashed;
border-left:2px red dashed;
border-right:2px red dashed;
}

<img src="java1.jpg" class="i1">

（二）、设置图片大小与缩放

这里用行内式为例

<img src="java1.jpg" style="width:160px;height:100px;">		/*设置图片大小*/

<img src="java1.jpg" style="width:20%;">				/*设置图片缩放比例；这里，20%指的是把图片缩小到浏览器面板的20%高度*/

（三）、设置图文悬浮

img{
	float:left;		/*图片悬浮在文字左部*/
	margin:5px;		/*文字与图片间距为5px*/
}

（四）、设置图文排列方式

当然，这里的样式很多，就不一一列举了

img{
	vertical-align:baseline;	/*文字平行于图片略底部*/
}

（五）、设置背景颜色与图样

body{
	background-color:red;		/*设置背景颜色*/
	background-img:url(../grid.jpg);	/*设置背景图片*/
	background-repeat:no-repeat;		/*背景图片不重复排开*/
	background-attachment:fixed;		/*设置背景图像不随页面拖动而移动*/
}

六、盒模型

（一）、基本概念

盒模型中的边框：border
内容和边框之间距离：padding
边框之间的距离：margin

#outerBox1{
	border-width:2px;
	border-color:red;
	border-style:solid;
	padding:40px;
	margin:10px;
}

#outerBox2{
	border:thick blue dashed;
	padding:20px 10px 5px 2px;		/*上右下左*/
	margin:20px 10px 5px 2px;		/*上右下左*/
}

#outerBox3{
	border-top:2px red dashed;
	border-bottom:2px red dashed;
	border-left:2px red dashed;
	border-right:2px red dashed;
	
	padding-top:20px;
	padding-bottom:5px;
	padding-left:2px;
	padding-right:10px;

	margin-top:20px;
	margin-bottom:5px;
	margin-left:2px;
	margin-right:10px;
}

<div id="outerBox1"> 666 </div>

（二）、网页布局

块级元素（比如div）默认一行一行往下排
行内元素（比如span）默认在行内从左往右排

块级元素之间上下距离是 max(上面的margin-bottom,下面的margin-top)
行内元素之间左右距离是左边的margin-right+右边的margin-left

嵌套的盒子之间，子块的margin将以父块的内容作为参考。如果某处没有父块内容，margin 不生效

margin值可以是负值

七、其他小知识

（一）、表格效果

.t{
	border:1px gray solid; 
	border-collapse:collapse;		/*边框是合并的*/
	border-spacing:0px;			/*单元格间距*/
	table-layout:fixed;			/*表格不会被撑长*/
}

.t tr{
	background-color:blue;
} 

.t td{
	border:1px gray solid; 
	padding:5px;
}

.t th{
	border:1px gray solid; 
	padding:5px;
}

（二）、设置超链接样式

a:link{
	color:red;
	text-decoration:none;
}

a:visited{
	color:green;
}

a:hover{
	background-color:yellow;
}

（三）、设置列表样式

ul,ol{
	list-style-type:square;			/*设置序号图标为方形*/
	list-style-image:url("../123.jpg");		/*设置序号图标为一个图片*/	
}