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>