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-64nZVApR-1586338808000)(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-uJai2zaW-1586338808001)(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-Ab6ldiT6-1586338808001)(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-jg0kF6mg-1586338808001)(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-xFBLxwVr-1586338808001)(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>
</head>
<body>
<p>hello world</p>
<hr>
<p>
hello world<br>
welcome to
</p>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z2QKxnjx-1586338808002)(C:\Users\lenovo\Desktop\作业\html\2\2020-03-28 20_46_50-Document - 2345加速浏览器 10.7.png)]
7
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
/*<link rel="stylesheet" type="text/css" href="style/world">*/
<style>
div{
font-size:20px;
color:red;
}
.hello{
font-weight:bold;
color:blue;
}
#world{
text-decoration:underline;
color:green;
}
</style>
<link rel="stylesheet" href="style/world.css">
</head>
<body>
<div class="hello" id="world" style="color">css</div>
<p>主讲</p>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EwxhNFmn-1586338808002)(C:\Users\lenovo\Desktop\作业\html\2\2020-03-28 20_43_55-Document - 2345加速浏览器 10.7.png)]
8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
div{
font-size:30px;
}
p{
/*font-size:20px;*/
/*font-size:80%;*/
font-size:2em;
}
span.hello{
/*font-size:80%;*/
font-size:2em;
}
body{
font-size:62.5%;
}r
#ddd{
font-size:3em;
}
ul li{
/* font-size:30px;
font-weight:700;
font-family:华文行楷,黑体,宋体;
font-style:normal; */
font:italic bold 20px 黑体,楷体,宋体;
}
</style>
</head>
<body>
<p>
css入门到精通
<span>主讲：高职培训</span>
</p>
主讲:hecter
<hr>
<div>
我的div
<p>
css入门到精通
<span>主讲：高职培训</span>
</p>
</div>
<hr>
<span class="hello">主讲：高职培训</span>
<hr>
<ul>
<li>嘿嘿</li>
</ul>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1un86g20-1586338808003)(C:\Users\lenovo\Desktop\作业\html\2\2020-03-31 20_02_42-Document - 2345加速浏览器 10.7.png)]
9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
color:red;
/* background-color:#0F0*/
/* background-color:rgb(0,0,255)/
/* background-color:rgba(0,255,0,0.5)*/
background-color:#54d2c9;
line-height:50px;
text-align:center;
}
img{
vertical-align:middle;
}
div{
text-indent: 25px;
}
span{
text-decoration:line-through;
text-transform:capitalize;
letter-spacing:3px;
word-spacing:8px;
}
h3{
width:300px;
height:200px;
background-color:#cccccc;
white-space:nowrap;
overflow:hidden;
}
</style>
</head>
<body>
<p>welcome to css</p>
<p>welcome to css</p>
<p>welcome to css</p>
<p>welcome to css</p>
<hr>
<img src="../image/qq.jpg">
html
<hr>
<div> welcome to csswelcome to csswelcome to csswelcome to css</div>
<div>welcome to csswelcome to csswelcome to csswelcome to css</div>
<hr>
<span>hello world</span>
<h3>welcome to csswelcome to csswelcome to csswelcome to csswelcome to css</h3>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-enMxaNL5-1586338808003)(C:\Users\lenovo\Desktop\作业\html\2\2020-03-31 20_06_44-图片预览.png)]
10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* div{
color: red;
background-color:#cccccc;
background-color:transparent;
background-image:url(../images/heihei.gif);
}*/
</style>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
<p>welcome to css welcome to css welcome to css </p>
<p>welcome to css welcome to css welcome to css </p>
<p>welcome to css welcome to css welcome to css </p>
</div>
<hr>
<p class="cart"></p>
购物车
</body>
</html>
div{
color: red;
/* background-color:#cccccc;
background-color:transparent;
background-image:url(../image/heihei.gif);
background-repeat:no-repeat;
background-position:right top;
height: 100px;
background-attachment:fixed;*/
background:red url(../../images/qq.jpg) repeat-x 30px 100px;
}
.cart{
width:30px;
height: 30px;
background-color:#ccc;
background-image:url(../image/icon.gif);
background-color:transparent;
background-position:-160px -30px;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FfVuQ9lz-1586338808003)(C:\Users\lenovo\Desktop\作业\html\2\2020-04-04 20_49_06-图片预览.png)]
11
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* li{
list-style-type:decimal;
}*/
.first{
list-style-type:decimal;
}
.second{
/* list-style-type:square;*/
list-style-image:url(../images/male.gif);
}
.third{
list-style-type:circle;
list-style-position:inside;
}
.fourth{
/* list-style:squareurl url(../images/female.gif) inside;*/
list-style:none;
}
.nav{
list-style:none;
}
.nav li{
list-style:none;
float:left;
width:50px;
}
</style>
</head>
<body>
<ul>
<li class="first">hello</li>
<li class="second">hello</li>
<li class="third">hello</li>
<li class="fourth">hello</li>
</ul>
<hr>
<nav>
<ul class="nav">
<li>新闻</li>
<li>地图</li>
<li>视频</li>
<li>贴吧</li>
</ul>
</nav>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TflPuDV8-1586338808003)(C:\Users\lenovo\Desktop\作业\html\2\2020-04-04 20_42_25-Document - 2345加速浏览器 10.7.png)]
12
<meta charset="UTF-8">
<title>Document</title>
<style>
table{
width: 500px;
border:1px solid red;
border-collapse:collapse;
}
td{
border:1px solid red;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" >
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>1
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
</table>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-12JE5qZL-1586338808004)(C:\Users\lenovo\Desktop\作业\html\2\2020-04-04 20_38_41-Document - 2345加速浏览器 10.7.png)]
13
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
width:250px;
background:#ccc;
}
.first{
/*border-top-color:red;
border-top-width:1px;
border-top-style:solid;
border-right-color:blue;
border-right-width:2px;
border-right-style:dashed;
border-bottom-color:green;
border-bottom-width: 4px;
border-bottom-style: dotted;
border-left-color:gray;
border-left-width:6px;
border-left-style:double; */
/*
border-top:1px;
border-bottom: 2px dashed blue;*/
/*
border-color:red green pink;
border-width: 1px 2px 4px 6px;
border-style:solid dashed dotted double;
*/
border:1px dotted red;
}
.second{
/* padding-top:15px;
padding-left:10px;
padding-bottom:20px;
padding-right:30px;
padding: 1px 2px 4px 6px;*/
padding:5px 20px 20px 4px;
}
</style>
</head>
<body>
<p class="first">welcome to html</p>
<p class="second">welcome to css</p>
<p class="third">welcome to java</p>
</body>
</html>
1626
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
