网页css样式-XHTML网页中加入CSS的五种方式

发布时间：2017-11-30 所属栏目：手机网页常用css样式

一 : XHTML网页中加入CSS的五种方式

在XHTML网页中如何加入CSS呢？这篇教程告诉大家引入CSS的几种方式。

　XHTML文件是通过CSS样式进行显示的控制的，也就是结合XHTML与CSS来表现页面内容。那么到底有哪些方式在XHTML文件中引入CSS样式呢？

　一、使用STYLE属性

　将STYLE属性直接加在个别的元件标签里，<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}

　例如：

<td style="color:#c00; font-size:15px; line-height:18px;>
　　中国站长站 - www.61k.com
</td>

　这种方法优点：可灵巧应用样式於各标签中。方便于编写代码时的使用。

　这种方法缺点：没有整篇文件的“统一性”，在需要修改某样式的时候也变的比较困难。

　二、使用STYLE标签

将样式规则写在<STYLE>...</STYLE>标签之中。

<STYLE TYPE="text/CSS">

</STYLE>

　　例如：

通常是将整个的 <STYLE>...</STYLE>结构写在网页的<HEAD> </HEAD>部份之中。

这种方法的优点：整篇文章有了统一性，只要是有声明的的元件即会套用该样式规则。

这种方法的缺点：个别元件的灵活度不足，整站的功能性较弱。

　三、使用 LINK标签

　将样式规则写在.css的样式文件中，再以<link>标签引入。

假设我们把样式规则存成一个example.css的档案，我们只要在网页中加入：

这样引入该css样式表文件以后，就可以直接套用该样式档案中所制定的样式了。通常是将link标签写在网页的<head></head>部份之中。

　这种方法的优点：可以把要套用相同样式规则的数篇文件都指定到同一个样式文件中，可以进行统一的修改，也便于整站的设置有统一的风格。一般css网页布局都使用此种方法。

这种方法的缺点：在个别文件或元素的灵活度不足。

四、使用@import引入

跟link方法很像，但必须放在<STYLE>...</STYLE> 中：

例如：

要注意的是，行末的分号是必须的！千万不能漏写！

这种方法的优点：可以灵活的引入css文件对xhtml元素进行控制。有时候也用来编写某些css hack。

这种方法的缺点：在个别文件或元素的灵活度不足。

五、使用<span></span>标记引入样式

例如：

<span style="font:12px/20px #000000;">中国站长站 - www.61k.com</span>

这种方法优点：可灵巧应用样式於各标签中。方便于编写代码时的使用。

这种方法缺点：没有整篇文件的“统一性”，在需要修改某样式的时候也变的比较困难。

本文收集整理自互联网,若您是原文作者,请来信更改作者及出处 Zujizhe@61k.com

二 : 如何下载网页中的CSS样式？

如何下载网页中的CSS样式？

进入一个网页，点击查看源代码，在里面有一句<link href="../css/***.css" type="text/css" rel="stylesheet">的代码，你把/css/***.css复制到所在网页的地址栏里原有地址的后面,就可以了，但是有些网页的外部样式表是进不去的，估计和路径有关。 <link href="别人网页的CSS文件" rel="stylesheet" type="text/css" />就可以调用了；前提你的网页中的ID和Class名称都得改。或者你把别人的css文件里的Class和Id给改了。麻烦啊……还不如自己学习自己写呢

三 : 网页滚动条CSS样式

滚动条样式主要涉及到如下CSS属性:

overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容

overflow: auto; 在需要时内容会自动添加滚动条
overflow: scroll; 总是显示滚动条
overflow-x: hidden; 禁止横向的滚动条
overflow-y: scroll; 总是显示纵向滚动条

width: 568px; width: 98%; 设置区域的宽度[像素/百分比等等]

height: 120px; 设置区域的高度[像素/百分比等等]

<STYLE>
BODY {
SCROLLBAR-FACE-COLOR: #f892cc;
SCROLLBAR-HIGHLIGHT-COLOR: #f256c6;
SCROLLBAR-SHADOW-COLOR: #fd76c2;
SCROLLBAR-3DLIGHT-COLOR: #fd76c2;
SCROLLBAR-ARROW-COLOR: #fd76c2;
SCROLLBAR-TRACK-COLOR: #fd76c2;
SCROLLBAR-DARKSHADOW-COLOR: #f629b9;
SCROLLBAR-BASE-COLOR: #e9cfe0
}
</STYLE>

SCROLLBAR-FACE-COLOR: 滚动条凸出部分的颜色
SCROLLBAR-HIGHLIGHT-COLOR: 滚动条空白部分的颜色
SCROLLBAR-SHADOW-COLOR: 立体滚动条阴影的颜色
SCROLLBAR-3DLIGHT-COLOR: 滚动条亮边的颜色
SCROLLBAR-ARROW-COLOR: 上下按钮上三角箭头的颜色
SCROLLBAR-TRACK-COLOR: 滚动条的背景颜色
SCROLLBAR-DARKSHADOW-COLOR: 滚动条强阴影的颜色
SCROLLBAR-BASE-COLOR: 滚动条的基本颜色

自己定义滚动条的颜色

我们一般默认的滚动条样式如下左图,右图是放大了1600倍的样

子,我们可以看到滚动条有几种言责组合的,我给他们标了7个号,

分别注释在下面的css代码的后面了,注意css的注释代码是放在

两个斜杠内的两个星号之间,如:/*这里放注释的代码*/

