CSS 基础语法简介

作者:课课家教育更新于： 2016-09-18 09:04:47

     css语言是一款为网页设置样式的语言。它可以根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。你想学习CSS语言吗？你了解CSS语言吗？对于初学者而言，要想写好CSS语言，首先要懂得它的基础语法，只有学好基础语法才能向高级语法进阶，成为真正的高手。下面小编将为大家介绍一下CSS语言的基础语法。

一、CSS规则的构成

　　CSS规则包括声明和选择器两部份，举例如下。

　　selector{declaration1;declaration2;...declarationN}

　　其中，selector称为选择器，{}内的部分称为声明。

　　选择器就是您想要改变样式的html元素。

　　每条声明包括一个属性和一个值。

　　属性（property）是指您心中所要设计的样式属性（styleattribute）如颜色、字号、字体等。每个属性有一个值。温馨提示：属性和值需用冒号分开，举例如下。

　　selector{property:value}

　　下面这行代码的作用是将h2元素内的文字颜色定义为绿色，同时将字体大小设置为20像素。

　　在这个例子中，h2是选择器，color和font-size是属性，green和20px是值。

　　H2{color:green;font-size:20px;}

　　下面的示意图为您展示了代码的结构：

　　注意：声明内容需要使用成对的花括号包围。

二、值的不同写法和单位

      值可以用不同的写法来表达,下面以颜色值为例,列举了3种写法:

　　写法一:使用十六进制的颜色值来表示,如绿色为#00ff00：

　　p{color:#00ff00;}

　　写法二:利用CSS的缩写形式：

　　p{color:#0f0;}

　　写法三:使用RGB值的写法：

　　p{color:rgb(0,255,0);}

　　p{color:rgb(0%,100%,0%);}

　　温馨提示：当们使用RGB百分比写法表示颜色，那么即使数字为0时，0后面也要带百分比符号。但是其他属性就不需要带单位符号。例如，当尺寸为0像素时，0之后不需要使用px单位，因为0就是0，无论单位是什么。

三、记得给多单词的值添加引号

　　提示：倘若值是由多个单词组成的，则要给值添加一对引号，代码举例如下。

　　p{font-family:"sansserif";}

四、多重声明

　　如果我们要写多个声明，每个声明之间就需要用分号分开。如下图就是一段定义一个黄色文字的居中段落的代码。其实声明末尾分号是可以省略的的，因为分号在英语中的作用只是分隔符，并非结束。然而，大多数有经验的设计师为了尽可能地减少出错的概率，会在每条声明的末尾都加上分号，就像这样：

　　p{text-align:center;color:yellow;}

　　另外，为了方便阅读，我们可以分行进行描述，每行只描述一个属性，如下面的代码写法：

　　p{

　　text-align:right;

　　color:red;

　　font-family:arial;

　　}

五、空格和大小写

　　在我们的样式设置中，大多数不止一条规则，而一条规则里面也会包含多个声明。因此，为了方便编辑，我们可以使用空格将属性和值分隔开以提高可读性。

　　body{

　　color:#000;

　　background:#fff;

　　margin:0;

　　padding:0;

　　font-family:Georgia,Palatino,serif;

　　}

　　CSS在浏览器的工作效果不受是否包含空格的影响。同样CSS不区分大小写。但要注意，涉及到与HTML文档一起工作的话，id和class名称对大小写是需要区分的。

　　万象高楼需要一个稳固的根基，我们只有牢牢掌握基础知识，才能更好地深入学习。希望通过这篇教程的介绍，能使初学者掌握CSS的基础语法，并能熟练运用，同时形成良好的代码书写习惯，为日后更高层次的学习打下坚实的基础。