1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
P{
color:red;
}
h2{
color:blue;
}
</style>
</head>
<body>
<p>css从入门到精通</p>
<h2>主讲</h2>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zzHXxdVa-1587292544193)(C:\Users\lenovo\Desktop\作业\html\2\2020-03-24 20_56_17-.png)]
2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
/*内部样式(并没有实现样式与内部的分离)*/
p{
color:red;
}
</style>
<!-- 外部样式 link标签链接样式文件-->
<link rel="stylesheet" type="text/css" href="style/hello.css">
<!-- 外部样式 @import导入样式文件-->
<style>
/* @import "style/hello.css"*/
</style>
</head>
<body>
<p>welcome to css</p>
<p>欢迎来到css课堂</p>
<h2 style="color:blue">web前段工程师</h2>
<h2>Java开发工程师</h2>
<div>哈哈</div>
<div>嘿嘿</div>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8o1zFNgt-1587292544196)(C:\Users\lenovo\Desktop\作业\html\2\2020-03-24 20_57_26-Document - 2345加速浏览器 10.7.png)]
3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
/*标签选择器*/
p{
color:red;
font-size:20px;
}
h2{
color:yellow;
}
.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 class="hello world">主讲</div>
<span class="world">css入门到精通</span>
<hr>
<h1 id="heihei">嘿嘿</h1>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BvC573FU-1587292544199)(C:\Users\lenovo\Desktop\作业\html\2\2020-03-24 20_57_59-Document - 2345加速浏览器 10.7.png)]
4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<style type="text/css">
/* 标签选择器与类选择器结合起来*/
h1.aaa{
color:red;
}
/* 标签选择器与id选择器结合起来*/
p#bbb{
color:blue;
}
/* 组合选择器*/
h1,p,div,span,.ccc{
font-size:30px;
}
div{
background:#cccccc;
}
.ccc{
font-size:30px;
font-weight:bold;
}
/*嵌套选择器*/
div>p{
color: green;
text-decoration: underline;
}
/* 对div内部类选择器修饰*/
div h3{
}
</style>
</head>
<body>
<!-- 需求 修改class为aaa的h1-->
<h1 class="aaa">welcome</h1>
<h4 class="aaa">csss</h4>
<h1>hello</h1>
<hr>
<!-- 修改id为bbb的p标签-->
<p id="bbb">world</p>
<p>html</p>
<h2 id="bbb">web开发</h2>
<hr>
<h1>hello</h1>
<p>html</p>
<div>web</div>
<span class="ccc">java</span>
<div>
<p>内部的p</p>
<h3>内部的h3</h3>
</div>
<hr>
<div>
<h2>
<p> 内部的p</p>
</h2>
</div>
<hr>
<div>
<p>内部的p标签</p>
<h3 class="ddd">内部h3标签</h3>
<p class="ddd">pppp</p>
</div>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DEy7u4fe-1587292544201)(C:\Users\lenovo\Desktop\作业\html\2\2020-03-28 20_48_59-Document - 2345加速浏览器 10.7.png)]
5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
/* a:link{
font-size:12px;
color:black;
text-decoration:none;
}
a:visited{
font-size:15px;
color:red;
}
a:hover{
font-size:20px;
color:blue;
}
a:active{
font-size:40px;
color:green;
} */
a:link,a:visited{
font-size:13px;
color:#666666;
text-decoration:none;
}
a:hover,a:active{
color:#ff7300;
text-decoration:underline;
}
p:hover{
color:red;
}
P:active{
color:;
}
</style>
</head>
<body>
<a href="1.html" title="">IT教育,高职培训</a>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lwkn5Efi-1587292544203)(C:\Users\lenovo\Desktop\作业\html\2\2020-03-28 20_53_24-Document - 2345加速浏览器 10.7.png)]
6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
p:first-letter{
color:red;
font-size:30px;
}
p:first-letter{
background:yellow;
}
p:before{
content:"嘿嘿";
}
p:after{
content:"哈哈";
}
</style>