目录

CSS入门教程-MDN

什么是CSS?

Cascading Style Sheets (CSS) 是一门指定文档该如何呈现给用户的语言。

文档是信息的集合,它使用一门标记语言作为结构。文档不等同于文件,一个文档可能由多个文件组成。

CSS 并非仅仅用于浏览器,也不仅限于视觉展现。按照 CSS 的正式术语来讲,将文档呈现给用户的程序称为用户代理(UA)。浏览器只是用户代理的其中之一。

浏览器如何展现文档?

  1. 浏览器先将标记语言和 CSS 转换成DOM (文档对象模型)结构。 这时 DOM 就代表了电脑内存中的相应文档,因为它已经融合了文档内容和相应的样式表。
  2. 最后浏览器把 DOM 的内容展示出来。

CSS的层叠和继承

!important关键字,用户可以通过使用这个关键字使自己定义的样式覆盖掉开发者定义的样式。

层叠

对于层叠来说,共有三种主要的样式来源:

  • 浏览器对HTML定义的默认样式。
  • 用户定义的样式。
  • 开发者定义的样式,可以有三种形式:
    • 定义在外部文件(外链样式):本教程中案例主要是通过这种形式定义样式。
    • 在页面的头部定义(内联样式):通过这种形式定义的样式只在本页面内生效。
    • 定义在特定的元素身上(行内样式):这种形式多用于测试,可维护性较差。

优先级从高到低依次为:网页开发者定义的样式、网页阅读者定义的样式、浏览器的默认样式。

继承

对继承的元素来说,子元素自身的样式优先级高于从父级继承来的样式。

CSS选择器

样式优先级

如果多于一个规则指定了相同的属性值都应用到一个元素上,CSS规定拥有更高确定度的选择器优先级更高。ID选择器比类选择器更具确定度, 而类选择器比标签选择器(tag selector)更具确定度。

如果样式中包含冲突的规则,且它们具有相同的确定度。那么,后出现的规则优先级高。

基于关系的选择器

一个HTML表格有id 属性,但是它的行和单元格没有单独的id。可以使用关系选择器设置单元格格式。

纯CSS实现的下拉列表

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sample document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="menu-bar">
        <ul>
            <li>
                <a href="example.html">Menu</a>
                <ul>
                    <li>
                        <a href="example.html">Link</a>
                    </li>
                    <li>
                        <a class="menu-nav" href="example.html">Submenu</a>
                        <ul>
                            <li>
                                <a class="menu-nav" href="example.html">Submenu</a>
                                <ul>
                                    <li><a href="example.html">Link</a></li>
                                    <li><a href="example.html">Link</a></li>
                                    <li><a href="example.html">Link</a></li>
                                    <li><a href="example.html">Link</a></li>
                                </ul>
                            </li>
                            <li><a href="example.html">Link</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>