转载：https://www.cnblogs.com/yuanchenqi/articles/5977825.html
一.CSS引入的四种方式
1.第一种：直接通过标签属性style写入：
<div style="color:red;background-color:beige">hello yuan</div>
说明：css其实就是键值对。
第二种：style标签写入head标签中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
color: rebeccapurple;
font-size: 40px;
}
a{
text-decoration: none; //去掉下划线
}
</style>
</head>
<body>
<div style="color:red;background-color:beige">hello yuan</div>
<div>hello div</div>
<p>hello p</p>
<a href="">点我</a>
</body>
</html>
第三种：链接式
首先，新建css后缀的文件，即Stylesheet，文件名称为：test1.css;
然后，通过link标签引入css文件；
说明：需在head标签中进行引入，link标签（自闭合标签），且注意写rel，告诉它是什么文件类型；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="test1.css" rel="stylesheet">
</head>
<body>
<div>hello div</div>
<p>hello p</p>
<a href="">点我</a>
</body>
</html>
第四种：导入式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@import "test1.css";
</style>
</head>
<body>
<div>hello div</div>
<p>hello p</p>
<a href="">点我</a>
</body>
</html>
链接式和导入式的区别：
1.链接式引入文件的数量是没有限制的，导入式是有限制的；
2.导入式对css代码和html代码进行了分隔；
3.导入式先加载HTML，再加载css，若css延迟，有可能出来没有css的html的丑陋界面；
链接式是先把css准备好，css没准备好，不会让html显示出来的，所以你只要能看到结果，一定是最完整的结果；
结论：推荐使用链接式
二：CSS的选择器（Selector）
1.基础选择器
*：通用选择器 //改变所有标签
*{
}
E：标签选择器 //element,通过标签名字
div{
}
id选择器：--使用井号 #
说明：id和井号#是亲兄弟，只要看到#，基本上就是指的id
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#littleP{
color:hotpink;
}
</style>
</head>
<body>
<div>hello div</div>
<p id="littleP">hello p</p>
<a href="">点我</a>
</body>
</html>
class 类选择器：---使用点 .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cc{
color:hotpink;
}
</style>
</head>
<body>
<div>hello div</div>
<p id="littleP">hello p</p>
<a href="">点我</a>
<p class="cc">PPP</p>
<p class="cc">PP</p>
</body>
</html>
eg:混合基础选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div.cc{ //混合基本基础选择器，注意：div和\.cc之间不要有空格
color:hotpink;
}
</style>
</head>
<body>
<div>hello div</div>
<p id="littleP">hello p</p>
<a href="">点我</a>
<p class="cc">PPP</p>
<p class="cc">PP</p>
<div class="cc">lalala</div>
</body>
</html>
2.组合选择器
逗号--逗号相当于并列的意思
把两个标签用一句话表示出来，加逗号即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#littleP,div.cc{ //逗号相当于并列的意思
color:hotpink;
}
</style>
</head>
<body>
<div>hello div</div>
<p id="littleP">hello p</p>
<a href="">点我</a>
<p class="cc">PPP</p>
<p class="cc">PP</p>
<div class="cc">lalala</div>
</body>
</html>
空格---后代选择器（看所有后代，需要涉及嵌套）
.div1 .div2
大于号---子代选择器(只看儿子层)
.div1>.cc
.div div>p{
}
毗邻元素选择器（并列的时候会用，需要紧挨着才行）---说明：仅向下找，不向上找
.div1 + div
3.属性选择器
E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。） p[title] { color:#f00; }
E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; }
E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 td[class~=”name”] { color:#f00; }
E[attr^=val] 匹配属性值以指定值开头的每个元素 div[class^="test"]{background:#ffff00;}
E[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;}
E[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:#ffff00;}
4.伪类--专用于控制链接的显示效果
a:link（没有接触过的链接）,用于定义了链接的常规状态。
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。---悬浮用的最多
a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。
伪类选择器 : 伪类指的是标签的不同状态:
a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }
补充：
after/before
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.add:after{ //在定位到的标签元素后加文档，并且对添加的部分做css操作
content: "欢迎加入前端学习";
color:hotpink;
}
</style>
</head>
<body>
<div class="add">hello</div>
</body>
</html>
显示效果：
三.CSS的常用属性
1.颜色属性
div style="color:blueviolet">ppppp</div> //颜色的英文单词
<div style="color:#ffee33">ppppp</div> //RGB颜色对照表（十六进制）<div style="color:rgb(255,0,0)">ppppp</div> //red、green、blue三种颜色范围：0-255<div style="color:rgba(255,0,0,0.5)">ppppp</div> //多出来的a表示透明度，数值越小越透明2.字体属性
font-size: 20px/50%/larger //可通过三种方式设置：像素、百分比、还有smaller
font-family:'Lucida Bright' //字体，一般论文都是：Times New Romanfont-weight: lighter/bold/border/ //粗体<h1 style="font-style: oblique">老男孩</h1> //斜体
浙公网安备 33010602011771号