CSS@1介绍和准备

作者 Jackie Anxis 日期 2016-08-18
CSS@1介绍和准备

推荐

CSS3参考手册,啥都有的参考网站

引入CSS

三种方法用于在HTML文档中引入CSS:

  1. 外部样式表

    <head>
    <link rel="stylesheet" href="base.css">
    </head>
  2. 内部样式表

    <head>
    <style type="text/css">
    body{background-color:read;}
    p{margin-left:20px;}
    </style>
    </head>
  3. 内嵌样式表
    不利于后期的维护,静态页面不建议

    <p style="color:read;margin-left:20px;">
    this is a paragragh.
    </p>

CSS语法

基本语法

selector{
property: value;
}

selector:选择器,也就是指明样式应用的对象。因为你写CSS样式时,必须要指名道姓的说,我这些样式是写给谁谁谁的,所以必须要用选择器把样式应用的对象挑选出来。
property:性质或者称为属性。
value:属性的值。

可以这么认为,如果CSS是一套房子的装修方案,那么selector就可以认为是物品的名字,property就是物品的属性,value则是这个属性的值。比如你想要把东墙,西墙的背景颜色刷成蓝色,墙上写的字体都要是微软雅黑,你可以这么写:

east_wall, west_wall{ //东墙和西墙
background-color: blue; //背景颜色为蓝色
font-family: Microsoft yahei; //字体为微软雅黑
}


浏览器私有属性

有时候,有些属性只有某些浏览器实现了,或者说在不同的浏览器中,不同属性的名称叫法不一样,这时,就需要在属性前加上必要的前缀,常见浏览器和它们的私有属性的对应关系如下:

browser prefix
chrome, safari -webkit-
firefox -moz-
IE -ms-
opera -o-

举个例子,以前圆角属性border-radius还未在所有浏览器普及的时候,需要这么写CSS:

-webkit-border-radius: 50%;
-o-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;


属性值语法

因为我们后面会介绍不同的属性,属性的值必须要符合一定语法,其实这和正则表达式比较像的,比如,background-color是颜色,它的值可能就是一个关键词(如blue, red)或者16进制RGB值(#ffffff或#fff表示白色),而border-width是边框宽度,那可能就是一个数字。我们这里要讲的,就是说明如何表示属性值的规则。OK,来举个栗子:
margin: [<length>|<percentage>|auto]{1,4}

这句话的意思就是,margin这个属性的值,可以是length(长度),或者percentage(百分数),或者关键词auto,而这个值可以写1-4个。因为一个元素的外边距(margin)有上下左右四个,所以可以写1-4个值,而值的类型当然可以是绝对长度,或者相对长度或者自动设置(auto)。
OK,那么我们来学一下这句话是怎么写的,也就是规则是什么。

margin: [<length>|<percentage>|auto]{1,4}

  1. 红色部分:基本元素
    基本元素有三种:
    • 关键词:auto, solid, bold
    • 类型
      • 基本类型(<length>, <percentage>, <color>…)
      • 特殊类型(<padding-width>, <background-color>…)
    • 其他:inherit(继承),initial(默认)
  2. 绿色部分:组合符号
    组合符号就是用来表示这些基本元素之间的关系是怎么样的:

    • |:分隔两个基本元素,表示两者只能出现一个,比如后面我们会讲到:
      display:block|inline|inline-block|none

    这一句表示,display这个属性的值只能是block, inline, inline-block, none中的其中一个。

    • (空格):表示这两个基本类型必须出现,而且必须以相同的排列顺序出现,随便举个例子,比如:
      font:<font-family> <font-size>

    表示:font这个属性的值,一定要由一个类型为font-family的值和一个类型为font-size的值如上的排列顺序构成。

    • ||:表示前后两个元素至少出现一个,对顺序不作要求。

    • &&:表示前后两个元素必须出现,对顺序不做要求。

    • []:表示一个优先级,也就是方括号中的整个看做一个整体,随便举个例子:

      font-weight:[bold|thin] [<percentage>|<lenth>]

    表示font-weight这个属性一定要有两个值组成,一个是bold或thin,一个是一个百分比值或长度值,且前后顺序要保证。

  3. 蓝色部分:数量符号

    • {}:花括号中间写两个值,中间用逗号隔开。表示最少出现次数最多出现次数。当然,两个值当中其中一个不设置,就表示不作要求。举个例子:
      margin: [<length>|<percentage>]{1,4}
      其中的{1,4}就表示,中括号中的值要出现最少一次,最多四次。
    • ?:表示出现0次或1次。相当于{0, 1}
    • *:表示出现0次或多次。相当于{0, }
    • +:表示出现1次或多次。相当于{1, }
    • #:表示出现1次或多次。注意:#+很像,但是唯一不同的是,当用#表示时,这个元素多次出现需要用逗号隔开。
      对比一下,符合bold smaller#这一条规则的取值有:
      • bold smaller
      • bold smaller, smaller
      • bold smaller, smaller, smaller
        而符合bold smaller+这一条规则的取值有:
      • bold smaller
      • bold smaller smaller
      • bold smaller smaller smaller
    • 无:说明该元素只出现一次

OK,在学习之后做个简单的练习,有个属性叫text-shadow。它可以写none,也可以写一个或多个用逗号隔开的,由2个或3个长度类型的值以及0或1个颜色类型的值构成的组合。答案在下方,我写成白色了,当然不是唯一的答案:
答案:text-shadow:none|[<length>{2,3}&&<color>?]#


@规则语法

我在这儿不再赘述,这些内容在后面会再出现。
@media:用来做响应式的布局,只有设备符合@media媒体查询条件样式才能生效
@keyframes:描述css动画的中间步骤
@font-face:引入外部字体