本文转自Action

什么是 CSS？

CSS指层叠样式表（Cascading Style Sheets），用来定义如何显示HTML元素。比如对网页的布局、字体、颜色、背景和其他效果进行精确的控制。

CSS 的基本语法

WordPress 主题开发—CSS 基础（一）

CSS 的语法结构仅由 3 部分组成，选择器、样式属性和值，基本语法如下：

1

选择器 {样式属性：取值； 样式属性：取值； 样式属性：取值；……}

比如定义一个段落的字体颜色为红色：

1

p{color: red; }

其中，p 为选择器，color为样式属性，red为取值。

添加 CSS 的方法

添加 CSS 有 4 种方法：链接外部样式表、内部样式表、导入外部样式表和内嵌样式。

WordPress 主题开发—CSS 基础（一）

1.外部样式表

链接外部样式表就是在网页中调用已经定义好的样式表来实现样式表的应用，他是一个单独的文件。在网页<head>头部添加一个<link>标签，链接到这个这个样式表文件即可。如下所示：

1
2
3


<head>
    <link rel=stylesheet type=text/css href:style.css>
</head>

上面例子种，rel=stylesheet是指在页面中使用外部的样式表，type=text/css是指文件的类型是样式表文件，href=style.css是文件所在的位置。

2、内部样式表

内部样式表一般位于 HTML 文件的头部，即<head> 与 </head> 标签内，并且以 <style> 开始，以</style>结束，这些定义的样式就可应用到页面中。如下所示：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


<head>
    <style type="text/css">
        <--
        body{
            margin-left: 0px;
            margin-top: 0px;
            margin-right: 0px;
            margin-bottom: 0px;
        }
      -->
    </style>
</head>

3、导入外部样式表

导入外部样式表是指在内部样式表的<style>里导入一个外部样式表，导入时用@import。如下所示：

1
2
3
4
5
6
7


<head>
    <style>
        <--
        @import style.css
        -->
    </style>
</head>

上面例子@import style.css表示导入style.css样式表，注意使用时外部样式表的路径、方法和链接外部样式表的方法类似，但导入外部样式表输入方式更有优势。实质上它是相当于存在于内部样式表中。

4、内嵌样式

内嵌样式的使用是直接在 html标记里添加style参数，而style参数的内容就是 CSS 的属性和值，在style参数后面的引号里的内容相当于在样式表大括号里的内容。如下所示：

1
2
3


<table style=color:red; margin-right:220px>
    这是一个表格
</table>

这种方法使用比较简单，显示很直观，无法发挥样式表的优势，因此不推荐使用。