Body {
scrollbar-arrow-color: #f4ae21; /*三角箭头的颜色*/
scrollbar-face-color: #333; /*立体滚动条的颜色*/
scrollbar-3dlight-color: #666; /*立体滚动条亮边的颜

色*/
scrollbar-highlight-color: #666; /*滚动条空白部分的

颜色*/
scrollbar-shadow-color: #999; /*立体滚动条阴影的颜

色*/
scrollbar-darkshadow-color: #666; /*立体滚动条强阴

影的颜色*/
scrollbar-track-color: #666; /*立体滚动条背景颜色*/

scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/
Cursor:url(mouse.cur); /*自定义个性鼠标*/
}

以上2项适用与<body>、<div>、<textarea>、<iframe>

四 : Google蜘蛛爬虫可以运行网页中的JS脚本和CSS样式

旧观念

在我的既有观念中，搜索引擎的网页爬虫/蜘蛛/机器人（Crawler/Spider/Robot）只抓取页面的 HTML 代码，对于内部或外部的 JS 与 CSS 代码是一律无视的。所以我们也经常会说，Ajax 不利于搜索引擎的抓取，不利于 SEO。

因为在我们看来，搜索引擎爬虫毕竟不是功能强大的浏览器，它无法运行 JS，也无法渲染 CSS。那些五彩缤纷的页面，在爬虫眼中不过是纯粹的文本流（或包含了结构标记的文本信息流）而已。

然而，近期看到的两则关于 Google 的新闻，彻底颠覆了我对搜索引擎爬虫的认知。

新闻一

一段来自 Google 资深工程师 Matt Cutts 的视频震惊了我。Matt 告诫我们，不仅文本与背景同色、字体大小设置为 0、用 CSS 隐藏文字等等这些伎俩已经是小儿科了，而且 Google 现在还可以识别通过 JS 来隐藏文字的作弊方法。

在视频中，一段隐晦的 JS 代码将某元素的 .style.display 属性设置为 'none'，试图隐藏那些只打算提供给搜索引擎、而不展示给用户的文字。Matt 表示，这种作弊方式现在已经瞒不了 Google 了。

新闻二

新闻二更加恐怖，据说 Google 可以抓取 Ajax 内容！该文表示，给 URL 的 hash 部分加上特定的标识符（即 domain.com/#abc 改为 domain.com/#!abc），会让 Googlebot 领悟到该 URL 是一个 Ajax 页面（而非页面中的锚点），并进行抓取。

你可能对 Google 的这一技术改进没多少兴趣，但你肯定注意到了问题的本质：Googlebot 可以抓取 Ajax 内容，也就是说，Googlebot 完全有能力运行页面中的 JS，而且功能完善！

爬虫与浏览器

如果这两则新闻都是真的，那么，从某种意义上说，爬虫的行为和能力已经与浏览器越来越接近了。这也意味着，搜索引擎爬虫将抓取更多的内容（包括 JS 和 CSS 文件），网站的流量负载将会加大。

