JavaScript学习(8)使用样式表

1.定义和使用CSS样式

1.1定义样式

可以使用<style>标签在HTML文档中定义CSS样式表。起始<style>标签指定样式表的类型，给出文档中的样式表。</style>是结束标识，如下：

H1<color:blue;1>

</style>

因为样式表本身不会再页面上产生任何输出，因此应该把<style>标签防止在HTML文档的<head>部分。

<span style="font-size: medium;" mce_style="font-size: medium;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 样式表简单示例 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <mce:style></mce:style><style mce_bogus="1"> h1{color:red} h2{color:gray} h3{color:blue} </style> </HEAD> <BODY> <h1>巴女词</h1> <h2>李白</h2> <h3>巴水急如箭，巴船去若飞</h3> <h3>十月三千里，郎行几岁归</h3> </BODY> </HTML> </span>

1.2使用样式

使用分组的手段可以缩短样式表的规模，以减少页面的大小，这样有利于提高网页的下载速度。分组的方式有两种：一种是把属性相同的选择符放在一起，中间用逗号隔开，然后给出样式定义，这个样式就会作用在所有列出的选择符上；另一种是可以同时为一个属性指定多个值。

<span style="font-size: medium;" mce_style="font-size: medium;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 样式定义简写演示 </TITLE> <mce:style type = "text/css"></mce:style><style type = "text/css" mce_bogus="1"> h1,h2,h3{color:blue}//选择符分组 h1//属性值分组 { font-weight:bold; font-size:30; font-family:宋体; } h2 { font:bold 24 宋体; } </style> </HEAD> <BODY> <h1>塞上曲</h1> <h2>王昌龄</h2> <h3>阐明空桑林，八月萧关道</h3> <h3>出塞复入塞，处处黄芦草</h3> <h3>从来幽并客，皆向沙场老</h3> <h3>莫学游侠儿，矜夸紫骝好</h3> </BODY> </HTML> </span>

2.样式的属性

CSS支持多种属性，不同的HTML页面元素支持不同的属性，不同的属性页具有不同的取值范围。常用的有字体、颜色和背景、文本、方框以及分类属性。

2.1颜色属性

颜色值的表达方式有4种。这些表达方式又可以分为两类：一类直接使用颜色名，特点是便于记忆；另一类使用数值表示颜色值，特点是可以表达各种颜色。

<span style="font-size: medium;" mce_style="font-size: medium;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 颜色演示 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <mce:style></mce:style><style mce_bogus="1"> body{background-color:red} h1{color:#AAMMDD;} h2{color:rgb(255,255,0);} p{color:white;} </style> </HEAD> <BODY> <font size = "+1"> <h1>登幽州台歌</h1> <h2>陈子昂</h2> <p>前不见古人<br>后不见来者<br>念天地之悠悠<br>独怆然而涕下<br><p> </BODY> </HTML> </span>

2.2字体属性

在现代系统往往安装了大量的字体，但一般情况下，还是要选用大多数系统中都已经安装的字体。比如宋体。

<span style="font-size: medium;" mce_style="font-size: medium;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 字体演示 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <mce:style></mce:style><style mce_bogus="1"> body{background-color:orange;} h1{color:yellow;font-size:x-large;font-family:华文行楷,华文细黑,宋体;} h2{color:lightgreem;font-size:large;font-family:黑体;} h3{color:black;font-size:medium;font-family:隶书;} p{color:white;font-size:25;font-style:italic;font-family:新宋体;} </style> </HEAD> <BODY> <font size = "+2"> <h1>相思</h1> <h2>王维</h2> <h3>红豆生南国，春来发几枝</h3> <p>愿君多采撷，此物最相思</p> </BODY> </HTML> </span>

2.3文字属性

文字是网页中的必需元素，在书写标题时，有时需要插入一些空格来实现一些对其方式；也就是网页上的文字也需要美化以达到好的视觉效果。

<span style="font-size: medium;" mce_style="font-size: medium;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 文字属性 </TITLE> <mce:style></mce:style><style mce_bogus="1"> #title{word-spacing:10;letter-spacing:4;text-decoration:underline;text-align:center;font-size:22;font-family:arial;font-weight:bold;}} h2{color:red;font-size:large;font-family:黑体;text-align:center;} p{line-height:2;text-indent:6%;font-family:arial;font-size:18;} </style> </HEAD> <BODY bgcolor = "lightblue"> <p id = title>标题</p> <h2>作者</h2> <p>第一段</p> <p>第二段</p> </BODY> </HTML> </span>

