css样式表—讲座
合集下载
CSS的样式PPT课件
知识点精讲
知识点分析 CSS文字样式的常用属性 设置字体： 基本语法为font-family:字体1，字体2，字体3。 例如：h1{font-family:宋体，楷体，隶书;}。 设置文字大小 基本语法为font-size:尺寸|百分比|关键字。 设置斜体 基本语法为font-style:normal|italic|oblique。 设置文字粗细 基本语法为font-weight:normal|bold|bolder|lighter|number。 设置变体 基本语法为font-variant:normal|small-caps。
网站建设与管理
CSS的样式
考纲解读
1 掌握CSS的基础知识。 2 掌握CSS的属性。
考点解读
重难点分析：CSS样式表、样式选择器及CSS的属性。
知识点精讲
知识点1 CSS的基础知识 例题精讲 请输入正确的代码
【解析】外部链接样式表的声明方法为<link rel=″stylesheet″ type=″text/css″ href=″样式 表文件的地址″>
知识点精讲
巩固提高
在Dreamweaver软件中，给网站首页设置“页面属性”的具体要求如下:
网站首页中文字大小设置为12 px，文字颜色设置为“#000”。
设置网页背景颜色为“#CCC”。 设置“链接（CSS） ”中“下划线样式”为“始终无下划线”。 设置“链接（CSS）”中“链接颜色”为“#000”。 下面是网站首页的部分源代码，请从选项A~N中将正确的内容填入相应位置。
知识点精讲
CSS段落和其他文字样式属性 修饰文字 基本语法为text-decoration:underline|overline|line-through|blink|none。 设置段落的水平对齐方式 基本语法为text-align:left|right|left|justify。 颜色及背景 设置文字颜色 基本语法为color：颜色的名称|RGB值|十六进制数。 设置背景 基本语法为background:背景颜色|背景图像|背景重复|背景附件|背景位置。 设置背景颜色属性 基本语法为background-color:颜色|transparent（透明）。 设置背景图像属性 基本语法为background-image:url（背景图片的路径和名称）。
CSS+DIV入门教程PPT_2010更新版
CSS属性
CSS样式表
18
字体属性
Font-family:指定文字的字体 – H1{font-family:华文彩云} Font-style：指定文字是否加粗或使用斜体。取值： normal（正常）、oblique（偏斜体）、italic（斜体） Font-size：指定文字的大小。 Font：上述样式属性的综合表示法。 – P{font: bold 16pt}
14
二、CSS与HTML文档的结合方法
外联样式：使用<link>标记符链接到外部的样式文件， 凡链接的网页都起作用
– 1、定义外部样式文件，用记事本或者 Dreamweaver，编辑完后文件扩展名应为”.css”；
– 2、建立HTML网页文档； – 3、在网页文档中使用<link>标签将前面的样式表 文档链接到网页中。
– Border-style
CSS样式表
22
分级属性
List-style-type：指定项目符号或编号 – 允许值：disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none List-style-image：指定项目符号的图形文件名称， 值为url或none
CSS样式表
20
文本属性
Text-decoration：设置底线、顶线、闪烁等文字效果。 值为none,underline,overline,line-through,blink.
Text-align：指定文字的对齐方式。值为： left,right,center,justify
CSS样式表
CSS样式代码基础教程 ppt课件
<p style="color：#ff0000">内联式样式表</p>
这种样式表只会对使用它的元素起作用，而不会影响 HTML文档中的其他元素。也正因为如此，内联式样式表 通常用在需要特殊格式的某个网页对象上。本案例就一个 应用内联式样式表的一个网页实例，在这个实例中，各段 文字都定义了自己的内联式样式表：
3．CSS的分类
一般情况下，层叠样式表可以分为三种：内联式样 式表、嵌入式样式表和外部样式表。下面我们就分别来看 看这三种样式表。
内联式样式表 嵌入样式表 外部样式表
❖内联式样式表
内联式样式表是在现有HTML元素的基础上，用style属 性把特殊的样式直接加入到那些控制信息的标记中，比如 下面的例子：
2．组合规则 在定义样式的时候，有很多不同的元素需要使用相同
的样式。此时没有必要逐一定义样式规则，可以将他们组 合，并用分号将各个声明隔开即可。如：
h1,h2,p{ font-family:楷体_gb2312;text-align:center } 这样定义之后，在页面中所有使用h1、h2和p的对象
h2 b{ color:#0000FF}/*具有上下文关系的html标记选择器*/
.water{ font-family:"隶书"; font-size:24px; text-align:right}/*类 选择器*/
h3.hello{ font-family:"隶书"; text-align:center; font-size:36px}/* 指定的类选择器*/
<p style="color:#ff0000">这段文字将显示为红色</p>
这种样式表只会对使用它的元素起作用，而不会影响 HTML文档中的其他元素。也正因为如此，内联式样式表 通常用在需要特殊格式的某个网页对象上。本案例就一个 应用内联式样式表的一个网页实例，在这个实例中，各段 文字都定义了自己的内联式样式表：
3．CSS的分类
一般情况下，层叠样式表可以分为三种：内联式样 式表、嵌入式样式表和外部样式表。下面我们就分别来看 看这三种样式表。
内联式样式表 嵌入样式表 外部样式表
❖内联式样式表
内联式样式表是在现有HTML元素的基础上，用style属 性把特殊的样式直接加入到那些控制信息的标记中，比如 下面的例子：
2．组合规则 在定义样式的时候，有很多不同的元素需要使用相同
的样式。此时没有必要逐一定义样式规则，可以将他们组 合，并用分号将各个声明隔开即可。如：
h1,h2,p{ font-family:楷体_gb2312;text-align:center } 这样定义之后，在页面中所有使用h1、h2和p的对象
h2 b{ color:#0000FF}/*具有上下文关系的html标记选择器*/
.water{ font-family:"隶书"; font-size:24px; text-align:right}/*类 选择器*/
h3.hello{ font-family:"隶书"; text-align:center; font-size:36px}/* 指定的类选择器*/
<p style="color:#ff0000">这段文字将显示为红色</p>
DW第八讲CSS样式.ppt
创建
1. 打开CSS样式面板(Shift+F11) 2. 单击”新建”按钮
(1). 自定义样式: 作用: – 定义某个特定对象的样式,如一段文本的大小,首行缩进,行距,光标 样式,滤镜效果等. 步骤: – 在名字输入框中输入.name – 在弹出的样式表属性定义对话框中设置. – 设置完成后在样式面板上会出现此样式名称. – 应用: 选中要应用样式的对象,单击面板上的样式名即可. 掌握： – 文字常用9pt大小,20px间距(类型/大小、行高) – 精确首行缩进(区块/文字缩进) • 注意:只能在一个具体空间内部(如在一个单元格或层内)的全体 文本上,或者是一段文本(<p>…</p>)才能应用. – 光标/滤镜(扩展/光标、过滤器)
元素 BODY
说明 网页文档的主体元素，所有的可见范围都在元素内
BUTTON
DIV IMG INPUT MARQUEE SPAN TABLE TD TEXTAREA TFOOT TH THEAD TR
表单域的按钮，可以有“发送(submit)”、“重置(reset)”等形式
定义了网页上的一个区域，这个区域的高度、宽度或者绝对位置都是以知的 图片元素，通过指定“src"属性来指定图片的来源 输入表单域 移动字幕效果 定义了网页上的一个区域，这个区域的高度、宽度或者绝对位置都是以知的 表格 表格数据单元格 文本区域 多行输入文本框 表格标题单元格 表格标题 表格行
（2）重定义HTML标签： 作用： – 对HTML标签的重新定义。 步骤： – 在标签列表中选择要重新定义的标签 – 在弹出的样式表属性定义对话框中设置. – 设置完成后自动应用。名称不会出现在样式面板上。 掌握： – 背景图像平铺问题（重定义<body>标签） – 表单元素样式（<input>) – 表格<table>(<td>)、图像<img>等。
第12讲、CSS基础知识及设置
七、小结
•
本章主要介绍层叠样式表的概念、样 式表的种类及样式的应用。
练习
• 利用CSS样式对4.3.2.html内容进行格式化 使得到如4.3.2(result).html效果。
• 使用外部(Extenal)样式表，相对于内嵌(Inline)和 内部式 (Internal)的，有以下优点： • CSS的最大特点就是将内容和格式分离。一个外 部CSS文件，可以被很多网页共用。 • 便于修改。如果要修改样式，只需要修改CSS文 件，而不需要修改每个网页。 • 显示示例，有以下优点：提高网页显示的速度。 如果样式写在网页里。 • 提高网页显示的速度。如果样式写在网页里，会 降低网页显示的速度，如果网页引用一个CSS文 件，这个CSS文件多半已经在缓存区(其它网页 早已经引用过它)，网页显示的速度就比较快。
• • • • • • • • • •
然后你建立一个网页，代码如下： <HTML> <HEAD> <link href="../asdocs/css_tutorials/home.css" rel="stylesheet" type="text/css"> </HEAD> <BODY> <H1 class="mylayout"> 这个标题使用了Style。</H1> <H1>这个标题没有使用Style。</H1> </BODY> </HTML>
• 2）打开并设置“链接页面属性”选项窗口。
• • • •
字体 指定链接文本使用的默认字体。 大小 指定链接文本使用的默认的字体大小。 链接颜色 指定应用于链接文本的颜色。 已访问链接的颜色 指定应用于访问过的链接的颜 色。 • 鼠标经过时链接的颜色 指定当鼠标（或指针）位 于链接上时应用的颜色。 • 活动链接的颜色 指定当鼠标（或指针）在链接上 单击时应用的颜色。 • 下划线样式 指定scading Style Sheet),中文译为层叠样 式表，它是用于控制网页样式并允许将样式信息 和网页内容分离的一种标记性语言。 • CSS是1996年由W3C审核通过，并且推荐使用的。 简单的说，CSS的引入就是为了使HTML语言更好 地适应页面的美工设计。它以HTML为基础，提供 了更丰富的格式化功能，如字体、颜色、背景和 整体排版等。
Dreamweaver_CS5自学教程-第十课：CSS样式表 2
第十课：CSS样式表10-1 认识CSS (1) 10-2 认识CSS (2)如果说目前在Web设计和开发技术领域，什么是非常“火”的新技术，CSS/DIV页面的布局无疑是其中之一CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。
但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。
本课从CSS的基本概念出发，介绍CSS语言的特点，以及如何在网页中引入CSS，并对CSS进行初步的体验。
（其实我们在前面的课程中已经接触到）作用：例子演示。
从CSS对标记的控制入手，讲解CSS的初步知识以及编辑方法。
希望大家能够掌握下一面几个方面的内容：①、标记的概念②、传统HTML的缺点③、CSS的引入1、传统HTML标记，在批量编辑时效率低，不够标准利用CSS样式编辑网页，可以大大挺高效率，规范网页的设计标准。
2、CSS样式代码在网页代码中的位置CSS代码style type="text/css"><!--body,td,th {font-size: 12px;color: #FF0000;}--></style>特点：1）灵活控制网页中的每个元素的样式2）把内容和格式处理相分离，提高工作效率3、CSS样式的链接10-3 编辑CSS样式(1) 10-4 编辑CSS样式(2) 如何编辑CSS样式█1) 属性面板快捷操作1、在下方的属性面板对选中的目标建立CSS规则创建的CSS规则将会应用到所有同类目标上2、建立的CSS规则代码自动添加在网页代码＜head＞部分中3、对建立的CSS样式修改：把鼠标光标在设计页面中放置到需要修改的内容上边，在下方的属性面板中修改，即可对所有应用了此CSS规则的目标修改█2）使用CSS样式面板打开“CSS样式”面板：全部﹤style﹥中显示的是当前网页中的所有CSS样式P表示CSS样式应用的标签的类型，下方显示的是当前CSS样式设置的属性下方修改当前CSS样式的属性修改CSS样式后将会全部应用到同类标签1、利用CSS样式给图片添加边框：选中图片，在CSS样式面板中点击“新建规则”设置“新建CSS规则”的应用属性设置成功，全部﹤style﹥中显示刚刚设置的“img”的属性2、属性的显示方式从下方的按钮中设置█3）手工输入代码10-5 CSS选择器选择器（selector）是CSS中很重要的概念，所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。
第9章 CSS样式表
9.3 实例——使用CSS样式控制页面
把外部CSS样式表链接到页面
CSS样式表文件与网页文件的关系
9.3 实例——使用CSS样式控制页面
操作步骤:
– 打开未设置样式的主页文件 – 打开CSS样式面板，单击面板下方的（附加样式表）按钮，打开如下
图所示“链接外部样式表”对话框，单击“浏览”按钮，打开如下图 所示对话框，选择CSS文件夹中的wenzi.css和font.css进行链接，网 页中相应的样式即发生改变
9.3 实例——使用CSS样式控制页面
9.3 实例——使用CSS样式控制页面
– 采用上述方法定义biankuang的CSS规则，参数设置如下图所 示
9.3 实例——使用CSS样式控制页面
9.3 实例——使用CSS样式控制页面
– 采用上述方法定义bankuai的CSS规则，参数设置如下图所示
9.3 实例——使用CSS样式控制页面
9.4 DIV+CSS布局
–单击【确定】按钮，完成Body标签样式的定义 –定义#container容器。单击“CSS样式”面板右下角的“新建样式” 按钮，弹出“新建CSS规则”对话框，设置参数如下图所示。
9.4 DIV+CSS布局
–单击【确定】按钮，打开“#container的CSS规则定义”对话框，设 置参数如下图所示
“插入Div标签”对话框
9.4 DIV+CSS布局
插入DIV标签
–在页面中单击，执行“插入”|“布局对象”|“Div标签”命令， 弹出“插入Div标签”对话框，在“插入”栏中选择“在插入 点”，在“ID”栏中选择“container”样式，如下图所示
“插入Div标签”对话框
9.4 DIV+CSS布局
CSS样式基础PPT模板
第5 页
（二）行内样式表
行内样式表是直接对HTML标签使用style属性，然后将CSS代码作为属性 值写在其中，其格式如下。
<body> <HTML标签 style="样式属性:取值;样式属性:取值;…"></HTML标签> </body> （1）HTML标签就是页面中HTML元素的标签，例如<body>，<p>， <div>等。 （2）style参数后面引号中的内容相当于样式表大括号里的内容。
例如： *{margin:0; padding:0; }
第 14 页
网络信息编辑
第 11 页
（二）类选择器和id选择器
2．id选择器 id选择器用来对单个元素设置单独的样式，在同一 个HTML文件中，id名不能重复。id选择器的使用方法 与类选择器相似，先在HTML中为希望单独设置样式的 标签定义id名（使用标签的id属性），然后在CSS中定义 id选择器。定义id选择器时，需要在id名称前面加一个 “#”号，语法如下。 #id名{样式属性:取值;样式属性:取值;……}
第8 页
第9 页
二、选择器的类型
•（一）标签选择器 •（二）类选择器和id选择器 •（三）伪类选择器 •（四）通用选择器
（一）标签选择器
一个HTML文件由很多不同的标签组成， 利用标签选择器可以统一设置使用某类标签 定义的元素外观。例如：希望1号标题标签 <h1>的文本有以下效果。
（1）标题文字居中对齐。 （2）字体大小为42像素。 （3）字体颜色为橙色。
网络信息编辑
任务描述
CSS层叠样式表用于实现网页的表现层，本任务通过为任务一中创建的网页设置 样式（效果如图），让读者简单了解网页样式的设置方法。
（二）行内样式表
行内样式表是直接对HTML标签使用style属性，然后将CSS代码作为属性 值写在其中，其格式如下。
<body> <HTML标签 style="样式属性:取值;样式属性:取值;…"></HTML标签> </body> （1）HTML标签就是页面中HTML元素的标签，例如<body>，<p>， <div>等。 （2）style参数后面引号中的内容相当于样式表大括号里的内容。
例如： *{margin:0; padding:0; }
第 14 页
网络信息编辑
第 11 页
（二）类选择器和id选择器
2．id选择器 id选择器用来对单个元素设置单独的样式，在同一 个HTML文件中，id名不能重复。id选择器的使用方法 与类选择器相似，先在HTML中为希望单独设置样式的 标签定义id名（使用标签的id属性），然后在CSS中定义 id选择器。定义id选择器时，需要在id名称前面加一个 “#”号，语法如下。 #id名{样式属性:取值;样式属性:取值;……}
第8 页
第9 页
二、选择器的类型
•（一）标签选择器 •（二）类选择器和id选择器 •（三）伪类选择器 •（四）通用选择器
（一）标签选择器
一个HTML文件由很多不同的标签组成， 利用标签选择器可以统一设置使用某类标签 定义的元素外观。例如：希望1号标题标签 <h1>的文本有以下效果。
（1）标题文字居中对齐。 （2）字体大小为42像素。 （3）字体颜色为橙色。
网络信息编辑
任务描述
CSS层叠样式表用于实现网页的表现层，本任务通过为任务一中创建的网页设置 样式（效果如图），让读者简单了解网页样式的设置方法。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
内嵌样式
行内样式 某个HTML标签 对于某个HTML标签： 1）如果有多种样式，如果规定 的样式没有冲突，则叠加； 2）如果有冲突，则最先考虑行 内样式表显示，如果没有，再 考虑内嵌样式显示，如果还没 有，最后采用外面样式表显示， 否则就按HTML的默认样式显示；
<DIV> 层标签
…关键代码… <DIV id="Layer1" style="position:absolute; left:149px; top:110px; width:357px; height:87px; z-index:1; " > <IMG src="talk.gif" width="91" height="76"> <P>Z-index=1，我是第一层，我是容器，包含图片段落</P> </DIV> <DIV id="Layer2" style=“….; z-index:2; …."> <IMG src="bbs_logo.gif" width="101" height="43"> <P>Z-index=2，我是第二层，包含图片和段落 </P> </DIV>…
内嵌样式-1
行内样式表局限于某个标签，如果希望本网页内的所以 同类标签都采用统一样式，这时应采用内嵌样式。
<HTML> <HEAD> <TITLE>应用样式</TITLE> 选择器 <STYLE TYPE="text/css" > P { font-size:20px; color:blue; text-align:center }
<SPAN>是行级容器标签，不可 以包含图片、标题、段落等，只 能包含文字内容
css控制布局
• 早期表格布局
<table width="100%"> <tr> <th height="50" colspan="3" scope="col">TD</th> </tr> <tr> <td width="100" height="200" rowspan="2"><strong>TD</strong></td> <td width="200" height="100"><strong>TD</strong></td> <td><strong>TD</strong></td> </tr> <tr> <td colspan="2"><table width="100%"> <tr> <td height="100"><strong>TD</strong></td> </tr> <tr> <td height="100"><strong>TD</strong></td> </tr> <tr> <td height="100"><strong>TD</strong></td> </tr> </table></td> </tr> </table>
内嵌样式-6 特殊的选择器
<HEAD>
HTML选择器
<STYLE type="text/css"> A { /*设置超链接不带下划线 设置超链接不带下划线*/ 设置超链接不带下划线 color: blue; text-decoration: none; /*文本修饰：无*/ 文本修饰： 文本修饰 特殊的伪类：A代表超链接，hover代表鼠标悬停 } A:hover {/*鼠标在超链接上方停留时，带下划线 */ 鼠标在超链接上方停留时， 鼠标在超链接上方停留时 color: red; text-decoration:underline; /*文本修饰：下划线 文本修饰： 文本修饰 下划线*/ } </STYLE> HEAD> <BODY> <A href=“a.htm" >俺是超链接，移过来我就显示下划线 俺是超链接， 俺是超链接 移过来我就显示下划线</A> </BODY> </HTML>
内嵌样式-3 HTML选择器
/*--关键代码--*/ <HEAD> <STYLE type="text/css"> P { /*设置样式：字体和背景色*/ font-family: System; font-size: 18px; color: #3333CC; } H2 { background-color: #CCFF33; text-align: center; } </STYLE> </HEAD> <BODY> <H2>品种特征方面：</H2> <P> 1、蛋鱼：蛋鱼…….。</P> 应用H2样式 <P> 2、龙睛：龙睛……..。</P> <P> 3、高头：高头….。</P>
应用类选择器： class＝”类名“
内嵌样式-5 ID选择器
<HEAD> <STYLE TYPE="text/css"> ID选择器 #fire { color:red; font-size: 24px; } ID选择器的定义格式为： </STYLE> ＃ID名 { …样式规则; } 应用ID选择器：ID＝”ID名“ </HEAD> <BODY> <H2 ID="fire">我是二级标题，火是这样的 我是二级标题， 我是二级标题 火是这样的</H2> <P ID ="fire">我是段落，火是这样的 我是段落， 我是段落 火是这样的</P> </BODY>
样式的分类
根据样式代码的位置，分为三类： 行内样式 内嵌样式 外部样式
在最后一个声明后面加上一个分号 (;) 是一个好习惯
行内样式
您如果希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内 样式”。行内样式使用元素标签的 STYLE 属性定义。 /*－－关键代码--*/ <p>剩余时间：成交结束<BR> 新旧程度：全新 <BR> 所 在 地：北京 <BR> 宝贝数量：5 件 <BR> 浏 览 量：220 次</p> <p style=“color:#FF00FF; font-family:隶书; fontweight:bold; font-size:24px"> 另送价值50元的充电器套装！(一个充电器，两节充电电池)可使用半年以 </p>
操作步骤同链接样式表
样式的混合使用
行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常 需要混合使用： • 有关整个网站统一风格的样式代码，放置在独立的样式文件*.css • 某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式 • 某张网页内，部分内容”与众不同“，采用行内样式
外部样式文件
Class和ID有什么区别？
• 1、在CSS文件里书写时，ID加前缀"#"；CLASS用"." • 2、id一个页面只可以使用一次；class可以多次引用。 • 3、ID是一个标签，用于区分不同的结构和内容；class是 一个样式，可以套在任何结构和内容上. • 4、从概念上说就是不一样的：id是先找到结构/内容，再 给它定义样式；class是先定义好一种样式，再套给多个 结构/内容。
newstyle.css P { ….. }
第三步：浏览查看各网页
Onel.htm
another.htm
演示： 演示：链接样式表示例 样式表示例
导入外部样式表
使用@import导入 ，语法： <HEAD> <STYLE TYPE="text/css"> @ import 样式表文件.css; </STYLE> </HEAD>
HTML选择器
应用P样式
内嵌样式-4 class类选择器
<HEAD> CLASS类选择器 <STYLE type="text/css"> .myinput { border: 1px solid; border-color:#D4BFFF; color:#2A00FF } 类选择器的定义格式为： </STYLE> .类名 </HEAD> { <BODY> …样式规则; <FORM > } <P>用户名 <INPUT name="textfield" type="text" class="myinput"></P> <P>密 码 <INPUT name="textfield" type="password" class="myinput"> </P> <P> <INPUT type="submit" name="Submit" value=" 重 填 "> <INPUT type="submit" name="Submit" value=" 提 交 "> </P>
行内样式 某个HTML标签 对于某个HTML标签： 1）如果有多种样式，如果规定 的样式没有冲突，则叠加； 2）如果有冲突，则最先考虑行 内样式表显示，如果没有，再 考虑内嵌样式显示，如果还没 有，最后采用外面样式表显示， 否则就按HTML的默认样式显示；
<DIV> 层标签
…关键代码… <DIV id="Layer1" style="position:absolute; left:149px; top:110px; width:357px; height:87px; z-index:1; " > <IMG src="talk.gif" width="91" height="76"> <P>Z-index=1，我是第一层，我是容器，包含图片段落</P> </DIV> <DIV id="Layer2" style=“….; z-index:2; …."> <IMG src="bbs_logo.gif" width="101" height="43"> <P>Z-index=2，我是第二层，包含图片和段落 </P> </DIV>…
内嵌样式-1
行内样式表局限于某个标签，如果希望本网页内的所以 同类标签都采用统一样式，这时应采用内嵌样式。
<HTML> <HEAD> <TITLE>应用样式</TITLE> 选择器 <STYLE TYPE="text/css" > P { font-size:20px; color:blue; text-align:center }
<SPAN>是行级容器标签，不可 以包含图片、标题、段落等，只 能包含文字内容
css控制布局
• 早期表格布局
<table width="100%"> <tr> <th height="50" colspan="3" scope="col">TD</th> </tr> <tr> <td width="100" height="200" rowspan="2"><strong>TD</strong></td> <td width="200" height="100"><strong>TD</strong></td> <td><strong>TD</strong></td> </tr> <tr> <td colspan="2"><table width="100%"> <tr> <td height="100"><strong>TD</strong></td> </tr> <tr> <td height="100"><strong>TD</strong></td> </tr> <tr> <td height="100"><strong>TD</strong></td> </tr> </table></td> </tr> </table>
内嵌样式-6 特殊的选择器
<HEAD>
HTML选择器
<STYLE type="text/css"> A { /*设置超链接不带下划线 设置超链接不带下划线*/ 设置超链接不带下划线 color: blue; text-decoration: none; /*文本修饰：无*/ 文本修饰： 文本修饰 特殊的伪类：A代表超链接，hover代表鼠标悬停 } A:hover {/*鼠标在超链接上方停留时，带下划线 */ 鼠标在超链接上方停留时， 鼠标在超链接上方停留时 color: red; text-decoration:underline; /*文本修饰：下划线 文本修饰： 文本修饰 下划线*/ } </STYLE> HEAD> <BODY> <A href=“a.htm" >俺是超链接，移过来我就显示下划线 俺是超链接， 俺是超链接 移过来我就显示下划线</A> </BODY> </HTML>
内嵌样式-3 HTML选择器
/*--关键代码--*/ <HEAD> <STYLE type="text/css"> P { /*设置样式：字体和背景色*/ font-family: System; font-size: 18px; color: #3333CC; } H2 { background-color: #CCFF33; text-align: center; } </STYLE> </HEAD> <BODY> <H2>品种特征方面：</H2> <P> 1、蛋鱼：蛋鱼…….。</P> 应用H2样式 <P> 2、龙睛：龙睛……..。</P> <P> 3、高头：高头….。</P>
应用类选择器： class＝”类名“
内嵌样式-5 ID选择器
<HEAD> <STYLE TYPE="text/css"> ID选择器 #fire { color:red; font-size: 24px; } ID选择器的定义格式为： </STYLE> ＃ID名 { …样式规则; } 应用ID选择器：ID＝”ID名“ </HEAD> <BODY> <H2 ID="fire">我是二级标题，火是这样的 我是二级标题， 我是二级标题 火是这样的</H2> <P ID ="fire">我是段落，火是这样的 我是段落， 我是段落 火是这样的</P> </BODY>
样式的分类
根据样式代码的位置，分为三类： 行内样式 内嵌样式 外部样式
在最后一个声明后面加上一个分号 (;) 是一个好习惯
行内样式
您如果希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内 样式”。行内样式使用元素标签的 STYLE 属性定义。 /*－－关键代码--*/ <p>剩余时间：成交结束<BR> 新旧程度：全新 <BR> 所 在 地：北京 <BR> 宝贝数量：5 件 <BR> 浏 览 量：220 次</p> <p style=“color:#FF00FF; font-family:隶书; fontweight:bold; font-size:24px"> 另送价值50元的充电器套装！(一个充电器，两节充电电池)可使用半年以 </p>
操作步骤同链接样式表
样式的混合使用
行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常 需要混合使用： • 有关整个网站统一风格的样式代码，放置在独立的样式文件*.css • 某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式 • 某张网页内，部分内容”与众不同“，采用行内样式
外部样式文件
Class和ID有什么区别？
• 1、在CSS文件里书写时，ID加前缀"#"；CLASS用"." • 2、id一个页面只可以使用一次；class可以多次引用。 • 3、ID是一个标签，用于区分不同的结构和内容；class是 一个样式，可以套在任何结构和内容上. • 4、从概念上说就是不一样的：id是先找到结构/内容，再 给它定义样式；class是先定义好一种样式，再套给多个 结构/内容。
newstyle.css P { ….. }
第三步：浏览查看各网页
Onel.htm
another.htm
演示： 演示：链接样式表示例 样式表示例
导入外部样式表
使用@import导入 ，语法： <HEAD> <STYLE TYPE="text/css"> @ import 样式表文件.css; </STYLE> </HEAD>
HTML选择器
应用P样式
内嵌样式-4 class类选择器
<HEAD> CLASS类选择器 <STYLE type="text/css"> .myinput { border: 1px solid; border-color:#D4BFFF; color:#2A00FF } 类选择器的定义格式为： </STYLE> .类名 </HEAD> { <BODY> …样式规则; <FORM > } <P>用户名 <INPUT name="textfield" type="text" class="myinput"></P> <P>密 码 <INPUT name="textfield" type="password" class="myinput"> </P> <P> <INPUT type="submit" name="Submit" value=" 重 填 "> <INPUT type="submit" name="Submit" value=" 提 交 "> </P>