当前位置：文档之家 › 第4章 CSS基础—1

第4章 CSS基础—1

  • 格式：pptx
  • 大小：198.79 KB
  • 文档页数：19

下载文档原格式

  / 19

合集下载

css日程管理系统课程设计

css日程管理系统课程设计

css日程管理系统课程设计一、课程目标知识目标：1. 让学生掌握CSS基本语法和常用属性，能熟练运用CSS进行网页样式设计；2. 让学生了解日程管理系统的基本功能，理解其设计原理；3. 让学生掌握如何使用CSS技术实现日程管理系统的界面布局和视觉效果。

技能目标：1. 培养学生运用CSS进行网页设计和布局的能力；2. 培养学生独立思考和解决问题的能力，能够根据需求设计和实现日程管理系统的界面；3. 培养学生团队协作能力，能在项目中与他人共同完成设计任务。

情感态度价值观目标：1. 培养学生对前端开发技术的兴趣，激发学习热情；2. 培养学生认真负责、严谨细致的学习态度，养成良好的编程习惯；3. 培养学生具备创新精神和实践能力，敢于尝试新技术，勇于解决实际问题。

课程性质：本课程为实践性较强的课程，旨在让学生通过实际操作，掌握CSS 技术在日程管理系统中的应用。

学生特点：学生具备一定的HTML基础，对CSS有一定了解，但实际应用能力较弱。

教学要求：结合学生特点和课程性质，采用案例教学、分组合作等方式，注重实践操作，提高学生的实际应用能力。

在教学过程中，注重引导学生主动探索、发现问题，培养学生解决问题的能力。

同时，关注学生的情感态度，激发学习兴趣，培养良好的学习习惯。

通过本课程的学习，使学生能够达到上述课程目标，具备独立设计和实现日程管理系统界面的能力。

二、教学内容1. CSS基础知识回顾：选择器、属性、值、优先级等基本概念；2. CSS布局技术：浮动布局、定位布局、弹性盒子布局、网格布局等；3. CSS样式设置：字体、颜色、背景、边框、列表、表格、动画等常用样式设置；4. 日程管理系统界面设计：界面布局、导航栏、列表、表单等组件的设计与实现；5. CSS预处理器：Sass、Less等CSS预处理器的基本使用和优势；6. 响应式设计：媒体查询、移动优先、桌面适配等响应式设计方法；7. CSS优化与兼容性：浏览器兼容性处理、CSS性能优化、代码规范等。

第四章补充案例

第四章补充案例

第四章补充案例案例4-1 顶部导航栏1一、案例描述1、考核知识点边框的复合属性、背景颜色2、练习目标灵活运用边框的复合属性。

掌握背景颜色的定义方法。

3、需求分析制作网页时，经常需要给盒子设置边框，以修饰和美化元素的显示样式，常用方法如下：●对盒子的四条边定义不同宽度、颜色、样式的边框●盒子背景颜色和边框的合理搭配4、设计思路（实现原理）1)指定盒子的宽度和高度。

2)给盒子的上边指定3px的橙色边框。

3)给盒子的下边指定1px的灰色边框。

4)给盒子指定浅灰色的背景颜色。

