CSS总结
CSS总结
1.在HTML中引入CSS的三种方式
1.1行内样式表(行内式)
<!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>
<div id="div1" style="
/* 设置div背景颜色 */
background-color: #66FFFF;
/* 设置div宽高 */
width: 600px;
height: 500px;
/* 设置div位置 */
position: absolute;/* 定位 */
top: 100px;
left: 100px;
/* 设置div边框 */
border-style: solid;/* 设置边框样式 */
border-color: crimson;/* 设置边框颜色 */
border-width: 20px;/* 设置边框宽度 */
">
</div>
</body>
</html>
1.2内部样式表(嵌入式)与选择器
<!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 type="text/css">
/*
选择器：
1.标签选择器
标签选择器作用于页面中所有同种类标签
标签名 {
}
2.id选择器
id选择器只作用于一个标签
#id名 {
}
3.class选择器
class选择器作用于一类标签，包括不同种类标签
.class名 {
}
*/
/* 1.标签选择器 */
div {
/* 设置div背景颜色 */
background-color: #eef136;
/* 设置div宽高 */
width: 150px;height: 150px;
/* 设置div边框 */
border-style: solid;
border-color: darkmagenta;
border-width: 5px;
color:rgb(212, 0, 255);
}
/* 2.id选择器 */
#username {
width: 300px;
height: 50px;
border-style: double;
border-width: 10px;
color: blue;
}
/* 3.class选择器 */
.class1 {
font-size: 24px;
color:red;
}
</style>
</head>
<body>
<!-- 标签选择器作用范围 -->
<div>标签选择器</div>
<div>标签选择器</div>
<hr>
<!-- id选择器作用范围 -->
<input type="text" id="username" value="id选择器">
<hr>
<!-- class选择器作用范围 -->
<p class="class1">class类选择器</p>
<input type="text" class="class1" value="class类选择器">
<br>
<span class="class1">class类选择器</span>
</body>
</html>
1.3外部样式表(链接式)
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>
<link rel="stylesheet" type="text/css" href="03_test.css"/>
</head>
<body>
<div></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1" id="div2"></div>
</body>
</html>
css:
/*
标签选择器优先级最低
类选择器次之
id选择器优先级最高
*/
div {
background-color: yellow;
width: 150px;
height: 150px;
border-style:double;
border-color: rgb(116, 113, 113);
border-width: 5px;
}
.div1 {
background-color: aqua;
}
#div2 {
background-color: red;
}
2.隐藏样式
display: none;
<!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 type="text/css">
#cityofChina {
display: none;
}
</style>
</head>
<body>
<ul>
<li>中国
<ul id="cityofChina">
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
</li>
<li>美国</li>
<li>日本</li>
</ul>
</body>
</html>
3.文本装饰样式
<!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 type="text/css">
#text1 {
/* 上划线 */
text-decoration: overline;
}
#text2 {
/* 下划线 */
text-decoration: underline;
}
#text3 {
/* 插入线 */
text-decoration: line-through;
}
#baidu {
/* 消除超链接下划线 */
text-decoration: none;
}
</style>
</head>
<body>
<p id="text1">啊～♂</p>
<p id="text2">啊～♂</p>
<p id="text3">啊～♂</p>
<hr>
<a href="http://www.baidu.com" id="baidu">百度</a>
</body>
</html>
4.去除列表前面的圆点
<!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 type="text/css">
#list1 {
/* list-style-type: circle; */
list-style-type: none;
}
</style>
</head>
<body>
<ul>
<li>中国</li>
<li>美国</li>
<li>日本</li>
</ul>
<hr>
<ul id="list1">
<li>中国</li>
<li>美国</li>
<li>日本</li>
</ul>
</body>
</html>
5.鼠标悬停效果
<!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 type="text/css">
.turnred:hover {
font-size: 24px;
color: crimson;
}
#turnblack:hover {
/*
border-style: solid;
border-color: black;
border-width: 5px;
*/
border: solid blue 1px;
background-color: rgb(230, 223, 223);
}
</style>
</head>
<body>
<p class="turnred">Hello</p>
<input type="button" value="点击" class="turnred">
<br>
<br>
<br>
<br>
请输入<input type="text" id="turnblack">
</body>
</html>
6.内补丁和外补丁
<!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 type="text/css">
#div1 {
background-color: cyan;
width: 300px;
height: 300px;
border: black solid 3px;
/* 外补丁 */
margin-top: 100px;/* 在外部顶侧添加100px的空隙 */
margin-left: 100px;/* 在外部左侧添加100px的空隙 */
/* 内补丁 */
padding-left: 20px;/* 在内部左侧添加20px的空隙 */
}
#div2 {
background-color: red;
width: 100px;
height: 100px;
border: black solid 3px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
7.float浮动效果
添加浮动效果前：
添加浮动效果后：
<!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>float浮动样式</title>
<style type="text/css">
#dog {
float: left;
}
p {
font-size: 24px;
}
</style>
</head>
<body>
<img src="images/沙漠死神.jpg" alt="狗头" id="dog">
<p>内瑟斯来自远古的恕瑞玛文明。他的技能拥有爆发、控制、削弱、回复等效果，能够胜任上单位置，
但是由于前期太过弱势，对线期间容易被压制。
内瑟斯拥有吞噬灵魂、摄魂痛击、枯萎、灵魂烈焰和死神降临等技能，
一个发育良好的狗头在后期无论是输出还是防御都是噩梦般的存在。
</p>
<p>内瑟斯来自远古的恕瑞玛文明。他的技能拥有爆发、控制、削弱、回复等效果，能够胜任上单位置，
但是由于前期太过弱势，对线期间容易被压制。
内瑟斯拥有吞噬灵魂、摄魂痛击、枯萎、灵魂烈焰和死神降临等技能，
一个发育良好的狗头在后期无论是输出还是防御都是噩梦般的存在。
</p>
<p>内瑟斯来自远古的恕瑞玛文明。他的技能拥有爆发、控制、削弱、回复等效果，能够胜任上单位置，
但是由于前期太过弱势，对线期间容易被压制。
内瑟斯拥有吞噬灵魂、摄魂痛击、枯萎、灵魂烈焰和死神降临等技能，
一个发育良好的狗头在后期无论是输出还是防御都是噩梦般的存在。
</p>
<p>内瑟斯来自远古的恕瑞玛文明。他的技能拥有爆发、控制、削弱、回复等效果，能够胜任上单位置，
但是由于前期太过弱势，对线期间容易被压制。
内瑟斯拥有吞噬灵魂、摄魂痛击、枯萎、灵魂烈焰和死神降临等技能，
一个发育良好的狗头在后期无论是输出还是防御都是噩梦般的存在。
</p>
<p>内瑟斯来自远古的恕瑞玛文明。他的技能拥有爆发、控制、削弱、回复等效果，能够胜任上单位置，
但是由于前期太过弱势，对线期间容易被压制。
内瑟斯拥有吞噬灵魂、摄魂痛击、枯萎、灵魂烈焰和死神降临等技能，
一个发育良好的狗头在后期无论是输出还是防御都是噩梦般的存在。
</p>
<p>内瑟斯来自远古的恕瑞玛文明。他的技能拥有爆发、控制、削弱、回复等效果，能够胜任上单位置，
但是由于前期太过弱势，对线期间容易被压制。
内瑟斯拥有吞噬灵魂、摄魂痛击、枯萎、灵魂烈焰和死神降临等技能，
一个发育良好的狗头在后期无论是输出还是防御都是噩梦般的存在。
</p>
<p>内瑟斯来自远古的恕瑞玛文明。他的技能拥有爆发、控制、削弱、回复等效果，能够胜任上单位置，
但是由于前期太过弱势，对线期间容易被压制。
内瑟斯拥有吞噬灵魂、摄魂痛击、枯萎、灵魂烈焰和死神降临等技能，
一个发育良好的狗头在后期无论是输出还是防御都是噩梦般的存在。
</p>
</body>
</html>
8.鼠标光标效果
<!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 type="text/css">
p {
font-size: 24px;
}
#baidu:hover {
text-decoration: underline;
color: blue;
/* 变小手 */
cursor: pointer;
/* 禁止访问 */
/* cursor: not-allowed; */
/* 等待 */
/* cursor: wait; */
}
</style>
</head>
<body>
<p id="baidu">百度</p>
</body>
</html>
