CSS基础入门:什么是CSS

CSS即Cascading Style Sheet(级联样式单)的缩写，我们又常称这为风格样式单Style Sheet，顾名思义，是用来进行网页风格设计的。比如，我想让我的链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，我们可以统一地控制HMTL中各标志的显示属性。

在谈样式表前，我想先谈一下HTML标志与标志属性。

如果你学了网络学堂的HMTL教程，对HTML标志应该有一个大体的了解，它是网页的信息表示标示符号，也是构成网页的基本元素，或说是基本成员吧。每个标志表示了某种信息的表示，如<P>标志表示一个段落，<h1>表示一个大标题，<table>表示一个表格....，标志只是表明要表示的信息是什么，而同样的信息可能要求显现给人的样子不一样，如同是标题，一个是<h2>你好</h2>,一个是<h2>HaoTian 的个人图书馆欢迎你</h2>，我想使前一个呈现出蓝色，另一个是红色，效果如下:


这就要用到标志的属性，标志属性其实也就是标志的特性，由于HTML中的绝大部分标志是用来显示相关信息的，所以标志属性也多集中于标志的字体、颜色、位置、大小及排版格式等外观特性上。如果你对Windows平台下编程熟悉的话，那么对“对象”这个概念一定不陌生，在HTML中，HTML对象也就是这些代表某种信息类型的标志，而对象的属性也就是标志属性。有人称HTML为语言，我想除了它是网上信息表示的特殊语言符号外，还因为有了标志对象及标志属性，可以通过脚本语言进行程序控制，所以又有程序语言的一面。当然，你不一定要对Window下编程很熟悉，只是你想深入脚本语言进行编程的话，那么就必须熟悉这些属性。

为什么称样式单为层叠的呢？在你还没有对它有一个较全面的了解前，可打一个不很准确的比喻：如我们评价一个人，需要听取大家的意见再汇总，有人说，这个人诚实，有的说干事踏实，有的说很有责任心.....，这样通过这些意见的“层叠”，就可大体地知道这个人的品质；即使是同样的标志，也可以通过层叠使它们显示出不同的特性来，随着学习的深入，你会发现层叠的具体含义及一些妙用的。

在建立样式表之前，我们必须要具体一些 HTML 的基础知识。我们知道， HTML 语言由标志和属性构成， CSS 也是如此。

样式表基本语法：

HTML 标志 { 标志属性：属性值；标志属性：属性值；标志属性：属性值；…… }

放置样式表有内联和外联等三种不同的方法。现在首先讨论在 HTML 页面内直接引用样式表的方法。

这个方法必须把样式表信息包括在 < style> 和 < /style> 标记中，为了使样式表在整个页面中产生作用，应把该组标记及其内容放到 < HEAD> 和 < /HEAD> 中去。

例如我们要设置一 HTML 页面中所有 H1 标题字显示为蓝色，其代码如下：

< HTML>

< HEAD>

< TITLE>This is a CSS samples< /TITLE>

< STYLE TYPE="text/css">

< !--

H1 { color: blue }

-->

< /STYLE>

< /HEAD>

< BODY>

... 页面内容…

< /BODY>

< /HTML>

注意， < STYLE> 标记中包括了 TYPE ＝ "text/css" ，这是让浏览器知道你是使用 CSS1 样式规则。加入 < !-- 和 --> 这一对注释标记是防止有些老式的浏览器不认识样式表规则，可以把该段代码忽略不计。

在使用样式表过程中，经常会有几个标志用到同一个属性，比如我们规定 HTML 页面中凡是粗体字、斜体字、1 号标题字显示为红色，按照上面介绍的方法应书写为：

B { color: red}

I { color: red}

H1 { color: red}

显然这样书写十分麻烦，引进分组的概念会使其变得简洁明了，我们可以写成：

B,I,H1 {color: red}

用逗号分隔各个 HTML 标志，把三行代码合并成一行。

此外，同一个 HTML 标志，可能定义到多种属性，例如，我们规定把从 H1 到 H6 各级标题定义为红色黑体字，带下划线，则应写为：

H1,H2,H3,H4,H5,H6 {

color: red;

text-decoration: underline;

font-family: " 黑体 "

}

注意各个标志属性之间用分号隔开。

如何建立样式表

样式表的建立要符合CSS规则，它们一般被定义成以下形式的句法：

HTML标志{标志属性:属性值；标志属性:属性值；标志属性:属性值；标志属性:属性值；...}

下面我们分别讲述：

．HTML标志：在上一节我们已简要地介绍了一下， 有点需要注意的是，这些标志不带尖括号，如P,Div、Table等而不是<P>、<Div>以及<Table>。

.标志属性：属性值，这是一一对应的，每个属性与属性值对之间用分号隔开。有一点要说明的是，在CSS的属性设置与脚本语言中对属性设置有一点不同，即属性名称的写法，在CSS中，凡属性名为两个或两个以上的单词构成时，单词之间以"-"隔开，比如，背景颜色属性background-color, 而在脚本中，对象属性则连写成backgroundColor，第二个单词首字母大写，如有三个单词则第三个单词首字母也要大写，注意，在Javascript中，是严格区分大小写的。

下面看一个具体的例子，比如我们对一个段落建立一个样式表：

P{background-color:#0000ff;font-size:12pt;color:#ffff00}，效果如下

HaoTian 的个人图书欢迎你；HaoTian 的个人图书欢迎你；HaoTian 的个人图书欢迎你；HaoTian 的个人图书欢迎你；

上面我们分别设置了背景色，字体大小，以及字体颜色等。

为了看起来直观一些，上边的例子还可以写成:

P{background-color:#0000ff；

font-size:12pt；

color:#ffff00}

有一点值得注意的是，有些属性可以表示多个属性的值，如字体设置，有字体字样：font-family、字体大小：font-size、字体风格:font-style，这些可用一个font属性来表示,

如:H2{font-size:15pt；

font-family:"宋体"；

font-style:italic }

可直接用 H2{font:15pt 宋体 italic}来表示，类似的情况还有关于背景方面的设置，在以后的章节中我们会一一详细讲解的。

文章来源：微点阅读  https://www.weidianyuedu.com