CSS+DIV技术
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
选择符的分类
在CSS样式中有以下几种选择符： （1）HTML选择符 HTML选择符就是HTML的标记，例如P、BODY、A等。如果用CSS定义了他们，那 么在整个网页中，该标识的属性都应用定义中的设置。HTML选择符的定义方法如下：
tag{property:value；property:value;….}
2、样式定义
样式定义的基本格式： selector {property1:value1;property2:value2;…} 每个样式定义都包含一个选择器，其后是该选择器的属性和值，多个属性 间用封号“；”分割。 示例： H1 { font-size: large; color:green } H2 { font-size: small; color:blue } .product_name { font-family:隶书} #my_name { font-size: 14pt } 当多个对象具有相同的样式定义时，多个对象之间可以用逗号分隔。 示例： tr,th{font:12px;margin:20px;font-color:#336699}
3、使用样式
嵌入样式表 链接外部样式表 导入外部的样式表 内嵌样式
CSS样式的优先级
嵌入样式表
使用<STYLE>标记把一个或多个CSS样式定义在HTML文档的 <HEAD>标记之间，这就是嵌入样式表。 嵌入样式表的作用范围是在本HTML文件内。 如下图：设计一个页面，要求页面中所有大学名称的显示样式为“加 粗、红色”，并且所有超链接没有下划线。
链接外部样式表
如果多个HTML文件要共享样式表，可以将样式表定义为一个独立的 以 .css 为 扩 展 名 的 CSS 样 式 文 件 。 然 后 再 在 要 使 用 外 部 样 式 表 的 HTML文件的头部用<link>标记链接到CSS样式文件。
链接外部样式表的好处在于一个外部样式表可以控制多个页面的显示 外观，从而确保这些页面外观的一致性。而且，若要更改样式，只需 在外部样式表中作一次更改,该更改就会反映到所有与这个样式表相链 接的页面上。
<style>标记内定义的前后 加上注释符<!--…-->的作用 是使不支持CSS的浏览器忽 略样式表的定义。
<span>标签：在行内定义一个 区域，也就是一行内可以被 <span>划分成好几个区域，从 而使不同区域呈现不同效果。 <span>标签本身不代表任何格 式，通常通过设置其class或id属 性，实现样式控制。
<BODY> <P><SPAN class="university_name">中山大学</SPAN>的主页地址是<A href=""></A></P> <P><SPAN class="university_name">清华大学</SPAN>的主页地址是<A href=""></A></P> </BODY> </HTML>
嵌入样式表示例
<HTML> <HEAD> <TITLE>嵌入样式表</TITLE> <STYLE> <!-.university_name {font-weight: bold;color:red} a:link, a:acitve, a:visited { text-decoration: none } --> </STYLE> </HEAD>
Test2.html <HTML> <HEAD> <TITLE>嵌入样式表</TITLE> <LINK rel="stylesheet" type="text/css" href="style1.css"> </HEAD>
<BODY> <P><SPAN class="university_name">中山大学</SPAN>的主页地址是<A href=""></A></P> <UL> <LI><A href="">南校区</A></LI> <LI><A href="/">北校区</A></LI> <LI><A href="/zhuhai">珠海校区</A></LI> <LI><A href="">东校区</A></LI> </UL> </BODY> </HTML>
内嵌样式
直接为某个页面元素的HTML标记的style属性指定的样式就是内嵌样式，该样 式只作用于这个元素。 例如，比较以下两段”Hello”的不同显示效果：
… <BODY>
<P style="font-size:large;color:red">Hello</P>
<P>Hello</P> </BODY>
内嵌样式主要应用于样式仅适用于单个页面元素的情况。它将样式和要展示的
内容混在一起，自然会失去一些样式表的优点。所以建议这种方式应尽量少用。
CSS样式的优先级
CSS样式是“级联”的，即全局样式规则会一直应用于 HTML元素，直 到有局部样式将其取代为止。 局部样式的优先级高于全局样式。 另外，在局部样式应用于页面元素之后，全局样式中不与局部样式冲 突的部分继续应用于这些元素。
引入外部的样式表
这种方式是在 HTML文件的头部<style></style>标记之间，用＠import声明引入外部样式 表，格式如下： <style>
@和import之间不要有空格
@import URL("外部样式文件名"); …
</style> 例如：@import URL("style1.css"); @import URL("/css/style2.css");
步骤3：设计另一个链接了文件tyle1.css的页面 test2.html。
Test1.html
<HTML>
<HEAD> <TITLE>嵌入样式表</TITLE> <LINK rel="stylesheet" type="text/css" href="style1.css"> </HEAD> <BODY> <P><SPAN class="university_name">中山大学</SPAN>的主页地址是<A href=""></A></P> <P><SPAN class="university_name">清华大学</SPAN>的主页地址是<A href=""></A></P> </BODY> </HTML>
例如，设置表格的单元格内的文字大小为9pt，颜色为蓝色的CSS代码如下： td{ font-size: 9pt; color: blue;} CSS 可以在一条语句中定义多个选择符，例如：将段落文本和单元格内的文字设置为 蓝色的CSS代码如下： td,p{color: blue;}
选择符的分类
（2）Class选择符
CSS+DIV技术
1、CSS简介
级联样式表(Cascading Style Sheets,简称CSS)是 一种格式化网页的标准方式，用于扩展HTML的功能。 CSS定义可以应用到网页或页面元素的样式，CSS样式 定义页面元素的显示方式和位置。 CSS样式表的特点如下： （1）将显示格式和文档结构分离 （2）对HTML语言处理样式的最好补充 （3）体积更小加快网页下载速度 （4）实现动态更新、减少工作量
选择符的分类
（3）ID选择符
ID选择符其实与独立的Class选择符的功能一样，而他们的区别在于语法和 用法不同。它的语法格式如下： #IDname{property:value;…} ID选择符的用法是在HTML标记中应用ID属性引用CSS样式。例如： <style> #redone{color:red} </style> <p id="redone">红色热情</p> <p>黑色神秘</p> 由于以上代码中的“红色热情”使用ID标识引用redone样式，所以文字 “红色热情”是红色的，而文字“黑色神秘”则仍采用默认颜色。
引入外部样式表的使用方式与链接到外部样式表很相似，都是将样式定义保存为单独
文件。两者的本质区别是：引入方式在浏览器下载 HTML文件时将样式文件的全部内容 拷贝到＠import关键字位置，以替换该关键字；而链接到外部的样式表方式仅在 HTML 文件需要引用CSS样式文件中的某个样式时，浏览器才链接样式文件，读取需要的内容并 不进行替换。
链接外部样式表示例
以链接外部样式表方式实现前一例子：设计一个页面，要求页面中所有大学 名称的显示样式为“加粗、红色”，并且所有超链接没有下划线。
步骤1：创建外部样式表文件 style1.css，内容如下： style1.css
.university_name {font-weight: bold;color:red} a:link, a:acitve, a:visited { text-decoration: none } 注意:此时CSS样式定义不要放在<STYLE>标记里! 步骤2：设计一个链接了文件tyle1.css的页面 test1.html。
选择符的分类
第二种是独立Class选择符，它可以被任何HTML标记所应用。语法格式如 下： .Classname{property:value;…} 例如，可以将样式blueone定义的字体颜色应用于多种HTML标记： <html> <head> <style> .blueone{color:blue} </style> </head> <body> <h3 class=“blueone”>h3标记里应用字体颜色设置</h3> <br><font class="blueone">font标记里应用字体颜色设置</font> <p class="blueone">p标记里应用字体颜色设置</p> </body> </html>
例：使用虚类选择器除去页面中超链 接的下划线
a:link, a:acitve, a:visited none } </STYLE> </HEAD>
{ text-de;P><A href="">AAA大学 </A></P> <P><A href="/">BBB大学 /</A></P> </BODY> </HTML>
Class选择符可以分为两种，一种是相关的class selector，它只与一种 HTML标记有关系。语法格式如下： tag.Classname{property:value;….} 例如，让一部分而不是全部H3的字体颜色是红色，可以使用以下代码： <html> <head> <style> h3.redone{color:red} </style> </head> <body> <h3 class=redone> 类选择符class修饰的h1字体 </h3> <h3>普通h1字体</h3> </body> </html>
选择符的分类
（4）虚类选择符
虚类主要针对超链接A 标记符，可以为超链接 定义不同状态下的不同 样式效果。
对于<A>标记，可以使用虚类的方式设置不同类型链接的显示方式。虚类选 择器有 ： A:link 超链接没有被访问 <HTML> <HEAD> A:visited 超链接已被访问过 <TITLE>去除超链接的下划线</TITLE> A:active 超链接当前被选中 <STYLE>