版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
《网页设计与制作教程》作者：孟显勇北京理工大学出版社第七章CSS基础目前主流网页设计技术是使用HTML语言的标签定义页面结构，使用CSS样式表定义页面的布局和样式。早期HTML语言通过增加大量定义格式的标签和属性，来实现样式和格式的定义，这样使代码变得越来越复杂，但效果并不理想。例如，将文本转换成图像，或过多的使用表格实现排版。因此，HTML语言将原来大量的格式定义的工作都交由CSS样式表来处理，因为，CSS可以实现丰富的样式定义和精确的页面对象排版。7.1CSS简介CSS（CascadingStyleSheets）称为层叠样式表单，CSS按代码的位置可以分为三种：内联样式表、内部样式表、外部样式表。CSS主要对布局、字体、颜色、背景等页面元素的样式实现更加精确的控制。通过修改CSS样式文件，就可以实现整个站点内引用此格式的页面的样式同时更新，即实现页面格式的集中控制和管理。CSS具有很好的浏览器和平台兼容性。使用CSS可以实现精确的样式定义，并且样式定义代码简练，执行效率高。
HTML语言和CSS样式结合可以使页面结构和格式定义分离，HTML语言定义页面结构和内容，CSS来定义页面的格式。7.1.1CSS分类内联样式表
内联样式表是由标签的style属性定义的样式，HTML绝大多数标签都具有style属性，通过style属性可以对网页对象的格式进行定义。内联样式定义的格式只对此标签修饰对象有效。例如，代码段：<Bstyle=“color:#FF0000;font-size:18px”>标签style属性定义样式</B>，对<B>标签的style属性进行定义，设置文字颜色为红色，字体大小为18px。
7.1.1CSS分类内部样式表
内部样式表是使用<STYLE>标签在文档头部分的<HEAD></HEAD>标签中对格式进行定义，内部样式表定义的样式可以被本页面的标签引用。程序【例7-1】在<STYLE>标签中定义<H1>和<P>标签的样式，页面中所有<H1>和<P>标签都可以引用定义的样式，<H1>标签修饰的文字显示红色、宋体，<P>标签修饰的文字显示绿色、字体大小为18px。7.1.1CSS分类内部样式表<HTML>
<HEAD>
<STYLE>
H1{color:#FF0000;font-family:"宋体"}
P{color:#00FF00;font-size:18px}
</STYLE>
</HEAD>
<BODY>
<H1>标题样式定义</H1>
<P>分段样式定义</P>
</BODY>
</HTML>7.1.1CSS分类外部样式表
外部样式表是将样式定义代码单独放到一个独立的文件中，使用样式定义的页面都可以引用此样式定义文件，样式文件的扩展名为.css。当样式定义的文件内容发生改变时所有引用页面都会自动更新，实现集中样式定义和控制。7.1.1CSS分类外部样式表定义独立的外部样式表style.css，程序（style.css）代码如下：
p.redp{color:#FF0000;font-size:18px}
p.greenp{color:#00FF00;font-size:16px}
7.1.1CSS分类外部样式表引用页面程序（ch7-2.html）代码如下：
<html>
<head>
<title>CSS样式定义</title>
<linkhref="style.css"rel="stylesheet"type="text/css">
</head>
<body>
<pclass="greenp">定义段落文字为绿色，16px</p>
<pclass="redp">定义段落文字为红色，18px</p>
</body>
</html>7.1.2CSS基本语法CSS是定义页面格式的标准，具有严格的语法规范，CSS语法主要由三部分组成：选择器、属性和属性值。CSS语法如下：
语法：selector{property:value;property:value;}
选择器{属性：属性值;属性：属性值}
7.1.2CSS基本语法选择器选择器就是想要对其样式定义的HTML标签，对HTML标签样式定义后，页面内引用该标签的格式都会按照样式表定义的样式显示效果。7.1.2CSS基本语法属性和属性值
CSS的属性定义的是标签的属性，例如，字体颜色，字体大小，页边空白等。例如，定义选择器body的字体、大小和颜色，属性font-family定义字体；属性font-size定义大小；属性color定义文本颜色。属性与属性值用冒号隔开，当定义多个属性和属性值时，用分号隔开每个属性。定义属性代码段如下：
body{
font-family:"宋体";
font-size:20px;
color:#FF0000;
}
7.1.3选择器分类组合方式
CSS支持将相同属性和属性值赋给多个选择器，选择器与选择器之间用逗号隔开，多个选择器具有相同的样式定义。例如，如下代码段：
body,p,h1
{
font-family:“宋体”;
font-size:18px
}
组合方式定义的选择器样式相同，在网页中<BODY>标签、<P>标签和<H1>标签样式相同，代替默认的标签格式，字体均为宋体，字体大小均为18px。7.1.3选择器分类CLASS选择器
CSS使用CLASS选择器可以实现同一HTML标签定义不同样式，同一样式可以被不同HTML标签引用。例如，可以定义多个<H1>标签样式，一种是文字居中对齐样式，一种是文字居左对齐样式，标签<H1>的样式可以定义为：
h1.center{text-align:center}
h1.left{text-align:left}
其中，center和left为class名称。在HTML代码中要引用上述格式定义，需要标签<H1>设置class属性引用样式，如下代码段：
<h1class="center">标题居中显示</h1>
<h1class="left">标题居左显示</h1>7.1.3选择器分类CLASS选择器可以设置成通用样式，即不指定具体的HTML标签。格式为：“.选择器名称{属性：属性值;}”，例如，定义一个CLASS选择器，代码段如下：
．green{color:#00FF00}
这类CLASS样式具有通用性，可以被多种HTML标签所引用，例如，green选择器可以被<H1>、<B>和<td>等多种标签引用，代码段如下：
<h1class="green">标题文字为绿色</h1>
<bclass="green">加粗文字为绿色</b>7.1.3选择器分类ID选择器
CSS使用ID选择器定义页面某一对象的样式，ID选择器定义具有唯一性，即指向页面唯一一个页面对象，ID选择器的定义格式为：“#选择器名称{属性：属性值;}”，定义ID选择器代码段如下：
#blue{color:#0000FF}
ID选择器具有唯一性，只有ID号与ID选择器名称相同的HTML标签才可以引用此样式，例如，blue选择器可以被ID号为blue的标签引用，代码段如下：
<h1id="blue">标题文字为蓝色</h1>
在页面中只有<H1>的ID号为blue时才能引用ID选择器“#blue”，其实质是给ID号为blue的对象设置样式，样式名为blue7.1.3选择器分类CLASS和ID选择器的区别
虽然CLASS和ID选择器都可以实现样式的定义，但它们之间存在着较大区别，ID选择器在页面内只能用一次，定义页面上唯一一个对象的样式，具有唯一性。而CLASS选择器可以在一个页面内引用多次，CLASS定义的样式可以应用于多种HTML标签。虽然在网页设计过程中，在一个网页中多个对象引用同一个ID选择器不会出错，但当使用Javascript或Vbscript通过ID号来调用上述对象时将出现错误。ID选择器主要应用于页面布局的样式定义，布局的对象在页面只定义一次，例如，页眉，主体或页脚。CLASS选择器主要应用于页面文字的排版。7.1.4CSS伪类CSS伪类是一种特殊的类选择器，其主要功能是指在不同状态下定义不同的网页效果。
伪类定义样式
伪类的语法结构是：
Selector:pseudo-class
{property:
value}
选择器：伪类{属性：属性值}7.1.4CSS伪类伪类与类不同，伪类的名称在CSS中已经定义，伪类名称不能随意创建，伪类名称是对页面对象状态的描述，实质上伪类是选择器在某个特殊状态下的样式定义。例如，超级链接有四种状态，包括link，visited，active，hover，定义超级链接的伪类如下：
a:link{color:#0000FF}/*未访问的链接*/
a:hover{color:#00FF00}/*鼠标指向链接*/
a:active{color:#FFFF00}/*鼠标激活链接*/
a:visited{color:#FF0000}/*已访问的链接*/7.1.4CSS伪类上述代码定义了超级链接的四个状态样式，当链接未访问时显示蓝色，当鼠标指向链接时显示绿色，当鼠标点击激活链接时显示黄色，当链接访问之后显示红色。另外，层叠样式表单的样式是有层次和顺序的，如果不能出现上述效果需要检查定义顺序，依次为a:link，a:visited，a:hover，a:actived，如果将visited放到最后将不会出现上述效果，因为visited的优先级高于hover，执行后面visited将忽略前面的低优先级的hover。7.1.4CSS伪类伪类和选择符混用
CSS可以将伪类和类组合起来实现多个状态样式的定义，可以实现在同一页面中制作不同的超级链接效果，类选择器和伪类可以混合使用，格式如下：
selector.class:pseudo-class
{property:value}
选择器﹒类：伪类{属性：属性值}7.1.4CSS伪类定义两种伪类，类名分别为blue和blueline，样式定义如下：
a.blue:link{color:#0000FF}/*未访问链接蓝色有下划线*/
a.blue:visited{color:#FF0000}/*已访问链接红色有下划线*/
a.blueline:link{color:#0000FF;text-decoration:none}/*未访问链接无下划线*/
a.blueline:visited{color:#FF0000;text-decoration:none}/*已访问链接无下划线*/
定义两个链接，分别使用上述不同样式定义，引用上述样式的代码段如下：
<aclass="blue"href="introduct.html">公司简介</a>
<aclass="blueline"href="product.html">产品简介</a>
7.1.5创建CSS文件一般网页设计通常使用外部样式表的方式，将样式定义独立放到CSS文件中，整个站点的页面调用样式表，实现整个站点统一样式。可以使用Dreamweaver设计制作CSS样式表，选择菜单栏的【新建】→【新建文档对话框】，类别选择【CSS样式表】，创建所选样式表。7.2CSS属性CSS样式属性主要包括字体属性、文本属性、颜色背景属性、边框属性、容器属性、分类属性和鼠标属性等。7.2.1CSS结构模式CSS结构具有明显的层次特征，在一个CSS布局模块内，由外到内可以分为页边距、边框、间隙、页面对象，其中间隙是页面对象外边界与边框之间的距离，页面对象是指网页中文字、图像、视频等。图7-2CSS结构7.2.1CSS结构模式CSS边距属性(margin)是指页面对象外边框与其它页面元素外边框之间的距离，即相邻两个页面对象外边框之间距离。用来设置一个元素所占空间的边缘到相邻元素之间的距离。可以用cm,mm,in,pt,
pc为单位。CSS边框属性(border)是指页面对象外边框线的宽度，一般以像素为单位。CSS间隙属性(padding)是指页面对象的外边缘与边框线之间的距离，一般单位为像素。
CSS背景属性是指边框线以内的背景颜色或图像。7.2.2字体属性CSS字体属性和属性功能见表7-1所示。
7.2.3文本属性CSS文本属性和属性功能见表7-2所示。
表7-1字体属性和功能属性功能属性值font-family字体名称“宋体”、"TimesNewRoman"等font-size字体大小18pt、18px、80%等color字体颜色RGB值font-style字体样式normal,italicfont-weight字体浓淡bold、lighter、normal或数值font-variant字体变量Normal、small-capsfont字体属性包含字体颜色、大小、样式等表7-2文本属性和功能属性功能属性值text-align文本对齐Left、right、center、justify(两端对齐)text-decoration文本修饰None、underline、overline、line-throughtext-indent文本缩进可以用cm,mm,in,pt,
pc，em,ex,px百分比line-height行高可以用cm,mm,in,pt,
pc，em,ex,px百分比letter-spacing字符间距可以用cm,mm,in,pt,
pc，em,ex,px7.2.4背景属性CSS背景属性和属性功能见表7-3所示。
表7-3背景属性和功能属性功能属性值background-color背景颜色RGB值background-image背景图像URLbackground-repeat背景重复repeat-x背景图片横向重复、repeat-y背景图片竖向重复、no-repeat背景图片不重复background-attachment背景依附与background-image属性结合使用，决定图片是随内容滚动，还是固定不动。background-position背景位置与background-image属性结合使用，用于图片定位。background背景包括：background-color,background-image,background-repeat,backgroundattachment,background-position。7.2.5边距属性CSS定义边距属性和属性功能如表7-4所示。
表7-4边距属性和功能属性功能属性值margin-left左边距可以用cm,mm,in,pt,
pc,px百分比margin-right右边距可以用cm,mm,in,pt,
pc,px百分比margin-top上边距可以用cm,mm,in,pt,
pc,px百分比margin-bottom下边距可以用cm,mm,in,pt,
pc,px百分比margin边距可以用cm,mm,in,pt,
pc,px百分比7.2.6边框属性CSS定义边框属性和属性功能如表7-5所示。
表7-5边框属性和功能属性功能属性值border-style边框风格None、dotted、dashed、solid、double、groove、ridge、inset、outsetborder-width边框宽度medium、thin、thick长度单位cm,mm,in,pt,
pc，em,ex,
pxborder边框包含：border-width,border-style和border-color7.3CSS定位CSS可以实现页面对象的定位和浮动，CSS对页面对象的定位是指页面元素相对于父元素、其它元素或浏览器窗口的位置。CSS有三种基本的定位机制：普通文档流、浮动和绝对定位。普通文档流机制是指页面中元素的位置由元素在HTML代码中的位置决定，即按照元素先后顺序来排定位置，是CSS的默认定位机制。7.3CSS定位一、普通文档流
HTML页面中包含多种对象，每个对象为一个独立的块，整个页面由相对独立的块元素构成。普通文档流定位中，块元素的位置由元素在HTML页面中的位置决定。块元素从上到下依次显示，块与块之间用页边距margin定义。7.3CSS定位二、定位
相对定位relative
相对定位是在普通文档流定位基础上，以原来在文档流中的位置为起点进行定位。移动后页面元素所占区域包括文档流定位区域和移动后区域。例如，#remove{top:20px;left:20px;position:relative;}，此样式定义的页面元素左边距为20像素，上边距为20像素。7.3CSS定位绝对定位absolute
CSS具有明显的层次结构，绝对定位就是相对已经定位的最近祖先元素进行定位的方式，如果没有祖先元素，绝对定位相对于页面画布或HTML页面定位。绝对定位不受普通文档流的限制，可以在页面上四个方向上移动，移动过程中可能覆盖其它底层页面元素，可以通过改变Z-Iindex属性来控制页面块元素的叠放次序。7.3CSS定位固定定位fixed
固定定位是指页面的块元素相对于浏览器窗口定位，其余的特点与绝对定位相似。7.3CSS定位默认定位static
position的默认值，一般不设置position属性时，会按照正常的文档流进行定位。7.3CSS定位三、浮动
浮动元素的边框可以实现左右移动，当元素的外边框遇到其它元素外边框时停止浮动。浮动元素的外边框不受普通文档流的约束。7.4Position属性CSS使用position属性实现定位，position的四个属性值分别是：relative，absolute，fixed，static。7.4.1相对定位relative相对定位是相对于文档流的位置进行移位的定位方式。例如，定义inner_1的position属性为relative时，产生的移位效果如图7-3所示，inner_2的position属性没有定义，其位置不会因为inner_1的位置改变而改变，但其部分位置会被inner_1的对象覆盖。图7-3相对定位7.4.2绝对定位absolute绝对定位是指页面对象相对于最近外层对象或父对象进行定位。绝对定位根据外层对象定位分两种情况：
当inner_1的外层对象external设置了position属性，并且position的属性值为absolute或者relative时，此时inner_1相对于外层对象external进行定位，即inner_1移动的参照物是外层对象。如果external设定了margin，border，padding等属性，inner_1将以external的padding开始的位置作为定位起点，即padding的左上角作为定位起点。7.4.3固定定位fixed
可以将CSS固定定位看作是一种特殊的absolute定位，即fixed定位是以body作为定位参照物，即以浏览器的窗口为起始点进行定位。程序【例7-5】实现CSS属性position的固定定位，如图7-5所示，是在Opera浏览器中测试的效果。7.5Float属性CSS通过float属性来定义页面对象的浮动效果，网页中的浮动对象与周围文字相对独立，文字可以围绕浮动对象显示。浮动对象仍然是文档流的一部分，与position属性的相对定位类似。float属性主要属性值包括：none表示对象不浮动，left表示对象浮动到左边，right表示对象浮动到右边。7.5Float属性用float属性定义的页面对象，浮动范围会随着浏览器的大小和分辨率的变化而改变，而用position属性定义的对象不会随浏览器大小变化，因此，float属性布局比position布局更为灵活一些，div布局主要使用float属性实现。7.5Float属性CSS中将页面标签分为块级元素和行级元素，块级元素可以显示在页面的任何位置，以块为单位，行级元素受行的约束，显示在一行中，多个行级元素可以显示在一行中。例如，常用标签<P>、<DIV>、<H1>属于块级标签，常用标签<A>、<BR>、<IMG>属于行级标签。7.5Float属性块级元素总是从新的一行开始，大小和边距都可以调整，默认宽度是占其父级对象的100%，也可以约束宽度。行级元素和块级元素可以相互转换，如果需要一个行级元素从新行开始，可以将其转换为块级元素，即设置display=block；如果希望块级元素与其它元素显示在一行中，可以将其转换为行级元素，即设置display=inline。7.5Float属性CSS样式表中float属性可以对行级标签的位置属性
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 《2024年 BMPs-Smads信号通路与Hoxc8基因在成骨分化过程中关系的研究》范文
- 车削加工技术 第2版 课件 模块六 车削成形面和表面修饰加工 任务一 车削成形面
- 出版行业数字化出版及发行平台建设
- 《六项精进》读后感
- 农业行业智慧农业综合服务平台构建方案
- 2017年医疗机构行业风险分析报告
- 2024年重庆市消防设施操作员《中级技能-维保方向》科目真题冲刺卷9月份A卷
- 施工组织设计(含钢结构)
- 中国对苯二甲酸市场供需态势与投资前景分析报告2024-2030年
- 廉洁自律爱岗敬业远离腐败
- 新时代中小学教师职业行为十项准则
- 2017年上海公务员考试《行测》真题（AB合卷）及参考答案解析
- 信息素养培养导向的课程设计方法
- YD 5178-2009 通信管道人孔和手孔图集
- 《商务礼仪知识》课件
- 消费者行为学-网络消费心理与行为
- 《示儿》的说课课件
- 创意绘画《共度国庆》课件
- 走近中秋节研究报告
- 市政道路工程施工机械设备一览表格
- 四川高端会计人才选拔笔试题
评论
0/150
提交评论