二、案例实现新建HMTL文件，具体代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>顶部导航栏1</title><style type="text/css">.topNav{height:40px; width:500px; border-top:3px solid #FF8500; border-bottom:1px solid #EDEEF0; background-color:#FCFCFC;}.topNav a{color:#4C4C4C; text-decoration:none; font-size:14px;}</style></head><body><div class="topNav"><a href="#">网站首页</a><a href="#">学校介绍</a><a href="#">学员作品</a><a href="#">留言薄</a></div></body></html>保存后，在火狐浏览器中预览，效果如图4-1所示。

电子商务网页课程设计

电子商务网页课程设计

电子商务网页课程设计一、课程目标知识目标：1. 让学生掌握电子商务网页设计的基本概念、原则和流程。

2. 使学生了解电子商务网页的布局、色彩、字体和图片运用等设计要素。

3. 帮助学生了解电子商务网页的交互设计、用户体验和响应式设计。

技能目标：1. 培养学生运用HTML和CSS进行简单电子商务网页布局和样式设计的能力。

2. 培养学生运用网页设计工具（如Photoshop、Dreamweaver等）进行网页设计和制作的能力。

3. 培养学生分析和解决电子商务网页设计过程中遇到的问题的能力。

情感态度价值观目标：1. 培养学生对电子商务网页设计的兴趣和热情，提高其自主学习能力。

2. 培养学生具备良好的团队协作精神和沟通能力，使其在项目实践中能够与他人有效合作。

3. 引导学生关注电子商务网页设计在商业价值和用户体验方面的平衡，培养其社会责任感。

课程性质：本课程为实践性较强的课程，旨在培养学生的电子商务网页设计能力，提高其在实际工作中解决问题的能力。

学生特点：学生在本年级已具备一定的计算机操作能力和网络知识，对网页设计有一定兴趣，但部分学生对编程和设计软件操作较为陌生。

教学要求：结合学生特点，注重理论与实践相结合，充分调动学生的主观能动性，提高其在实际操作中解决问题的能力。

同时，注重培养学生的团队协作精神和沟通能力，使其在项目实践中不断提升自身综合素质。

通过课程学习，使学生达到上述课程目标，为未来从事电子商务相关工作奠定基础。

二、教学内容1. 电子商务网页设计基本概念与原则- 网页设计的基本概念- 电子商务网页设计的原则- 电子商务网页设计的流程2. 电子商务网页设计要素- 网页布局设计- 色彩、字体和图片运用- 交互设计与用户体验- 响应式设计3. HTML与CSS基础- HTML标签及其属性- CSS选择器及其属性- 网页布局与样式设计4. 网页设计工具的使用- Photoshop基本操作与图像处理- Dreamweaver网页布局与样式设计5. 电子商务网页设计与制作实例- 案例分析与讨论- 项目实践与指导- 评价与反馈教学内容安排与进度：第一周：电子商务网页设计基本概念与原则第二周：电子商务网页设计要素（1）第三周：电子商务网页设计要素（2）第四周：HTML与CSS基础（1）第五周：HTML与CSS基础（2）第六周：网页设计工具的使用第七周：电子商务网页设计与制作实例（1）第八周：电子商务网页设计与制作实例（2）第九周：总结与评价教材章节关联：1. 电子商务网页设计基本概念与原则——教材第1章2. 电子商务网页设计要素——教材第2章3. HTML与CSS基础——教材第3章4. 网页设计工具的使用——教材第4章5. 电子商务网页设计与制作实例——教材第5章。

HTML5+CSS3 Web前端设计基础教程(第4章)

HTML5+CSS3 Web前端设计基础教程(第4章)

4.3 控制图像和颜色
此处图片通过横向 平铺实现效果。此 外，同时设置图像 高度，如果不设置， div元素内又没有内 容将容器撑起来， 将无法显示背景图 片 此处图片设置了跟 随滚动条滚动的效 果，即便不设置， 浏览器默认状态就 是滚动效果
图4-15 背景色、背景图预览效果
此 处 为 box 容 器同时设置背 景图和背景色
此处文本溢出，文 字折返到下一行
此列表项内容超出了容器设 置的范围，出现了省略标记
图4-7 文本溢出处理预览效果
4.2 控制超链接
4.2.1 文本链接、邮件链接与锚链接 4.2.2 CSS伪类与超链接 1．什么是CSS伪类 伪类的语法形式为：
选择符：伪类 { 属性: 属性值; }
表4-3 常见的伪类及其含义 伪类 :link、:visited、:hover、:active :focus :not(s)（CSS 3新增） :root（CSS 3新增） :first-child :last-child（CSS 3新增） :nth-child(n) （CSS 3新增） 解释 设置超链接被访问前后的4个状态样式。 设置对象在成为输入焦点时的样式。 匹配不含有s选择符的元素。 匹配某一个元素在文档的根元素。 匹配父元素的第一个子元素。 匹配父元素的最后一个子元素。 匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。
4.1 控制文本
1．font-family（字体类型） 2．font-size（字号大小）
3．font-style（字体风格）
标题设置固定字号， 字体风格为斜体
此行设置为“宋体” 此行设置为“华文彩云 此行设置为“微软雅黑”
图4-3 字体类型、字号和风格预览效果
此行设置为“黑体”， 字号大小为父级的 80%

CSS网页设计标准教程课程设计

CSS网页设计标准教程课程设计

CSS网页设计标准教程课程设计简介随着互联网的普及，越来越多的人学习网页设计。

但是，许多人对CSS的理解都不够深入，只能做出简单的网页，并不能做出恰当的效果。

因此，在本课程设计中，我们将重点讲授CSS的使用，让学生们对CSS 有深入和全面的理解，掌握制作一流网页的技能。

学习目标本课程设计的学习目标如下：1.理解CSS的基本概念，掌握CSS的语法和基本知识点。

2.熟悉盒模型和文本属性等CSS层叠样式的基本属性。

3.掌握定位和浮动等CSS布局的基本方法和技巧。

4.练习使用CSS实现不同的网页设计效果。

5.学习常用的CSS框架和工具，提高工作效率。

课程安排本课程设计共分为7个章节，具体内容如下：第一章：CSS基础•CSS概述•CSS语法和选择器•三种CSS样式表：行内样式、嵌入式样式和外部样式表•CSS样式表的优先级和继承第二章：CSS样式属性•盒模型和文本属性•背景、边框、文本、字体、颜色等CSS属性•overflow、display、visibility、z-index等CSS属性第三章：CSS布局•浮动和清除浮动•定位和层级•相对定位、绝对定位、固定定位•弹性布局和栅格布局第四章：CSS选择器•常用选择器：ID选择器、类选择器、标签选择器、伪类选择器•层次选择器、属性选择器、通用选择器、伪元素选择器•选择器组合和选择器优先级第五章：CSS动画和过渡•CSS过渡的基本使用方法•CSS动画的基本使用方法•CSS动画的关键帧动画第六章：CSS预处理器•Less、Sass、Stylus等CSS预处理器的基本语法•CSS预处理器的变量、嵌套、混合等功能•使用CSS预处理器提高工作效率第七章：CSS框架和工具•Bootstrap框架的使用•jQuery库的基本使用方法•Webpack等前端构建工具的基本使用方法教学方法本课程设计采用“讲授+实践”相结合的教学方法，通过灵活的授课方式帮助学生深度理解CSS知识点的实现。

CSS基础实用PPT学习教案

CSS基础实用PPT学习教案
第39页共41页小结小结本章主要介绍了本章主要介绍了csscss的概念与作用如何构造的概念与作用如何构造csscss样式规则样式规则引用引用csscss样式到样式到htmlhtml页面中的四种方法页面中的四种方法csscss中的基本选择器中的基本选择器复合选择器和常用到的伪类伪元素选择器的使用方法复合选择器和常用到的伪类伪元素选择器的使用方法csscss的的继承特性和层叠特性的运行机制以及继承特性和层叠特性的运行机制以及csscss中常用单位和中常用单位和csscss书写与命名规范
（任其4何）中元E:E素a为c。ti前ve 面向被介用绍户过激的活某的种元素标设记置、样类式别，、可用ID于或页复面合中的 选择器，冒号后面为伪类，选择器与冒号之间不能 有空格，要连续书写。
【例4-3】利用ID选择器为不同标题设置样式示例 。
<style type = "text/css">
#one{
/* ID选择器 */
background-color:blue; /* 背景色为蓝色 */
color:#FFF;
/* 文字为白色 */
}
#two{
font-size:20px; /* 文字大小为20像素 */
#id名称{属性1:属性值1; 属性2:属性值2;……}
一个id最多只能赋予一个HTML标记是因为不 仅CSS可以使用，JavaScript等其他脚本语言也可 以使用id属性值。
另外，id选择器不支持像class选择器那样可以 多风格同时使用。
第17页/共41页
4.3.1 基本选择器
3.ID选择器
第1页/共41页
4.2 CSS的基本语法
CSS的一个核心特征，就是能够很容易地向HTML 文件中的所有同类型的标记应用一组样式。

