CSS应用全解析-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43675447/article/details/84346866

1.元素中直接使用
（1）结构如下:
<元素名称 style=“属性：属性值”></元素名称>
样式中直接使用css，语法是使用style标签。其中“”中样式的语法结构和独立样式表中完全相同。
（2）例：

<div style="width: 200px;height: 100px;background-color: blueviolet;font-size: 12px"></div>

2.从页面头部调用
从页面头部调用css，是将css写在页面的head元素中，然后在页面中调用。
结构如下：
< style>
选择符{属性：属性值；}
</ style>
页面所有样式都可以写在之间

3.使用链接的形式调用
（1）使用link元素（外部文件调用）
结构如下：
< link rel=“stylesheet” href=“css文件路径” type=“text/css”/>
其中，rel="stylesheet"指这个link和其href之间的关联样式为样式表文件； type="text/css"指文件类型为样式表文本。
使用链接的形式调用样式表时，页面中调用样式的代码和使用头部调用样式时相同，使用class和id调用类选择符和ID选择符。

例：调用一个外部文件
以下为实现代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="diaoyong.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="mm">软件工程师</div>
</body>
</html>

以下为调用的外部修饰文件diaoyong.css:

.mm{
    font-family: inherit;
    font-size: 12px;
    color: deeppink;
}

(2)使用@import
结构如下：
< style type=“text.css”>@import url(css文件路径)；< /style>
@import的调用方法也可以写在css文件中，用来调用其他的css

这两种链接形式调用的区别在于，@import的调用方法只能在样式文件中使用，即只能在调用的样式文件（或style元素）中正常使用。

Q：既然css的调用方法有多种，那么如果同时使用集中调用方式，他们之间的优先级是怎样的？
A：假设按照元素中直接使用、页面头部调用和链接形式来划分，这三种样式表法在作用于页面元素时，优先级不同。顺序为直接>页面头部使用>链接

CSS 调用