5CSS基础（课件）-《网页设计与制作》同步教学（南开大学出版社）
|
68页
|
52人阅读
|
8人下载
普通
内容正文：
第 五 章
CSS基础
1
2
CSS初步
CSS的概念
CSS，通常称之为层叠样式表。样式，就是指网页中的内容（文字、图片）该以什么样子（大小、颜色、背景、插入位置）显示出来。层叠是指当CSS定义的样式发生了冲突，将依据层次的先后顺序来处理网页中的内容。
HTML既能显示网页内容，又能控制网页样式；而CSS就是让网页的样式独立出来，以方便批量处理我们上面提到的样式变更问题。
现在CSS已经广泛应用于各种网页的制作当中，在CSS的配合下，HTML如虎添翼，发挥出了更大的作用。
优点：
制作管理网页非常方便
可以更加精细的控制网页的样式
样式丰富多彩
样式灵活多样，可以根据不同的情况选用不同的定义方法。
3
4
CSS初步
<html>
<head>
<title>CSS初体验</title>
<style type="text/css">
<!–
h3{color:#FF0000}
h5{font-style:italic}
-->
/*以上是CSS的定义*/
</style>
</head>
</body>
<h3>(红色)行业资讯</h3>
<h5>（斜体）消息称“谷歌杀手”Cui2010-09
</body>
</html>
CSS初体验
<style>用来说明定义哪类语法的样式，通常放在<head></head>之间
Type属性指定使用CSS语法来定义网页内容的样式
<!-- -->防止代码泄露
5
6
文字设置
尺度单位和排版
尺度单位：相对类型、绝对类型
相对类型：相对于一个参考基础而设立的尺度单位
px：像素
Em：以目前自负的高度为单位
绝对类型：与分辨率无关
尺 度 单 位 说 明
in（英寸） 不是国际标准单位，极少用。
cm（厘米） 国际标准单位，较少用。
mm（毫米） 国际标准单位，较少用。
pt（点数） 最基本的显示单位，较少用。
pc（印刷单位） 应用在印刷行业中，1 pc = 12 pt
7
文字设置
尺度单位和排版
段落的首行缩进：控制首行缩进
{text-indent:30}
<html>
<head>
<title>首行缩进</title>
<style type="text/css">
<!--
#p1{text-indent:25}
#p2{text-indent:45}
#p3{text-indent:65}
-->
</style>
</head>
<body>
8
<h4>中小企业CRM软件市场现状分析</h4>
<p id="p1">从目前情况来看，中小企业CRM市场日趋成熟，大型企业的CRM市场已经饱和。</p>
<p id="p2">而中小企业用户的CRM市场才刚刚起步，中小企业软件市场的CRM、销售自动化、订单管理领域有望在以后实现快速增长。</p>
<p id="p3">中小企业将掀起CRM应用热潮。这个热潮是个水到渠成的，是时机成熟的必然结果，诸多因素将共同驱使中小企业的CRM应用热潮。</p>
</body>
</html>
9
10
文字设置
尺度单位和排版
段落的首行缩进：控制首行凸出
{text-indent:-30}
<html>
<head>
<title>首行凸出</title>
<style type="text/css">
<!--
#ma1{text-indent:-30; margin-left:30}
#ma2{text-indent:-20; margin-left:50}
#ma3{text-indent:-10; margin-left:70}
-->
</style>
</head>
<body>
11
<h3>中小企业CRM软件市场现状分析</h3>
<p id="ma1">中小企业将掀起CRM应用热潮。这个热潮是个水到渠成的，是时机成熟的必然结果，诸多因素将共同驱使中小企业的CRM应用热潮。</p>
<p id="ma2">中小企业将掀起CRM应用热潮。这个热潮是个水到渠成的，是时机成熟的必然结果，诸多因素将共同驱使中小企业的CRM应用热潮。</p>
<p id="ma3">中小企业将掀起CRM应用热潮。这个热潮是个水到渠成的，是时机成熟的必然结果，诸多因素将共同驱使中小企业的CRM应用热潮。</p>
</body>
</html>
12
13
文字设置
尺度单位和排版
字符间距和段落行距：字符间距
{letter-spacing: 10}
<html>
<head>
<title>字符间距</title>
<style type="text/css">
<!--
#sp1 {letter-spacing:15}
#sp2 {letter-spacing:10}
#sp3 {letter-spacing:5}
#sp4 {letter-spacing:0}
#sp5 {letter-spacing:-5}
-->
</style>
</head>
14
<body>
<p id="sp1"><b>企业新闻</b></p>
<p id="sp2">庆迅腾科技公司成立一周年</p>
<p id="sp3">Android第二款木马现身</p>
<p id="sp4">前员工曝Zynga CEO轶事：宁可抄袭也不愿创新</p>
<p id="sp5">福布斯：马云是中国的乔布斯</p>
</body>
</html>
15
16
文字设置
尺度单位和排版
字符间距和段落行距：段落行距
{line-height:2}
段落的水平位置
{text-align:center}
段落的垂直位置
{vertical-align：top}
<html>
<head>
<title>段落行距</title>
<style type="text/css">
<!--
#h1 {line-height:2}
#h2 {line-height:4}
#h3 {line-height:6}
-->
</style>
</head>
<body>
<h3>集团新闻</h3>
<p id="h1">迅腾国际学员项目大赛在津胜利召开</p>
<p id="h2">津、京、沪三地连动 全面启动大学生帮扶计划</p>
<p id="h3">邵荣强接受人民网专访</p>
</body>
</html>
17
18
文字设置
尺度单位和排版
化学方程式和数学式：
{vertical-align:sub;font-size:6}
{vertical-align:super;font-size:6}
<html>
<head>
<title>文字上、下标的显示</title>
<style type="text/css">
<!--
#v1 {vertical-align:sub;font-size:10}
#v2 {vertical-align:super;font-size:10}
-->
</style>
</head>
<body>
H<font id="v1">2</font>+O<font id="v1">2</font>=H<font id="v1">2</font>O
<br><br>
a<font id="v2">2</font>+b<font id="v2">2</font>=c<font id="v2">2</font>
</body>
</html>
19
20
文字设置
背景设置
文字的字体设置：
{font-family:times new roman}
21
文字设置
背景设置
文字的字体效果：
{font-style:oblique}
22
文字设置
背景设置
文字的粗细控制：
{font-weight:900}
<html>
<head>
<title>文字的粗细控制</title>
<style type="text/css">
<!--
#w1{font-weight: normal}
#w2{font-weight: bold}
#w3{font-weight: bolder}
#w4{font-weight: lighter}
#w5{font-weight: 900}
-->
</style>
</head>
23
<body>
<b>这是html标记直接作用的粗体字</b>
<p id="w1">这是CSS控制的字体粗细</p>
<p id="w2">这是CSS控制的字体粗细</p>
<p id="w3">这是CSS控制的字体粗细</p>
<p id="w4">这是CSS控制的字体粗细</p>
<p id="w5">这是CSS控制的字体粗细</p>
</body>
</html>
24
25
文字设置
背景设置
文字的大小控制：
{font-size:10px}
<html>
<head>
<title>文字的大小控制</title>
<style type="text/css">
<!--
#s1 {font-size:xx-small}
#s2 {font-size:x-small}
#s3 {font-size:small}
#s4 {font-size:medium}
#s5 {font-size:large}
#s6 {font-size:x-large}
#s7 {font-size:xx-large}
#s8 {font-size:10pt}
#s9 {font-size:15pt}
#s10 {font-size:30}
-->
</style>
</head>
26
<body>
<p id="s1">这是CSS控制的不同大小文字</p>
<p id="s2">这是CSS控制的不同大小文字</p>
<p id="s4">这是CSS控制的不同大小文字</p>
<p id="s5">这是CSS控制的不同大小文字</p>
<p id="s3">这是CSS控制的不同大小文字</p>
<p id="s6">这是CSS控制的不同大小文字</p>
<p id="s7">这是CSS控制的不同大小文字</p>
<p id="s8">这是CSS控制的不同大小文字</p>
<p id="s9">这是CSS控制的不同大小文字</p>
<p id="s10">这是CSS控制的不同大小文字</p>
</body>
</html>
27
28
文字设置
背景设置
文字的加线效果：
{text-decoration:overline}
<html>
<head>
<title>文字的加线效果</title>
<style type="text/css">
<!--
#t1 {text-decoration:underline}
#t2 {text-decoration:line-through}
#t3 {text-decoration:overline}
-->
</style>
</head>
29
<body>
<h2>CSS对线可以有3种效果</h2><p>
<p id="t1">在下面</p>
<p id="t2">在中间面</p>
<p id="t3">在上面</p>
<h2>HTML对线只有2种效果</h2>
<u>在下面</u><p>
<s>在中间</s><p>
</body>
</html>
30
31
文字设置
背景设置
英文字母的大小写转换：英文字母的大小写转换
{text-transform:capitialize}
<html>
<head>
<title>英文字母的大小写转换</title>
<style type="text/css">
<!--
#tr1 {text-transform: capitalize;}
#tr2 {text-transform: uppercase;}
#tr3 {text-transform: lowercase;}
-->
</style>
</head>
32
<body>
每个英文单词的开头字母转化为大写<p id="tr1">hello! welcome to xtkj!</p>
所有英文单词转化为大写<p id="tr2">hello! welcome to xtkj!</p>
所有英文单词转化为小写<p id="tr3">HELLO! WELCOME TO XTKJ!</p>
</body>
</html>
33
34
文字设置
背景设置
英文字母的大小写转换：小写字母转换为大写
{font-variant:small-caps}
<html>
<head>
<title>小写英文字母转换为大写</title>
<style type="text/css">
<!--
p {font-variant: small-caps}
-->
</style>
</head>
<body>
hello!welcome to xtgj!小写英文<br><br>
<p> hello!welcome to xtgj!小写英文转换为大写</p>
</body>
</html>
35
36
文字设置
背景设置
列表中的符号：图像符号
{list-style:url(001.jpg)inside}
{list-style:url(001.jpg)outside}
<html>
<head>
<title>图像符号</title>
<style type="text/css">
<!--
#in{list-style-image:url(images/nr_tb.gif);list-style-position:inside;color:red}
#out{list-style:url(images/nr_tb.gif);outside;color:blue}
-->
</style>
</head>
<body>
<img src="images/zngg.jpg">
<ul id="in">
37
<li>滨海迅腾科技集团荣获天津市“河东..
<li>天津卡巴斯基企业版开放空间代理商..
<li>迅腾科技公司成功代理卡巴斯基企业..
</ul><p>
<ul id="out">
<li>Linux之父访谈录：设计内核只..
<li>什么是全球网络的主色调？
<li>开发者看腾讯开放平台：对分成、审批..
</ul>
</body>
</html>
38
39
文字设置
背景设置
列表中的符号：各种序列符号
{list-style-type:lower-roman}
{list-style-image:url(001.jpg)}
{list-style-position:outside}
<html>
<head>
<title>列表符号</title>
<style type="text/css">
<!--
#l1 {list-style-type:lower-roman}
#l2 {list-style-type:upper-alpha}
#l3 {list-style-type:decimal}
-->
</style>
</head>
<body>
<img src="images/zngg.jpg">
<ul id="l1">
<li>滨海迅腾科技集团荣获天津市“河东..
40
<li>天津卡巴斯基企业版开放空间代理商..
<li>迅腾科技公司成功代理卡巴斯基企业..
</ul>
<ul id="l2">
<li>Linux之父访谈录：设计内核只..
<li>什么是全球网络的主色调？
<li>开发者看腾讯开放平台：对分成、审批..
</ul>
<ul id="l3">
<li>天津迅腾滨海科技公司入围天津市政..
<li>天津迅腾滨海科技公司入围天津市政..
<li>消息称“谷歌杀手”Cuil永久性..
</ul>
</body>
</html>
41
42
文字设置
矩形模块化
模块边界的设置：
{ Margin-top:30;
Margin-right:30;
Margin-left:30;
Margin-bottom:30 }
<html>
<head>
<title>边界的设置</title>
<style type="text/css">
<!--
p{margin-top:30;margin-right:50;margin-bottom:30;margin-left:50}
-->
</style>
</head>
<body>
迅腾滨海科技有限公司
<p>
简称：迅腾科技，(英文：Tianjin Binhai Xun Teng Technology Co.,Ltd.)，是
天津滨海迅腾科技集团旗下一家以软件研发、软件外包为主导的科技型企业。
</p>
</body>
</html>
43
44
文字设置
矩形模块化
模块边框的设置：控制模块的边框宽度
{border-top-width:10}
{border-right-width:20}
{border-bottom-width:15}
{border-left-width:5}
{border-width:5}
<html>
<head>
<title>控制模块边框的宽度</title>
<style type="text/css">
<!--
#w1{border-top-width:10}
#w2{border-right-width:20}
#w3{border-bottom-width:15}
#w4{border-left-width:5}
#w5{border-width:5}
-->
</style>
</head>
<body>
<table border="1">
45
</tr>
<tr><td height="31" id="w1">中小企业CRM软件市场现状分析</td>
</tr>
<tr><td height="33" id="w2">现代化企业的经营战略</td>
</tr>
<tr><td height="37" id="w3">烟业提高核心竞争力的必备武器</td>
</tr>
<tr><td height="33" id="w4">客户关系管理的保险企业营销创新分析</td>
</tr>
<tr><td height="37" id="w5">进行CRM建设是零售企业产生..</td>
</tr>
</table>
</body>
</html>
46
47
文字设置
矩形模块化
模块边框的设置：控制模块的边框颜色
{border-corlor:red}
{border-left-corlor:red}
<html>
<head>
<title>控制模块边框的颜色</title>
<style type="text/css">
<!--
#c1{border-top-color:red;border-top-width:10}
#c2{ border-right-color:green;border-right-width:20}
#c3{ border-bottom-color:yellow;border-bottom-width:15}
#c4{ border-left-color:blue;border-left-width:5}
#c5{border-color:red;border-width:5}
-->
</style>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0">
48
</tr>
<tr><td height="40" id="c1">助企业成功实施迅腾CRM</td>
</tr>
<tr><td height="40" id="c2">企业迅腾CRM项目持续发展的三要素</td>
</tr>
<tr><td height="40" id="c3">如何评估CRM系统效果？</td>
</tr>
<tr><td height="40" id="c4">客户关系管理的保险企业营销创新分析</td>
</tr>
<tr><td height="40" id="c5">进行CRM建设是零售企业产生..</td>
</tr>
</table>
</body>
</html>
49
50
文字设置
矩形模块化
模块边框的设置：控制模块的边框样式
{border-style:dotted}
<html>
<head>
<title>控制模块边框的样式</title>
<style type="text/css">
<!--
#c1{border-top-color:#006600;border-top-width:5;border-top-style:dotted}
#c2{border-right-color:#66FF33;border-right-width:5;border-right-style:ridge}
#c3{border-bottom-color:#FFFF66;border-bottom-width:5;border-bottom-style:double}
#c4{border-left-color:#66FF99;border-left-width:5;border-left-style:groove}
#c5{border-color:#0000FF;border-width:5;border-style:dotted ridge double groove}
-->
</style>
</head>
<body>
<table border="3" cellpadding="0" cellspacing="0">
<tr>
51
<td height="40" id="c1">府资金支持项目名录大全</td>
</tr>
<tr>
<td height="40" id="c2">网站税收优惠概述</td>
</tr>
<tr>
<td height="40" id="c3">高新所得税务问题关注</td>
</tr>
<tr>
<td height="40" id="c4">中国科技统计汇编</td>
</tr>
<tr>
<td height="40" id="c5">高新技术企业创新风险纵览</td>
</tr>
</table>
</body>
</html>
52
53
文字设置
矩形模块化
模块内边界的设置：
{padding-top:30}
{padding:30 20 10 20}
<html>
<head>
<title>模块内边界的设置</title>
<style type="text/css">
<!--
#p1{padding-top:30}
#p2{padding-right:20}
#p3{padding-bottom:10}
#p4{padding-left:30}
#p5{padding:30 20 10 20}
-->
</style>
</head>
<body>
<table width="239" height="251" border="1" cellspacing="0">
<tr>
<td width="196" id="p1">天津迅腾滨海科技有限公司</td>
54
</tr>
<tr>
<td id="p2">天津迅腾滨海科技有限公司</td>
</tr>
<tr>
<td id="p3">天津迅腾滨海科技有限公司</td>
</tr>
<tr>
<td id="p4">天津迅腾滨海科技有限公司</td>
</tr>
<tr>
<td id="p5">天津迅腾滨海科技有限公司</td>
</tr>
</table>
</body>
</html>
55
56
背景设置
背景颜色的设置
红色的文字：
<html>
<head>
<title>设置文字的颜色</title>
<style type="text/css">
<!--
font{color:red}
-->
</style>
</head>
<body>
<font>
迅腾国际欢迎你！(红色文字)
</font>
</body>
</html>
57
58
背景设置
背景颜色的设置
红色的网页背景，黄色的文字背景：
{background-color:red}
<html>
<head>
<title>文字的背景颜色</title>
<style type="text/css">
<!--
font {background-color:yellow}
body {background-color:red}
#f {color:blue}
-->
</style>
</head>
<body>
<font>这是红色的网页背景，但文字背景是黄色的</font><br><br>
<font id=f>这是红色的网页背景，但文字是蓝色，背景是黄色的</font>
</body>
</html>
59
60
背景设置
背景图片的设置
网页以及文字的图片背景设置：
{background-image:url(002.jpg)}
<html>
<head>
<title>背景图片的设置</title>
<style type="text/css">
<!--
font{background-image:url(images/dhl.jpg)}
body{background-image:url(images/top.jpg);background-repeat:repeat-x}
-->
</style>
</head>
<body>
<font>天津迅腾滨海科技有限公司</font>
</body>
</html>
61
62
背景设置
背景图片的设置
背景图片的并排设置：背景图片的横向平铺
{background-image:url(001.jpg);background-repeat:repeat-x}
<html>
<head>
<title>背景图片的横向并排</title>
<style type="text/css">
<!--
body{background-image:url(images/top.jpg);background-repeat:repeat-x}
-->
</style>
</head>
<body>
</body>
</html>
63
64
背景设置
背景图片的设置
图片的固定设置：
{background-attachment:fixed}
<html>
<head>
<title>图片的固定</title>
<style type="text/css">
<!-- body{background-image:url(images/top.jpg);
background-repeat:no-repeat;
background-attachment:fixed} -->
</style>
</head>
<body>
<b>软件开发</b><br>
中小企业CRM软件市场现状分... 2010-12-01 <br><br>
现代化企业的经营战略：迅腾客... 2010-11-26 <br><br>
烟业提高核心竞争力的必备武器... 2010-11-26 <br><br>
<b>网站建设</b><br>
滨海迅腾科技集团荣获天津市“河东.. 2010-11-26 <br><br>
天津卡巴斯基企业版开放空间代理商.. 2010-11-26<br><br>
迅腾科技公司成功代理卡巴斯基企业.. 2010-11-26<br><br>
</body>
</html>
65
66
背景设置
背景图片的设置
图片的定位设置：
{background-position:50% 50%}
<html>
<head>
<title>背景图片的位置</title>
<style type="text/css">
<!-- #p1 {background-image:url(images/xtt.jpg);background-repeat:no-repeat;
background-position:0% 0%}
#p2 {background-image:url(images/xtt.jpg);background-repeat:no-repeat;
background-position:50% 50%}
#p3 {background-image:url(images/xtt.jpg);background-repeat:no-repeat;
background-position:100% 100%} -->
</style>
</head>
<body>
<table border="1" height="300" cellspacing="0">
<tr><td width="257" height="100" id="p1" >迅腾滨海科技有限公司</td></tr>
<tr><td height="100" id="p2" >迅腾滨海科技有限公司</td></tr>
<tr><td height="100" id="p3" >迅腾滨海科技有限公司</td></tr>
</table>
</body>
</html>
67
68
总结
回顾
CSS概念
尺度单位、排版
文字、列表符号的设置
矩形模块化
背景颜色、图片的设置
重点：3、5
$$
资源预览图
