CSS网页样式设置
divcss制作网页模板的基本步骤(divcss网页页面效果制作
divcss制作网页模板的基本步骤（divcss网页页面效果制作导读大家好,小宜来为大家讲解下。
div，css制作网页模板的基本步骤（div+css网页页面效果制作这个很多人还不知道,现在让我们一起来看看吧！Div ...大家好,小宜来为大家讲解下。
div，css制作网页模板的基本步骤（div+css网页页面效果制作这个很多人还不知道,现在让我们一起来看看吧！Div CSS制作网页模板的基本步骤在当今数字化的世界里，网站已成为公司、组织、个人宣传以及推广业务的关键。
为了制作优质的网站，设计师们需要掌握许多技术和方法，其中之一是使用Div CSS。
本文将介绍Div CSS制作网页模板的基本步骤，帮助初学者了解如何应用这一技术，确保网页的美观和难忘。
一、确定网页结构每个网页都有一个独特的结构。
在开始使用Div CSS之前，您需要知道您想要创建的网页类别。
是一个单页网站，还是包含多个页面？您使用的是静态页面还是动态页面？这些因素都将影响您的设计。
二、设计布局设计布局是网站设计中的重要一步。
您可以使用Div CSS创建各种不同的布局，比如多列、单列、网格等。
您可以使用float属性设置网页中内容的布局。
通过复制和粘贴，您可以创建一个包含多个元素的布局，然后使用float属性对它们进行排列。
三、使用CSS设置样式CSS是Cascading Style Sheets的缩写，用于定义HTML元素的外观和布局，使网站看起来更具吸引力。
您可以使用CSS设置文字、颜色、背景、边框、文本、间距等。
Div CSS的一个关键特性是可以在HTML模板中分离布局和样式。
然后，通过CSS样式表拾取器来应用这些样式。
四、使用CSS优化网站在优化网站时，可以通过CSS的各种技术提高性能和用户体验。
在页面加载时，如果使用过多的CSS或大型背景图像，会使页面加载速度变慢。
流线型CSS是一种有效的优化网页的方式。
通过移除旧版的CSS，使用高效代码重写新的CSS，并将其中的重复内容与变量合并，可在较短的时间内实现较快的加载速度。
css的三种使用方式
css的三种使用方式CSS的三种使用方式CSS（层叠样式表）是用于描述网页样式的语言，可以实现对网页的布局和样式的控制。
在使用CSS时，有三种常见的方式：内联样式、内部样式表和外部样式表。
一、内联样式内联样式是将CSS样式直接写在HTML标签的style属性中，它的优先级最高，会覆盖其他方式设置的样式。
使用内联样式的语法如下：```html<p style="color: red; font-size: 16px;">这是一段红色字体，字号为16px的文字。
</p>```内联样式的优点是简单快捷，适合对单个标签进行样式设置。
但是，当需要对多个标签设置相同的样式时，就显得非常繁琐和冗余了。
二、内部样式表内部样式表是将CSS样式写在HTML文档的<head>标签内的<style>标签中，使用内部样式表可以对整个HTML文档中的标签进行样式设置。
使用内部样式表的语法如下：```html<head><style>p {color: blue;font-size: 14px;}</style></head><body><p>这是一段蓝色字体，字号为14px的文字。
</p></body>```内部样式表的优点是可以在同一个HTML文档中集中管理样式，方便维护和修改。
但是，当需要在多个HTML文档中使用相同的样式时，就需要重复地将内部样式表复制到每个HTML文档中，这样会造成代码的冗余。
三、外部样式表外部样式表是将CSS样式写在一个独立的CSS文件中，然后在HTML 文档中通过<link>标签引入该CSS文件，使用外部样式表可以实现样式的重用。
使用外部样式表的语法如下：```html<head><link rel="stylesheet" href="style.css"></head><body><p>这是一段样式来自外部样式表的文字。
网页设计中的CSS样式代码详解
CSS 背景属性属性描述值IE F N W3C background 简写属性，作用是将背景属性设置在一个声明中。
background-color background-imagebackground-repeat background-attachmentbackground-position4161background-attachment背景图像是否固定或者随着页面的其余部分滚动。
scrollfixed4 1 6 1background-color设置元素的背景颜色。
color-rgb color-hex color-nametransparent 4 1 4 1background-image把图像设置为背景。
urlnone 4 1 4 1background-position设置背景图像的起始位置。
top left top center top right center left center center center right bottom left bottom center bottom right x-% y-%x-pos y-pos 4 1 6 1background-repeat 设置背景图像是否及如何重复。
repeat repeat-x repeat-yno-repeat4141CSS 边框属性 (border)border-bottom简写属性。
作用是在一个声明中用来设置下边框的所有属性。
∙ border-bottom-w idthborder-styleborder-color 4 1 6 1border-bottom-color 设置下边框的颜色。
border-color 4 1 6 2 border-bottom-style 设置下边框的样式。
border-style 4 1 6 2 border-bottom-width设置下边框的宽度。
thin medium thicklength 4141border-color设置四个边框的颜色，可以设置一到四个颜色。
CSS网页样式设置
在本书第2章中，简单介绍了CSS的用法，但是CSS 在网页设计中的作用远远不止于此。本章从CSS的概 念出发，介绍CSS语言的特点，以及如何在网页中引 入CSS，然后重点介绍CSS的基本语法。
CSS（Cascading Style Sheet），中文译为层叠样 式表，是用于控制网页样式并允许将样式信息与网页 内容分离的一种标签性语言。CSS是1996年由W3C审 核通过并推荐使用的。简单地说，CSS的引入就是为 了使HTML能够更好地适应页面的美工设计。
其在IE中的显示效果如图11-1所示，四个标题都变 成了蓝色黑体字。这时如果希望将这四个标题改成红 色，在这种传统的HTML中就需要对每个标题的 “<font>”标签都进行修改，倘若是整个网站，这样的 工作量是没法让设计者接受的。
图11-1
给标题添加效果
其实传统HTML的缺陷远不止例11-1中所反映的这 一个方面，相比CSS为基础的页面设计方法，其所体 现出的劣势主要有以下几点。
例如例11-7所示的代码。 【例11-7】 导入式样式 <html> <head> <title>标题在这里</title> <style type="text/css"> <!--
@import url(1.css); --> </style> </head> <body> <h2>第一行标题1</h2> <p>紫红色、斜体、下划线、28px的效果1</p>
在CSS中文字都是通过“font”的相关属性进行设置 的，例如通过“font-family”属性来控制文字的字体， 通过“font-size”属性来控制文字的大小，通过“color” 属性设置文字的颜色，通过“font-weight”属性来设置 文字的粗细，通过设置“font-style”属性来控制文字是 否为斜体，通过设置文字的text-decoration属性来实 现文字的下划线、顶划线、删除线等
网页设计与制作案例教程(HTML5+CSS3)第6章使用CSS设置列表样式
WEB
13
6.6.1 HTML列表
在HTML中有三种列表
项目列表
编号列表
定义列表
WEB
6.6.1 HTML列表
① 项目列表
项目列表也称为无序列表，是网页中的常见元素之一，项目列
表使用<li>标签来罗列各个项目，各个项目使用特殊符号来进行分
项标识，如黑色圆点等。项目列表的列表项之间没有顺序关系。 语法格式 <ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> <li>列表项</li> …… </ul>
26
6.7 提高项目：制作“童书畅销榜”页面
27
6.8 拓展项目：制作“商品列表”页面
28
WEB
网 页 效 果
代 码
20
6.6.2 常用CSS列表样式
① 设置列表符号类型
项目列表项的默认符号是黑色圆点，编号列表项默认 符号是数字1、2、3…..，通过设置list-style-type属性可 以改变列表项的符号。 语法格式
list-style-type:属性值;
21
6.6.2 常用CSS列表样式
19
6.6.1 HTML列表
③ 定义列表
<!doctype html> <html> <head> <meta charset="utf-8"> <title>定义列表</title> </head> <body> <dl> <dt>中国的城市:</dt> <dd>北京</dd> <dd>上海</dd> <dd>广州</dd> <dt>美国的城市:</dt> <dd>华盛顿</dd> <dd>纽约</dd> <dd>洛杉矶</dd> </dl> </body> </html>
3.2 CSS3样式属性
6.@font-face属性（使用服务器端字体）
@font-face{ }
font-famliy:字体名称; src:字体路径;
CSS3背景样式属性
网页能通过背景图像给浏览者留下深刻的印象，不同主题的网站 特色往往会体现在网站背景上，合理控制背景颜色和背景图像至 关重要，在网页设计制作中，通过CSS3的一系列背景样式属性 来控制网页背景的显示效果，如背景颜色、背景图像背景图像平 铺方式、背景图像位置等属性。
background-image:linear-gradient(渐变角度,颜色值1,颜色值2,...,颜色值n)
CSS3渐变属性
2.径向渐变 径向渐变是网页中另外一种常用的渐变，在径向渐变过程中，起 始颜色会从一个中心点开始，依据椭圆或圆形形状进行扩张渐变 。运用CSS3中的“background-image:radial-gradient(参数值 );”样式可以实现线性渐变效果，其基本语法格式如下。
P{font-family:”微软雅黑”;}
2.font-size属性(字体大小)
p{font-size:12px;}
3.color属性（字体颜色）
p{color:#FF00000;}
CSS3文本样式属性
4.font-style属性(字体风格)
p{font-style:italic;}
5.font-weight属性(字体粗细)
background-image:radial-gradient(渐变形状 圆心位置,颜色值1,颜色值2,...,颜色值n)
CSS3边框样式属性
网页制作中元素的边框是经常需要美化和修饰的，通过HTML定 义的元素边框风格单一，无法满足网页美观的要求。在CSS样式 中，通过对boder属性进行定义边框的宽度、样式、颜色、圆角 边框等，可以使网页元素的边框有更丰富的样式，从而使元素的 效果更加美观。
网页设计入门--如何使用css设置字体和文本样式
⽹页设计⼊门--如何使⽤css设置字体和⽂本样式⼀、定义字体类型font-family:Arial,Helvetica,serif,sans-serif,monospace;ps.字体与字体之间⽤逗号隔开，句尾⽤分号例如：<html><head><title>my first text html</title><style type="text/css">.p1{font-family:serif;}.p2{font-family:sans-serif;}.p3{font-family:monospace;}</style></head><body>welcome to my first text html!<p class="p1">我是serif字体!</p><p class="p2">我是sans-serif字体!</p><p class="p3">我是monospace字体!</p></body></html>显⽰结果如下：⼆、定义字体⼤⼩font-size:xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|lengthps:1、xx-small（最⼩）、x-small（较⼩）、small（⼩）、medium（正常）、large（⼤）、x-large（较⼤）、xx-large（最⼤）、larger（增⼤）、smaller（减⼩）、length（可以是百分数、或者浮点数和单位标识符组成的长度值，但不能为负值。
其百分⽐的取值是基于⽗对象中字体的尺⼨来计算的，与em单位计算⽅法相同）;2、还可以⽤px（像素）、in（英⼨）、em（基于⽗辈字体⼤⼩为参考设置字体⼤⼩）、cm（厘⽶）、pt（点）、pc（⽪卡）来定义字体⼤⼩;3、浏览器默认字体⼤⼩为16px，所以1.2em=19.2px，0.875em=14px，0.625em=10px；4、对于⽹页宽度固定或者栏⽬宽度固定的布局，使⽤像素是正确的选择；对于⽹页宽度不固定或者栏⽬宽度也不固定的页⾯，使⽤百分⽐或em是正确的选择，这样可以⽅便客户端浏览器调整字体⼤⼩；例如：<html><head><title>my first text html</title><style type="text/css">div{font-size:20px;}.p1{font-size:0.6in;}.p2{font-size:0.8em;}.p3{font-size:2cm;}.p4{font-size:16pt;}.p5{font-size:2pc;}</style></head><body>我的字号为16px!<div>我的字号为20px!<p class="p1">我的字号为0.6in!</p><p class="p2">我的字号为0.8em!</p><p class="p3">我的字号为2cm!</p><p class="p4">我的字号为16pt!</p><p class="p5">我的字号为2pc!</p></div></body></html>显⽰结果如下：三、定义字体颜⾊如下为定义字体颜⾊的四种⽅法：color:red; /*使⽤颜⾊名*/color:#693333; /*使⽤⼗六进制*/color:rgb(120,120,120); /*使⽤rgb*/color:rgb(0%,100%,50%);四、定义字体粗细font-weight:normal|bold|bolder|lighter|100|200|300|400（相当于normal）|500|600|700（相当于bold）|800|900 PS:bolder和lighter是相对于normal字体粗细进⾏加粗和减细操作五、定义斜体字体font-style:normal|italic（斜体）|oblique（倾斜的字体）PS:italic和oblique这两个取值只能在英⽂等西⽅⽂字中有效例如：<html><head><title>my first text html</title><style type="text/css">.p1{font-style:normal;}.p2{font-style:italic;}.p3{font-style:oblique;}</style></head><body><p class="p1">我的字体为normal!</p><p class="p2">我的字体为italic!</p><p class="p3">我的字体为oblique!</p></body></html>显⽰结果如下：六、定义下划线、删除线和顶划线text-decoration:none|underline|overline|line-through|blink（闪烁效果）PS:不同的效果可以同时⽤，只需效果之间加空格即可例如：<html><head><title>my first text html</title><style type="text/css">.p1{text-decoration:underline;}.p2{text-decoration:underline overline;}.p3{text-decoration:underline overline blink;}</style></head><body><p class="p1">我的字体使⽤了underline效果!</p><p class="p2">我的字体使⽤了underline和overline效果!</p><p class="p3">我的字体使⽤了underline、overline和blink效果!</p></body></html>显⽰效果如下：七、定义字体⼤⼩写定义字体⼤⼩写有两种⽅法：font-variant:normal|small-caps（⼩型的⼤写字母字体）;text-transform:capitalize（⾸字母⼤写）|uppercase（⼤写）|lowercase（⼩写）;例如：<html><head><title>my first text html</title><style type="text/css">.p1{font-variant:normal;}.p2{font-variant:small-caps;}.p3{text-transform:capitalize;}.p4{text-transform:uppercase;}.p5{text-transform:lowercase;}</style></head><body><p class="p1">normal!</p><p class="p2">small-caps!</p><p class="p3">capitalize!</p><p class="p4">uppercase!</p><p class="p5">LOWERCASE!</p></body></html>显⽰效果如下：⼋、定义⽂本对齐text-align:left|right|center|justify（两端对齐）九、定义垂直对齐vertical-align:auto|baseline|sub|super|top|text-top|middle|bottom|text-bottom|length PS:auto：根据layout-flow属性的值对齐对象内容；baseline：将⽀持valign特性的对象内容与基线对齐；sub：垂直对齐⽂本的下标；super：垂直对齐⽂本的上标；top：将⽀持vlign特性的对象的内容与对象顶端对齐；text-top：将⽀持vlign特性的对象的⽂本与对象顶端对齐；middle：将⽀持vlign特性的对象的内容与对象中部对齐；bottom：将⽀持vlign特性的对象的内容与对象底端对齐；text-bottom：将⽀持vlign特性的对象的⽂本与对象底端对齐；length：由浮点数字和单位标识符组成的长度值或百分数，可为负数，定义由基线算起的偏移量，基线对于数值来说为0，对于百分数来说就是0%例如：<html><head><title>my first text html</title><style type="text/css">.span1{vertical-align:auto;}.span2{vertical-align:baseline;}.span3{vertical-align:sub;}.span4{vertical-align:super;}.span5{vertical-align:top;}.span6{vertical-align:text-top;}.span7{vertical-align:middle;}.span8{vertical-align:bottom;}.span9{vertical-align:text-bottom;}.span10{vertical-align:2;}</style></head><body><p><span class="span1">根据layout-flow属性的值对齐对象内容</span><span class="span1">auto</span></br><span class="span1">将⽀持valign特性的对象内容与基线对齐</span><span class="span2">baseline</span></br><span class="span1">垂直对齐⽂本的下标</span><span class="span3">sub</span></br><span class="span1">垂直对齐⽂本的上标</span><span class="span4">super</span></br><span class="span1">将⽀持vlign特性的对象的内容与对象顶端对齐</span><span class="span5">top</span></br><span class="span1">将⽀持vlign特性的对象的⽂本与对象顶端对齐</span><span class="span6">text-top</span></br><span class="span1">将⽀持vlign特性的对象的内容与对象中部对齐</span><span class="span7">middle</span></br><span class="span1">将⽀持vlign特性的对象的内容与对象底端对齐</span><span class="span8">bottom</span></br><span class="span1">将⽀持vlign特性的对象的⽂本与对象底端对齐</span><span class="span9">text-bottom</span></br><span class="span1">由浮点数字和单位标识符组成的长度值或百分数，可为负数，定义由基线算起的偏移量，基线对于数值来说为0，对于百分数来说就是0%</span><span class="span10">length=2</span></br></p></body></html>显⽰效果如下：⼗、定义字间距letter-spacing:1em;（字母与字母或者汉字与汉字之间的间距）word-spacing:1em;（定义单词与单词之间的间距）⼗⼀、定义⾏间距line-height:normal（默认值，⼀般为1.2em）|length（表⽰百分⽐数字，或者由浮点数字和单位标识符组成的长度值，允许为负值）;例如：p{font-size:12pt;line-height:12pt;}⼗⼆、定义缩进text-indent:length（表⽰百分⽐数字，或者由浮点数字和单位标识符组成的长度值，允许为负值）;PS:建议设置缩进单位时，以em为设置单位，它表⽰⼀个字距，这样⽐较精确确定⾸⾏缩进效果。
网页设计第6章
test.htm
方法二：定义内部 方法二：定义内部CSS样式 样式
在网页的<HEAD>...</HEAD>标签间加入 标签间加入CSS样 在网页的 标签间加入 样 式定义， 式定义，这种方法适用于指定某个网页的具体外 观。 <head> <style type="text/css"> 为了防止不支持CSS 为了防止不支持 <!-的浏览器误将<style> 的浏览器误将 …</style>标签间的 …</style>标签间的 .H1 { CSS样式定义当成普 样式定义当成普 font-size: 16px; 通字符串显示在网页 font-family: Helvetica; 最好将CSS样式 上，最好将 样式 font-weight: bold; 定义放置在 <!--… --> } 标签之间 --> </style> </head>
类型二： 类型二：标签样式
应用于指定HTML标签的样式。 标签的样式。 应用于指定 标签的样式
<style type="text/css"> <!-p{ font-family: "华文楷体 华文楷体"; 华文楷体 font-size: 24px; font-weight: bold; color: #6633FF; text-decoration: underline; } --> </style> <p> 应用了标签样式的文本 </p>
方法四：定义内联 方法四：定义内联CSS样式 样式
内联CSS样式是在某个 样式是在某个HTML标签内使用 标签内使用style属 内联 样式是在某个 标签内使用 属 性定义适用于该标签的个别样式。 性定义适用于该标签的个别样式。 <body style="background-color: #cbcbcb"> <h1 style="font-size: 16px; font-family: Helvetica; font-weight: bold;"> 内联CSS样式的应用 内联 样式的应用 </h1> </body>
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
图11-10 CSS设置文字效果
11.4.2 CSS文字段落
段落是由一个个文字组合而成的，同 样是网页中最重要的组成部分之一，因此 前面提到的文字属性，对于段落同样适用。 但CSS针对段落也提供了很多样式属性， 本节将通过实例进行详细介绍。
图11-5
内嵌式
11.2.3 链接式
链接式样式表是使用频率最高，也是 最为实用的方法。它将HTML页面本身与 CSS样式风格分离为两个或者多个文件， 实现了页面框架HTML代码与美工CSS代码 的完全分离，使得前期制作和后期维护都 十分方便，网站后台的技术人员与美工设 计者也可以很好地分工合作。
在本书第2章中，简单介绍了CSS的用 法，但是CSS在网页设计中的作用远远不 止于此。本章从CSS的概念出发，介绍 CSS语言的特点，以及如何在网页中引入 CSS，然后重点介绍CSS的基本语法。
11.1 CSS的概念
CSS（Cascading Style Sheet）， 中文译为层叠样式表，是用于控制网页样 式并允许将样式信息与网页内容分离的一 种标签性语言。CSS是1996年由W3C审核 通过并推荐使用的。简单地说，CSS的引 入就是为了使HTML能够更好地适应页面的 美工设计。
在HTML文件中导入样式表，常用的有 如下几种“@import”语法，可以任意选择 一种放在“<style>”与“</style>”标签之 间：
（1）@import url(sheet1.css); （2）@import url("sheet1.css"); （3）@import url('sheet1.css'); （4）@import sheet1.css; （5）@import "sheet1.css"; （6）@import 'sheet1.css';
图11-2 CSS的引入
网上的浏览器各式各样，绝大多数浏 览器对CSS都有很好的支持，因此设计者 往往不用担心其设计的CSS文件不被用户 所支持。但目前的问题在于，各个浏览器 之间对CSS很多细节的处理上存在差异， 设计者在一种浏览器上设计的CSS效果， 在其他浏览器上的结果很可能大相径庭。
就目前主流的两大浏览器IE与Firefox 而言，在某些细节的处理上就不尽相同。 IE本身在IE6与发布不久的IE7之间，对相 同页面的浏览效果都存在一些差异。例如 例11-3所示的代码。
例如例11-7所示的代码。 【例11-7】 导入式样式 <html> <head> <title>标题在这里</title> <style type="text/css"> <!--
@import url(1.css); --> </style> </head> <body> <h2>第一行标题1</h2> <p>紫红色、斜体、下划线、28px的效果1</p>
color:#FF00FF; text-decoration:underline; font-weight:bold; font-size:25px; } --> </style>
</head> <body> <p>紫色、粗体、下划线、25px的效果 1</p> <p>紫色、粗体、下划线、25px的效果 2</p> <p>紫色、粗体、下划线、25px的效果 3</p> </body> </html>
其实传统HTML的缺陷远不止例11-1中 所反映的这一个方面，相比CSS为基础的 页面设计方法，其所体现出的劣势主要有 以下几点。
图11-1
给标题添加效果
（1）维护困难。 （2）标签不足。 （3）网页过胖。 （4）定位困难。
11.1.2 CSS的引入
对于上例，倘若引入CSS对其中的 <h2>标签进行控制，那么情况将完全不同， 如例11-2所示。
图11-6
链接式
11.2.4 导入式
导入式样式表与上节提到的链接式样 式表功能上基本相同，只是语法和运作方 式上略有区别。采用import方式导入的样 式表，在HTML文件初始化时，会被导入到 HTML文件内，作为其一部分，类似内嵌式 的效果。而链接式样式表则是在HTML的标 签需要格式时才以链接的方式引入。
【例11-3】 浏览器的差异 <html> <head> <title>页面标题</title> <style> <!-ul{
list-style-type:none; display:inline; } --> </style> </head> <body>
<ul>
<li>浏览器区别1</li> <li>浏览器区别2</li> </ul> </body> </html>
图11-9
嵌套选择器
11.4 CSS设置文字效果
文字是网页设计中永远不可缺少的元 素，各种各样的文字效果遍布在整个 Internet中。本节从基础的文字设置出发， 讲解CSS设置各种文字效果的方法，然后 再进一步讲解段落排版的相关内容。
11.4.1 CSS文字样式
使用过Word编辑文档的用户一定对会 注意到，Word可以对文字的字体、大小、 颜色等各种属性进行设置。CSS同样可以 对HTML页面中的文字进行全方位的设置。 本节主要介绍CSS设置文字各种属性的基 本方法。
图11-4
行内样式
11.2.2 内嵌式
内嵌式样式表就是将CSS写在 <head>与</head>之间，并且用<style>和 </style>标签进行声明，如例11-5所示。
【例11-5】 内嵌样式 <html> <head> <title>页面标题</title> <style type="text/css"> <!-p{
这是一段很简单的HTML代码，并用 CSS对<ul>标签进行了样式上的控制。而 这段代码在IE7中的效果与Firefox中的显示 效果就存在差别，如图11-3所示。
图11-3 IE与Firefox的效果区别
11.2 使用CSS控制页面
在对CSS有了大致的了解后，便希望 使用CSS对页面进行全方位的控制。本节 主要介绍如何使用CSS控制页面，以及其 控制页面的各种方法，包括行内样式、内 嵌式、链接式、导入式等。
11.2.1 行内样式
行内样式是所有样式方法中最为直接 的一种，它直接对HTML的标签使用style 属性，然后将CSS代码直接写在其中，如 例11-4所示。
【例11-4】 行内样式 <html> <head> <title>标题在这里</title> </head> <body>
<p style="color:#0000FF; font-size:18px; fontweight:bold;">CSS内容1</p> <p style="color:#000000; textdecoration:underline; font-style:italic;">正文 CSS2</p> <p style="color:#FF33CC; font-size:28px; font-weight:bold;">CSS正文内容3</p> </body> </html>
<h2>第一行标题1</h2> <p>紫红色、斜体、下划线、28px的效果 1</p> <h2>第二行标题2</h2> <p>紫红色、斜体、下划线、28px的效果 2</p> </body> </html>
然后创建文件1.css，如下所示：
h2{ color:#0000FF; } p{ color:#FF33CC; text-decoration:underline; font-style:italic; font-size:28px; }
11.3.1 选择器集体声明
在声明各种CSS选择器时，如果某些 选择器的样式风格是完全相同的，或者部 分相同，这时便可以利用集体声明的方法， 将风格相同的CSS选择器同时声明，如例 11-8所示。
图11-8
集体声明
11.3.2 选择器的嵌套
在CSS选择器中，还可以通过嵌套的 方式，对特殊位置的HTML标签进行声明， 例如当“<p>”与“</p>”之间包含 “<b></b>”标签时，就可以使用嵌套选择 器进行相应的控制。具体如例11-9所示。
第11章 CSS网页样式设置
11.1
CSS的概念
11.2
使用CSS控制页面
11.3
复合CSS选择器
11.4
CSS设置文字效果
11.5
CSS设置图片效果
11.6
CSS设置页面背景
11.7
使用CSS设置超链接效果
11.8
使用CSS设置项目列表
11.9
实践与练习：CSS制作实用菜单
11.8
小结
通过前章节的学习，读者对HTML语言 已经比较熟悉，它是所有网页制作的基础。 但是如果希望网页能够美观、大方，并且 升级方便，维护轻松，那么仅仅HTML是不 够的，CSS在这中间扮演着重要的角色。