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>
CSS的具体样式设置
图4.33ቤተ መጻሕፍቲ ባይዱ水平位置
图4.34 垂直位置
1.3 区块样式设置
“区块”设置可以定义标签和属性的间距和对齐，通常适用于整段 的文本和表格的单元格。在“背景样式设置”的网页文件中本书 创建了名为“.test”的样式表用来设置区块样式，在“CSS样式 定义”对话框“分类”列表中选择“区块”，如图4.35所示。
宽度：设置元素四个方向边框的粗细，预设值有“粗”、“中”、 “细”，也可以手工设置值。设置后的效果如图4.42所示。两种 浏览器都支持“宽度”属性。
全部相同：将相同的边框宽度设置的“上”、“右”、“下”和 “左”侧，取消选择“全部相同”可设置元素各个边的边框宽度。
颜色：设置边框的颜色。可以分别设置每个边的颜色，但显示取 决于浏览器。
图4.31 背景样式设置
图4.32 固定背景样式应用
图4.32中<body>部分使用了“test”样式，背景样式设置正如图4.31所 示，其中背景图片不会随着网页的滚动而滚动，而会保持相对固定的 位置。
主要设置如下。
背景颜色：通过选色器选择一种颜色作为背景色。
背景图像：通过浏览按钮选择作为背景的图像。
• 本章实例设置中test1样式设置为绝对定位，test2设置为相对定 位，其余设置一样。图4.47显示了绝对和相对效果，第一段文本 为绝对定位，不受前面分段符<p>的影响，第二段文本是相对定位， 受分段符<p>的影响，浏览器效果如图4.48所示。
图4.47 类型设置对比
图4.48 浏览器中的对比效果
图4.28 字体大小设置 图4.29 字体样式
行高：类似于Word中的行距的概念，选项包括“自动”和 “（值）”，“自动”是计算机自动调整行高，“（值）”是设 计者用数值和单位进行具体设置，比较直观的写法是用百分比， 例如180%是指行高等于文字大小的1.8倍。如字体为14pt，要 设置行距为2倍行距，则行高的值应该是28pt，对比图如4.30所 示，上面两行是设置了行距的CSS样式应用效果，下面两行是没 有设置CSS样式。
列举css的三种设置方式
列举css的三种设置方式CSS，也就是层叠样式表（Cascading Style Sheets），是用于网页样式设计的一种标记语言，它提供了一种分离网页内容与网页样式的方法，使得页面的设计与具体的内容无关。
而在CSS中，有三种不同的设置方式，它们的特点各不相同，以下将依次介绍。
第一种设置方式——内联样式所谓内联样式，就是指将CSS样式直接嵌入到HTML标签的style属性中，可以对单个元素进行样式控制。
这种方式的特点是便于书写和修改，但不易维护，难以让样式统一，故而并不常用。
示例代码如下：html<body><h1 style="color: red; font-size:24px;">Hello, world!</h1><p style="color: blue; font-size: 18px;">This is my first inline-style paragraph.</p></body>上述代码中，style属性直接包含了CSS的样式规则，其中color表示文本颜色，font-size表示字体大小。
第二种设置方式——内部样式表内部样式表是指将CSS样式代码写在HTML文档的<head>标签内的<style>标签中，可以控制整个页面或整个网站下的某一部分元素的样式。
这种方式兼具内联样式的优点和外部样式表的优势，能够有效地实现样式的统一和维护。
示例代码如下：html<head><style>h1 {color: red; font-size:24px;}p {color: blue; font-size: 18px;}</style></head><body><h1>Hello, world!</h1><p>This is my first internal-style paragraph.</p></body>上述代码中，在<head>标签内设置了样式规则，在<body>标签内通过标签名（例如h1、p）来引用这些样式规则，并实现对整个页面或整个网站下的一类元素进行样式控制。
网页前端设计css样式大全(整理版)
CSS样式大全字体属性：(font)大小{font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD样式{font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)行高{line-height: normal;}(正常) 单位：PX、PD、EM粗细{font-weight: bold;}(粗体) lighter;(细体) normal;(正常)变体{font-variant: small-caps;}(小型大写字母) normal;(正常)大小写{text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)修饰{text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)常用字体：(font-family)"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana背景属性：(background)色彩{background-color: #FFFFFF;}图片{background-image: url();}重复{background-repeat: no-repeat;}滚动{background-attachment: fixed;}(固定) scroll;(滚动)位置{background-position: left;}(水平) top(垂直);简写方法{background:#000 url(..) repeat fixed left top;} /*简写·这个在阅读代码中经常出现，要认真的研究*/区块属性：(Block) /*这个属性第一次认识，要多多研究*/字间距{letter-spacing: normal;} 数值/*这个属性似乎有用，多实践下*/对齐{text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中)缩进{text-indent: 数值px;}垂直对齐{vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;词间距word-spacing: normal; 数值空格white-space: pre;(保留) nowrap;(不换行)显示{display:block;}(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group;table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题) /*display 属性的了解很模糊*/方框属性：(Box)width:; height:; float:; clear:both; margin:; padding:; 顺序：上右下左边框属性：(Border)border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;border-width:; 边框宽度border-color:#;简写方法border：width style color; /*简写*/列表属性：(List-style)类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;位置list-style-position: outside;(外) inside;图像list-style-image: url(..);定位属性：(Position)Position: absolute; relative; static;visibility: inherit; visible; hidden;overflow: visible; hidden; scroll; auto;clip: rect(12px,auto,12px,auto) (裁切)css属性代码大全一CSS文字属性：color : #999999; /*文字颜色*/font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/font-style:itelic; /*文字斜体*/font-variant:small-caps; /*小字体*/letter-spacing : 1pt; /*字间距离*/line-height : 200%; /*设置行高*/font-weight:bold; /*文字粗体*/vertical-align:sub; /*下标字*/vertical-align:super; /*上标字*/text-decoration:line-through; /*加删除线*/ text-decoration: overline; /*加顶线*/text-decoration:underline; /*加下划线*/ text-decoration:none; /*删除链接下划线*/ text-transform : capitalize; /*首字大写*/ text-transform : uppercase; /*英文大写*/ text-transform : lowercase; /*英文小写*/ text-align:right; /*文字右对齐*/text-align:left; /*文字左对齐*/text-align:center; /*文字居中对齐*/text-align:justify; /*文字分散对齐*/ vertical-align属性vertical-align:top; /*垂直向上对齐*/ vertical-align:bottom; /*垂直向下对齐*/ vertical-align:middle; /*垂直居中对齐*/vertical-align:text-top; /*文字垂直向上对齐*/vertical-align:text-bottom; /*文字垂直向下对齐*/二、CSS边框空白padding-top:10px; /*上边框留空白*/padding-right:10px; /*右边框留空白*/padding-bottom:10px; /*下边框留空白*/padding-left:10px; /*左边框留空白三、CSS符号属性：list-style-type:none; /*不编号*/list-style-type:decimal; /*阿拉伯数字*/list-style-type:lower-roman; /*小写罗马数字*/list-style-type:upper-roman; /*大写罗马数字*/list-style-type:lower-alpha; /*小写英文字母*/list-style-type:upper-alpha; /*大写英文字母*/list-style-type:disc; /*实心圆形符号*/list-style-type:circle; /*空心圆形符号*/list-style-type:square; /*实心方形符号*/list-style-image:url(/dot.gif); /*图片式符号*/list-style-position: outside; /*凸排*/list-style-position:inside; /*缩进*/四、CSS背景样式：background-color:#F5E2EC; /*背景颜色*/ background:transparent; /*透视背景*/background-image : url(/image/bg.gif); /*背景图片*/ background-attachment : fixed; /*浮水印固定背景*/ background-repeat : repeat; /*重复排列-网页默认*/background-repeat : no-repeat; /*不重复排列*/ background-repeat : repeat-x; /*在x轴重复排列*/ background-repeat : repeat-y; /*在y轴重复排列*/指定背景位置background-position : 90% 90%; /*背景图片x与y轴的位置*/ background-position : top; /*向上对齐*/background-position : buttom; /*向下对齐*/background-position : left; /*向左对齐*/background-position : right; /*向右对齐*/background-position : center; /*居中对齐*/五、CSS连接属性：a /*所有超链接*/a:link /*超链接文字格式*/a:visited /*浏览过的链接文字格式*/a:active /*按下链接的格式*/a:hover /*鼠标转到链接*/鼠标光标样式：链接手指CURSOR: hand十字体cursor:crosshair箭头朝下cursor:s-resize十字箭头cursor:move箭头朝右cursor:move加一问号cursor:help箭头朝左cursor:w-resize箭头朝上cursor:n-resize箭头朝右上cursor:ne-resize箭头朝左上cursor:nw-resize文字I型cursor:text箭头斜右下cursor:se-resize箭头斜左下cursor:sw-resize漏斗cursor:wait光标图案(IE6) p {cursor:url("光标文件名.cur"),text;} 六、CSS框线一览表：border-top : 1px solid #6699cc; /*上框线*/ border-bottom : 1px solid #6699cc; /*下框线*/ border-left : 1px solid #6699cc; /*左框线*/ border-right : 1px solid #6699cc; /*右框线*/以上是建议书写方式,但也可以使用常规的方式如下: border-top-color : #369 /*设置上框线top颜色*/ border-top-width :1px /*设置上框线top宽度*/ border-top-style : solid/*设置上框线top样式*/其他框线样式solid /*实线框*/dotted /*虚线框*/double /*双线框*/groove /*立体内凸框*/ridge /*立体浮雕框*/inset /*凹框*/outset /*凸框*/七、CSS表单运用：文字方块按钮复选框选择钮多行文字方块下拉式菜单选项1选项2八、CSS边界样式：margin-top:10px; /*上边界*/margin-right:10px; /*右边界值*/margin-bottom:10px; /*下边界值*/margin-left:10px; /*左边界值*/CSS 属性：字体样式(Font Style)序号中文说明标记语法1 字体样式{font:font-style font-variant font-weight font-size font-family}2 字体类型{font-family:"字体1","字体2","字体3",...}3 字体大小{font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}4 字体风格{font-style:inherit|italic|normal|oblique}5 字体粗细{font-weight:100-900|bold|bolder|lighter|normal;}6 字体颜色{color:数值;}7 阴影颜色{text-shadow:16位色值}8 字体行高{line-height:数值|inherit|normal;}9 字间距{letter-spacing:数值|inherit|normal}10 单词间距{word-spacing:数值|inherit|normal}11 字体变形{font-variant:inherit|normal|small-cps }12 英文转换{text-transform:inherit|none|capitalize|uppercase|lowercase}13 字体变形{font-size-adjust:inherit|none}14 字体{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal|semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}文本样式(Text Style)序号中文说明标记语法1 行间距{line-height:数值|inherit|normal;}2 文本修饰{text-decoration:inherit|none|underline|overline|line-through|blink}3 段首空格{text-indent:数值|inherit}4 水平对齐{text-align:left|right|center|justify}5 垂直对齐{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub| super}6 书写方式{writing-mode:lr-tb|tb-rl}背景样式序号中文说明标记语法1 背景颜色{background-color:数值}2 背景图片{background-image: url(URL)|none}3 背景重复{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4 背景固定{background-attachment:fixed|scroll}5 背景定位{background-position:数值|top|bottom|left|right|center}6 背影样式{background:背景颜色|背景图象|背景重复|背景附件|背景位置}框架样式(Box Style)序号中文说明标记语法1 边界留白{margin:margin-top margin-right margin-bottom margin-left}2 补白{padding:padding-top padding-right padding-bottom padding-left}3 边框宽度{border-width:border-top-width border-right-widthborder-bottom-width border-left-width}宽度值：thin|medium|thick|数值4 边框颜色{border-color:数值数值数值数值}数值：分别代表top、right、bottom、left颜色值5 边框风格{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|gro ove}6 边框{border:border-width border-style color}上边框{border-top:border-top-width border-style color}右边框{border-right:border-right-width border-style color}下边框{border-bottom:border-bottom-width border-style color}左边框{border-left:border-left-width border-style color}7 宽度{width:长度|百分比| auto}8 高度{height:数值|auto}9 漂浮{float:left|right|none}10 清除{clear:none|left|right|both}分类列表序号中文说明标记语法1 控制显示{display:none|block|inline|list-item}2 控制空白{white-space:normal|pre|nowarp}3 符号列表{list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-a lpha|upper-alpha|none}4 图形列表{list-style-image:URL}5 位置列表{list-style-position:inside|outside}6 目录列表{list-style:目录样式类型|目录样式位置|url}7 鼠标形状{cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-re size|se-resize|sw-resize}。
css样式表的作用及使用方式
css样式表的作用及使用方式CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。
使用CSS样式设置页面格式，可将页面内容与表现形式分离。
以下是CSS样式表的主要作用及使用方式：一、作用：1. 可以灵活控制网页中文本的字体、颜色、大小、间距、风格及位置。
2. 可以灵活地为网页中的元素设置各种效果的边框。
3. 可以方便地为网页中的元素设置不同的背景颜色、背景图像及平铺方式。
4. 可以控制网页中各元素的位置，使元素在网页中浮动。
5. 可以为网页中的元素设置各种滤镜，从而产生诸如阴影、辉光、模糊和透明等只有在一些图像处理软件中才能实现的效果。
6. 可以与脚本语言相结合，使网页中的元素产生各种动态效果。
二、使用方式：1. 将样式定义在HTML元素的style属性中。
2. 将样式定义在HTML文档的header部分。
3. 将样式声明在一个专门的CSS文件中，以供HTML页面引用。
此外，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。
如果要修改样式，只需要在样式列表中找到相应的样式声明进行修改。
在多个页面中使用同一个CSS样式表，可以单独存放在一个CSS文件中，这样就可以在多个页面中使用同一个CSS样式表，实现多个页面风格的统一。
例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。
以上信息仅供参考，如需获取更多信息，建议咨询专业的编程人员。
CSS样式美化网页实例
将如下图像文件：img4_3_3.jpg、img4_3_4.jpg、img4_3_5.jpg、img4_3_6.jpg、（文档中用到的图像）和img5_1.gif、img5_2.gif、img5_3.gif、img5_4.gif（图像项目符）及img5_5.gif（背景图片）复制到images文件夹下。
将ex5_city.html复制到webpages文件夹中。
1．使用CSS样式美化文本①创建类样式步骤如下：打开ex5_city.html，在菜单栏中选择“窗口”—“CSS样式”命令，切换到如下的CSS样式面板。
单击“新建CSS规则”按钮（可尝试用不同的方法），弹出如下的对话框：设置如下参数后，点击确定：在新弹出的“.textcss的CSS规则定义”中设置如下参数②重新定义特定HTML标签<h2>步骤如下：打开“新建CSS规则”对话框，设置如下参数，点击确定在“h2的CSS规则定义”对话框中设置如下参数③应用CSS样式对文中正文文本（除标题外）应用“.textcss样式”（可尝试不同的方法），部分结果截图如下：2．利用CSS样式改变超链接①创建外部CSS样式表控制整个站点的风格步骤如下：“在新建CSS规则”对话框中设置如下参数后点击确定。
（注意HTML标签<a>的含义）在弹出的对话框中进行如下设置（保存文件的路径）：设置“a的CSS规则定义”对话框：结果截图如下：3．使用高级样式步骤如下：①选择文档中所有的链接(顶端的目录)，在文本“属性”检查器中单击“项目列表”按钮，为超链接文本所在段落添加圆点项目符。
②打开“新建CSS规则”对话框，设置a:link的样式，点击确定。
③设置a:visited的样式④设置a：active的样式⑤设置a：hover的样式：预览后截图如下：点击链接前：点击链接后：4.链接外部样式文件步骤如下：把img4_tr0.gif、img4_tr1.jpg、img4_tr2.jpg、img4_tr3.jpg、img4_tr4.jpg、img4_tr6.jpg复制到images文件中，将ex5_travel.html复制到webpages文件夹中，打开ex5_travel.html，按如下步骤，为该网页附加外部样式文件（注意：在附加链接前，要先对ex5_ travel.html中网页的部分内容建立超链接：比如锚链接和返回页首链接）效果截图如下：5.CSS样式综合应用①重定义HTML标签<body>设置页面背景颜色及图像。
基于CSS样式的网页排版布局
基于CSS样式的网页排版布局作者：刘畅来源：《消费电子·理论版》2013年第08期摘要：层叠样式表（CSS）是一组格式设置规则，用来控制网页的外观。
使用CSS样式设置页面格式，可将网页的内容与形式分离。
页面内容存放在HTML文档中，而用于定义页面内容形式的CSS规则可以放在外部样式表或HTML文档的头部。
目前使用CSS控制网页外观已经成为网页设计领域的规范。
关键词：CSS；HTML；网页布局中图分类号：TP393.09 文献标识码：A 文章编号：1674-7712 （2013） 14-0000-01一、CSS概述在Web2.0标准中，HTML语言只应用于定义网页的内容，要制作出漂亮且符合规范的网页，还需要使用CSS样式来设置网页元素的属性。
由CSS样式控制的网页，具有条理规范、布局统一、容易维护的优点。
CSS是Cascading Style Sheets的缩写，又称层叠样式表或级联样式表，是用于控制或增强网页外观样式，并且可以与网页内容分离的一种标签性语言。
使用CSS样式表，可以将网页的样式和内容分离，是网页更小、下载速度更快，还可以更加方便地更新和维护网页，因此，在网页设计中得到了广泛应用。
19997年，W3C工业结合组织首次发布CSS1.0，用于对HTML语言功能的补充。
1998年又推出了CSS2.0，进一步增强了HTML的语言功能。
2006年CSS的发布，将网页设计推向全新的时代。
二、CSS基本语法一个CSS样式表一般由若干样式规则组成，每个样式规则都可以看成是一条CSS的基本语句，每个规则都包含一个选择器和写在花括号里的声明，这些声明通常是由几组分号分隔的属性和值组成的。
（一）标签选择器标签选择器中，CSS的定义由3部分组成：标签（selector）、属性（properties）和属性值（Value）.基本格式如下：Selector{property：value…}Selector是HTML中的标签，如h1标签、p标签、img标签等。
利用CSS设置网页中的文字连接
一、看下面的样式：a:link { text-decoration: none} //a:link 指正常的未被访问过的链接a:active { text-decoration: none } //a:active 指点击链接的瞬间出现的链接情况a:visited { text-decoration: none } //a:visited 指已经访问过的链接a:hover { text-decoration: none; } //a:hover 指鼠标放上去链接出现的情况hover是一个经常会被混淆的属性，一般大家都认为链接是三个属性：link,active,visited，而且一般的网页制作软件里也只有这三个设置，但是hover其实也是一个非常重要的属性，它还可以在链接上加上背景色（BACKGROUND:#ccffcc;），其它的设置与上面三个一样，所以大家现在可以记住，链接上可以做四个属性设置，分别是：link,active,visited,hovertext-decoration是文字修饰效果的意思，none参数表示使有超级链接的文字不显示下划线。
如果讲none替换成underline就表示有下划线，换成overline则给超连文字加上划线，换成 line-through给超连文字加上删除线。
还有一个是blink参数，顾名思义是闪烁效果，但是他要在NetScape浏览器上才能显示。
二、使粗体文字加上删除线。
粗体文字使用的代码是：B { text-decoration: line-through }使粗体文字中所有的字母大写。
使用代码： B { text-transform: uppercase }（这个在NS中才显示出来，IE没有相应效果显示）产生既大写，又有颜色，又有删除线的效果的代码是：b { text-decoration:line-through; text-transform: uppercase; color: #66FFFF} 。
在网页中插入CSS样式表的几种方法
在网页中插入CSS样式表的几种方法要想在浏览器中显示出预期的CSS样式表效果，就要让浏览器识别并正确调用CSS。
当浏览器读取样式表时，要依照文本格式来读，这里介绍四种在页面中插入CSS样式表的方法：链入外部样式表、内部样式表、导入外表样式表和内嵌样式。
并特别讲解多重样式表的叠加的运用以及如何在xml中插入CSS。
1. 链入外部样式表链入外部样式表是把样式表保存为一个样式表文件，然后在页面中用<link>标记链接到这个样式表文件，这个<link>标记必须放到页面的<head>区内，如下：上面这个例子表示浏览器从mystyle.css文件中以文档格式读出定义的样式表。
rel=”stylesheet”是指在页面中使用这个外部的样式表。
type=”text/css”是指文件的类型是样式表文本。
href=”mystyle.css”是文件所在的位置。
media是选择媒体类型，这些媒体包括：屏幕，纸张，语音合成设备，盲文阅读设备等。
一个外部样式表文件可以应用于多个页面。
当你改变这个样式表文件时，所有页面的样式都随之而改变。
在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑，浏览时也减少了重复下载代码。
样式表文件可以用任何文本编辑器（例如：记事本）打开并编辑，一般样式表文件扩展名为.css。
内容是定义的样式表，不包含HTML标记，mystyle.css这个文件的内容如下：2.内部样式表内部样式表是把样式表放到页面的<head>区里，这些定义的样式就应用到页面中了，样式表是用<style>标记插入的，从下例中可以看出<style>标记的用法：注意：有些低版本的浏览器不能识别style标记，这意味着低版本的浏览器会忽略style 标记里的内容，并把style标记里的内容以文本直接显示到页面上。
为了避免这样的情况发生，我们用加HTML注释的方式（<!-- 注释 -->）隐藏内容而不让它显示：3. 导入外部样式表导入外部样式表是指在内部样式表的<style>里导入一个外部样式表，导入时用@import，看下面这个实例：例中@import “mystyle.css”表示导入mystyle.css样式表，注意使用时外部样式表的路径。
css的三种使用方式
css的三种使用方式CSS的三种使用方式CSS（Cascading Style Sheets）是一种用于描述网页样式的语言，它可以控制网页的布局、颜色、字体等外观效果。
在实际应用中，CSS有三种主要的使用方式，分别是内联样式、内部样式表和外部样式表。
本文将分别介绍这三种使用方式，并比较它们的优缺点。
一、内联样式内联样式是指将CSS样式直接写在HTML标签的style属性中。
例如，可以在一个段落标签中添加style属性来设置该段落的字体颜色、字体大小等。
内联样式的优点是简单、直观，可以快速改变某个特定标签的样式，且不影响其他元素。
然而，当需要改变多个元素的样式时，内联样式会显得冗长且难于维护，不利于代码的重用。
二、内部样式表内部样式表是指将CSS样式写在HTML文档的<head>标签内的<style>标签中。
通过这种方式，可以将CSS样式集中定义，然后在HTML标签中通过class或id选择器来引用。
内部样式表的优点是可以更好地组织和管理CSS代码，提高代码的可读性和维护性。
同时，内部样式表也允许在同一个HTML文档中定义不同的样式表，使得不同页面具有不同的样式。
然而，内部样式表只适用于当前HTML文档，如果需要在多个页面中共享样式，就需要重复定义，增加了代码的冗余性。
三、外部样式表外部样式表是指将CSS样式定义在一个独立的CSS文件中，然后在HTML文档中通过<link>标签引用。
外部样式表的优点是可以将CSS 代码和HTML代码完全分离，使得代码更加清晰和易于维护。
同时，外部样式表可以在多个HTML文档中共享，提高了代码的重用性。
另外，外部样式表还可以通过缓存机制来提高网页的加载速度，减小文件大小。
然而，使用外部样式表需要额外的HTTP请求，可能会增加网页的加载时间。
内联样式、内部样式表和外部样式表各有优缺点。
根据实际需求，我们可以选择最合适的方式来使用CSS。
- 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在这中间扮演着重要的角色。