css基础
CSS——层叠样式表，就是用来调节标签的样式
css注释
/*注释*/
/*
注释1
注释2
注释3
*/
css语法结构
选择器 {属性名1:属性值1；属性名2:属性值2；...}
css三种引入方式
1.外部css文件（最正规的书写方式）
2.head内style标签内部直接书写css代码（以下代码为了方便使用该方法）
3.标签内部通过style属性直接书写对应的样式（不推荐）
如何查找标签：
1.基本选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器 元素选择器*/
/*div { !*将页面上所有的div标签内部的文本变成红色*!*/
/* color: red;*/
/*}*/
/*类选择器 点号*/
/*.c1 { !*让所有具有c1类属性值的标签内部文本变成蓝色*!*/
/* color:blue;*/
/*}*/
/*id选择器 #号*/
/*#d1 { !*将id为d1的标签内部文本内容改成绿色*!*/
/* color: green;*/
/*}*/
/*通用选择器 *号*/
/** { !*页面上所有的标签统一修改样式*!*/
/* color: aqua;*/
/*}*/
</style>
</head>
<body>
<div class="c1">老板你好 我是23号技师 很高兴为您服务
<span>我是div内部的span</span>
</div>
<p id="d1" class="c1">来宾三位 楼上请</p>
<div>老板你好 我是23号技师 很高兴为您服务</div>
<span class="c1">珊珊出来接待一下</span>
<p>来宾三位 楼上请</p>
<span id="d2">珊珊出来接待一下</span>
</body>
</html>
2.组合选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 后代选择器 */
/*div span { !*空格表示div内部的span没有层级限制*!*/
/* color: red;*/
/*}*/
/* 儿子选择器 */
/*div > span { !*>表示div内部的儿子*!*/
/* color: green;*/
/*}*/
/* 毗邻选择器 */
/*div + span { !*紧挨着的下一个标签*!*/
/* color: red;*/
/*}*/
/* 弟弟选择器 */
/*div ~ span { !*同级别下面所有的标签*!*/
/* color: deeppink;*/
/*}*/
</style>
</head>
<body>
<span>div上面的span</span>
<span>div上面的span</span>
<div>
<span>div内部第一个span</span>
<p>div内部的p
<span>div内部的p内部的span</span>
</p>
<span>div内部最后一个span</span>
</div>
<span>div下面的span</span>
<span>div下面的span</span>
<span>div下面的span</span>
<span>div下面的span</span>
<span>div下面的span</span>
<span>div下面的span</span>
<span>div下面的span</span>
<div>弟弟救我
<p>我来舔你了</p>
</div>
<span>你会被我火火骚死</span>
</body>
</html>
3.属性选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*属性选择器 [] */
/*[username] { !*找到页面上所有具有username属性名的标签*!*/
/* background-color: deeppink;*/
/*}*/
/*[username='jason'] { !*找到页面上属性名是username并且属性值叫jason的标签*!*/
/* background-color: black;*/
/*}*/
input[username="jason"] { /*找到页面上属性名是username并且属性值叫jason的input标签*/
background-color: aqua;
}
</style>
</head>
<body>
<input type="text" username="jason">
<input type="text" username="sean">
<input type="text" username="owen">
<p username="tank">数据库的刷卡机大卡司</p>
<div username="oscar">奥斯卡件打开拉随机端口两三点</div>
<span username="jason">奥斯卡件打开拉随机端口两三点</span>
</body>
</html>
4.分组与嵌套：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*div {*/
/* color: red;*/
/*}*/
/*p {*/
/* color: red;*/
/*}*/
/*span {*/
/* color: red;*/
/*}*/
/*div ,p, span {*/
/* color: green;*/
/*}*/
/*.c1,#d1,p {*/
/* color: red;*/
/*}*/
/*.c1 h1{ !*找具有c1属性值的标签 后代的h1*!*/
/* color: green;*/
/*}*/
</style>
</head>
<body>
<div class="c1">快要下课了 我好饿 好饿 好饿 我真的好饿
<h1>我是h标签</h1>
</div>
<span id="d1">快要下课了 我好饿 好饿 好饿 我真的好饿</span>
<p>快要下课了 我好饿 好饿 好饿 我真的好饿</p>
</body>
</html>
5.伪类选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link {
color: aqua;
}
a:hover { /*鼠标悬浮*/
color: black;
}
a:active {
color: green;
}
a:visited {
color: gray;
}
input:focus {
background-color: red;
}
</style>
</head>
<body>
<a href="https://www.mzitu.com">点我1</a>
<a href="https://www.luffycity.com">点我2</a>
<a href="https://www.sogo.com">点我2</a>
<a href="https://www.sajdkasd.com">点我2</a>
<input type="text">
</body>
</html>
6.伪元素选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*p:first-letter {*/
/* color: red;*/
/* font-size: 48px;*/
/*}*/
p:before {
content: '你好啊';
color: red;
}
p:after {
content: '?';
color: blue;
}
</style>
</head>
<body>
<p>大家啊上课登记卡圣诞快乐撒娇的空间sad健身卡大的萨达</p>
</body>
</html>
