目录
这篇整合了之前所有的笔记各部分案例（其实就是把之前的东西复制粘贴到了一篇上去），字多点是不是阅读量会不会高一点啊hhh，也算方便查看吧
选择器
标签选择器
<style>
h1 {
color: rgb(255, 0, 0)
}
</style>类选择器
在标签中加入class=""
<style>
.red {
color : red
}
.h-xiaogang {
color: green
}
</style>
<body>
<ul>
<li class="red">huxiaogang</li>
<li class="h-xiaogang">hurunjie</li>
</ul>
</body>
id选择器
id选择器只能被调用一次
<style>
#red{
color: red;
}
</style>
<body>
<div id="red">id选择器只能被调用一次</div>
</body>统配符选择器
会把所有的标签变成红色 可以清楚所有标签的内外边距
<style>
*{
color: red;
}
</style>
</head>
<body>
<ul>
<li class="red">会把所有的标签变成红色</li>
<li class="h-xiaogang">可以清除所有标签的内外边距</li>
</ul>
</body>后代选择器
<style>
ol li {
color: pink;
}
</style>
<body>
<ol>
<li>我是ol的孩子</ol></li>
</ol>
<ul>
<li>我是ul的孩子</li>
</ul>
</body>子选择器
<style>
.nav > a {
color: antiquewhite;
}
</style>
<body>
<div class="nav">
<a href="#">我是儿子</a>
<p>
<a>我是孙子</a>
</p>
</div>并集选择器
<style>
p1,div,ol{
color: pink;
}
</style>
<body>
<p1> 宋t </p1>
<div>wxhn</div>
<ul>
<ol>你说是不是呢</ol>
</ul>
</body>
</html>链接伪类选择器
改变链接的样式
<style>
a:link{
color:red
}
/* 选择所有未被访问的链接 */
h2:visited{
color:green
}
/* 选择所有已被访问的链接 */
h3:hover{
color:orange
}
/* 选择鼠标指针位于其上的链接 */
h4:active{
color:blue
}
/* 选择活动链接（鼠标按下未tan'qi */
</style>为了确保生效 按照LVHA顺序写
在实际开发中的写法，先给a标签设计一个样式，再给链接设计一个样式
<style>
a {
color: hover;
}
a:hover{
color:red;
}
</style>focus伪类选择器
获取光标所在的表单元素
光标在哪个表单里就获取哪个
<style>
input:focus{
background-color: red;
}
</style>字体属性
family：字体 size：大小 weight：粗细 sytle:形式（加租 倾斜）
<style>
h1 {
font-family: "Microsoft YaHei";
}
P {
font-size: 20px;
}
/* <!-- 谷歌浏览器默认的大小时16px --> */
p {
font-weight: 100;
}
p {
font-style: italic;
}
</style>
复合属性
可以写在一起 有顺序 font :font-style font-weight font-size/height font-family 不需要的设置可以省略，但是必需保留size和family
<style>
p {
font: italic 100 16px "microsoft yahei";
}
</style>字体属性：下划线，行间距，首行缩进
<style>
div {
text-decoration: underline;
/* 下划线 */
}
div {
text-indent: 2em;
/* 首行缩进 一个em就是一个当前文字的大小*/
}
div{
line-height: 26px
/* 行间距 */
}
</style>样式表
外部样式表
需要创建一个css文件然后将东西插入
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内部样式表，行内样式表 外部样式表</title>
<link rel="stylesheet" href="css_3.1.css">
</head>
<body>行内样式表
<h1>《面朝大海，春暖花开》</h1>
<p style="color:aqua">从明天起，做一个幸福的人</p> 元素显示模式
什么是元素显示模式
元素以什么方式进行显示，比如div自己占一行，span一行可以有多个，这样html元素一般分为块元素和行内元素
块元素
块级元素有 h p div ul ol li等
块级元素特点
1.自己独占一行
2.可以给他设置宽度和高度，内外边距都可以控制
3.里面还可以放行内元素或块级元素
注意:文字类元素内不能使用块级标签，就像p1，h1等标签中不能放div
行内元素
行内元素有a,strong,span等
特点
1.行内元素可以在一行上，一行可以显示多个
2.高宽的设置是无效的,默认的宽度就是它本身的宽度
3.行内元素只能容纳文本或其他的行内元素
注意:链接里面不能再放链接,但是a标签里面可以放块级元素
行内块元素(特殊)
定义:同时具有块元素和行内元素特点,比如img元素,td元素 input元素 <br/>
元素显示模式的转化
display: block; 行内元素转化为块元素
display: inline; 块元素转化为行内元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素显示模式的转化</title>
<style>
a {
width: 250px;
height: 250px;
background-color: pink;
display: block;
}
div {
background-color: blueviolet;
display: inline;
}
</style>
</head>
<body>
<a>
比如再特殊情况下给a链接设置长度宽度
</a>
<div>我是块级元素</div>
<div>我是块级元素</div>
</body>
</html>snipaste工具的使用
快捷键
截屏:F1
截屏并自动复制:Ctrl+F1
自定义截图:Shift+F1
贴图:F3
隐藏/显示所有贴图:Shift+F3
切换到另一贴图组:Ctrl+F3
更多详情请百度
背景设置
背景颜色
background-color
插入背景图片
background-image: url(文件路径)
注意页面元素既可以添加背景颜色又可以添加背景图片,只不过背景图片会压住背景颜色
背景图像平铺
background-repeat:no-repeat;
background-repeat:repeat-x;
background-repeat:repeat-y;
background-repeat:no-repeat;背景图像位置
background-position: x y; 后面可以跟方位名词或精确名词 */
background-position: center top;
/* 写方位名词和顺序没有关系 若只写了一个,则另一个默认居中对齐*/
background-position:20px 50px ;
background-position: 20px center;背景图像固定
background-attachment: scroll;scroll为背景随对象内容滚动 fixed为背景图像固定
背景图片的综合属性
background: black url() no-repeat fixed center top; 背景颜色 图片地址 背景平铺 背景图像滚动 图片位置
css三大特性
层叠性
给同一个标签 用两个相同的选择器设置了相同的属性，比如都设置了颜色，哪个样式离结构进，执行哪个，就近原则
下面的代码a标签最后会变成蓝色
<style>
a {
color: red;
}
a {
color: blue;
}
</style>
<h2>层叠性</h2>
<a>
给同一个标签 用两个相同的选择器设置了相同的属性，比如都设置了颜色，哪个样式离结构进，执行哪个，就近原则
</a>继承性
假设给div指定一个样式，div里面的标签也会继承这个样式
行高的继承
<style>
h2{
color:antiquewhite!important;
font:12px/1.5 "Micorsoft yahei"
/* 这个1.5就是当前元素文字大小的1.5倍 所有当前h2的行高为21像素 */
}
</style>颜色可以继承，字体行高和大小也可以继承，代码书写如上
优先级
<a class="qqqqq" id="qqq">选择器不同有权重
元素选择器<类选择器,伪类选择器<id选择器<行内样式表<important
注意：继承的权重是0 即给单独给子标签指定一个样式，则显示指定的样式，此时不会继承
a链接浏览器默认指定一个蓝色的样式 有下划线 a{color:blue};
越往后权重越大
注意：复合选择器在一起也遵循权重，哪个合起来的权重大就显示哪个，但是权重相加不能进位，例如十个h加起来是0,0,0,10 永远也超不过一个0,0,1,0
边框 border
1.边框样式 border-style:solid 实线边框 dashed 虚线边框 dotted点线边框
2.边框颜色 border-color
3.复合写法：border: 1px solid black 简写没有顺序
4.给上下边框分别设置 border-top border-bottom right left
边框会影响盒子实际使用的大小1.测量盒子的大小不量边框，如果测量是时候包含了边框，则需要width/height减去边框
表格的边框
给表格设置边框不仅需要给表格(<table>)设置，还需要给单元格设置(<td>)
通过上面的方法设置边框后，两个单元格的边界时黏在一起的，通过border-collapse 合并相邻的边框
内容 content
即书写在盒子里面的内容
内边距 padding
1.padding-top bottom right left
2.复合写法：后面有一个值代表上下左右都有
有两个代表上下 左右
三个代表上 左右
四个代表上右下左
2.padding影响盒子大小，会把盒子撑大，用width和height减去多出来的内边距大小为原来盒子大小
3.padding不会撑开盒子的情况：如果盒子本身没有指定width和height属性，则padding不会撑开盒子大小
外边距 margin
1.margin-yop bottom left right
2.margin和padding的简写一样
3.块级盒子水平居中对齐(见上面的style)
<style>
.huhuhu {
background-color:pink;
width: 300px;
height: 300px;
margin:0 auto;
}
</style>
<div class="huhuhu"></div>输出结果 
4.行内元素和行内块元素水平居中：text-align:center
5.相邻块元素的合并：当上下两个块元素相遇时，如果上面的元素有下边距，下面的元素有上边距，题目之间的垂直间距不是bottom与top的和，而是去两者中较大的
6.嵌套块元素垂直外边距的塌陷：如果两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值
<style>
.hu{
width:400px;
height:400px;
background-color: purple;
margin-top: 50px;
}
.huhu{
width:200px;
height:200px;
background-color: pink;
margin-top:100px;
}
</style>
<div class="hu">
<div class="huhu"></div>
</div>如果我们有如图所示的一个盒子，我们想要的输出结果是子div元素可以直接向下移动，从而有居中的效果，我们加了这样一句代码margin-top:100px;
结果却是父div整个下降了100像素，这样的情况就叫嵌套块元素垂直外边距的塌陷
我们可以用这三个方法解决
border:1px solid transparent;
/* 为父元素定义一个透明的上边框 */
padding:1px;
/* 为父元素定义一个内边距 */
overflow:hidden;
/* 隐藏浮动 */
清除内外边距
/* css的第一句代码 */
* {
padding:0;
margin:0;
}行内元素只设置左右内外边距，不要设置上下内外边距，但是转化为块级元素就可以了
圆角边框
border-radius
<style>
.hu {
width:100px;
height:100px;
background-color:pink;
border-radius: 50px 50%;
/* radius越大，圆角弧度越大 */
/* 当半径设置为正方形盒子宽度或高度的一半，就可以变为圆形 */
/* 如果要设置圆角矩形，则半径设置为高度的一半 */
}
.huhu {
width:100px;
height:100px;
background-color:pink;
border-radius: 50px 10px 20px 40px;
/* 顺时针设置圆的半径，可以设置不同角度的盒子 */
/* 只有两个数据则是对角线相等 */
}
</style>
<body>
<div class="hu"></div>
<div class="huhu"></div>
</body>效果图
背景阴影
<style>
.huhuhu{
width:300px;
height:300px;
background-color: pink;
margin:100px auto;
box-shadow: 10px 10px 10px 10px rgba(0,0,0,.3);
/* 水平阴影的位置 垂直阴影 模糊距离（虚实） 阴影尺寸 阴影颜色 */
/* 阴影不占用空间 */
}
</style>
<body>
<div class="huhuhu"></div>
</body>效果图
文字阴影
<style>
a {
width:100px;
height:100ox;
background-color: pink;
text-shadow: 5px 5px 6px rgba(0,0,0,.3);
}
</style>
<a>qqqqqqqqqqqq</a>
效果图
浮动
为什么需要浮动
标准流当中的标签通常纵向排列，有的情况没有办法完成
网页布局第一准则：多个块级元素纵向排列找标准流，横向排列找浮动
浮动的特性
浮动元素会脱离标准流
浮动的盒子不再保留原来的位置，比如有两个盒子，给第一个元素加了做浮动之后，第二个盒子会到第一个盒子的位置上去
浮动元素一行显示
如果多个盒子都设置了浮动，则他们会按照属性值一行内显示并且顶端对其排列，但是如果父级宽度装不下这些盒子，多出来的盒子会另起一行对其
浮动元素会具有行内块元素的特性
行内元素有了浮动则不需要转换就可以直接给高度和宽度
如果块级盒子没有设置宽度，默认宽度和父级一样宽。添加浮动后，它的大小跟内容来决定
伪类约束浮动元素位置
我们先用标准流的父元素上下排列，之后内部子元素采取浮动排列左右
浮动盒子注意点
1.一个盒子里面有多个盒子，其中一个盒子浮动了，其它兄弟也应该浮动
2.浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流
比如有三个盒子第一个盒子不浮动，第二个盒子浮动，则第一个盒子不动，第二和盒子不动，第三个盒子压住第二个盒子
清除浮动
为什么要清除浮动
由于父级盒子很多情况下不方便给高度，但是子盒子浮动又不占位置，最后父级盒子高度为0，就会影响下面的标准流盒子
清除浮动方法
额外标签法
找到最后一个浮动的元素 加上应该clear:both 这个标签必须是块级元素
overflow
给父级元素增加overflow:hidden(外边距合并时也用此代码)
after伪元素
<style>
.clearfix:after {
content: "";
display: block;
height :0;
clear:both;
visibility:hidden;
}
.clearfix {
*zoom: 1
}
</style>双伪元素法
.clearfix:before,.clearfix:after{
content: "";
display: block;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom:1;
}bootstrap案例
当学完了css的基础之后我们直接写各式各样的盒子再布局显然是非常麻烦的，我们可以通过BootStrap上面现有的代码来帮助我们快速进行页面布局
栅格系统示例
我们可以利用BootStrap里面的栅格系统，再你定义一个大盒子之后，将大盒子里面的区域细分
栅格系统只是一个实例，里面有很多样式和组件
网页内容界面
我们可以利用里面的媒体对象，栅格系统，媒体对象，直接创建两个部分
里面的出来head中引入bootstrap之后的div中的内容都是复制粘贴，第一个class为表头，其中<div class="container clearfix">是创建了一个居中清除浮动的大盒子把下面的栅格系统放进去
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="static/plugsin/bootstrap-3.4.1-dist/css/bootstrap.css">
</head>
<body>
<div class="navbar navbar-default">...
</div>
<div class="container clearfix">......
<div class="col-sm-9">...
<div>
<div class="col-sm-3">...
</div>
</body>输出效果 
用户登录界面
下面就是简单引用了表格
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="用户登录系统" href="static/plugsin/bootstrap-3.4.1-dist/css/bootstrap.css">
<style>
.hu{
width: 500px;
height:500px;
margin-left:auto;
margin-right:auto;
margin-top:100px;
/* background-color:pink; */
}
h1 {
text-align:center;
}
</style>
</head>
<body>
<div class="hu">
<h1 class="huhu">用户登录系统</h1>
<form>
<div class="form-group">...
</div>
<div class="form-group">...
</div>
<div class="form-group">...
</div>
<div class="checkbox">...
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
Font-Awesome图标库使用
BootStrap中的图片有的时候不能满足我们的使用，这样就可以使用另一个图标库
还可以给你的图标加上颜色
<i class="fa fa-reorder" aria-hidden="true" style="color:red"></i>
在图片标签后面加一个样式，就可以添加颜色
