引入CSS样式笔记

2018-11-15 364 阅读1分钟

问:
- 这么多引入样式的规则是用来干什么的?
答:
- 作用域不同, 导致可以重复利用的程度不同
  - 作用于某个element, style只能给这个element用
  - 作用于某个HTML document, style只能给这个HTML document用
  - HTML文件链接到其他CSS文件, style可以给任何HTML document用
  - CSS文件链接到其他CSS文件, style可以给任何CSS文件用
然后才是语法格式, 这些通用大家都认可的方式, 用的时候再参考
下面才是不重要的参考, 如果看不懂, 说明上面的内容看不懂.

1. HTML element 行内:

<p style="color:red; background:green">hello</p>

2. HTML document内:

<head>
  <style>
    p {
      color:red;
      background:green;
    }
  </style>
</head>

3. HTML 文件引入 CSS 文件

<head>
  <link href="index.css"  rel="stylesheet" type="text/css">
</head>

4. CSS 文件引入其他 CSS 文件

主要用在CSS文件引入另一个CSS文件, 也可以放在HTML的style标签里, 因为它的特点就是语法比link简单, 然后位置随便, 只要被style套住就可以, 不像link必须放在head下.

@import url(fruit.css);