专栏首页云端架构【云端架构】前端必备常用CSS语法

【云端架构】前端必备常用CSS语法

CSS 语法

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

选择器通常是你需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性(property)是你希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

selector {property: value}

下面这行代码的作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素。

在这个例子中,h1 是选择器,color 和 font-size 是属性,red 和 14px 是值。

h1 {color:red; font-size:14px;}

下面的示意图为你展示了上面这段代码的结构:

提示:请使用花括号来包围声明。

值的不同写法和单位

除了英文单词 red,我们还可以使用十六进制的颜色值 #ff0000:

p { color: #ff0000; }

为了节约字节,我们可以使用 CSS 的缩写形式:

p { color: #f00; }

我们还可以通过两种方法使用 RGB 值:

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

请注意,当使用 RGB 百分比时,即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说,当尺寸为 0 像素时,0 之后不需要使用 px 单位,因为 0 就是 0,无论单位是什么。

记得写引号

提示:如果值为若干单词,则要给值加引号:

p {font-family: "sans serif";}

多重声明:

提示:如果要定义不止一个声明,则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的,因为分号在英语中是一个分隔符号,不是结束符号。然而,大多数有经验的设计师会在每条声明的末尾都加上分号,这么做的好处是,当你从现有的规则中增减声明时,会尽可能地减少出错的可能性。就像这样:

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

你应该在每行只描述一个属性,这样可以增强样式定义的可读性,就像这样:

p {
  text-align: center;
  color: black;
  font-family: arial;
}

空格和大小写

大多数样式表包含不止一条规则,而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑:

body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
  }

是否包含空格不会影响 CSS 在浏览器的工作效果,同样,与 XHTML 不同,CSS 对大小写不敏感。不过存在一个例外:如果涉及到与 HTML 文档一起工作的话,class 和 id 名称对大小写是敏感的。

原文链接:http://www.qybolg.cc/?post=28

原文作者:蝶慕博客

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【云端架构】前端jQuery鼠标事件精选

    鼠标事件是指用户在移动鼠标光标或者点击任意鼠标键时触发的事件,jQuery中封装了基本上所有的鼠标事件包括点击,双击,移动等鼠标事件,下面我们就来看下这些事件的...

    墨色明月
  • 【云端架构】前端必备“层叠样式表”精选

    大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD

    墨色明月
  • 【云端架构】前端CSS实现单行、多行文本溢出显示省略号

    如何实现单行文本的溢出显示省略号,同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。

    墨色明月
  • CSS基础语法

    属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

    十月梦想
  • 快速入门系列--MVC--02路由

        现在补上URL路由的学习,至于蒋老师自建的MVC小引擎和相关案例就放在论文提交后再实践咯。通过ASP.NET的路由系统,可以完成请求URL与物理文件的分...

    用户1216676
  • 深入理解JavaScript系列(43):设计模式之状态模式

    状态模式(State)允许一个对象在其内部状态改变的时候改变它的行为,对象看起来似乎修改了它的类。

    用户4962466
  • 回调函数的后面加个bind(this)的作用是什么回调函数的后面加个bind(this)的作用是什么

    一个会写诗的程序员
  • 数据版春节攻略,帮你成为过年回家最靓的仔

    每个从12月底就开始掰指头为假期倒计时的年轻人,迄今为止大致经历了从短暂的期盼、兴奋到长期的焦虑、急躁和疲惫的心理过程。

    CDA数据分析师
  • qq平台登录

    在APP开发过程中,时常会用到第三方账号登录体系。 下面,简要说明QQ的第三方登录体系在Android平台上的运用。 申请APPID 进入QQ互联的官网...

    xiangzhihong
  • 深入理解JavaScript系列(40):设计模式之组合模式

    组合模式(Composite)将对象组合成树形结构以表示“部分-整体”的层次结构,组合模式使得用户对单个对象和组合对象的使用具有一致性。

    用户4962466

扫码关注云+社区

领取腾讯云代金券