[PPT模板]CSS+DIV_教程 - 360文档中心

合集下载

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

:link {color: #000000} :visited {color: #cccccc} :hover {color: #000000; font-style:italic} :active {color: #aaaaaa}
例5-6.htm
Internet与网页设计CSS样式表
12
CSS样式表
selector{property1:value1; property2:value2;…}
需要应用的样式的内容
样式的属性
样式的属性的值
Select的五种合法的类别：HTML标记符、用户定义的类 Class、用户定义的ID、虚类和虚元素 P119
Internet与网页设计CSS样式表
9
CSS样式表
选择符的类别
HTML标记符
应用比较多，注意继承性、组合性和关联性（P119）的应用。
用户定义的类选择1、符两种定义形式的区
可以使用任何名别 2、称？在命标名签类中。使用类选择 <body>里所有符的样元式素的都使可用以方定式义如“何类”。语法如下：？
selector.classname{property1:value1; property2:value2;…} .classname{property1:value1; property2:value2;…}
p,td,.c1{font-size:12pt;font-family:黑体;color:red}
5-2.htm
Internet与网页设计CSS样式表
5
CSS样式表
一、CSS的基本概念
样式的继承：若子元素未定义，则它将继承上级元素的样式的定义。但存在少数属性不能继承，见P119。
<HEAD> <TITLE>CSS例子</TITLE> <style> <!-p{color:red;font-size:20px;font-family:"华文仿宋", "Comic Sans MS"} b{text-decoration:underline} --> </style> </HEAD>
页面元素名：元素虚属性名{样式表内容}
Internet与网页设计CSS样式表
11
CSS样式表
a:link {color: #000000} a:visited {color: #cccccc} a:hover {color: #000000; font-style:italic} a:active {color: #aaaaaa}
[PPT模板]CSS+DIV_教程
一、CSS的基本概念
✓ 2、基本语法
单一选择符的复合样式声明应该用
“;”隔开，为便于
<HE选AD择>符{属性: 值阅} 读也可以分行写
<TITLE>CSS例子</TIT。LE>
<STYLE TYPE=“text/css”>
选择符H{H属11{{性ffoonn1tt-:-ssi值izzee::1xx-;-llaa属rrgge性e;; cc2oo几:lloo值r乎r::rr所2eedd;有}}…的…HT} ML
5-3.htm
Internet与网页设计CSS样式表
6
CSS样式表
一、CSS的基本概念
样式表的关联性： – 样式表的关联性指在某些样式定义中，可以定义某样式仅在某个特定元素范围内才有效。。 – 例如：
p b{font-size:12pt;font-family:黑体;color:red}
b元素仅在p元素作用范围内会套用上述的样式设定。而在其他地方 S与HTML文档的结合方法
✓ 内联样式：在<head>标记符内定义，在本网页内起作用。
<head> <style type="text/css“ media=“screen”> <!-body{ color:green } --> </style> </head>
Internet与网页设计CSS样式表
HH22{{ffoonntt--ssiizzee::llaarrggee;; ccoolloo标rr::b记blluu符ee}}形式都可以
</STYLE>
作为选择符。
</HEAD>
5-1.htm
Internet与网页设计CSS样式表
4
CSS样式表
一、CSS的基本概念
✓ 3、CSS样式的组合、继承和关联性样式的组合：把具有相同声明定义的选择符组合在一起，并用逗号隔开。－例如：段落元素p、单元格元素td和类c1可以使用相同样式：
二、CSS与HTML文档的结合方法
✓ HTML与样式表有多种结合方法 – 内联样式：在<head>标记符内定义 – 外联样式 • 使用<link>标记符链接到外部的样式文件 • 使用CSS的@import标记符来导入样式文件 – 在HTML标签中直接加入样式表的定义。
Internet与网页设计CSS样式表
5-4.htm
Internet与网页设计CSS样式表
7
CSS样式表
一、CSS的基本概念
✓ 4、注释 ➢ CSS文字的注释形式与C语言类似。
p{font-size:12pt} /*P标签的样式定义*/
Internet与网页设计CSS样式表
8
CSS样式表
一、CSS的基本概念
✓ 5、选择符 ➢ 样式表的基本语法形式：
例5-5.htm
Internet与网页设计CSS样式表
10
CSS样式表
选择符的类别
ID选择符
应用的形式基本与类选择符类似，定义时用“#”替代”.”。因此应用时一般选取其中的一种。见P120例子。
虚类和虚元素
在html的页面元素中没有这种属性，故称其为虚类，仅在IE5.0以上的浏览器版本才支持虚类选择符。语法如下：
14
CSS样式表
二、CSS与HTML文档的结合方法
✓ 外联样式：使用<link>标记符链接到外部的样式文件，凡链接的网页都起作用
– 1、定义外部样式文件，用记事本或者 Dreamweaver，编辑完后文件扩展名应为”.css”；
– 2、建立HTML网页文档； – 3、在网页文档中使用<link>标签将前面的样式表
文档链接到网页中。
<head> <link rel=“stylesheet” href=“hr.css” type=“text/css”> </head>