CSS的引入-4种方式
1.内联样式
<h1 style="color:red;">华为手机发布会</h1>
将CSS样式直接写在HTML元素的style属性中。
2.内部样式
<style type="text/css">
h1{
color:green;
}
</style>
将CSS样式写到
<link rel="stylesheet" href="demo.css" type="text/css"/>
(企业级项目开发常用的引入外部样式的方式)
精确通过元素引入外部的一个CSS文件
4.导入外部样式
<style type="text/css">
@import 'demo.css';
</style>
通过在
练习例子:
demo.css
h1{
/* color: blue; */
color: pink;
}
<!DOCTYPE html>
<html lang="en">
<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>CSS的引入</title>
<!-- 方式2 -->
<!-- type加不加都可以,只是要规范一些就加上吧 -->
<!-- <style type="text/css">
h1{
color:green;
}
</style> -->
<!-- 方式3 -->
<!-- link是单标签,不要忘记加 / 让其自闭和 -->
<!-- <link rel="stylesheet" href="demo.css" type="text/css"/> -->
<!-- 方式4 -->
<style type="text/css">
@import 'demo.css';
</style>
</head>
<body>
<!-- 方式1 -->
<!-- <h1 style="color:red;">华为手机发布会</h1> -->
<h1>华为手机发布会</h1>
</body>
</html>
HTML人的骨架
CSS人的面貌
JS人的行为