一 . CSS定义
如何显示HTML元素，给HTML设置样式，让它更加美观，当浏览器读到一个样式表，它就会按照这个样式来对文档进行格式化(渲染)。每个CSS样式由两个组成部分：选择器和声明，声明就是属性和属性值，每个声明用分号结束。
二 . CSS引入方法
1.CSS引入的方法很简单，就是在<title>标签下引入<style>标签，然后在<body>标签下使用上面类型标签的属性，打开pycharm右上角本机有的网页即可运行。
2.CSS有多种选择器，根据不同的需求来选择相对应的选择器
3.元素选择器：p{color:"red";} ，找到页面下所有p标签
ID选择器：#i1{backgroud-color:red;} ，#号表示id属性，后面的i1表示id属性的值，找到所有i1标签
类选择器：.c1{font-size:14px;} . 表示class属性，c1表示class的值 ，找到所有类值是c1的标签
p.c1{color:red;} 找到所有p标签里面含有class属性的值为c1的p标签，注意他俩之间没有空格
通用选择器：* {color:white;} ，* 表示选中所有标签
注意：样式类名不要用数字开头（有的浏览器不认），现在也有很多浏览器做了优化的，最好不要使用噢！标签中的class属性如果有多个，要用空格分隔。
4.组合选择器之后代选择器（子子孙孙）：li a{color:green;} * li 内部的a标签设置字体颜色
组合选择器之儿子选择器（只找儿子）：div>p{font-family:"Arial Black";} * 选择所有父级是<div>元素的<p>元素
组合选择器之邻居选择器：div+p{margin:5px；} ，选择所有标签<div>元素的<p>元素
组合选择器之弟弟选择器：#li~p{border:2px solid rdyalblue;} , 选择*li后面所有的兄弟p标签
5.属性选择器（通过属性或者属性的值来查找，这个属性是我们自己定义的，不是id啊class啊这种html自带的属性）
div[title="hello"] {color:blue}
6.分组和嵌套
分组（多个选择器逗号分隔）
当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
div,p{color:red;} div标签和p标签统一设置字体为红色
嵌套（多种选择器可以混起来使用）
. c1 p{color:red;} c1类内部所有p标签设置字体颜色为红色
7.伪类选择器（比较特殊，CSS3版本新加的特性）
/* 未访问的链接 */
a:link {
color: #FF0000
}
/* 已访问的链接 */
a:visited {
color: #00FF00
}
/* 鼠标移动到链接上 */ 这个用的比较多
a:hover {
color: #FF00FF
}
/* 选定的链接 */ 就是鼠标点下去还没有抬起来的那个瞬间，可以让它变颜色
a:active {
color: #0000FF
}
/*input输入框获取焦点时样式*/
input:focus { #input默认的有个样式，鼠标点进去的时候，input框会变浅蓝色的那么个感觉
#outline: none;
background-color: #eee; #框里面的背景色
}
8.伪元素选择器（通过CSS来造标签，不推荐使用）
first-letter ：常用给首字母设置特殊样式
# 将p标签中的文本的第一个字百年颜色变大小
p:first-letter{font-size:48px; color:red;}
三 . 选择器的优先级
1.CSS继承
上面的选择器总结来说，当选择器相同的时候，按照顺序来看CSS样式，谁最后就按谁渲染。
继承是CSS的一个主要特征，它是依赖于祖先到后代的关系，继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于某个特定的元素，还可以应用于它的后代，例如一个body定义了字体颜色值也会应用到段落的文本中。
body{color:red;}
！！！内联的意识是把CSS样式写在标签里面
其他的权重：即使是11个class相加起来大于id的100权重，也还是id生效，也就是说，不会仅为，class组合起来也无法超过id的权重。
除此之外可以在选择器颜色后面添加important方式来强制让样式生效，不讲道理的操作，也是最吊的，但不推荐使用，不到万不得不可以使用。
2.CSS属性相关
CSSwidth属性可以为元素设置宽度，height属性可以为元素设置高度，块级标签才能设置宽度，内联标签的宽度由内容来决定，是设置不了的。
也可以设置文字字体：font-family
字体大小：font-size:14px
字重（粗细）：font-weight
文本颜色：
文字对齐：text-align规定元素中的文本的水平对齐方式，left左边对齐，right右对齐，center居中对齐，justify两端对齐
文字装饰：text-decoration
首行缩进p{text-indent:none:32px;} 一个缩进默认大小为16px
四 . 边框
边框属性1.border-width 宽度 2.border-style 样式 3.border-color 颜色
#i1{border:2px solid red;}
设置边框
#i1 {
border-top-style:dotted;
border-top-color: red;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
}
具体详见：https://www.cnblogs.com/clschao/articles/10082587.html?tdsourcetag=s_pctim_aiomsgCSS