下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

CSS 基础语法简介

作者:课课家教育     来源: http://www.kokojia.com点击数:638发布时间: 2016-09-18 09:39:22

标签: CSS教程语法基础

Web开发

     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;}

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

CSS 基础语法简介_CSS教程_语法_基础_课课家

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

二、值的不同写法和单位

      值可以用不同的写法来表达,下面以颜色值为例,列举了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的基础语法,并能熟练运用,同时形成良好的代码书写习惯,为日后更高层次的学习打下坚实的基础。

赞(0)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程