CSS引用初学css

最新推荐文章于 2025-08-22 15:07:29 发布

DNN-2017

最新推荐文章于 2025-08-22 15:07:29 发布

阅读量821

点赞数

分类专栏： CSS 文章标签： css class html stylesheet import javascript

CSS 专栏收录该内容

5 篇文章

订阅专栏

CSS有多种引用方式，在模仿别人代码是时候是要学它们的用法的。

（1）使用Embed（嵌入样式单）排版样式：

     即将CSS代码直接插入每个页面的HTML的<head>区，就象前几节看到的。使用<style>...</style>标签。例如：

<style type="text/css">

</style>

（2）使用“link（外部样式单）排版样式”

     即你可以将多个页面的排版风格都用一个样式单文件控制。这个外部的样式单文件（一个扩展名是css的文本文件）将设定你所有网页的规则。如果你改变样式单文件中的某行，所有页面风格用这个css文件定义的页面都会随之改变。如果你的站点文件非常多，则这项功能就非常方便了。

在<HEAD>区内使用<LINK>标签（注意：不再是<style>标签了）：

<HTML>
<HEAD>
<LINK REL=stylesheet HREF=" http://yoursite.com/your.css" TYPE="text/css">
</HEAD>
<body>
<h2>你好！朋友，欢迎光临。</h2>
</body>
</html>

说明：css文件的路径用绝对路径( http://...)表示或者用相对路径(例如：../your.css)表示都可以。

然后再单独生成一个css文件，叫做your.css (随便起名)。文件内容如下：

h2 { font-family: "宋体"; font-size: 12pt; font-style: italic; color: #FF0033; background-color: #FFCCCC}
h1 { font-family: "Arial"; font-size: 12pt; color: #66FF66}

（3）使用"inline（行内样式单）排版样式"

     inline样式单采用HTML标签的“style”属性，它的特点是“定义某一个标签的式样单风格”，只对所定义的标签起作用，并非对整个页面起作用。例如：

<p style="font-size: 14pt ; color:#ffffff ; font-family: 宋体">层叠式样单</p>

（4）使用“import(输入的外部式样单)”--适用于IE浏览器

<html>
<head>
<style type="text/css">

</style>
</head>
<body>
<h3>输入的外部式样单</h3>
</body>
</html>

其中my.css样式单文件的内容如下：

h3 { font-family: "宋体"; font-size: 12pt color: green }

（5）使用“Class”以及“Id”引用

<html>
<head>
<style type="text/css">

</style>
</head>
<body>
<p class=s1>Class样式</p>
<p id=s2>Id样式</p>
</body>
</html>

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

关于class与ID

在CSS里，使用点号（.）创建class选择器，使用hash符号（#）创建ID选择器。

　例子:
#top {
     background-color: #ccc;
     padding: 1em
}

.intro {
     color: red;
     font-weight: bold;
}

　　html页面通过id和class属性调用CSS，像下面这样：

　例子:
<div id="top">
<h1>Chocolate curry</h1>
<p class="intro">This is my recipe for making curry purely with chocolate</p>
<p class="intro">Mmm mm mmmmm</p>
</div>

　　id和class的不同指出在于一个页面同一个ID只能只有一次，而class可以无限制使用。

     ID是一个标签，用于区分不同的结构和内容，就象名字，如果一个屋子有2个人同名，就会出现混淆；CLASS是一个样式，可以套在任何结构和内容上，就象一件衣服。
     从概念上说就是不一样的：id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。

目前的浏览器还都允许用多个相同ID，一般情况下也能正常显示，不过当你需要用JavaScript通过id来控制div时就会出现错误。

CSS引用 初学css

CSS引用初学css