网页设计与制作教程——Web前端开发(第6版)课件第4章 CSS3基础4.3

</body>
《网页设计与制作教程Web前端开发第6版》 刘瑞新主编 配套资源
非常棒的你！又开始学 习新的内容
《网页设计与制作教程Web前端开发第6版》 刘瑞新主编 配套资源
第4章 CSS3基础
4.3 CSS的两个主要特性
本节介绍CSS的两个主要特性。
目录Βιβλιοθήκη 第4章 CSS3基础4.1 CSS简介 4.2 在HTML中使用CSS的方法 4.3 CSS的两个主要特性 4.4 CSS的基本语法 4.5 CSS的选择器 4.6 属性值的写法和单位 4.7 HTML文档结构与元素类型 4.8 实训——制作内容详情页 习题4
4.3 CSS的两个主要特性
<!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <title>继承示例</title> <style type="text/css"> p {color: #00f; /*定义文字颜色为蓝色*/ text-decoration: underline; /*增加下划线*/ } p em { /*为p元素中的em子元素定义样式*/ font-size: 24px; /*定义文字大小为24px*/ color: #f00; /*定义文字颜色为红色*/ } </style>
</head>
4.3 CSS的两个主要特性
<body> <h3>CSS基础</h3> <p>CSS是一组格式设置规则，用于控制<em>Web</em>网页的外观。</p> <ul> <li>CSS的优点 <ul> <li>表现和内容（结构）分离</li> <li>易于维护和<em>改版</em></li> <li>更好的控制页面布局</li> </ul> </li> <li>CSS设计与编写原则</li> </ul>

第4章CSS样式表、模板、表单的应用


（6）单击【确定】按钮完成样式的创建。
北京化工大学北方学院信息学院教研室
2009-2010第一学期
图4-5【CSS规则定义】对话框
北京化工大学北方学院信息学院教研室 2009-2010第一学期
4.1.4 外部样式表的链接、导入和编辑
当设计者创建和保存了外部的CSS样式表文件后， 此时在本地网站中就存在了一个CSS样式表文件。然后 每个用该样式表文件中的CSS样式格式化的网页文档都 可以与这个样式表文件建立一种链接。当此样式表文件 一经修改，网站中所有链接到此样式表的网页都会发生 相应的更新。这样就利用CSS样式表实现了对多个网页 文档的进行批量修改的操作。
北京化工大学北方学院信息学院教研室 2009-2010第一学期
图4-1【CSS样式】面板
北京化工大学北方学院信息学院教研室 2009-2010第一学期
【类别】视图：Dreamweaver 支持的 CSS 属性分为 8 个类 别，字体、背景、区块、边框、方框、列表、定位和扩展。每个 类别的属性都包含在一个列表中，可以单击类别名称旁边的加号 或减号按钮，展开或折叠这个类别。
选择【区块】可设置CSS样式的块参数。
选择【盒子】可设置CSS样式的框参数。 选择【边框】可设置CSS样式的边框参数。 选择【列表】可设置CSS样式的列表参数。 选择【定位】可设置CSS样式的定位参数。
选择【扩展】可设置CSS样式的扩展参数。
北京化工大学北方学院信息学院教研室 2009-2010第一学期
4.1.5 层叠样式表的应用
设计者可以利用层叠样式表为设计的网页添加很多特殊的 效果，如文字的特效、阴影，图像的淡入淡出、翻转模糊、 波浪效果，鼠标指针和超链接的各种多姿多彩的变化等， 从而使设计的网页变得更加赏心悦目。

CSS基础知识学习(含实例)


四、CSS 选择器
7. 伪类（ Pseudo-Classes Selectors ）
selector : pseudo-class { property: value } 注意：一定要按照 link，visited，hover，
例：
a:link { color: #000000; text-decoration: none; } a:visited { color: #000000; text-decoration: none; } a:hover { color: #FF0000; text-decoration: underline; } a:active { color: #FF0000; text-decoration: underline; }
例： <html> <head> <title>泡泡潜水俱乐部欢迎你</title> </head> <body> <h1> 泡泡潜水俱乐部 </h1> background-color: #000080” >泡泡潜水俱乐部</h1> style=“color: #FFFFFF; <P>泡泡潜水俱乐部为你量身打造一流的潜水服务，……</p> </body> </html>
四、CSS 选择器
3. ID 选择器（ ID Selectors ）
＃ID { property: value; } 例：
#container { width: 760px; margin: auto; } #header { height: 120px; background: url(images/bg_header.gif) no-repeat; } #content { padding: 30px; }

第4章CSS样式表


图4.2 “链接外部样式表”对话 框
图4.3 “新建CSS样式”对话框
“编辑样式表”按钮：打开如图4.4所示的“编辑样式表”对话 框，编辑当前文档或外部样式表中的任何样式。 “删除CSS样式”按钮：删除“CSS样式”面板中的所选CSS样 式，并删除该样式应用于任何元素中的格式设置。
图4.4 “编辑样式表”对话框 本书将以第4章的“本章实例”目录下的“样本原文.html”为例，对 以上几个操作进行讲解。
CSS（层叠样式表）其实是一系列格式规则，这些规则由两部分组 成：选择符和声明。选择符通常是指样式表的名称或特定的标 签，而声明则用于定义样式元素。声明由两部分组成：属性和 值。要注意的是，单一选择符的复合样式声明应该用分号隔开。 术语“层叠”是指同一个网页应用多个样式表的能力，例如创 建两个样式表分别用来设置字体和行距，它们同样用于一个网 页。这些规则组合在一起，就可以告诉浏览器怎样去呈现一个 文档。 CSS样式表起初或许只为了控制文本的属性，如字体、字号、颜色 等，但是随着CSS更高版本的推出，弥补了HTML对传统的文本 属性控制的不足，如段落间距、行距等。除了对传统文本的控 制，CSS还加入了对其他网页元素属性甚至网页布局的控制， 比如图片的显示效果、网页元素的位置、表单元素的边框粗细、 鼠标指针的形状、排版定位等，并且这些设置都可以随着CSS 样式表文件的更新而动态更新。
2.重定义特定标签格式 重定义特定标签格式
使用这种CSS样式可以改变HTML标记的原意，从而使所有应用了这 些标记的HTML文本按照CSS的定义格式显示，例如为<body>和 </body>标签定义了CSS，那么所有包含在<body>和</body> 标签内的内容都要按照此CSS样式进行显示，代码如下： Body｛font-size: 10pt;｝ ｛ ｝ 本例将<body>和</body>标签内的所有文本字体都设置为10像素 大小。
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<style type = "text/css"> h1{ font-size:14px; /* 文字大小为14像素 */ color:blue; /* 文字颜色为蓝色 */ } </style>
3.链接样式
链接样式是在HTML页面的<head></head>标 记之间使用<link>标记引用一个外部的CSS样式表 文件。 例如：
<link href="css/index.css“ type="text/css“ rel = "stylesheet">
表示将index.css样式表文件链接到当前页面中，对 页面中相应的对象进行样式控制。 注意：如果HTML文件与其链接的CSS文件不在同 一个目录下，则要在<link>标记的href属性后写上 CSS样式文件的正确路径。
4.2 CSS的基本语法
CSS的一个核心特征，就是能够很容易地向 HTML文件中的所有同类型的标记应用一组样式。
例如，让HTML页面中所有<h1>标记中的文字都显 示为红色，可以应用以下规则： h1{ color:red; } /* 文字颜色为红色 */
4.2.1 CSS规则

CSS中的每个规则（或样式）由选择器和声明 块两个部分构成。
第4章 CSS基础
HTML标记是网页设计的基础，主要用于确定网页的结 构和内容，如果希望网页效果看起来美观、大方，并且在将 来能够方便地进行升级及后期维护，仅仅知道HTML标记是 不够的，还要掌握CSS的基本语法及使用方法。

4.1 4.2 4.3 4.4 4.5 4.6 4.7
CSS概念 CSS的基本语法 选择器 CSS的继承特性 CSS的层叠特性 CSS常用单位 CSS书写和命名规范
4.1 CSS的概念
CSS（Cascading Style Sheet），中文译为层叠 样式表，是用于控制网页内容的外观（样式），并 允许将样式信息和网页内容分离的一种标记语言。
HTML与CSS的关系是“结构”与“表现”的关系， 即HTML确定网页的结构，CSS设置网页的表现形式。利 用CSS样式可以制作出丰富多彩的网页效果，从精确的页 面布局、定位到特定的字体和样式，功能非常强大。 CSS历经了CSS1、CSS2、CSS2.1和CSS3四个版本。
.类别名称{属性1:属性值1; 属性2:属性值2;……}
4.3.1 基本选择器
2.类别选择器 【例4-2】利用类别选择器为不同段落文字设置样 式示例。
<style type = "text/css"> p{ /* 标记选择器 */ font-size:18px; /* 文字大小 */ color :blue ; /* 蓝色 */ } .one{ /* 类别选择器 */ color:red; /* 红色 */ } .two{ /* 类别选择器 */ color:green; /* 绿色 */ } </style>
*{ background-color:#006633; }
表示把当前页面中所有标记元素的背景颜色设置 为#006633。
4.3.1 基本选择器
2.类别选择器 标记选择器一旦声明，HTML文件中所有的相应 标记都会产生变化。 如果希望其中的某一个标记不产生相应的变化， 这时需要为标记定义一个class属性，引入类别 （class）选择器，多个标记的class属性的属性值可 以相同。类别（class）选择器的名称由用户自己定 义，基本格式如下：
<h4 class = "one two">同时使用.one和.two类别样式</h4>
4.3.1 基本选择器
3.ID选择器 在标记中添加一个id属性，从而可以引入id选 择器，id选择器的使用方法与类别选择器基本相同， 不同之处在于HTML文件中标记的id属性的属Hale Waihona Puke 值最 好各不相同，其基本格式如下：

行内样式是最简单的CSS样式使用方法，但由于 需要为每一个标记设置style属性，不便于后期修改， 维护成本较高，常常用于统一样式外的特殊情况。
2.内嵌样式
内嵌样式是将CSS样式用： <style type = "text/css"></style> 标记包含，放在当前HTML页面的<head></head> 标记之间，这样定义的样式就可以应用到当前页面 中。 【例4-1】在HTML页面中加入内嵌样式示例。
4.3.1 基本选择器
2.类别选择器 对标记没有进行声明的样式，采用其自身默认 的方式显示。 通过设置标记的class属性，可达到将HTML文 件中的标记进行分类的目的。 在HTML文件的标记中，还可以同时给一个标记 运用多个class类别选择器，从而将多个类别的样式 风格同时运用到这个标记中。例如：
标记名称{属性1:属性值1; 属性2:属性值2;……}
例如:
p{ color:gray; font-size:25px; background-color:green; }
4.3.1 基本选择器
1.标记选择器 CSS对于所有属性和值都有相对严格的要求， 如果声明的属性在CSS规范中没有，或者某个属性 的值不符合该属性的要求，都不能使该CSS样式代 码生效。 注意：可以用*表示HTML文件中所有的标记。

其中：选择器表示要定义样式的对象；声明块由 一个或多个声明组成，在每个声明之后要用分号表 示一个声明的结束，最后一个声明后的分号可省略。 每个声明是由一个CSS属性和该属性的值组成。
4.2.1 CSS规则
例如：
p{ font-size:12px; color:#ff0000; font-family:"黑体"; }
其中：p是选择器；font-size、color、font-family 是属性；12px、#ff0000、"黑体"是对应的属性值。 该样式表示把<p>标记中的文字大小设置为12像素， 颜色设置为红色，字体设置为黑体。
4.2.2 CSS的引用方法
CSS的引用是指在HTML页面中如何使用CSS样 式，通常有如下四种方法。
4.3 选择器

选择器是CSS样式中很重要的概念，用来定位 CSS样式代码控制的对象，从而实现各种效果。通 常有如下几类： 1.基本选择器(标记、类别和ID选择器) 2.复合选择器 3.伪类和伪元素选择器
4.3.1 基本选择器
1.标记选择器 CSS标记选择器就是用来声明哪些标记采用哪种 CSS样式。每一种HTML标记的名称都可以作为相应 的选择器名称，基本格式如下：
<style type = "text/css"> #one{ /* ID选择器 */ background-color:blue; /* 背景色为蓝色 */ color:#FFF; /* 文字为白色 */ } #two{ /* ID选择器 */ font-size:20px; /* 文字大小为20像素 */ color:red; /* 文字为红色 */ } </style>
4.2.3 CSS注释

在CSS样式文件中，注释的内容要放在“/*”与 “*/”之间，可以是单行也可以是多行。 例如：
/*下面是对<h1>标记使用的CSS样式*/ h1{ color:gray; } /*下面是对<p>标记 使用的CSS样式*/ p{ color:blue; font-size:12px; font-weight:bold; /* 设置文字加粗 */ background-color:green; /* 设置背景色为绿色 */ }
4.导入样式
在HTML文件中导入CSS样式文件，需在<style> 标记之间插入@import url（css文件的路径）；语句。 例如：
<style type = "text/css"> @import url(css/index.css); </style>
在HTML文件的<style></style>标记中可以导 入多个样式文件，而且在一个CSS样式文件内也可 以导入其他的样式文件。 另外，在使用@import命令时，一定要放在其他 CSS规则的前面，否则将不起作用。
1.行内样式 2.内嵌样式 3.链接样式 4.导入样式
1.行内样式

行内样式是所有引用CSS样式方法中最为直接的 一种，它直接在HTML页面的元素中添加style属性， 然后在style属性值中直接定义样式，例如：
<h1 style = "font-size:14px; color:#00ff00; "> 中原洛科三周年庆典 </h1>
#id名称{属性1:属性值1; 属性2:属性值2;……}
一个id最多只能赋予一个HTML标记是因为不 仅CSS可以使用，JavaScript等其他脚本语言也可以 使用id属性值。 另外，id选择器不支持像class选择器那样可以 多风格同时使用。
4.3.1 基本选择器
3.ID选择器 【例4-3】利用ID选择器为不同标题设置样式示例。