用CCS美化网页
- 格式：ppt
- 大小：1.00 MB
- 文档页数：20
下载文档原格式
合集下载
ccs 使用技巧
ccs 使用技巧CCS（Cascading Style Sheets）是一种用于描述网页样式的语言，它可以控制网页的布局、字体、颜色、背景等方面，让网页更加美观和易于阅读。
本文将介绍一些CCS使用技巧，帮助您更好地掌握和运用CCS。
我们来介绍一些基本的CCS属性。
CCS使用选择器来选择需要样式化的HTML元素，然后使用属性来定义样式。
例如，可以使用选择器"p"来选择所有的段落元素，然后使用属性"color"来定义文字颜色，如下所示：```cssp {color: red;}```这样，所有的段落文字颜色将变为红色。
除了基本属性外，CCS还提供了一些高级属性，可以实现更丰富的样式效果。
例如，可以使用属性"text-shadow"来给文字添加阴影效果：```cssh1 {text-shadow: 2px 2px 4px #000000;}```这样，h1标题的文字将拥有一个黑色的2像素偏移和4像素模糊的阴影效果。
CCS还可以通过选择器的嵌套来选择特定的元素。
例如，可以使用选择器"ul li"来选择所有在无序列表中的列表项，然后使用属性"list-style-type"来定义列表项的标志类型：```cssul li {list-style-type: square;}```这样，无序列表中的所有列表项将显示为方块标志。
CCS还提供了一些伪类和伪元素的概念，可以实现一些特殊的样式效果。
例如，可以使用伪类":hover"来选择鼠标悬停在元素上时的样式：```cssa:hover {color: blue;}```这样，当鼠标悬停在链接上时，链接的文字将变为蓝色。
还有，CCS还支持使用@media查询来实现响应式设计，即根据设备的不同，为网页应用不同的样式。
例如，可以使用@media查询来为小屏幕设备定义不同的样式：```css@media (max-width: 600px) {body {font-size: 14px;}}```这样，当浏览器窗口宽度小于等于600像素时，网页中的文字大小将变为14像素。
学习单元4用CSS样式美化网页
４、创建高级样式
可以设置超级链接的样式，分别设置a:link（链接的默认样 式）、a:visited（访问过链接）、a:hover（鼠标上滚）、 a:active（活动链接）的样式。
例1：设置链接文本的颜色，修饰为“无”下划线。
注意：自动应用，不需要定义应用范围。
例2：实现将鼠标放在链接上时，链接文本改变颜色，同时出现下划线。
一个样式表由样式规则组成，它告诉浏览器怎样
去呈现一个文档。（类比：Word里的样式）
（二）标记的概念
<html>
HTML文件开始
<head>
HTML文件的头部开始
···
HTML文件的头部内容
<title>···</title> 定义显示在浏览器窗口标题栏的字符（即网页的标题）
··· </head> <body> ··· ··· ··· </body>
（3）高级样式（ID、上下文选择器等）
CSS选择器可以定义特殊的标签组合以及包含特殊序列号ID的样式。如：链接样式
“定义在”选项：选择样式表存放在位置。
（二）创建CSS样式
2、创建类样式（自定义样式）
例1：创建一个类样式给网页添加背景图像，使背景图像 固定且平铺整个页面。(操作要点）
例2：创建一个类样式“.myfont”，设置字体大小为 12pt，颜色为“蓝色”，行高为15pt。选择相应的文 本应用样式。
1、选择器类型（CSS样式分类）
（1）类样式（自定义样式）
类样式的名称必须以英文句点“.”开始，然后是任何字母或字母和数字组合。 如.bg、.border等，不能使用中文。如果没有输入句点，Dreamweaver会自动添 加。为类命名不要使用HTML标签的名称。
可以设置超级链接的样式，分别设置a:link（链接的默认样 式）、a:visited（访问过链接）、a:hover（鼠标上滚）、 a:active（活动链接）的样式。
例1：设置链接文本的颜色，修饰为“无”下划线。
注意：自动应用，不需要定义应用范围。
例2：实现将鼠标放在链接上时，链接文本改变颜色，同时出现下划线。
一个样式表由样式规则组成，它告诉浏览器怎样
去呈现一个文档。（类比：Word里的样式）
（二）标记的概念
<html>
HTML文件开始
<head>
HTML文件的头部开始
···
HTML文件的头部内容
<title>···</title> 定义显示在浏览器窗口标题栏的字符（即网页的标题）
··· </head> <body> ··· ··· ··· </body>
（3）高级样式（ID、上下文选择器等）
CSS选择器可以定义特殊的标签组合以及包含特殊序列号ID的样式。如：链接样式
“定义在”选项：选择样式表存放在位置。
（二）创建CSS样式
2、创建类样式（自定义样式）
例1：创建一个类样式给网页添加背景图像，使背景图像 固定且平铺整个页面。(操作要点）
例2：创建一个类样式“.myfont”，设置字体大小为 12pt，颜色为“蓝色”，行高为15pt。选择相应的文 本应用样式。
1、选择器类型（CSS样式分类）
（1）类样式（自定义样式）
类样式的名称必须以英文句点“.”开始，然后是任何字母或字母和数字组合。 如.bg、.border等，不能使用中文。如果没有输入句点，Dreamweaver会自动添 加。为类命名不要使用HTML标签的名称。
使用CSS样式美化网页
使用CSS样式美化网页在网络时代，网页设计的美观程度直接影响着用户的阅读体验和对网站的评价。
而其中使用CSS样式美化网页是一种常见且有效的方式。
本文将介绍一些使用CSS样式美化网页的技巧和方法。
一、背景颜色与背景图片1. 背景颜色的设置：在CSS中，可以使用background-color属性来为网页设置背景颜色。
例如，使用以下代码可以将网页的背景颜色设置为浅灰色： ```cssbody {background-color: #f2f2f2;}```2. 背景图片的设置：使用background-image属性可以为网页添加背景图片。
例如，使用以下代码可以将网页的背景设置为一张名为"bg.jpg"的图片： ```cssbody {background-image: url("bg.jpg");```二、字体与文本样式1. 字体样式的设置：使用font-family属性可以为网页设置字体样式。
例如，使用以下代码可以将网页的字体样式设置为Arial：```cssbody {font-family: Arial, sans-serif;}```2. 字体颜色与大小的设置：使用color属性可以为网页设置字体颜色，使用font-size属性可以设置字体大小。
例如，使用以下代码可以将网页的字体颜色设置为红色，字体大小设置为16像素：```cssbody {color: red;font-size: 16px;```三、边框与阴影效果1. 边框样式的设置：使用border属性可以为网页元素设置边框样式。
例如，使用以下代码可以为一个class为"box"的元素设置一个边框样式为实线的红色边框：```css.box {border: 1px solid red;}```2. 边框圆角效果的设置：使用border-radius属性可以为网页元素设置圆角效果。
ccs技术步骤
ccs技术步骤CCS技术步骤CCS（Cascading Style Sheets）技术是一种用于描述和控制网页样式的技术，它能够帮助开发人员更好地管理和美化网页的外观。
使用CCS技术可以实现网页的布局、颜色、字体、边框等样式的控制。
下面将介绍CCS技术的一些基本步骤。
一、定义样式表CCS样式表是一种包含样式规则的文档。
在网页中使用CCS样式表时，首先需要定义一个样式表。
可以在HTML文档的`<head>`标签内添加`<style>`标签，并在其中定义样式规则。
样式规则由选择器和声明块组成，选择器用于指定要应用样式的HTML元素，声明块中包含了要应用的样式属性和值。
二、选择器的使用选择器用于指定要应用样式的HTML元素。
常见的选择器有标签选择器、类选择器、ID选择器和后代选择器等。
标签选择器适用于指定某一类型的HTML元素，类选择器用于指定具有相同类名的HTML元素，ID选择器用于指定具有相同ID的HTML元素，后代选择器用于指定某个元素的后代元素。
使用选择器可以灵活地选择和应用样式。
三、声明属性和值在样式规则的声明块中，可以定义多个属性和值。
常见的属性有`color`（颜色）、`font-size`（字体大小）、`background-color`（背景颜色）、`border`（边框）等。
属性的值可以是具体的数值、颜色值、关键字（如`bold`表示加粗）等。
通过定义不同的属性和值，可以实现不同的样式效果。
四、样式的继承和层叠CCS样式表中的样式属性可以继承和层叠。
继承是指子元素可以继承父元素的样式属性，这样可以减少样式的定义。
层叠是指当多个样式规则同时应用于同一个HTML元素时，通过层叠规则来确定最终的样式效果。
层叠规则主要包括选择器的权重和样式的优先级。
五、引入外部样式表除了在HTML文档中定义样式表，还可以通过外部样式表的方式引入样式。
外部样式表是一个独立的CCS文件，可以在HTML文档中使用`<link>`标签来引入。
使用CSS样式表美化网页
第四章使用CSS样式表美化网页实训题目<二>1.打开index1.htm，创建阴影文字效果。
(1)将光标定位于网页头部图片中的白色部分，插入一个1行1列的表格，表格宽度为50%的表格；“填充、间距、边框”均为0；并在“属性”面板中将“对齐”设置为“居中对齐”。
(2)在表格中输入“教育资讯平台”的文本，大小为36点数并加粗，“居中对齐”。
(3)新建名称为“.yy”的CSS样式，然后在“扩展”选项处，在“滤镜”添加Shadow函数，颜色Color为9900ff，方向Direction为150。
(4)最后样式“.yy”应用于“教育资讯平台”的文字中。
2.打开index2.htm，创建光晕文字效果：(1)在正文上方的空白部分插入1行1列，表格宽度为80%的表格。
并且使表格“居中对齐”、“填充、间距、边框”均为0.(2)在表格中输入“在网络中高飞”，大小为36像素，“居中对齐”并加粗。
(3)新建名称为“.gy”的CSS样式，定义在“仅对该文档”中。
(4)在“扩展”中的“滤镜”选项中输入函数Glow，其颜色Color为A6C417，光晕的强度Strength为10。
(5)将这种样式gy应用于“在网络中高飞”的文字中。
3.打开index3.htm，创建图片由模糊变清晰的效果：(1)在</head> 和<body>标签之间添加如下代码:<style>.highlightit img{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20);-moz-opacity:0.5;}.highlightit:hover img{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);-moz-opacity:1;}</style>(2)选中文档中下边城市夜色的图片(即2006.jpg)，在<img>标签的前边输入代码<a href="#" class="highlightit">，在<img>标签的后边输入</a>最后保存预览效果。
项目3 (八 css美化网页)
项目3 主页制作（利用CSS美化网页）学习目标：会使用CSS层叠样式对页面中文本等网页元素进行样式控制Cascading Style Sheets（层叠，级联样式表）【任务1】利用CSS美化网页【任务分析】5.12汶川大地震时为了表示对遇难同胞的哀悼，全国的大小网站页面都变灰了。
如何实现这一功能？对于网站中页面较少时，可以一个页面一个页面进行设置，哀悼期过了后再恢复原样，若网站由几十个页面组成，这样设置工作量很大，有一种省时省力的方法可以达到这一功能，那就是层叠样式表CSS（Cascading Style Sheet）。
这个方法最方便管理整个网站的网页风貌，它让网页的文字内容与版面设计分开，只要在一个css文档中定义好网页的外观风格，所有链接到此css文档的网页，便会按照定义好的风格显示网页。
【任务背景】回忆：纪念5.12，悼念四川地震死难者，整个网页变黑色(灰色)，这个特效持续一个月。
代码：方法1：直接在html文档的head区域加上以下代码代码：<style>html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }</style>方法2：在css文档中加入以下代码代码：html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }演示：将上面这段代码添加到newsview.asp文件，观察效果。
【子任务1.1】利用CSS美化register1.asp网页【任务展示】实际网页演示。
【操作步骤】1.打开站点文件夹ClassWeb\login\register.asp文件，双击进入设计视图。
2.选中“用户注册”，在属性面板设置样式，如图所示：进入代码视图，style1样式代码如图所示：3. 思考：（1）此方法可设置的属性类型有限，如不能给文字加下划线等；（2）若对单元格的内容进行设置，需逐个应用样式，操作繁琐。
项目6 使用CSS美化网页效果
WANGYE ZHIZUO XIANGMU SHIXUN JIAOCHENG
CONTENTS
1-1
1-1
1-1
A
B
1-1
1-2
1-2
A
B
1-2
1-2
1-2
2-1
2-1
类别 类型 背景 区块 方框 边框 列表 定位 扩展
功能 用于定义网页中文本的字体、颜色、风格等，包含九个属性 设置网页元素的背景颜色或图象的样式，包含六个属性 控制区块中内容的间距，对齐方式和缩进，包含七个属性 控制元素在页面上的放置方式，包含十二个属性 定义元素周围边框的样式，包含十二个属性 设置列表的风格，包含三个属性 用于精确控制元素的位置，包含十四个属性 设置打印分页符和各种滤镜视觉效果
inline 默认。元素会被显示为行内元素，该元素前后没有换行符
none 该元素不会被显示
属性值 left right none
说明 元素向左浮动 元素向右浮动 默认值。元素不浮动，并会显示在其文本中出现的位置
3-2
属性值 left right both none
说明 在左侧不允许浮动元素 在右侧不允许浮动元素 在左、右两侧不允许浮动元素 默认值。允许浮动元素出现在两侧
说明
左外边距为 5px 右外边距为 10px 上外边距为 20px 下外边距为 15px
属性
语法规则 margin:10px;
margin:10px 5px;
margin margin:20px 8px 10px;
margin:10px 5px 8px 10px;
说明
设置 4 个方向外边距均为 10px
说明 沿水平和垂直两个方向平铺 不平铺，即只显示一次 只沿水平方向平铺 只沿垂直方向平铺
CONTENTS
1-1
1-1
1-1
A
B
1-1
1-2
1-2
A
B
1-2
1-2
1-2
2-1
2-1
类别 类型 背景 区块 方框 边框 列表 定位 扩展
功能 用于定义网页中文本的字体、颜色、风格等，包含九个属性 设置网页元素的背景颜色或图象的样式，包含六个属性 控制区块中内容的间距，对齐方式和缩进，包含七个属性 控制元素在页面上的放置方式，包含十二个属性 定义元素周围边框的样式，包含十二个属性 设置列表的风格，包含三个属性 用于精确控制元素的位置，包含十四个属性 设置打印分页符和各种滤镜视觉效果
inline 默认。元素会被显示为行内元素，该元素前后没有换行符
none 该元素不会被显示
属性值 left right none
说明 元素向左浮动 元素向右浮动 默认值。元素不浮动，并会显示在其文本中出现的位置
3-2
属性值 left right both none
说明 在左侧不允许浮动元素 在右侧不允许浮动元素 在左、右两侧不允许浮动元素 默认值。允许浮动元素出现在两侧
说明
左外边距为 5px 右外边距为 10px 上外边距为 20px 下外边距为 15px
属性
语法规则 margin:10px;
margin:10px 5px;
margin margin:20px 8px 10px;
margin:10px 5px 8px 10px;
说明
设置 4 个方向外边距均为 10px
说明 沿水平和垂直两个方向平铺 不平铺，即只显示一次 只沿水平方向平铺 只沿垂直方向平铺
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用样式表美化你的网页第1天:选择什么样的DOCTYPE前言大家好！这个系列文章是按阿捷自己制作这个站点的过程编写的。
之前阿捷也一直没有制作过一个真正符合web标准的网站。
现在边参考国外资料边制作，同时把过程中的心得和经验记录下来，希望对大家有点帮助。
好了，让我们开始吧第一天开始制作符合标准的站点，第一件事情就是声明符合自己需要的DOCTYPE。
查看本站首页原代码，可以看到第一行就是：打开一些符合标准的站点，例如著名web设计软件开发商Macromedia，设计大师Zeldman的个人网站，会发现同样的代码。
而另一些符合标准的站点(例如)的代码则如下：那么这些代码有什么含义？一定要放置吗？什么是DOCTYPE上面这些代码我们称做DOCTYPE声明。
DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。
其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。
要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。
XHTML 1.0 提供了三种DTD声明可供选择：过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。
完整代码如下：严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如。
完整代码如下：框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。
完整代码如下：我们选择什么样的DOCTYPE理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站，使用的也是过渡型DTD)。
第3章使用CSS技术美化网页
让IT教学更简单，让IT学习更有效
如果希望一个网站中多个页面的样式保持一致， 如何解决？
使用外部样式表文件样式表可以解决
外部样式表文件
让IT教学更简单，让IT学习更有效
• 根据样式文件与网页的关联方式又分为： – 链接（LINK ）外部样式表 – 导入（@import）外部样式表
样式文件.css
网页1
3.1 【案例4】文字Logo
让IT教学更简单，让IT学习更有效
案例引入
“Logo”是“商标”的英文缩写，是企 业最基本的视觉识别形象， “文字Logo” 由于涵义明确、直接，易于被理解、认知， 被广泛应用。本节将引入CSS，通过CSS控 制文字来模拟一款“文字Logo”，其效果如 下图所示。
3.1 【案例4】知识引入
CSS基础选择器
让IT教学更简单，让IT学习更有效
1．通配符选择符 通配符选择符用“*”进行表示，用于清理标签的默认
样式。如果单独使用，其作用范围是页面中所有元素。这是 一种强大的方法，也是最简单，最安全的方法，不过，也是 最占用资源的方法。所以不提倡直接使用该选择符
样式应用于文档中的所有元素
*{ margin: 0; padding: 0;
<head> <link href="CSS文件的路径" type="text/css" rel="stylesheet" /> </head>
该语法中，<link />标记需要放在<head>头部标记中，并且必须指定<link />标记的三 个属性，具体如下：
• href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。 • type：定义所链接文档的类型，在这里需要指定为“text/css”，表示链接的外部