归纳：
-
CSS 的概述
CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一。
-
CSS 解决了什么问题?
HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。
由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。
为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。
所有的主流浏览器均支持层叠样式表。样式表极大地提高了工作效率
样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。
由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式， 然后网站中的所有元素均会自动地更新。
-
CSS 的基础语言以及页面引用
CSS 的基本语法
Css 的定义方法是: 选择器 { 属性: 值 ; 属性: 值;}
选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一个或多个值。代码示例：
div{ width:100px; height:100px; color:red }Css 页面引入的方法：
1．行内样式/内联样式：通过标签的 style 属性，在标签上直接写样式。
<div style="width:100px; height:100px; color:red "> </div> 2．内嵌样式：
通过 style 标签在网页上创建嵌入的样式。
<style type="text/css">
div{ width:100px; height:100px; color:red }
......
</style>3．外联样式：
通过 link 标签，链接到外部样式表到页面中。
<link rel="stylesheet" type="text/css" href="css/main.css"> -
Css文本及字体、链接、背景
Css文本及字体设计
常用的应用文本的css样式：
? color 设置文字的颜色，如： color:red;
? font-size 设置文字的大小，如：font-size:12px;
? font-family 设置文字的字体，如：font-family:'微软雅黑';
? font-style 设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜
? font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
? font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；如： font:normal 12px/36px '微软雅黑';
? line-height 设置文字的行高，如：line-height:24px;
? text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
? text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
? text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.continer{width: 300px;height: 300px;/*设置边框*/border: 1px solid red;/*设置文本*//*font: normal 20px/30px "仿宋";*/font-family: "仿宋";font-size: 20px;/*设置字体是否加粗*/font-weight: normal;/*设置行高(每一行的高度都为50px)*//*line-height: 50px;*//*如果只有一行内容,则可设置垂直居中 显示 且高度和元素高度一致*//*line-height: 300px;*//*设置元素水平居中显示*//*text-align: center;*//*设置文本颜色*/color: orange;/*设置文本缩进*//*text-indent: 50px;*/}a{/*设置文本的上下划线是否显示 以下设置不显示*/text-decoration: none;}</style></head><body><div class="continer">学的不仅是技术更是<a href="#">梦想</a>,在牛逼的梦想也抵不住你傻逼似的坚持.</div></body>
</html>背景设计
属性解释 ： background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项：
? background-color 设置背景颜色
? background-image 设置背景图片地址
? background-repeat 设置背景图片如何重复平铺
? background-position 设置背景图片的位置
? background-attachment 设置背景图片是固定还是随着页面滚动条滚动
实际应用中，我们可以用background属性将上面所有的设置项放在一起，而且也建议这么做，这样做性能更高，而且兼容性更好，比如：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，这里面的“#00ff00”是设置background-color；“url(bgimage.gif)”是设置background-image；“no-repeat”是设置background-repeat；“left center”是设置background-position；“fixed”是设置background-attachment，各个设置项用空格隔开，有的设置项不写也是可以的，它会使用默认值。
实例代码_02
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>实例代码_02</title><style type="text/css">.continer{width: 1000px;height: 600px;border: 2px solid black;/*1、“background:url(bg.jpg)”，默认设置一个图片地址，图片会从盒子的左上角开始将盒子铺满。*//*background: url(../img/logo1.png);*//*2、“background:cyan url(bg.jpg) repeat-x”，横向平铺盒子，盒子其他部分显示背景颜色“cyan”。*//*background:cyan url(../img/logo1.png) repeat-x;*//*3、“background:cyan url(bg.jpg) repeat-y”，纵向平铺盒子，盒子其他部分显示背景颜色“cyan”。*//*background:cyan url(../img/logo1.png) repeat-y;*//*4、“background:cyan url(bg.jpg) no-repeat”，背景不重复，背景和盒子左上角对齐，盒子其他部分显示背景颜色“cyan”。*//*background:cyan url(../img/logo1.png) no-repeat;*//*5、“background:cyan url(bg.jpg) no-repeat left center”，背景不重复，背景和盒子左中对齐，盒子其他部分显示背景颜色“cyan”。*//*background:cyan url(../img/logo1.png) no-repeat left center;*//*6、“background:cyan url(bg.jpg) no-repeat right center”，背景不重复，背景和盒子右中对齐，也就是背景图片的右边对齐盒子的右边，盒子其他部分显示背景颜色“cyan”。*/background:cyan url(../img/logo1.png) no-repeat right center;}</style></head><body><div class="continer"></div></body>
</html>-
CSS 选择器的介绍以及使用
标签选择器
标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。
*{margin:0;padding:0} div{color:red}
<div>....</div> <!-- 对应以上两条样式 -->
<div class="box">....</div> <!-- 对应以上两条样式 -->id 选择器
通过 id 名来选择元素，元素的 id 名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id 名一般给程序使用，所以不推荐使用 id作为选择器。
#box{color:red}
<div id="box">....</div> <!-- 对应以上一条样式，其它元素不允许应用此样式 -->类选择器
通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多 个类，应用灵活，可复用，是 css 中应用最多的一种选择器。
.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px}
<div class="red"> </div>
<h1 class="red big mt10"> </h1>
<p class="red mt10"> </p>层级选择器
主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元 素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
.box span{color:red}
.box .red{color:pink}
.red{color:red}
<div class="box">
<span> </span>
<a href="#" class="red"> </a>
</div>
<h3 class="red"> </h3>组选择器
多个选择器，如果有同样的样式设置，可以使用组选择器。
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
<div class="box1"> </div>
<div class="box2"> </div>
<div class="box3"> </div>伪类及伪元素选择器
常用的伪类选择器有 hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有 before 和 after,它们可以通过样式在元素中插入内容。
.box1:hover{color:red}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}
<div class="box1"> </div>
<div class="box2"> </div>
<div class="box3"> </div>-
拓展：
小练习：
实例-图片切换：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title>
<!-- <script type="text/javascript" src="../js/jquery-3.4.1.js"></script><script type="text/javascript">$(function(){$(a).click();});</script> --><style type="text/css">/* 通配符取消所有元素的内外边距 */*{margin: 0;padding: 0;}/* 设置最外层大div的宽度和高度以及相对定位,方便它的子元素设置绝对定位. */.all{height: 450px;width: 700px;margin: 20px auto;position: relative;}/* 设置包裹图片div的大小以及超出大小内容隐藏*/.big{height: 450px;width: 700px;overflow: hidden;}/* 设置图片和div层大小一致 */.big img{height: 450px;width: 700px;}/* 设置包含按钮的列表大小和绝对定位样式 */.sm ul{height: 40px;list-style: none;position: absolute;right: 10px;bottom: 10px;}/* 设置列表内元素排成一行已经间距 */.sm li{float: left;margin-left: 20px;}/* 设置按钮a元素的样式和大小 */.sm a{height: 20px;width: 20px;background-color: #ffff00;border: pink 8px solid;border-radius: 50%;}/* 设置按钮a元素鼠标经过时变化的样式,方便识别点击过 */.sm a:hover{background-color: #aa557f;border: green 8px solid;border-radius: 50%;}/* 设置a元素可见 */.sm a{display: block;}</style></head><body><!-- 设置最外层大div层 --><div class="all"><!-- 设置包裹图片的div层 --><div class="big"><!-- 用img标签插入需要的图片 --><img id="a01" src="../img/猫1.jpg" ><img id="a02" src="../img/树叶.jpg" ><img id="a03" src="../img/猫2.jpg" ><img id="a04" src="../img/猫3.jpg" ><img id="a05" src="../苏宁官网项目/img/猪.gif" ></div><!-- 设置包裹按钮的div层 --><div class="sm"><!-- 选择无序列表做多个按钮排列效果 --><ul><li><!-- 使用a标签锚点链接对应图片，实现点击切换 --><a href="#a01"></a></li><li><a href="#a02"></a></li><li><a href="#a03"></a></li><li><a href="#a04"></a></li><li><a href="#a05"></a></li></ul></div></div></body>
</html>
实例-日历：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/* 设置元素默认内外边距为0*/*{margin: 0;padding: 0;}/* 设置ul元素内鼠标样式 */ul{cursor: pointer;}/* 设置日历内容的外层div样式 */.L{width: 538px;height: 370px;position: relative;left: 350px;top: 150px;}/* 设置日历数字样式 */.ul1{list-style: none;/* border: 1px solid red; */width: 390px;position: absolute;left: 10px;top: 90px;height: 280px;padding-left: 10px;}/* 设置星期数字的样式 */.ul2{list-style: none;position: absolute;left: 10px;top: 50px;border-right: none;border-left: none;border-bottom: none;padding-left: 10px;box-sizing: border-box;}/* 设置星期数字里列表的样式 */.ul2 li{float: left;width: 55px;height: 60px;/* margin-right: 15px */;box-sizing: border-box;border:1px solid #4169E1;border-left: none;border-right: none;border-bottom: none;}/* 设置日历表中数字里列表的样式 */.ul1 li{float: left;width: 55px;height: 55px;border: 1px solid #4169E1;box-sizing: border-box;border-bottom: none;border-right: none;border-left: none;}li{text-align: center;}.li2{color: red;}.li3{color: red;}/* 设置li隐藏边框,通过鼠标经过时触发 */li:hover{box-sizing: border-box;border: 5px solid #A1877A;width: 50px;height: 55px;}/* 设置li元素7的倍数减去1的数字为红色 */li:nth-child(7n-1){color: red;}.li4{color: red;}span{font-size: 13px;}</style></head><body><div class="L" style="background: url(../img/日历.jpg) no-repeat;"><ul class="ul2"><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li><li class="li4">日</li></ul><ul class="ul1"><li>30<br><span>十九</span></li><li>1<br><span>艾滋病日</span></li><li>2<br><span>廿一</span></li><li>3<br><span>廿二</span></li><li>4<br><span>廿三</span></li><li class="li3">5<br><span>廿四</span></li><li class="li2">6<br><span>廿五</span></li><li>7<br><span>廿六</span></li><li>8<br><span>廿七</span></li><li>9<br><span>廿八</span></li><li>10<br><span>廿九</span></li><li>11<br><span>初一</span></li><li class="li3">12<br><span>初二</span></li><li class="li2">13<br><span>初三</span></li><li>14<br><span>初四</span></li><li>15<br><span>初五</span></li><li>16<br><span>初六</span></li><li>17<br><span>初七</span></li><li>18<br><span>初八</span></li><li class="li3">19<br><span>初九</span></li><li class="li2">20<br><span>初十</span></li><li>21<br><span>十一</span></li><li>22<br><span>十二</span></li><li>23<br><span>十三</span></li><li>24<br><span>十四</span></li><li>25<br><span>十五</span></li><li class="li3">26<br><span>十六</span></li><li class="li2">27<br><span>十七</span></li><li>28<br><span>十八</span></li><li>29<br><span>十九</span></li><li>30<br><span>廿十</span></li><li>31<br><span>廿一</span></li><li>1<br><span>元旦</span></li><li class="li3">2<br><span>廿二</span></li><li class="li2">3<br><span>廿三</span></li></ul></div></body>
</html>