css基础(1)-----css的引入

2018-01-16 本文已影响0人 Coding破耳

引入css的方法

推荐优先级由高到低

1.外部样式两种方式

注意引入css文件的路径正确，否则会导致引入无效

1.1 在html文件中直接用link标签链接css文件

<link rel=“stylesheet” href = “style.css”>

1.2 用@import语法来引入文件

1.2.1 在css文件中

@import语法是css的语法，因此若该语句在css文件中，可直接使用，示例如下在url中文件路径可加单引号，双引号或不加引号；若无url，则必须要用单引号或双引号扩起来：

@import url(test.css);
@import url("test.css");
@import url('test.css');
@import 'test.css';
@import "test.css";

1.2.2 在html文件中

@import不能直接在html中使用，若要使用，需得用<style></style>标签扩起来，示例如下此处仅列出一种示意：

<style>
@import "test.css";
</style>

2.内部样式

直接在html文件的style标签中写样式，示例如下：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    p{
        background-color:green;
    }
    </style>
</head>

缺点：html太臃肿

3.内联样式

直接在标签中写样式，示例如下：

<body>
<p style="background: orange; font-size: 24px;">CSS 很 👍<p>
</body>

缺点：同一类标签，每一个都要写，修改起来麻烦

4.属性样式

也是写在标签内，但没有style关键字来表示

<img src="a.png" width=100 height=200 >

已废弃了