CSS语法

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

selector {declaration1; declaration2; ... declarationN }
# 选择器通常是您需要改变样式的 HTML 元素。
# 每条声明由一个属性和一个值组成。

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

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

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

• 选择器
  • 元素选择器
    指html的某个元素,比如p、h1、div、a甚至html本身

    html,h1,p { color:black; }
    #这里有将html,h1.p进行分组,即这三个元素的color属性都是black的
    

  • 类选择器
    html中的元素是有class属性,可以指定该属性为选择器

    #.html
    <h1 class="aClass bClass">
      h1 test.
    </h1>
    
    <p class="aClass">
      p test.
    </p>
    
    #.css
    .aClass { color:red;}
    #这里的.就是类选择器,即上面的h1,p都被选中,如果只想要p,可以这样:
    p.aClass { color:red;}
    #如果只想要h1可以
    .aClass.bClass { color:red;}
    #然后在前在后没区别
    .bClass.aClass { color:red;}
    

  • id选择器
    html中的元素是有id属性,可以指定该属性为选择器

    #.html
    <h1 id="aId">
      h1 test.
    </h1>
    
    <p class="bId">
      p test.
    </p>
    #.css
    #aId { color:red;}
    #这里的#就是id选择器,即上面的h1被选中,这里特别注意和类选择器的差别
    #1.id在一个文档里面只会存在一个,所以 起作用的元素只会有一个
    #2.id属性的值不能包含空格,即不存在<h1 id="aId bId">这种情况也就不存在#aId#bId { color:red;}
    

  • 属性选择器
    html中的元素有很多属性,可以指定该任意属性为选择器

    #.html
    <h2 title="Hello world">Hello world</h2>
    <a title="world" href="http://w3school.com.cn">W3School</a>
    
    #.css
    [title] { color:red; }
    #这里的[]就是属性选择器,可以看到h2、a都被选中了,当然可以只选a像下面这样
    a[title] { color:red; }
    [title][href] { color:red; }
    a[title][href] { color:red; }
    #也可以根据属性的具体值来选定无素
    [title="Hello world"] { color:red; }
    #当然也可以指定值是部分的,下面这样的话h2和a都会被选中
    [title~="world"] { color:red; }
    #这里有还有匹配局部属性值的
    [abc^="def"]    选择 abc 属性值以 "def" 开头的所有元素
    [abc$="def"]    选择 abc 属性值以 "def" 结尾的所有元素
    [abc*="def"]    选择 abc 属性值中包含子串 "def" 的所有元素
    [lang|="en"]  选择 lang 属性等于 en 或以 en- 开头的所有元素
    

  • 后代选择器
    html元素是可以嵌套的

    #.html
    <h1>This is <p> a <em>important</em> </p>heading</h1>
    <p>This is a <em>important</em> paragraph.</p>
    #.css
    h1 em { color:red; }
    # 空格就是后代选择器 这时候em会被选中,这里你可能注意到他们的层级是这样的h1-p-em,也就是说h1跟em中间不管隔了多少个其它元素都是会被选中的,然后这里选中的是em,不是h1切记。
    

  • 子元素选择器
    跟上面的后代选择器很像,但你如果只想指定子元素,中间不允许跨多个其它子元素可以用这个

    #.html
    <h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
    <h1>This is <em>really <strong>very</strong></em> important.</h1>
    #这可看到 h1-strong strong
    #h1-em-strong
    #.css
    h1 > strong { color:red; }
    # >就是子元素选择器,只有第一行被作用到了,第二行因为中间有em所以无匹配到.第一行的两个strong都会命中
    

  • 相邻兄弟选择器
    选择紧接在另一个元素后的元素，而且二者有相同的父元素

    #.html
    <h1>This is a heading.</h1>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    #.css
    h1+p { color:red; }
    # + 就是相邻兄弟选择器,第一个p被作用到了
    

  • 兄弟选择器
    查找某一个指定元素的后面的所有兄弟结点

    #.html
    <h1>This is a heading.</h1>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    #.css
    h1~p { color:red; }
    #~就是兄弟选择器,上面的所有p都会作用到
    

  • 伪类、伪元素
    用于向某些选择器添加特殊的效果。

    #.html
    <p>some <i>text</i>. some <i>text</i>.</p>
    <p>some <i>text</i>. some <i>text</i>.</p>
    #.css
    p:first-child i { color:blue; }
    #:指伪类伪元素，第一个p元素内部所有i元素被匹配
    #:focus拥有键盘输入焦点的元素
    #:link 未访问的链接
    #:visited 已访问的链接
    #:hover 鼠标移动到链接上(hover必须被置于link和visited之后，才有效)
    #:active 选定的链接(active必须被置于hover之后，才有效)
    #:first-child第一个元素
    #:lang带有指定 lang 属性的元素
    #:first-letter 向文本的第一个字母添加特殊样式
    #:first-line 向文本的首行添加特殊样式
    #:before 在元素之前添加内容
    #:after 在元素之后添加内容
    

  • 总结：
    • 无符号即为元素选择器
    • ,进行分组,即多个选择器的意思
    • .class选择器
    • #id选择器
    • []属性选择器
      • = 完全匹配
      • ~=单词匹配
      • ^=匹配开头
      • $=匹配结尾
      • *=子串匹配
      • |=开头匹配或加-开头匹配
    • 空格后代选择器
    • >子元素选择器
    • +相邻兄弟选择器
    • ~兄弟选择器
    • :伪类或伪元素
• 属性
  常用的属性需要自己去背，不常用的也要了解一下，需要用到的时候，快速查找相关文档
• 值
  • 值的不同写法和单位
    除了英文单词 red，我们还可以使用十六进制的颜色值 #ff0000：

    p { color: #ff0000; }
    

    还可以通过两种方法使用 RGB 值：

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

  • 如果值为若干单词，则要给值加引号

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

  • 如果要定义不止一个声明，则需要用分号将每个声明分开

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