一、什么是CSS
CSS的概念：Cascading Style Sheet 级联样式表
表现HTML或XHTML文件样式的计算机语言，包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定
二、CSS的基本结构
h1 {
font-size:12px;
color:#F00;
}
/*
h1:选择器
font-size:属性
12px:值，px是一个像素单位，并不是一个固定的值。
*/
三、网页引入CSS的三种方式
3.1 内部样式
直接在网页中写的css样式，一般放置在head标签之中，title标签之下
<style type="text/css">
h1 {
font-size: 14px;
color: green;
}
</style>
3.2 外部样式
在外部单独定义的css文件，这个外部css文件，需要Html进行链接引用，注意：在外部css文件中定义样式的时候不需要加style标签等。
网页中引入的方式：
<link rel="stylesheet" type="text/css" href="./css/index.css"/>
3.3 行内样式
嵌套在网页标签中的方式
<h2 style="color: blueviolet;font-size: 20px;">我是二号标题</h2>
3.4 优先级比较
最高：行内样式
内部样式与外部样式，显式后执行的样式，原因是先执行的样式会被覆盖。
四、关于颜色的取值
4.1 单词
color:red;
4.2 十六进制
color: #FF0000;
4.3 RGB
color: rgb(255,255,255);
三种颜色的互相转换在线工具：https://www.sioe.***/yingyong/yanse-rgb-16/
五、CSS选择器
5.1 基本选择器
5.1.1 标签选择器
使用网页的标签为选择器的名称
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h1{
color: red;
}
span{
color: green;
}
p{
color: blue;
}
</style>
</head>
<body>
<h1>我是标题</h1>
<span>我是文本</span>
<p>我是段落</p>
</body>
</html>
5.1.2 类选择器
使用自定义的名字，前面加 .号，引用的使用使用class=“名字”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.title{
color: red;
}
.tit{
font-size:20px;
}
</style>
</head>
<body>
<h1 class="title tit">我是标题</h1>
<span class="title">我是文本</span>
<p class="title">我是段落</p>
</body>
</html>
5.1.3 ID选择器
使用自定义的名字，前面加#号，引用的使用使用id=“名字”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.title {
font-size: 20px;
color: green;
}
#tit{
color: red;
}
</style>
</head>
<body>
<ul>
<li class="title" id="tit">我是列表1</li>
<li class="title">我是列表2</li>
<li class="title">我是列表3</li>
<li class="title">我是列表4</li>
<li class="title">我是列表5</li>
</ul>
</body>
</html>
5.1.4 基本选择器的优先级
ID选择器 > 类选择器 > 标签选择器
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
span{
color: red;
}
.title{
color: green;
}
#tit{
color: #0000FF;
}
</style>
</head>
<body>
<span class="title" id="tit">
我是文本
</span>
</body>
</html>
5.2 高级选择器
5.2.1 层次选择器
a.后代选择器
div p span{
color: red;
}
b.子选择器（了解）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div>span{
color: red;
}
</style>
</head>
<body>
<div>
<p>
<span>我是文本1</span>
</p>
<span>我是文本2</span>
</div>
</body>
</html>
c.相邻兄弟选择器（了解）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box+p{
color: #FF0000;
}
</style>
</head>
<body>
<p>我是段落3</p>
<div class="box">
</div>
<p>我是段落4</p>
<p>我是段落5</p>
</body>
</html>
d.通用兄弟选择器（了解）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box~p {
color: #FF0000;
}
</style>
</head>
<body>
<p>我是段落3</p>
<div class="box"></div>
<p >我是段落4</p>
<p>我是段落5</p>
<p >我是段落6</p>
</body>
</html>
5.2.2 属性选择器
a.属性名
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a[class]{
color: red;
}
</style>
</head>
<body>
<a href="#" >百度</a>
<a href="#" class="title">阿里巴巴</a>
</body>
</html>
b.属性名加属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a[class=title]{
color: red;
}
</style>
</head>
<body>
<a href="#" class="info">百度</a>
<a href="#" class="title">阿里巴巴</a>
</body>
</html>
c.属性值以某某字符开头
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a[href^=https]{
color: red;
}
</style>
</head>
<body>
<a href="https://www.baidu.***" >百度</a>
<a href="www.alibaba.***" >阿里巴巴</a>
<a href="https://www.sina.***.***/" >新浪</a>
</body>
</html>
d.属性值以某某字符结束
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a[href$=***]{
color: red;
}
</style>
</head>
<body>
<a href="https://www.baidu.***" >百度</a>
<a href="www.alibaba.***" >阿里巴巴</a>
<a href="https://www.sina.***.***/" >新浪</a>
</body>
</html>
e.属性值包含某某字符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a[href*=ba]{
color: red;
}
</style>
</head>
<body>
<a href="https://www.baidu.***" >百度</a>
<a href="www.alibaba.***">阿里巴巴</a>
<a href="https://www.sina.***.***/">新浪</a>
</body>
</html>
六、标签的类型
6.1 行内元素
特征：
1、元素会在一行内显式，默认宽度为文本的宽度。
2、不可以自定义宽度与高度。
6.2 块级元素
特征：
1、独占一行，默认宽度为浏览器的宽度。
2、可以自定义这个元素的宽度与高度。
6.3 行内块元素
特征：
1、元素会在一行内显式
2、可以自定义宽度与高度
6.4 标签分类
行内元素：span、label、a、strong 、em...
块级元素：h1-h6、p、ul、li、div、table...
行内块元素：img、input...
6.5 布局嵌套使用规则
1、块级元素可以嵌套行内元素、行内块元素与块级元素，除p标记不能包含块级元素。
2、行内元素可以包含行内元素、与行内块元素，但不能包含块级元素。
6.6 元素类型的转换
display: block; /*把元素转换为块级元素*/
display: inline;/*把元素转换为行内元素*/
display: inline-block;/*把元素转换为行内块元素*/
七、CSS美化网页样式
7.1 字体样式
windows10下，网页默认的字体样式为 大小是16个像素，颜色为黑色，字体类型为微软雅黑
font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。
**注意**: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。
p{
font-family:"Times New Roman", Times, serif;
}
windows10下，网页默认的字体样式为 大小是16个像素，颜色为黑色，字体类型为微软雅黑
p{
font-size: 30px; /*字体大小*/
font-family: "microsoft yahei"; /*字体类型*/
font-weight:bold;/*字体加粗*/
font-style: italic; /*字体风格,倾斜*/
font-variant: small-caps; /*小写字母转成大写*/
}
简写：
font:italic small-caps bold 30px "楷体";
7.2文本样式
/*文本样式*/
color 设置文本颜色
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰 (line-through;删除线)
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影 /*text-shadow:2px 2px 5px #333;*/ 水平向右 垂直向下 模糊程度 投影颜色
vertical-align 设置元素的垂直对齐 top 上 middle 中 bottom 下
7.3 伪类样式
7.3.1超链接
<style type="text/css">
a:link{ /*链接状态*/
color: #000;
}
a:visited{/*访问过后的状态*/
color: chartreuse;
}
a:hover{/*鼠标悬停(滑过)*/
color: blueviolet;
}
a:active{/*鼠标点击未释放时候的状态*/
color: brown;
}
</style>
设置伪类样式的顺序：a:link->a:visited->a:hover->a:active
7.3.2 其他标签
<style type="text/css">
div{
background-color: #000000;
width: 100px;
height: 100px;
}
div:hover{
cursor: pointer; /*改变鼠标形状为小手*/
background-color: #ff0000;
}
</style>
八、列表样式
<style type="text/css">
ul{
list-style: none; /*去除列表自带的类型符号*/
}
</style>
九、网页背景样式
9.1 背景颜色
body{
background-color: aliceblue;
}
9.2 背景图片
background-image: url(./img/123.png);
background-repeat: no-repeat;
background-position:100px 0px; /*第一个使用英文单词，取值为：left center right ,第二个值使用英文单词，取值为：top center bottom*/;
background-size:contain; /*（h5的样式）共有四个取值。1、数字 2、百分比 3、cover:根据盒子的大小，等比扩大 4、contain：根据盒子的高度大小，等比扩大*/
简写：
background: #FF0000 url(./img/123.png) 10px 50px no-repeat;
十、小案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表样式</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
background-color: rgb(198, 208, 223);
}
.box {
width: 308px;
height: 390px;
/* background-color: #000; */
}
.box h1 {
color: #fff;
height: 50px;
line-height: 50px;
font-size: 26px;
text-indent: 20px;
background: rgb(204, 0, 0) url(img/a.png) 280px 10px no-repeat;
}
.box ul {
background-color: rgb(215, 215, 215);
list-style: none;
height: 340px;
}
.box ul li{
height: 40px;
line-height: 40px;
text-indent: 40px;
background-image: url(img/b.png);
background-repeat: no-repeat;
background-position: 278px 9px;
}
.box ul li a:link{
color: rgb(33,16,39);
text-decoration: none;
}
.box ul li a:hover{
color: #FF0000;
}
</style>
</head>
<body>
<div class="box">
<h1>全部商品分类</h1>
<ul>
<li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a> </li>
<li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a> </li>
<li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a> </li>
<li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a> </li>
<li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a> </li>
<li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a> </li>
<li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a> </li>
<li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a> </li>
</ul>
</div>
</body>
</html>
十一、盒子模型
11.1 margin
外边距：指的是盒子本身距离其他外部容器的距离。
/* margin-left: 50px;
margin-top: 30px;
margin-bottom: 100px;
margin-right: 100px; */
简写为：
margin:10px; /*1个值代表：上下左右*/
margin:10px 20px;/*2个值代表：第一个值代表上下，第二个值代表左右*/
margin: 10px 20px 30px; /*3个值代表：第一个值代表上，第二个值代表左右,第三个值代表下*/
margin: 10px 20px 30px 40px; /*4个值代表：第一个值代表上，第二个值代表右,第三个值代表下,第四个值代表左*/
11.2 padding
内边距：指的是盒子里面的内容距离盒子边框的距离（填充物）
/*
padding-left: 50px;
padding-top: 30px;
padding-bottom: 100px;
padding-right: 100px;
*/
简写为：
padding:10px; /*1个值代表：上下左右*/
padding:10px 20px;/*2个值代表：第一个值代表上下，第二个值代表左右*/
padding: 10px 20px 30px; /*3个值代表：第一个值代表上，第二个值代表左右,第三个值代表下*/
padding: 10px 20px 30px 40px; /*第4个值代表：第一个值代表上，第二个值代表右,第三个值代表下,第四个值代表左*/
11.3 border
盒子边框
border: 1px solid #8A2BE2; /*第1个值：边框的宽度，第2个值：指的是实线，第3个值：边框的颜色*/
solid：实线
dotted：点滑线
dashed：虚线
-------------------------------------------------
border-left: 1px dashed rgb(0,0,255);
border-top: 3px dashed rgb(255,0,255);
border-right: 5px dashed rgb(0,255,255);
border-bottom: 7px dashed rgb(0,255,0);
-------------------------------------------------
全写：
border-left-width: 10px;
border-left-style: dashed;
border-left-color: #FF0000;
11.4 计算盒子模型的宽度
十二、浮动
浮动元素会脱离标准的文档流，盒子中装的浮动元素导致父级盒子的高度塌陷问题，解决方式：
1、设置固定父级盒子的高度
2、在父级盒子上添加overflow:hidden;声明。
浮动元素会脱离标准的文档流，排在它下面的其他元素会认为它不存在，所以就会占用它的位置。
clear: left|both|right；
both：这个属性代表的意思是，元素不允许它的左侧或者右侧出现浮动元素。
行内元素设置外边距上下无效，只可以设置左右。
行内元素设置内边距可以设置左右，但是设置上下后会脱离标准文档流，一般不设置。
一个盒子要在父级盒子中居中，先定义自己的宽度，然后再添加margin:0 auto;
!important : 就是要使用本样式，忽略继承过来的其他样式，提升优先级。
十三、导航条案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.nav{
background-color: rgb(46, 46, 46);
height: 66px;
}
.nav_list{
width: 1200px;
margin:0 auto;
}
.nav_list ul{
list-style: none;
}
.nav_list ul li{
line-height: 66px;
padding-right: 60px;
float: left;
}
.nav_list ul li a{
color: #fff;
text-decoration: none;
}
.nav_list ul li a:hover{
text-decoration: underline;
}
.active{
color: rgb(255, 196, 43) !important;
}
</style>
</head>
<body>
<div class="nav">
<div class="nav_list">
<ul>
<li><a href="#" class="active">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">售后服务</a></li>
<li><a href="#">项目案例</a></li>
<li><a href="#">联系</a></li>
</ul>
</div>
</div>
</body>
</html>
css样式
* {
margin: 0;
padding: 0;
}
.header {
height: 48px;
background-color: #62AB00;
}
.nav {
width: 1180px;
height: 48px;
margin: 0 auto;
}
.nav ul {
width: 920px;
height: 48px;
list-style: none;
float: left;
}
.nav ul li {
height: 48px;
line-height: 48px;
float: left;
padding: 0 15px;
}
.nav ul li:hover {
background-color: #528E01;
cursor: pointer;
}
.nav ul li a {
font-size: 18px;
color: #fff;
text-decoration: none;
}
.nav .user {
width: 129px;
height: 48px;
line-height: 48px;
float: left;
background-image: url(../img/navigation.png);
background-repeat: no-repeat;
background-position: 0 15px;
}
.nav .user a{
font-size: 14px;
color: #FFFFFF;
text-decoration: none;
}
.nav .user .login{
margin-left: 25px;
}
.nav .load {
width: 131px;
height: 48px;
line-height: 48px;
float: left;
}
.nav .load .app{
width: 98px;
height: 27px;
background-color: #dce8***;
margin-top: 11px;
border-radius: 2px; /*div的四个角为圆角矩形*/
background-image: url(../img/download.png);
background-repeat: no-repeat;
background-position: 7px 5px;
background-size: 17px;
}
.nav .load .app span{
padding-left: 30px;
line-height: 27px;
height: 27px;
color: #666;
font-size: 14px;
display: block;
}
十四、定位
14.1 相对定位
position:relative; /*把此元素设置成为相对定位的元素*/
left:50px;
bottom: 50px;
设置为相对定位的元素，并没有脱离标准的文档流。
14.2 绝对定位
position: absolute;
left:0;
top:0;
绝对定义的元素脱离了标准文档流，如果要发生位置偏移的时候，参考坐标为body区域或者为父级盒子的原点（父级盒子为定位元素）。
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 300px;
position: relative;
}
.box:hover{
cursor: pointer;
}
.box:hover .icon{
display: block;
}
.icon{
position: absolute;
left: 115px;
bottom: 115px;
display: none; /*隐藏元素*/
}
</style>
</head>
<body>
<div class="box">
<div class="back"><img src="img/300.webp" ></div>
<div class="icon"><img src="img/cover_play.56974e6f.png" ></div>
</div>
</body>
</html>
14.3 固定定位
固定定位的元素脱离了标准文档流，以body做为参考发生的偏移。
position: fixed; /*固定定位*/
right: 20px;
bottom: 200px;
14.4 粘性定位
粘性定位（Sticky Positioning）是CSS中的一种定位方式，它是相对于普通文档流、相对定位和绝对定位而言的第四种定位方式。粘性定位使得元素在滚动到特定
位置时会固定在屏幕上，但仍然在文档流中占据空间，不会脱离文档流，也不会覆盖其他元素。
粘性定位的元素在未满足触发条件时（滚动到指定位置），表现和相对定位（Relative Positioning）一样，即在文档流中按照正常布局排放。当滚动到指定位置
时，元素会固定在其容器（最近的具有滚动机制的祖先元素）的特定位置上，不再随滚动而移动。当继续向下滚动时，元素会在满足触发条件的范围内继续保持固
定定位，当滚动超出触发条件范围时，元素又会回到正常文档流中的位置。
position: sticky; /*粘性定位*/
top:0;
<div class="box">
我是粘性定位的元素
</div>
