CSS和HTML结合（样式表）的三种方式

CSS和HTML结合的方式，其实就是问你css的代码放在哪里比较合适。CSS代码理论上的位置是任意的，但通常写在<style>标签里。只要是<style>标签里的代码，那就是css代码，浏览器就是这样来进行解析的。

CSS和HTML的结合方式有3种：

行内样式：在某个特定的标签里采用style属性。范围只针对此标签。
内嵌样式表：在页面的head里采用<style>标签。范围针对此页面。
引入外部样式表css文件的方式。这种方式又分为两种：
- 1、采用<link>标签。例如：<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
- 2、采用import，必须写在<style>标签中，并且必须是第一句。例如：@import url(a.css) ;

两种引入样式方式的区别：外部样式表中不能写标签,但是可以写import语句。

下面来详细的讲一讲这三种方式。

1、CSS和HTML结合方式一：行内样式

采用style属性。范围只针对此标签适用。

该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。

举例：

<p style="color:white;background-color:red">我不会就这样轻易的狗带</p>

2、CSS和HTML结合方式二：内嵌样式表

在head标签中加入<style>标签，对多个标签进行统一修改，范围针对此页面。

扫描二维码关注公众号，回复： 2234228 查看本文章

该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。

举例：

<head>
<style type="text/css">
   /*选择器p表示，只要带有p标签的元素，都有p的所有性质*/ p{
        font-weight: bold;
        font-style: italic;
        color: red;
    }/*定义内嵌样式表*/
</style></head>

 <body>
    <p>hello world!</p> /*使用内嵌样式表*/
    <p style="color:blue">css</p>/*使用行内样式，修改部分样式表的部分性质*/
 </body>

3、CSS和HTML结合方式三：引入外部样式表css文件

引入样式表文件的方式又分为两种：（.css文件完整名可以看成一个超链接）

（1）采用<link>标签。例如：<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
（2）采用import，必须写在<style>标签中，并且必须是第一句。例如：@import url(a.css) ;

两种引入样式方式的区别：外部样式表中不能写标签，但是可以写import语句。

具体操作如下：
我们先在html页面的同级目录下新建一个a.css文件，那说明这里面的代码全是css代码，此时就没有必要再写<style>标签这几个字了。
a.css的代码如下：

p{
    border: 1px solid red;
    font-size: 40px;
}

上方的css代码中，注意像素要带上px这个单位，不然不生效。

然后我们在html文件中通过<link>标签引入这个css文件就行了。效果如下：

<head>
    ...
    <link rel = "stylesheet" type = "text/css" href = "a.css"></link>
<title>Document</title>
</head>

这里再讲一个补充的知识：link标签的rel属性
<link>标签的rel属性：
其属性值有以下两种：

stylesheet：定义的样式表
alternate stylesheet：候选的样式表

看字面意思可能比较难理解，我们来举个例子，一下子就明白了。
举例：

现在定义我们来定义3种样式表：

a.css：定义一个实线的黑色边框

div{
    width: 200px;
    height: 200px;
    border: 3px solid black;
}

b.css：蓝色的虚线边框

div{
    width: 200px;
    height: 200px;
    border: 3px dotted blue;
}

c.css：来个背景图片

div{
    width: 200px;
    height: 200px;
    border: 3px solid red;
    background-image: url("1.jpg");
}

然后我们在html文件中引用三个样式表：

<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
  <link rel = "alternate stylesheet" type = "text/css" href = "b.css" title="第二种样式"></link>
  <link rel = "alternate stylesheet" type = "text/css" href = "c.css" title="第三种样式"></link>

上面引入的三个样式表中，后面两个样式表作为备选。注意备选的样式表中，title属性不要忘记写，不然显示不出来效果的。现在来看一下效果：（在IE中打开网页）

打开之后第一次如上图所示，即a.css的属性表现(默认样式),通过点击右上角的“页面”按钮，点击“样式”，可以选择“第二种样式”显示b.css的属性表现，依次类推...