内部样式
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内部样式表title>
<style>
h2 {
color: red;
}
style>
head>
<body>
<h2>Hello world!h2>
body>
html>
外部样式
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外部样式表title>
<style>
@import url(./css/style.css);
style>
head>
<body>
<h2>Hello world!h2>
body>
html>
link
与import
之间的区别:
- ⭐本质不同,
link
属于XHTML
标签,而@import
则是CSS
提供的一种方式
- ⭐加载顺序不同,
link
引用的CSS
会跟HTML
页面一起加载,而import
引入的CSS
会等HTML
页面加载完后再加载,所以可能会导致网速慢的时候刚开始访问页面没有样式
- ⭐兼容性不同,
link
所有的浏览器都支持,而@import
只有IE5
以上的浏览器才支持
link
属性:
- ⭐
rel="stylesheet"
:告诉浏览器我引入的是样式表
- ⭐
type="text/css"
:告诉浏览器样式表的类型是CSS
- ⭐
href
:引入CSS
样式的路径
行内样式
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内样式表title>
head>
<body>
<h2 style="color:red">Hello world!h2>
body>
html>