css学习笔记
CSS，通常称之为层叠样式表。样式，就是指网页中的内容（文字、图片）该以什么样子（大小、颜色、背景、插入位置）显示出来。层叠是指当CSS定义的样式发生了冲突，将依据层次的先后顺序来处理网页中的内容
尺度单位：相对类型、绝对类型
相对类型：相对于一个参考基础而设立的尺度单位
px：像素
Em：以目前字符的高度为单位
绝对类型：与分辨率无关
常用单位：
尺 度 单 位 说 明
in（英寸） 不是国际标准单位，极少用。
cm（厘米） 国际标准单位，较少用。
mm（毫米） 国际标准单位，较少用。
pt（点数） 最基本的显示单位，较少用。
pc（印刷单位） 应用在印刷行业中，1 pc = 12 pt
示例代码
<style type="text/css">
<!--#mm{text-indent:100}
-->
</style>
<p id=mm>这一段的首行缩进</p>
字符间距和段落行距：字符间距
#sp{letter-spacing: 10}
字符间距和段落行距：段落行距
#e{line-height:2}
段落的水平位置
#t{text-align:center}
段落的垂直位置
#hh{vertical-align：top}
化学方程式和数学式：
#li{vertical-align:sub;font-size:6}
#li{vertical-align:sup;font-size:6}
文字的字体设置：
P{font-family:黑体，宋体,幼圆}
P{font-style:oblique}
文字的粗细控制：
P{font-weight:900}
文字的大小控制：
{font-size:10px}
文字的加线效果：
#ss{text-decoration:overline}
英文字母的大小写转换：英文字母的大小写转换(p120)
#{text-transform:capitialize}
英文字母的大小写转换：小写字母转换为大写
{font-variant:small-caps}
列表中的符号：图像符号;列表符号缩进
P{list-style:url(001.jpg);list-style-postion:inside；color:red}
P{list-style:url(001.jpg);list-style-postion:outside;color:blue}
列表中的符号：各种序列符号
{list-style-type:lower-roman}
{list-style-image:url(001.jpg)}
{list-style-position:outside}
模块边界的设置：主要用来控制模块与其他组件的空白距离
{ Margin-top:30;
Margin-right:30;
Margin-left:30;
Margin-bottom:30
}
模块边框的设置：控制模块的边框宽度
{border-top-width:10}
{border-right-width:20}
{border-bottom-width:15}
{border-left-width:5}
{border-width:5}
模块边框的设置：控制模块的边框颜色
{border-corlor:red}
{border-left-corlor:red}
模块边框的设置：控制模块的边框样式
{border-style:dotted}
模块内边界的设置：
{padding-top:30}
{padding:30 20 10 20}
红色的网页背景，黄色的文字背景：
{background-color:red}
网页以及文字的图片背景设置：
{background-image:url(002.jpg)}
背景图片的并排设置：背景图片的横向平铺
{background-image:url(001.jpg);background-repeat:repeat-x}
图片的固定设置：
{background-attachment:fixed}
图片的定位设置：
{background-position:50% 50%}
多样的超链接链接颜色的设置
<style type="text/css">
<!--
a:link{color:red}
a:visitec{color:blue}
a:active{color:yellow}
a:hover{color:green}
-->
</style>
去除链接的下划线
a{text-decoration:none}
立体滚动条的制作
body{scrollbar-face-color:red;
scrollbar-shadow-color:green;
scrollbar-highlight-color:yellow;
scrollbar-3dlight-color:blue;
scrollbar-darkshadow-color:purple;
scrollbar-track-color:pink;
scrollbar-arrow-color:black}
光标
a:hover{color:green;cursor:wait}
区域的定义：制作3个相邻的区域
<style type="text/css">
<!--
#d1{background-color:pink;font-siae=20;width:400;height=100;position:abosllute}
#d2{background-color:purple;font-siae=20;width=200;height=100}
#d3{background-color:black;font-siae=20;width=100;height=100}
-->
</style>
区域的定位：
#z1{position:absolute;top:0;left=0}
区域的定位：区域的定位
position:static:所有元素的默认定位都是position:static，这意味着元素没有被定位，而且在文档中出现在它应该在的位置。
position:relative:如果设定 position:relative，就可以使用 top,bottom,left 和 right 来相对于元素在文档中应该出现的位置来移动这个元素。【意思是元素实际上依然占据文档中的原有位置，只是视觉上相对于它在文档中的原有位置移动了】
当指定 position:absolute 时，元素就脱离了文档【即在文档中已经不占据位置了】，可以准确的按照设置的 top,bottom,left 和 right 来定位了。
css的定义方式：
内部定义
方式一：
<head>
<style type="text/css">
<!–
h1{font-family:楷体;color:red}
-->
</style>
</head>
方式二：
<p>
<h1 style=“font-family:楷体”;color:red>
这个字体被定义为红色楷体
</h1>
</p>
外部定义
调用方式一：
<style type=“text/css”>
@import url(“02.css”)
</style>
调用方式二:
<head>
<link type=“text/css” rel=stylesheet href=01.css>
</head>
尺度单位：相对类型、绝对类型
相对类型：相对于一个参考基础而设立的尺度单位
px：像素
Em：以目前字符的高度为单位
绝对类型：与分辨率无关
常用单位：
尺 度 单 位 说 明
in（英寸） 不是国际标准单位，极少用。
cm（厘米） 国际标准单位，较少用。
mm（毫米） 国际标准单位，较少用。
pt（点数） 最基本的显示单位，较少用。
pc（印刷单位） 应用在印刷行业中，1 pc = 12 pt
示例代码
<style type="text/css">
<!--#mm{text-indent:100}
-->
</style>
<p id=mm>这一段的首行缩进</p>
字符间距和段落行距：字符间距
#sp{letter-spacing: 10}
字符间距和段落行距：段落行距
#e{line-height:2}
段落的水平位置
#t{text-align:center}
段落的垂直位置
#hh{vertical-align：top}
化学方程式和数学式：
#li{vertical-align:sub;font-size:6}
#li{vertical-align:sup;font-size:6}
文字的字体设置：
P{font-family:黑体，宋体,幼圆}
P{font-style:oblique}
文字的粗细控制：
P{font-weight:900}
文字的大小控制：
{font-size:10px}
文字的加线效果：
#ss{text-decoration:overline}
英文字母的大小写转换：英文字母的大小写转换(p120)
#{text-transform:capitialize}
英文字母的大小写转换：小写字母转换为大写
{font-variant:small-caps}
列表中的符号：图像符号;列表符号缩进
P{list-style:url(001.jpg);list-style-postion:inside；color:red}
P{list-style:url(001.jpg);list-style-postion:outside;color:blue}
列表中的符号：各种序列符号
{list-style-type:lower-roman}
{list-style-image:url(001.jpg)}
{list-style-position:outside}
模块边界的设置：主要用来控制模块与其他组件的空白距离
{ Margin-top:30;
Margin-right:30;
Margin-left:30;
Margin-bottom:30
}
模块边框的设置：控制模块的边框宽度
{border-top-width:10}
{border-right-width:20}
{border-bottom-width:15}
{border-left-width:5}
{border-width:5}
模块边框的设置：控制模块的边框颜色
{border-corlor:red}
{border-left-corlor:red}
模块边框的设置：控制模块的边框样式
{border-style:dotted}
模块内边界的设置：
{padding-top:30}
{padding:30 20 10 20}
红色的网页背景，黄色的文字背景：
{background-color:red}
网页以及文字的图片背景设置：
{background-image:url(002.jpg)}
背景图片的并排设置：背景图片的横向平铺
{background-image:url(001.jpg);background-repeat:repeat-x}
图片的固定设置：
{background-attachment:fixed}
图片的定位设置：
{background-position:50% 50%}
多样的超链接链接颜色的设置
<style type="text/css">
<!--
a:link{color:red}
a:visitec{color:blue}
a:active{color:yellow}
a:hover{color:green}
-->
</style>
去除链接的下划线
a{text-decoration:none}
立体滚动条的制作
body{scrollbar-face-color:red;
scrollbar-shadow-color:green;
scrollbar-highlight-color:yellow;
scrollbar-3dlight-color:blue;
scrollbar-darkshadow-color:purple;
scrollbar-track-color:pink;
scrollbar-arrow-color:black}
光标
a:hover{color:green;cursor:wait}
区域的定义：制作3个相邻的区域
<style type="text/css">
<!--
#d1{background-color:pink;font-siae=20;width:400;height=100;position:abosllute}
#d2{background-color:purple;font-siae=20;width=200;height=100}
#d3{background-color:black;font-siae=20;width=100;height=100}
-->
</style>
区域的定位：
#z1{position:absolute;top:0;left=0}
区域的定位：区域的定位
position:static:所有元素的默认定位都是position:static，这意味着元素没有被定位，而且在文档中出现在它应该在的位置。
position:relative:如果设定 position:relative，就可以使用 top,bottom,left 和 right 来相对于元素在文档中应该出现的位置来移动这个元素。【意思是元素实际上依然占据文档中的原有位置，只是视觉上相对于它在文档中的原有位置移动了】
当指定 position:absolute 时，元素就脱离了文档【即在文档中已经不占据位置了】，可以准确的按照设置的 top,bottom,left 和 right 来定位了。
css的定义方式：
内部定义
方式一：
<head>
<style type="text/css">
<!–
h1{font-family:楷体;color:red}
-->
</style>
</head>
方式二：
<p>
<h1 style=“font-family:楷体”;color:red>
这个字体被定义为红色楷体
</h1>
</p>
外部定义
调用方式一：
<style type=“text/css”>
@import url(“02.css”)
</style>
调用方式二:
<head>
<link type=“text/css” rel=stylesheet href=01.css>
</head>
