CSS编程技术
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
在出现冲突的情况下，低层次的样式表具有使用上 的优先权。
3.3.1行内样式－Style属性的使用
如果希望某段文字和其他段落的文字显示风格不一样，可采用“行内样式”。 行内样式使用标记的 style 属性定义。 <table> <tr> <td width="80" height="80" valign="top"><img src="3699.jpg" height="80" width="80" border="1"/></td> <td width="140" height="80" valign="top"> <p style="color:#0000FF; font-size:12px; font-weight:bold"> 单 价：￥3999<br> 剩余时间：成交结束<br> 新旧程度：全新 <br> 所 在 地：北京 <br> 宝贝数量：5 件 <br> 浏 览 量：220 次 </p> </td><tr> <td colspan="2" width="260"> <p style="color:#FF00FF; font-weight:bold; font-size:14px"> 另送价值50元的充电器套装！(一个充电器，两节充电电池)</p> </td></tr> </table>
常用的CSS属性
定位相关属性
3.1 什么是CSS样式？
CSS－Cascading Style Sheet，一种样式定义语言，为HTML中的 标记定义样式。
<!--3.html--> <html> <head> <title>设置属性</title> <style type="text/css"> h1{ font-size:18px; color:#6600CC; } </style> </head> <body> <h1>h1改变了样式</h1> <h2>h2未改变样式</h2> </body> </html>
CSS属性
CSS属性是控制网页样式的基本元素，CSS涉及的 属性极其庞大，包括颜色、尺寸、位置等，可以使用 Dreamweaver中的CSS规则定义创建CSS样式规则。 CSS属性具有继承、层叠等特性。
第三步：浏览查看各网页
Onel.htm
another.htm
3.2 CSS样式选择符（样式选择器）
CSS样式选择符
浏览器在解析标记时，会根据标记名或标记中的 class属性或id属性到样式表中选择样式，因此样 式表中的这些标记或属性名又称为CSS的样式选择 符。
样式选择符的种类
标记选择符，如以前使用的div、span、p等 组选择符 CLASS 类选择符 ID 选择符
第7章 CSS编程技术
主讲：伏名
Email：sfj972579215@yahoo.cn QQ:972579215
*** 知新 ***
CSS样式简介 HTML中使用样式的方法
行内样式：style属性的使用 内嵌样式：样式块 外部样式：独立样式文件
样式选择符
组选择符 CLASS选择符 ID选择符
类选择符
标记选择符为特定标记定义样式，而class选择符可以独立于某个 具体标记定义，标记在选择样式时可以使用class属性。 在定义class选择符时，选择符名前要加圆点（· ）标识。
<HTML><HEAD> <STYLE type="text/css"> 类选择器的定义格式为： · 类名{ …样式规则; }
其中“Selector（选择符）”表示要定义样式的类型， 选择符可以包括HTML标签符、用户自主义类class或 用户自定义ID。“属性(property)”表示由CSS标准 定义的样式属性，“属性值(value)”为样式属性的值。
CSS样式定义
CSS样式语法规则：
关于样式表的语法，要注意以下几个问题。
ID选择符
与class选择符应用范围类似，在定义是ID选择符用井号(#)标识。 可通过联合定义来使用，即在ID选择符的前面附加标记符，
如：span#err{color:red;}，表示有被span使用时选择符err才有效。 <HTML><HEAD><STYLE TYPE="text/css"> #title { ID选择符一般定义 color:blue; font-size: 24px; } span#err{ ID选择符联合定义 color:red; font-size:16px; } </STYLE></HEAD> <BODY> 应用ID选择器：id＝"ID名" <H1 id="title">ID选择符测试</H2> <P id ="err">P标记中err选择符不起作用</P> <SPAN id="err">SPAN标记中err选择符起作用</SPAN> </BODY></HTML>
</div>未用样式 <div> XML及其应用<br> 机械工业出版社 </div> </body>
样式表
3.3.2 外部样式-独立样式文件
不管是行内样式还是内嵌样式都只能为一个Html页面服务， 若要使样式控制多个HTML文件，则采用外部样式。 外部样式是将样式放在独立的文件中，即样式表文件，通常 以css作为类型名。在使用该样式的HTML中通过<link>标 记来链接外部样式表文件
组选择符
将样式规则同时应用于多个标记，则可以将多个选择符 用逗号(,)隔开再定义样式规则。
如：文件3-4.css span,p,h1{ color:red; font-size:16px } 文件3-3.html <html> <head><title>组选择器</title> <link rel="stylesheet" type="text/css" href="3-4.css"/> </head> <body> <h1>H1标题</h1> <h2>H2标题</h2> <p>P段落</p> <span>span标记</span> </body> </html>
<h1 style="font-size:16px; color:#FF00FF">标题1</h1>
3.3.3内嵌样式－style样式块
行内样式局限于某个标签，若希望本网页内的所有同类标签都采用统一样式， 应采用内嵌样式。 内嵌样式一般在<head>标记内嵌入<style>标记。
<html ><head><title>内嵌样式</title> <style type="text/css"> div{ 样 background-color:#CCCCFF; 式 样 color:#0000FF; 选 式 } 择 规 span{ 符 则 font-size:16px; color:#FF0000 } <body> <div> </style> <span>ASP及其应用</span><br> </head> 机械工业出版社 </html>
.myinput {
border: 1px solid; border-color:#D4BFFF; color:#2A00FF
} </STYLE></HEAD> 应用类选择符：class＝"类名" <BODY><FORM > <P>用户名<INPUT name="textfield" type="text" class="myinput"></P> <P>密 码<INPUT name="textfield" type="password" class="myinput"></P> <P> <INPUT type="reset" name="Submit" value=" 重 填 "> <INPUT type="submit" name="Submit" value=" 提 交 "></P> </FORM></BODY></HTML>
样式文件 P { ….. }
网页1
网页2
网页3
链接外部样式表的步骤
使用LINK（链接）标签 ，语法： <HEAD> <LINK rel = "stylesheet" type = "text/css" href = "样式表文 件.css" > </HEAD> 第一步：创建样式表文件newstyle.css 第二步：把样式文件和网页关联 样式文件： newstyle.css P { ….. }
样式规则
CSS 的作用
针对页面中的对象的风格和样式进 行定义。
使得HTML各个标记的属性更具有 一般性和通用性。
CSS概述
CSS功能与特点：示例
显然，如果页面中有很多标签的样式需要去控制，而且这些样 式可能会经常改变，使用这种方法就非常麻烦。
CSS概述
使用CSS优势： 可以实现网页结构与格式分离； 对网页布局、字体、背景和其它图文效果实现更加 精确的控制； 更好的易用性和扩展性，可以单独以一个文件的形 式出现。
总之，CSS在当前的网页设计中已经成为不可缺少的技术，小至去除链 接文字的下划线，大致实现复杂的视觉和动态效果，网络中有大量的CSS 代码，初学者可多参考别人CSS实现网页样式的方法。
CSS样式定义
CSS样式语法规则：
Selector{property1:value1} Selector{property1:value1;property 2:value2;…}
3.3 HTML中使用CSS的方法 根据样式代码的位置，分为三种：
行内样式（内置样式单）：标记的style属性，适用于单个元 素的内容 内嵌样式（嵌入式样式单）： style样式块，适用于整个文档 的主体 外部样式（外部式样式单）：独立样式文件，可以应用在多个 文档的主体中
注意：
在使用时，内置样式表优先于文档样式表，而文档 样式表又优先于外部样式表。
CSS样式定义 ID样式符与类样式符对照：
类选择符可以重复使用，且可以用在任意元素上， 使用任意次。 HTML内id属性是唯一的，拥有id的元素才会应用 该样式。 ID选择符的优先权高于类选择符。
补充：特殊的选择器－伪类与伪对象 伪类定义超链接样式
A:hover{…}鼠标悬停时的样式属性 A:visited{…}链接地址已被访问过时的样式属性 A:link{…}对象在未被访问前的样式属性 A:active{…}在鼠标点击与释放之间时的样式属性
Байду номын сангаас
伪对象
选择符 : first-letter { … }
伪类示例
<HTML> <HEAD> <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.html" >俺是超链接，移过来我就显示下划线</A> </BODY> </HTML>
行内样式格式
属性以"名:值"对的形式出现， 名与值之间以冒号(:)分隔，各 对之间以分号(;)分隔
<标记名 style="样式属性名1:值1;„;样式属性名n:值n">应用样式的内容</标记名>
<p style="color:#0000FF; font-size:12px; font-weight:bold">正文</p>
属性必须要包含在{ }号之中。 属性和属性值之间用“:”分隔。 当有多个属性时，用“;”进行区分。 在书写属性时属性之间使用空格换行等，并不影响属性的显 示。 如果一个属性有几个值，则每个属性值之间用空格分隔开。
BODY { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background color: #ff0000; background-repeat: repeat-x; }
3.3.1行内样式－Style属性的使用
如果希望某段文字和其他段落的文字显示风格不一样，可采用“行内样式”。 行内样式使用标记的 style 属性定义。 <table> <tr> <td width="80" height="80" valign="top"><img src="3699.jpg" height="80" width="80" border="1"/></td> <td width="140" height="80" valign="top"> <p style="color:#0000FF; font-size:12px; font-weight:bold"> 单 价：￥3999<br> 剩余时间：成交结束<br> 新旧程度：全新 <br> 所 在 地：北京 <br> 宝贝数量：5 件 <br> 浏 览 量：220 次 </p> </td><tr> <td colspan="2" width="260"> <p style="color:#FF00FF; font-weight:bold; font-size:14px"> 另送价值50元的充电器套装！(一个充电器，两节充电电池)</p> </td></tr> </table>
常用的CSS属性
定位相关属性
3.1 什么是CSS样式？
CSS－Cascading Style Sheet，一种样式定义语言，为HTML中的 标记定义样式。
<!--3.html--> <html> <head> <title>设置属性</title> <style type="text/css"> h1{ font-size:18px; color:#6600CC; } </style> </head> <body> <h1>h1改变了样式</h1> <h2>h2未改变样式</h2> </body> </html>
CSS属性
CSS属性是控制网页样式的基本元素，CSS涉及的 属性极其庞大，包括颜色、尺寸、位置等，可以使用 Dreamweaver中的CSS规则定义创建CSS样式规则。 CSS属性具有继承、层叠等特性。
第三步：浏览查看各网页
Onel.htm
another.htm
3.2 CSS样式选择符（样式选择器）
CSS样式选择符
浏览器在解析标记时，会根据标记名或标记中的 class属性或id属性到样式表中选择样式，因此样 式表中的这些标记或属性名又称为CSS的样式选择 符。
样式选择符的种类
标记选择符，如以前使用的div、span、p等 组选择符 CLASS 类选择符 ID 选择符
第7章 CSS编程技术
主讲：伏名
Email：sfj972579215@yahoo.cn QQ:972579215
*** 知新 ***
CSS样式简介 HTML中使用样式的方法
行内样式：style属性的使用 内嵌样式：样式块 外部样式：独立样式文件
样式选择符
组选择符 CLASS选择符 ID选择符
类选择符
标记选择符为特定标记定义样式，而class选择符可以独立于某个 具体标记定义，标记在选择样式时可以使用class属性。 在定义class选择符时，选择符名前要加圆点（· ）标识。
<HTML><HEAD> <STYLE type="text/css"> 类选择器的定义格式为： · 类名{ …样式规则; }
其中“Selector（选择符）”表示要定义样式的类型， 选择符可以包括HTML标签符、用户自主义类class或 用户自定义ID。“属性(property)”表示由CSS标准 定义的样式属性，“属性值(value)”为样式属性的值。
CSS样式定义
CSS样式语法规则：
关于样式表的语法，要注意以下几个问题。
ID选择符
与class选择符应用范围类似，在定义是ID选择符用井号(#)标识。 可通过联合定义来使用，即在ID选择符的前面附加标记符，
如：span#err{color:red;}，表示有被span使用时选择符err才有效。 <HTML><HEAD><STYLE TYPE="text/css"> #title { ID选择符一般定义 color:blue; font-size: 24px; } span#err{ ID选择符联合定义 color:red; font-size:16px; } </STYLE></HEAD> <BODY> 应用ID选择器：id＝"ID名" <H1 id="title">ID选择符测试</H2> <P id ="err">P标记中err选择符不起作用</P> <SPAN id="err">SPAN标记中err选择符起作用</SPAN> </BODY></HTML>
</div>未用样式 <div> XML及其应用<br> 机械工业出版社 </div> </body>
样式表
3.3.2 外部样式-独立样式文件
不管是行内样式还是内嵌样式都只能为一个Html页面服务， 若要使样式控制多个HTML文件，则采用外部样式。 外部样式是将样式放在独立的文件中，即样式表文件，通常 以css作为类型名。在使用该样式的HTML中通过<link>标 记来链接外部样式表文件
组选择符
将样式规则同时应用于多个标记，则可以将多个选择符 用逗号(,)隔开再定义样式规则。
如：文件3-4.css span,p,h1{ color:red; font-size:16px } 文件3-3.html <html> <head><title>组选择器</title> <link rel="stylesheet" type="text/css" href="3-4.css"/> </head> <body> <h1>H1标题</h1> <h2>H2标题</h2> <p>P段落</p> <span>span标记</span> </body> </html>
<h1 style="font-size:16px; color:#FF00FF">标题1</h1>
3.3.3内嵌样式－style样式块
行内样式局限于某个标签，若希望本网页内的所有同类标签都采用统一样式， 应采用内嵌样式。 内嵌样式一般在<head>标记内嵌入<style>标记。
<html ><head><title>内嵌样式</title> <style type="text/css"> div{ 样 background-color:#CCCCFF; 式 样 color:#0000FF; 选 式 } 择 规 span{ 符 则 font-size:16px; color:#FF0000 } <body> <div> </style> <span>ASP及其应用</span><br> </head> 机械工业出版社 </html>
.myinput {
border: 1px solid; border-color:#D4BFFF; color:#2A00FF
} </STYLE></HEAD> 应用类选择符：class＝"类名" <BODY><FORM > <P>用户名<INPUT name="textfield" type="text" class="myinput"></P> <P>密 码<INPUT name="textfield" type="password" class="myinput"></P> <P> <INPUT type="reset" name="Submit" value=" 重 填 "> <INPUT type="submit" name="Submit" value=" 提 交 "></P> </FORM></BODY></HTML>
样式文件 P { ….. }
网页1
网页2
网页3
链接外部样式表的步骤
使用LINK（链接）标签 ，语法： <HEAD> <LINK rel = "stylesheet" type = "text/css" href = "样式表文 件.css" > </HEAD> 第一步：创建样式表文件newstyle.css 第二步：把样式文件和网页关联 样式文件： newstyle.css P { ….. }
样式规则
CSS 的作用
针对页面中的对象的风格和样式进 行定义。
使得HTML各个标记的属性更具有 一般性和通用性。
CSS概述
CSS功能与特点：示例
显然，如果页面中有很多标签的样式需要去控制，而且这些样 式可能会经常改变，使用这种方法就非常麻烦。
CSS概述
使用CSS优势： 可以实现网页结构与格式分离； 对网页布局、字体、背景和其它图文效果实现更加 精确的控制； 更好的易用性和扩展性，可以单独以一个文件的形 式出现。
总之，CSS在当前的网页设计中已经成为不可缺少的技术，小至去除链 接文字的下划线，大致实现复杂的视觉和动态效果，网络中有大量的CSS 代码，初学者可多参考别人CSS实现网页样式的方法。
CSS样式定义
CSS样式语法规则：
Selector{property1:value1} Selector{property1:value1;property 2:value2;…}
3.3 HTML中使用CSS的方法 根据样式代码的位置，分为三种：
行内样式（内置样式单）：标记的style属性，适用于单个元 素的内容 内嵌样式（嵌入式样式单）： style样式块，适用于整个文档 的主体 外部样式（外部式样式单）：独立样式文件，可以应用在多个 文档的主体中
注意：
在使用时，内置样式表优先于文档样式表，而文档 样式表又优先于外部样式表。
CSS样式定义 ID样式符与类样式符对照：
类选择符可以重复使用，且可以用在任意元素上， 使用任意次。 HTML内id属性是唯一的，拥有id的元素才会应用 该样式。 ID选择符的优先权高于类选择符。
补充：特殊的选择器－伪类与伪对象 伪类定义超链接样式
A:hover{…}鼠标悬停时的样式属性 A:visited{…}链接地址已被访问过时的样式属性 A:link{…}对象在未被访问前的样式属性 A:active{…}在鼠标点击与释放之间时的样式属性
Байду номын сангаас
伪对象
选择符 : first-letter { … }
伪类示例
<HTML> <HEAD> <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.html" >俺是超链接，移过来我就显示下划线</A> </BODY> </HTML>
行内样式格式
属性以"名:值"对的形式出现， 名与值之间以冒号(:)分隔，各 对之间以分号(;)分隔
<标记名 style="样式属性名1:值1;„;样式属性名n:值n">应用样式的内容</标记名>
<p style="color:#0000FF; font-size:12px; font-weight:bold">正文</p>
属性必须要包含在{ }号之中。 属性和属性值之间用“:”分隔。 当有多个属性时，用“;”进行区分。 在书写属性时属性之间使用空格换行等，并不影响属性的显 示。 如果一个属性有几个值，则每个属性值之间用空格分隔开。
BODY { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background color: #ff0000; background-repeat: repeat-x; }