css样式

CSS定义位置：标签内部style标签属性；style标签内部；CSS文件内部
CSS语法：
声明：color ：red;样式属性：样式属性值
样式属性值：
样式属性值有空格，需要使用引号或者单引号引起来
样式属性值有多个，使用逗号隔开
样式属性值不区分大小写
CSS 伪类用于向某些选择器添加特殊的效果，语法结构如下：
选择器:伪类 {
declaration1;
declaration2;
…
}
link：向未被访问的链接添加样式。
visited：向已被访问的链接添加样式。
:hover：当鼠标悬浮在元素上方时，向元素添加样式。
active：向被激活的元素添加样式。
例如：

	<a href="http://www.baidu.com">百度一下</a>
	<style>
	/*	a{
			font-family: "PingFang SC","Microsoft YaHei",arial,"Hiragino Sans GB","Hiragino Sans GB W3";
			background-color: transparent;
			text-decoration: none;
			color: #333;
			font-size: 14px;
		}
		a:hover{
			text-decoration: underline;
			color: #f50;
		}*/
	</style>
	<a href="http://www.bilibili.com">b站</a>
	<style>
		a:link{
			background-color: red;
		}
		a:visited{
			background-color: black;
		}
		a:hover{
			background-color: yellow;
		}
		a:active{
			background-color: white;
		}
	</style>-->

border-width样式属性：
用于为元素的所有边框设置宽度，或者单独地为4个边框设置宽度， 该属性有多个值：

		border: 1px solid red;

等同于下面的代码：

		border-top:1px solid red;
		border-bottom: 1px solid red;
		border-left:1px solid red;
		border-right: 1px solid red;

font标签：
可以对字体的样式进行设计
例如：

			/*font-style: italic;
			font-weight:bolder;
			font-size: 24px;
			font-family: 宋体;*/
			font: italic bolder 24px/120px 宋体;

上面两个代码的作用是一样的
需要注意的是：
简写时必须要有字体大小和字体类型
font-size和line-height不能同时存在，需要font-size/height-size

	<input style="text-indent: 20px;" />

text-indent可以在文本框前设计一段留白
background标签：
background-color样式属性：
设置标签背景颜色，该样式属性设置的背景颜色会填充标签的内容、内边距和边框区域，扩展到标签边框的外边界（但不包括外边距）
background-image样式属性：
设置标签背景图片，该样式属性有多个属性值：
url：指向图像的路径
none：默认值，不显示图像
inherit：规定应该从父元素继承 background-image 属性的设置。注：IE浏览器不支持属性值 “inherit”；
background-repeat样式属性：
设置标签背景图片重复模式，该样式属性有多个属性值：
repeat：默认值，在水平方向和垂直方向重复
repeat x：在水平方向重复
repeat y：在垂直方向重复
no-repeat：图像只允许显示一次
background-position样式属性：
设置背景图片位置，从图片中获取一部分进行显示，可以避免多次重复请求，减轻服务器负荷
xpos ypos：
第一个值是水平位置，第二个值是垂直位置。
左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。
如果您仅规定了一个值，另一个值将是50%。
您可以混合使用 % 和 position 值。
注意：
使用background-position之前必须先使用background-image设置图片。
为了保证该样式属性在Firefox和Opera浏览器中正常工作，需要将background-attachment样式属性设置为 “fixed”。
示例：

		<i></i>
		<style>
			i{
				width: 25px;
				height: 25px;
				display: inline-block;
				background-image: url(img/images.png);
				background-position:-134px,-20px;
				background-repeat:no-repeat ;
			}
		</style>

一般必须带上background-repeat：no-repeat；防止图片显示错误