学习目标
- 掌握CSS的两种语法结构
- 掌握link与@import引入方式的区别
CSS-基础
一、两种语法
选择器 {
属性: 值;
属性: 值;
}
@关键字 {
其他
}
注意:
- 空格和缩进建议保留
- 半角符号,不要写成全角
二、四种引入方式
2.1、引入方式一
通过<link>
标签引用
<link rel="stylesheet" href="index.css">
2.1、引入方式二
通过CSS语法@import引入
放在style标签或者CSS文件中
- @import 必须放在CSS文件开头
- 语法后面的分号必不可少
<style>
@import url("index.css");
@import url('index.css');
@import url(index.css);
@import 'custom.css';
@import "common.css";
@import url('landscape.css') screen and (orientation:landscape);
</style>
2.1、引入方式三
内部样式
- 将CSS放在页面
<style>
标签中 - style标签可以放在head里,也可放在body内任意地方
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS</title>
<style>
h1 { background: orange; }
</style>
</head>
<body>
<h1>Hello CSS!</h1>
</body>
</html>
2.1、引入方式四
内联样式
不推荐,但在某些情况下也有用
<p style="background: orange; font-size: 24px;"> CSS <p>
三、废弃的引入方式
属性样式
已废弃,尽量不用
<img src="a.png" width=100 height=200 >
link方式和@import引入CSS有 什么区别?
<link>
是HTML的标签,在页面上代表一个元素,可以被JS选中修改; @import是CSS的语法,JS无法操控
两个link标签,文件会并行加载。 一个link的CSS里包含一个@import, 文件串行加载会更慢。因此不推荐用@import