资源描述
一、 Css背景
background 属性，定义元素背景效果
· background-color
· background-image
· background-repeat
· background-attachment
· background-position
设置背景颜色:
background-color 颜色名依然有三种表达方式：
1. 颜色名字：red，……(其中有一个特殊的值：transparent 透明)；
2. 十六进制表示：#ffffff；
3.函数形式：rgb(r,g,b)。
对同一类的标签做不同的样式，可采取不同的类名，如：<p class="no1">。定义其样式方法为：p.no1 {……}
Css代码
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
p.no2 {background-color: gray}
</style>
实例：
css_set_background_color.html
<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p.no1 {background-color: rgb(250,0,255)}
p.no2 {background-color: gray}
span.highlight {background-color:red}
</style>
</head>
<body>
<h1>标题 1</h1>
<h2>标题 2</h2>
<p class="no1">段落</p>
<p class="no2">该段落设置了内边距。</p>
<p>
<span class="highlight">有颜色文本。</span> 无颜色文本。 无颜色文本。无颜色文本。无颜色文本。
无颜色文本。无颜色文本。无颜色文本。无颜色文本。
<span class="highlight">有颜色文本。 </span>
</p>
</body>
</html>
设置背景图片
background-image可以选择在任何互联网或本地的不同格式的图片
选取背景图片要考虑页面上的显示效果，要有利用整体网页的可视性效果。
background-repeat 控制背景图片在无法铺满屏幕时，是否重复显示。
选项为：repeat 允许背景图片重复显示；
no-repeat 不允许背景图片重复显示，即背景图片仅显示一次；
repeat-x 背景图片在水平方向重复显示；
repeat-y背景图片在竖直方向重复显示。
在未指定background-repeat的情况下默认为repeat。
background-attachment设置背景图像是否固定或者随着页面的其余部分滚动
scroll 默认。
背景图像会随着页面其余部分的滚动而移动；
fixed 当页面的其余部分滚动时，背景图像不会移动。
将其属下设为fixed（即为background-attachment:fixed）才能保证属性在Firefox和Opera中正常工作。
background-position 背景图片的位置
有三种值的表达方式：
1. 名称：
· top left
· top center
· top right
· center left
· center center
· center right
· bottom left
· bottom center
· bottom right
如果仅规定了一个关键字，则第二个值默认为center
默认值为：0% 0%，即为top left。
2. 百分号表示
x% y%
第一个值是水平位置，第二个值是垂直位置。
左上角是 0% 0%。右下角是 100% 100%。
如果您仅规定了一个值，另一个值将是 50%
3. 像素表示
第一个值是水平位置，第二个值为垂直位置。
左上角是0 0。单位是像素(0px 0px) 或者其他的css单位。
如果您仅规定了一个值，另一个值将是 50%
可以和%以及position值混和使用。
Css代码：
<style type="text/css">
body {background-image:url(*);}
</style>
实例：
<html>
<head>
<style type="text/css">
body {background-image:url(zhy.jpg);}
</style>
</head>
<body></body>
</html>
css_background_image.html
<html>
<head>
<title>css背景图片 </title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body {
background-color: yellow;
background-image:url(bg2.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:top left;
}
h1 {
background-color: #00ffff;
background-image:url(bg3.jpg);
background-repeat:no-repeat;
}
h2 {background-color: #0030ff;}
p {background-color: #abcd00;}
p.no2 {background-color: rgb(255,0,255);}
input {background-image:url(bg6.jpg);}
textarea {background-image:url(bg3.jpg);}
</style>
</head>
<body>
<h1> 吴光旭 </h1>
<p> 四川长虹 </p>
<fieldset>
<legend><b>用户信息 </b> </legend>
<form name="input" action="input.asp" method="get">
姓名：
<input type="text" name="name"><br>
学号：
<select name="school_name">
<option value="20092110001">20092110001 </option>
<option value="20092110002">20092110002 </option>
<option value="20092110003">20092110003 </option>
<option value="20092110004">20092110004 </option>
<option value="20092110005">20092110005 </option>
<option value="" selected="selected">其他 </option>
</select><br>
性别：
<input type="radio" name="sex"> Male
<input type="radio" name="sex"> Female <br>
用户名：
<input type="text" name="username"><br>
密码：
<input type="password" name="password"><br>
爱好：
<input type="checkbox" name="favourite "> 看书
<input type="checkbox" name="favourite "> 打篮球
<input type="checkbox" name="favourite "> 踢足球
<input type="checkbox" name="favourite "> 打游戏<br>
简介：
<textarea rows="11" cols="80" >
</textarea><br>
</fieldset>
<input type="submit" value="写入">
<input type="button" value="确定">
<input type="reset" value="重置">
</form>
</body>
</html>
css_background.html
<html>
<head>
<title>css背景颜色</title>
<style type="text/css">
body {
background-color: yellow;
background-image:url(1.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:600px,400px;
}
h1 {
background-color: #00ffff;
color:rgb(0,0,255);
letter-spacing:20px;
}
h2 {background-color: #0030ff; color:#ff0000}
p {background-color: #abcd00; color:#00dfef}
p.no2 {background-color: rgb(255,0,255); padding: 20px;}
input {color:red }
form {color:blue}
select {color:green}
option {color:green}
textarea {color:red}
legend {color:red}
</style>
</head>
<body >
<h1>电子科技大学</h1>
<h2>研究生院 </h2>
<p>
<fieldset>
<legend><b>用户信息 </b> </legend>
<form name="input" action="H:\html&css&js\html\input.asp" method="get">
姓名：
<input type="text" name="name"><br>
学号：
<select name="school_name">
<option value="20092110001">20092110001 </option>
<option value="20092110002">20092110002 </option>
<option value="20092110003">20092110003 </option>
<option value="20092110004">20092110004 </option>
<option value="20092110005">20092110005 </option>
<option value="" selected="selected">其他 </option>
</select><br>
性别：
<input type="radio" name="sex"> Male
<input type="radio" name="sex"> Female
<img src="H:\html&css&js\html\me.jpg" width="212" height="280" alt="吴光旭">
<a href=" target="_black" alt="张含韵">
<img border="0" src=" width="250" height="242">
</a><br>
用户名：
<input type="text" name="username"><br>
密码：
<input type="password" name="password"><br>
爱好：
<input type="checkbox" name="favourite "> 看书
<input type="checkbox" name="favourite "> 打篮球
<input type="checkbox" name="favourite "> 踢足球
<input type="checkbox" name="favourite "> 打游戏<br>
简介：
<textarea rows="11" cols="80" >
</textarea><br>
</fieldset>
<input type="submit" value="写入">
<input type="button" value="确定">
<input type="reset" value="重置">
</form>
</p>
<p class="no2">该网页为电子科技大学 </p>
</body>
</html>
二、 Css文本
CSS 文本属性
color
设置文本颜色
direction
设置文本方向。
line-height
设置行高。
letter-spacing
设置字符间距。
text-align
对齐元素中的文本。
text-decoration
向文本添加修饰。
text-indent
缩进元素中文本的首行。
text-shadow
设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。
text-transform
控制元素中的字母。
unicode-bidi
设置文本方向。
white-space
设置元素中空白的处理方式。
word-spacing
设置字间距。
color 设置文本颜色
还是三种表示方式：（略）
direction 设置文本的方向。
ltr 默认，文本方向从左到右
rtl 文本方向从右到左
line-height 设置行间距
nomal 默认。设置合理的行间距
number 设置数字，此数字会和当前的字体尺寸相乘来设置行间距
length 设置固定的行间距
% 基于当前字体尺寸的百分比行间距
letter-spacing 增加或减少字符间的空白
normal 默认，标准空间
length 定义固定空间
text-align 对其文本
left 文本排列到左边（一般为默认，和浏览器有关）
right 文本排列到右边
center 文本排列居中
text-decoration 对文本进行修饰
none 默认，无修饰
underline 定义文本下的一条线
overline 定义文本上的一条线
line-through 定义文本下的一条线
blink 定义闪烁文本( 无法在IE和Opera上运行)
text-indent 缩进元素中的首行文本
length 固定的缩进
% 基于父元素宽度的百分比的缩进
text-transform 对元素中字母进行控制
none 默认，不做任何修改
capitation 文本中每个单词以大写字母开头
uppercase 仅以大写字母显示
lowercase 仅以小写字母显示
white-space 设置处理元素内的空白
normal 默认，空格被忽略
pre 空格保留，类似于<pre>
nowrap 文本不换行，正行显示
word-space 增加或减少单词间的空白
normal 默认，标准空间
length 固定单词间距
实例：
css_text.html
<html>
<head>
<title>css背景颜色</title>
<style type="text/css">
body {
background-color: yellow;
background-image:url(bg2.jpg);
background-repeat: repeat-x;
background-attachment:fixed;
background-position:0px,0px;
}
h1 {
background-image: url(bg6.jpg);
background-position:0px,0px;
color:rgb(0,0,255);
letter-spacing:15px;
padding:25px;
}
h2 { color:#ff0000;}
h3 {
text-decoration: overline;
text-align: center;
}
h4 {
text-decoration: line-through;
text-align: right;
}
h5 {
text-decoration: underline;
text-align: left;
}
h6 {text-decoration:blink}
p.word{
color:yellow;
word-spacing:30px;
}
p.space{
color:yellow;
word-spacing:400px;
}
p.no1 {
text-transform:uppercase;
color: red;
text-indent: 1cm;
}
p.wgxnew {
color: blue;
text-indent: 1cm;
white-space: nowrap;
}
p.wgx {
color: blue;
text-indent: 1cm;
}
p.no2 {
text-transform:lowercase;
color: blue;
text-indent: 2cm;
}
p.no3 {
text-transform:capitalize;
color: blue;
text-indent: 2cm;
}
input {color:red }
form {color:blue}
select {color:green}
option {color:green}
textarea {color:red;background-image:url(bg5.jpg);}
legend {color:red}
</style>
</head>
<body >
<h1>电子科技大学</h1>
<h2>研究生院 </h2>
<h3>简历</h3>
<h4>门户</h4>
<h5>注释</h5>
<h6>台头</h6>
<p>
<fieldset>
<legend><b>用户信息 </b> </legend>
<form name="input" >
姓名：
<input type="text" name="name"><br>
学号：
<select name="school_name">
<option value="20092110001">20092110001 </option>
<option value="20092110002">20092110002 </option>
<option value="20092110003">20092110003 </option>
<option value="20092110004">20092110004 </option>
<option value="20092110005">20092110005 </option>
<option value="" selected="selected">其他 </option>
</select><br>
性别：
<input type="radio" name="sex"> Male
<input type="radio" name="sex"> Female <br>
用户名：
<input type="text" name="username"><br>
密码：
<input type="password" name="password"><br>
爱好：
<input type="checkbox" name="favourite "> 看书
<input type="checkbox" name="favourite "> 打篮球
<input type="checkbox" name="favourite "> 踢足球
<input type="checkbox" name="favourite "> 打游戏<br>
简介：
<textarea rows="11" cols="80" >
</textarea><br>
</fieldset>
<input type="button" value="确定">
<input type="reset" value="重置">
</form>
</p>
<p class="wgxnew">吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。
吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。
吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。
吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。 </p>
<p class="wgx">吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。
吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。
吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。
吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。 </p>
<p class="no1">电子科技大学 2011-3-16 UESTC march-16th </p>
<p class="no2">该网页为电子科技大学唯一解释 UESTC March-16th </p>
<p class="no3">UESTC March-16th </p>
<p class="word">my name is wuguangxu </p>
<p class="space">研究生院 </p>
</body>
</html>
三、 Css字体
字体名字
font-family 其值为
字体名字 可以选择多个名字，以逗号隔开。运行时浏览器会选择第一个系统中有的字体。
字体大小
字体大小
font-size 其值为
xx-small
x-small
small
medium 大
large
x-large
xx-large
默认尺寸为medium，xx-smallàxx-large 逐渐增大
smaller设置为比父元素更小的尺寸
larger设置为比父元素更大的尺寸
length 设为固定值
% 设为基于父元素的百分比
字体风格
font-style 其值为
normal 默认风格
italic 斜体
oblique 倾斜字体
异体字体
font-variant 其值为
normal 默认
small-caps显示小型大写字母的字体
字体粗细
font-weight 其值为
normal 标准字符大小，默认
bold 粗体
bold 更粗体
lighter 更细体
数字（整百100~900）定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold
字体的所有属性都可以直接在font里直接加以说明
font:italic bold 12px/30px arial,sans-serif ……
实例：
css_font.html
<html>
<head>
<title>css字体</title>
<style type="text/css">
h1 {font-family: 华文新魏,华文行楷,华文楷体;}
p.no1{
font-family:Times New Roman,华文隶书;
font-style:italic;
}
p.no1_other{
font-family:Times New Roman,华文隶书;
font-style:oblique;
}
p.no2{
font-family:Arial,方正楷体;
}
p.no3{
font-family:Times New Roman,华文隶书;
font-size:xx-small;
}
p.no4{
font-family:Times New Roman,华文隶书;
font-size:x-small;
}
p.no5{
font-family:Times New Roman,华文隶书;
font-size:small;
}
p.no6{
font-family:Times New Roman,华文隶书;
font-size: medium;
}
p.no7{
font-family:Times New Roman,华文隶书;
font-size:large;
}
p.no8{
font-family:Times New Roman,华文隶书;
font-size:x-large;
}
p.no9{
font-family:Times New Roman,华文隶书;
font-size:xx-large;
}
p.no10{
font-family:Times New Roman,华文隶书;
font-size:smaller;
}
p.no11{
font-family:Times New Roman,华文隶书;
font-size:larger;
}
p.no12{
font-family:Times New Roman,华文隶书;
font-size:12;
}
p.no13{
font-family:Times New Roman,华文隶书;
font-size:20;
}
p.no14{
font-family:Times New Roman,华文隶书;
font-size:200%;
}
</style>
</head>
<body>
<h1>CSS字体设置</h1>
<p class="no1">该字体英文显示为： Times New Roman font.中文显示为： 华文隶书 。字体默认</p>
<p class="no1_other">该字体英文显示为： Times New Roman font.中文显示为： 华文隶书 。字体默认</p>
<p class="no2">该字体英文显示为： Arial font. 方正楷体 字体默认</p>
<p class="no3">设置字体的大小(set font size) 字体大小：xx-small </p>
<p class="no4">设置字体的大小(set font size) 字体大小：x-small </p>
<p class="no5">设置字体的大小(set font size) 字体大小：small </p>
<p class="no6">设置字体的大小(set font size) 字体大小：medium </p>
<p class="no7">设置字体的大小(set font size) 字体大小：large </p>
<p class="no8">设置字体的大小(set font size) 字体大小：x-large </p>
<p class="no9">设置字体的大小(set font size) 字体大小：xx-large </p>
<p class="no10">设置字体的大小(set font size) 字体大小：smaller </p>
<p class="no11">设置字体的大小(set font size) 字体大小：larger </p>
<p class="no12">设置字体的大小(set font size) 字体大小：length=12 </p>
<p class="no13">设置字体的大小(set font size) 字体大小：length=20 </p>
<p class="no14">设置字体的大小(set font size) 字体大小：200% </p>
</body>
</html>
四、 css边框
CSS 边框
元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。
边框的宽度、样式和颜色
每个边框有 3 个方面：其宽度或粗细、其样式或外观，以及其颜色。
边框宽度默认为 medium，这个值没有明确定义，不过通常是 2 个像素。尽管如此，你不一定能看到边框，原因是边框的默认值为 none，这样一来，就不会有边框了。如果边框没有样式，就不会存在。
默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同。另一方面，如果一个元素没有任何文本，那么该元素将继承其父元素的文本颜色。
边框与背景
CSS 规范指出，边框绘制在“元素的背景之上”。这很重要，因为有些边框是“间断的”（例如，点线边框或虚线框），元素的背景应当出现在边框的可见部分之间。
元素的背景是内容、内边距和边框区的背景。
Css边框属性
border 简写属性 可以将四个边的属性均设置在一起
边框颜色
border-color 其值为
color：三种表达，和以前所述的颜色属性类似
transparent 边框透明
边框样式
border-style 其值为
none 默认，定义无边框
hidden 与none作用一样，其只要用于表中，解决与表边框冲突的问题
dotted 点状边框
dashed 虚线边框（有的浏览器中还是呈现为实线）
solid 实线边框
double 双线边框
groove 3D凹槽边框
效果取决于border-color 的值
ridge 3D垄槽边框
inset 3D inset 边框
outset 3D outset边框
边框宽度
border-width 其值为
thin 细边框
medium 默认，中等边框
thick 粗边框
length 指定宽度的边框
相应的边框属性可以应用到每条边框上
border-bottom
border-top
border-left
border-right
其都有相应的color、style、width属性。例如：border-bottom-color，……
实例：
css_border.html
<html>
<head>
<title>css边框</title>
<style type="text/css">
p.dotted {
border-style: dotted;
border-color: green;
}
p.dashe
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