另一方面，爬虫在抓取页面的过程中也将产生更多的资源消耗——毕意仅仅处理文本信息的资源开销要远远小于完整地渲染页面和运行客户端程序。

因此，我目前仍然对这两则新闻半信半疑。难道这是 Google 放出的烟幕弹？或者是好事者炮制的假新闻？如果 Googlebot 真的已经具备了运行 JS 或渲染 CSS 的能力，那么为了将资源开销控制在合理的范围内，或许 Google 会在内部启用黑/白名单机制？

站长们

如果担心爬虫对主机流量的侵蚀，或许可以考虑在 robots.txt 文件中禁止爬虫对 *.js 和 *.css 文件的抓取。不过暂不确定这样做是否存在不良的副作用。

或许也有人会担心，正常的页面布局有时候也需要使用一些隐藏文字的手段，比如【CSS 图代文】、【隐藏模块的 hx 标识信息】等等。这样会不会被 Google 判定为作弊呢？

我相信对于像 Google 这样“聪明”的搜索引擎来说，它即然有能力让爬虫运行 JS 和 CSS，它也必然有能力来判断什么是作弊、什么是正常的布局需要。所以我觉得站长们大可不必惊慌，平常该怎样就怎样，身正不怕影斜，规则总是用来约束那些“不法之徒”的。

所以，对于某些 SEOer 来说，这似乎是个坏消息。如果他们还在考虑是否还有新的作弊方案，那么我觉得意义不大。很显然，SEO 作弊手段的生存空间将越来越小，与此同时，网站自身内容的价值才是 SEO 的真实基础。

五 : CSS写的网页进度条

CSS写的网页进度条

<html>

<head>

<style>

body {

margin:0;

padding:40px;

background:#fff;

font:70% Arial, Helvetica, sans-serif;

color:#555;

line-height:180%;

}

h1{

font-size:180%;

font-weight:normal;

color:#555;

}

dl, dt, dd{margin:0;padding:0;}

dd{

width:216px;

height:41px;

background:url(http://www.1daima.com/9/2014-03-03/bg_bar.gif) no-repeat 0 0; position:relative;

}

dd span{

position:absolute;

display:block;

width:200px;

height:25px;

background:url(http://www.1daima.com/9/2014-03-03/bar.gif) no-repeat 0 0; top:8px;

left:8px;

overflow:hidden;

text-indent:-8000px;

}

dd em{

position:absolute;

display:block;

进度条gif CSS写的网页进度条

width:200px;

height:25px;

background:url(http://www.1daima.com/9/2014-03-03/bg_cover.gif) repeat-x; top:0;

}

.progressBar{

width:216px;

height:41px;

background:url(http://www.1daima.com/9/2014-03-03/bg_bar.gif) no-repeat 0 0; position:relative;

}

.progressBar span{

position:absolute;

display:block;

width:200px;

height:25px;

background:url(http://www.1daima.com/9/2014-03-03/bar.gif) no-repeat 0 0; top:8px;

left:8px;

overflow:hidden;

text-indent:-8000px;

}

.progressBar em{

position:absolute;

display:block;

width:200px;

height:25px;

background:url(http://www.1daima.com/9/2014-03-03/bg_cover.gif) repeat-x 0 0; top:0;

}

</style>

</head>

<body>

<h1>Pure CSS progress bar</h1>

<h2>Facts</h2>

<p><em>Using definition list</em></p>

<dl>

<dt>Ability to Annoy People</dt>

<dd>

</dd>

进度条gif CSS写的网页进度条

<dt>Food Shortage Tolerance</dt>

<dd>

</dd>

<dt>Karaoke Singing Skills</dt>

<dd>

</dd>

</dl>

<p>Instead of list you can use any block level element.</p>

</html>

扩展：css进度条怎么写 / css3圆形百分比进度条 / css 进度条

本文标题：网页css样式-XHTML网页中加入CSS的五种方式
本文地址： http://www.61k.com/1102437.html

61阅读

网页css样式-XHTML网页中加入CSS的五种方式

旧观念

新闻一

新闻二

爬虫与浏览器

站长们

计算机软件及应用

网站运营

网站优化