3.4背景和图像

不同的网站具有不同的特征的背景，在网站中背景起到了渲染气氛、活脱环境的效果。在javascript中，样式表提供了几种控制背景图片的方式。

<span style="font-size: medium;" mce_style="font-size: medium;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 背景和图像 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <mce:style></mce:style><style mce_bogus="1">body{background-color:"violet";background-image:url(湖南大学.jpg);repeat-x}; h1{font-size:56;text-indent:25%;color:moccasin;margin-top:16%;font-family:隶书;}</style> <BODY> <h1>前不见古人</h1> <h1>后不见来者</h1> <h1>念天地之悠悠</h1> <h1>独怆然而涕下</h1> </BODY> </HTML> </span>

3.5空白与边框

样式表可用于控制页面的一般布局，而显示在浏览器中的文档由一组容器组成。<body>标记是一个容器，它可以包含标题、段落、表格等。也可以把每一个元素想象成一个容器，在它的四周可有一些空白，容器之间的空白称作填充，容器也可以由一个环绕它的边框。很多情况下，边框是默认不显示的。可以根据需要改变空白的大小，指定不同的边框，增加或减少区域的宽度。

<span style="font-size: medium;" mce_style="font-size: medium;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 空白与边框 </TITLE> <mce:style></mce:style><style mce_bogus="1"> body{margin-top:1.5cm;margin-left:2cm;margin-bottom:2cm;margin-right:3cm;border-width:thick;border-style:solid;border-color:violet moccasin darkviolet darkhaki;padding:15} h1{font-weight:bold;font-size:36;font-family:隶书;} h2{border-style:dashed;border-color:purple;font:bold 24 黑体} </style> </HEAD> <BODY bgcolor = lightgrey> <h1>塞上曲</h1> <h2>蝉鸣空桑林，八月萧关道。</h2> <h3>出塞复入塞，处处黄芦草。</h3> </BODY> </HTML> </span>

3.使用样式表的其他方式

在文档中可用以下三种方式来定义样式表。

嵌入方式：嵌入方式就是直接在<HTML>和<BODY>标记之间使用<style>标记定义样式表

行内方式：这种方式就是在对象的标记内使用对象的style属性定义样式规则

外部方式：样式表定义在外部的文件中

4.使用类

如果希望多个标签使用同一样式，则应使用class属性。它可以根据不同的风格需要对某一类型的标记设置几种不同的CSS属性，也可以将整个风格分成几个类而不是只针对某一特定类型的标记。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> CSS样式类 </TITLE> <mce:style></mce:style><style mce_bogus="1"> p{margin-right:10%;margin-left:10%;font-family:宋体;font-size:18;color:red;} .bigfont{font-size:x-large;color:darkblue;font-style:bold;} teenyhfont{font-size:small;font-style:italic;color:black;} </style> </HEAD> <BODY> <p>这段文字显示为红色，字体大小为18，字体家族为<em>宋体</em> <p class = "bigfont">这段文字从用大号字体显示，颜色为深蓝色。字体样式指定为名称<em>.bigfont</em>样式类。 <h1 class = "bigfont">应用样式类<em>.bigfont</em>后的h1标记显示效果</h1> <p class = "teenyfont">这段文字显示的字体小一些 <p>现在开始一个新段落。它采用样式表中定义的p规则：字体为宋体，字体大小为18，颜色为红色 </BODY> </HTML>

5.使用id属性

id选择符是创建独立于特定HTML标记的另一条途径。通过id选择符，可以HTML元素指定该选择符定义的规则。其定义规则为：

#idselector{declaration;}

其中，idselector是id选择符，由任何合适的标识符组成。在定义id选择符规则时，选择符前面要叫一个磅符号(#)，大括号中是定义的规则，它由属性和属性值对组成，如：

#note{font-size:14;width:120;color:blue}

Yalishizhude 博客专家

发布了41 篇原创文章 · 获赞 16 · 访问量 6万+

私信关注

JavaScript学习(8)使用样式表

Linux Fedora13，Windows 7 and Windows XP的多系統安裝

HTML學習(5)集成多媒體

JavaScript學習(7)利用表單獲取數據

HTML學習(4)圖像

JavaScript學習(5)DOM對象

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結