CSS入门之基础语法

语法

无论使用哪一种方式定义CSS样式表，样式表中的declaration都由一个样式属性（非标签属性，即样式属性不能当标签属性直接用在标签中）和一个样式属性值组成，样式属性和样式属性值使用冒号分开；声明之间使用分号间隔。

注：

1. 如果一个样式属性有多个样式属性值，则样式属性值之间使用逗号间隔。
2. 在CSS中样式属性及其样式属性值对大小写不敏感，且不忽略空格。
3. 如果属性值由多个单词组成，则建议使用引号引起来——如果用在style标签属性中，则使用单引号，否则使用双引号。

按照CSS样式定义位置可分为3种：外部样式表，内部样式表，内联样式：

1. 外部样式表： 将CSS样式写在css样式文件中，使用link标签将该css文件引入到HTML文档中。
   什么时候用： 当多个HTML文档中某些标签的样式规则相同时，为了实现这些样式表的重用，同时也为了方便管理样式表，则需要将其声明在一个CSS样式表文件中。
2. 内部样式表： 将CSS样式直接写在HTML文档中的style标签内。
   什么时候用： 当一个HTML文档中的样式在其它HTML文档中不具有共性，但是本HTML文档中的多个标签的样式相同，这时为了实现这些样式规则的重用，同时也为了方便管理样式规则，则需要将其声明在内部样式表中。
3. 内联样式： 将CSS样式写在HTML文档某个标签的style标签属性的属性值中。
   什么时候用： 当一个HTML文档中的某个标签样式与其他标签样式不相同，或者该文档中的标签样式与父标签样式不统一，则此时就需要声明内联样式。

CSS选择器

选择器：浏览器通过选择器为满足条件的HTML元素添加CSS样式。

1. 标签选择器： 浏览器为HTML文档内标签名与标签选择器名相同的标签元素添加CSS样式。

/*
*标签选择器：以标签名为选择器
*/
div{
	font-family: "microsoft yahei";
}

2. 类选择器： 浏览器为class标签属性的属性值与类选择器名相同的标签元素添加CSS样式。

<span class="red">红色</span>

/*
*类选择器：以class标签属性的属性值为选择器
*/
.red{
	color: red;
}
/*
注：
	class标签属性的属性值不能以数字开头；
	class标签属性的属性值可以有多个，每个值之间用空格间隔；
*/

3. id选择器： 浏览器为id标签属性的属性值与id选择器名相同的标签元素添加CSS样式。

<span id="zzu">郑州大学</span>

/*
*id选择器：以id标签属性的属性值为选择器    匹配标签的id与id选择器相同的标签
*/
#zzu{
	font-size: 20px;
}

4. 后代选择器（包含选择器）：用于为特定的HTML子元素添加CSS样式。

/*
* 后代选择器
*/
html body #zzu{
	color: saddlebrown;
}

5. 分组选择器： 如果HTML文档多个CSS样式表内的部分样式相同，则可以通过定义一个分组选择器以简化CSS样式代码， 该选择器的选择器名由多个选择器组成，使用逗号分隔。

/*
* 分组选择器
*/
#zzu,.red{
	background-color: aqua;
}

6. 通配符选择器： 通配符选择器匹配HTML文档中的任何HTML元素。

/*
* 通配符选择器
*/
*{
	margin: 0;
	padding: 0;
}

伪类选择器

伪类	描述
:link	向未被访问的链接添加样式。
:visited	向已被访问的链接添加样式。
:hover	当鼠标悬浮在元素上方时，向元素添加样式。
:active	向正被激活（点击）的元素添加样式。

		<a href="http://www.bilibili.com">bilibili</a>
        <style>
        	a:link{
        		background-color: red;
        	}
        	a:visited{
        		background-color: green;
        	}
        	a:hover{
        		background-color: yellow;
        	}
        	a:active{
        		background-color: black;
        	}
        </style>

注： 若:link、:visited、:hover和:active一起使用，:hover 必须被置于 :link 和 :visited 之后，:active 必须被置于 :hover 之后，即:link -> :visited -> :hover -> :active ，简记love hate（爱恨）。

边框和字体

边框：

		<div>
			郑州大学
		</div>
		<style>
			div{
				border: 1px solid red;
			}
			/*上面为简写，相当于如下写法*/
			div{
				border-top: 1px solid red;
				border-bottom: 1px solid red;
				border-left: 1px solid red;
				border-right: 1px solid red;
				
				height: 120px;
				line-height: 120px;
				text-align: center;
			}
		</style>

字体：

		<style>
			div{
				border: 1px solid red;
				height: 120px;
				text-align: center;
				
				font-style: italic;
				font-weight: bold;
				font-size: 24px;
				line-height: 120px;
				font-family: 宋体;
			}
			/*以上代码等效于下面的：*/
			div{
				border: 1px solid red;
				height: 120px;
				text-align: center;
				
				font: italic bold 24px/120px 宋体;
				/*简写，顺序不能变*/
			}
		</style>

背景图

		<i></i>
		<style>
			body{
				background-color: yellowgreen;
				background-image: url(img/favicon.ico);
				background-repeat: no-repeat;
			}
			i{
				width: 25px;
				height: 25px;
				display: inline-block;
				background-image: url(img/images.png);
				background-position: -111px -45px;
				/*background-position可以指定图片截取的起始点，从而对图片进行抠图*/
				background-repeat: no-repeat;
			}
		</style>