DAY1
案例1 01.CSS的语法.html
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>Doucment</title>
<style>
p{
color:red;
}
h2{
color:blue;
}
</style>
</head>
<p>CSS从入门到精通</p >
<h2>主讲:hector</h2>
<body>
</body>
</html>
案例2 02.CSS应用样式.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 1.内部样式 */
p{
color:red;
}
</style>
<!-- 外部样式 link标签链接样式文件 -->
<link rel="stylesheet" type="text/css" href="hello.css">
<!-- 外部样式 @import导入样式文件 -->
<style>
@import "hello.css";
/* @import url(style/hello.css); */
</style>
</head>
<body>
<p>welcome to css!</p>
<p>欢迎来到css课堂!</p>
<!-- 2.行内样式 -->
<h2 style="color:blue">WEB前端工程师</h2>
<h2>JAVA开发工程师</h2>
<div>嘿嘿</div>
<div>哈哈</div>
</body>
</html>
案例3 03.CSS基础选择器.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 1.标签选择器 */
p{
color:red;
font-size:20px;
}
h2{
color:yellow;
}
/* 2.类选择器 */
.hello{
background:#cccccc;
}
.world{
font-weight:bold;
}
#heihei{
color:blue;
}
</style>
</head>
<body>
<!-- 给p标签中的内容设置样式 -->
<p>welcome to css!</p>
<p>hello world!</p>
<h2>WEB前端开发</h2>
<h3>JAVA开发</h3>
<hr>
<!-- 我只想修改第一个p标签 -->
<p class="hello">welcome to css!</p>
<p>hello world!</p>
<h2>WEB前端开发</h2>
<h3>JAVA开发</h3>
<!-- 只要应用了hello这个类选择器就生效 -->
<div class="hello">主讲</div>
<!-- div既要有背景颜色,也要加粗 -->
<div class="hello world">主讲</div>
<span>CSS从入门到精通!</span>
<hr>
<h1 id="heihei">嘿嘿</h1>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oNa7pfJ2-1585054710946)(.\images\案例3.png)]
CSS从入门到精通!
<h1 id="heihei">嘿嘿</h1>
```