class可以重复
一对html标签中的id属性是唯一的，不可以重复
class选择器优先级高于标签选择器
优先级：id>class>标签
display:none 隐藏属性
--------------------------------------------------------------------------------
css 选择器
<!--样式标签-->
<style>
以下例子都是在head里的<style></style>内填写
--------------------------------------------------------------------------------
id选择器例子，#代指id
head里写
#div1{
}
/*div1与下方id里的名称对应*/
大括号里写完一条后有分号， background-color: red;
body里写
<div id="div1">我是个人</div>
--------------------------------------------------------------------------------
class选择器
英文字符的点代指
.c1{
background-color: black;
}
<div class="c1">11</div>
--------------------------------------------------------------------------------
标签选择器
div{
}
因为没有定义是哪个标签，所以所有div标签都应用这个css样式
<div>jnz</div>
<div>jnz</div>
<div>jnz</div>
<div>jnz</div>
<div>jnz</div>
<div>jnz</div>
--------------------------------------------------------------------------------
css style: 里面的写的就叫做css 每一个样式的间隔用； 全部相同的时候引用class
style="height: 48px;background-color: #6699CC"
--------------------------------------------------------------------------------
标签层级选择器，按照层级顺序查找，通过空格分隔
div span{
background-color: red;
}
<div>
<span>123</span>
</div>
--------------------------------------------------------------------------------
id组合选择器，通过逗号分隔
#i1,#i2{
}
id组合选择器 id属性在一个html标签中不允许出现两个相同的
<div id="i1">123</div>
<div id="i2">123</div>
--------------------------------------------------------------------------------
一般前端都是通过class来定义css样式，一般不会用id或者标签
class组合选择器
.c1,.c2{
}
class组合器 class在一个html中可以同时出现多个
<div class="c1">123</div>
<div class="c2">123</div>
也可以如下写法，div里同时引用两个class样式
.c1{
}
.c2{
width: 100px;
height: 100px;
}
<div class="c1 c2">123</div>
<div class="c1 c2">123</div>
也可以如下写法，两个div都是c1，head里只写一个就可以了
.c1{
}
<div class="c1">123</div>
<div class="c1">123</div>
--------------------------------------------------------------------------------
属性选择器，自定义一个属性，然后用中括号查找
div[jnz="金牛座"]{
}
<div jnz="金牛座">32</div>
--------------------------------------------------------------------------------
CSS优先级
标签中style优先级最高，其次在代码中就近找，也就是从下往上找
<!--head中style标签是第一处写css样式的地方-->
<style>
.c1{
}
</style>
<!--第二种通过属性的方式对标签增加css样式-->
<div class="c1" style="1</div>
<!--第三种引入css样式表-->，在样式表中的写法和在style中一样，就新建一个s.css，写
.c1{
background-color: red;
}
然后heaad里写，而不是在标签style里写
<link rel="stylesheet" href="s.css">
<!--优先级-->
<!--按照里body里所要引用class的标签开始，由内而外 由近到远-->
<style>
#i1 {
}
</style>
</head>
<body>
<div id='i1' class="c1">1</div>
</body>
如果同一标签中含有id和class，以谁最能精准定位以谁优先级最高。id>class>标签
--------------------------------------------------------------------------------
.c1{
/*宽度*/
width: 100px;
/*高度*/
height: 100px;
/*背景色*/
}
.c1{
width: 100px;
height: 100px;
/*外边框 1像素 红色 实线*/
border: 1px red solid;
/*水平居中*/
text-align: center;
/*垂直居中*/写设定的高度就好，会自动居中
line-height: 100px;
}
.f1{
width: 100px;
height: 48px;
float: left; 使下面三个块级标签向左成一行对齐，而不是每一个块级一行
}
<div class="c1"></div>
font-size font-weight
font-size:字体大小 px font-weight:字体加粗
font-weight:字体加粗 bold:粗体 700 bolder:更粗字体 lighter:更细字体 normal:默认值 400 inherit:从父类继承字体粗细
font-size 字体大小 font-weight 字体粗细 如果一个标签中含有多个样式，用分号隔开
<div style="font-size: xx-large;font-weight: bolder">金牛座</div>
<div class="c1">1</div>
浮动
<div class="f1"></div>
<div class="f1" style="</div>
<div class="f1" style="float: right"></div>
宽度可以使用百分比的方式 高度 不可以 写百分比
<div style="width: 30%;height: 48px;</div>
<!--display 可以让标签在行内 和 块级之间 自由转换
块转行内display: inline;
行内转块display: block;
既是块 又是 行内display:inline-block;
-->
<div style="display: inline;">金牛座</div>
<span style="display: block;">金牛座</span>
<span style="display:inline-block;width: 100px;height: 100px;"></span>
行内标签不可以应用 宽、高 外边距 内边距的样式，如下这行代码没有作用
<span style="width: 100px;height: 100px">123</span>
display:none为隐藏属性，有了它就不显示后面的样式
<div style="display:none;border:1px red solid;width:100px;height: 100px;"></div>
比如下面这行属性，经常会加上display:none，遮住原生样式，然后再罩上一层div显示漂亮的样式
<input type="file">
<!--外边距
不改变自身，针对外侧进行像素移动，本身大小不变
-->
<div style="width: 100%;height: 100px;border: 1px red solid">
<div style="margin-top:1px;width: 100%;height: 48px;</div>
</div>
<!--内边距
<!--改变自身，自身大小会随之变化-->
-->
<div style="width: 100%;height: 100px;border: 1px red solid">
<div style="padding-top:1px;width: 100%;height: 48px;</div>
</div>
分层.html
<input type="button" value="登录" style="cursor: pointer"> 就是鼠标移动按钮上呈小手状
<!--overflow滚动条
overflow: hidden 当图片或内容大于外层div时，自动 截取左上角图片
overflow: auto 当内容或图片小于外层div则自动隐藏滚动条
overflow: scroll 无论大小 都在增加滚动条
-->
<div style="overflow: scroll;border: 1px black solid;width: 200px;height: 200px">
<img src="http://ui.imdsx.cn/static/image/dsx_Small.jpg">
</div>
background
background 是针对背景一些样式设置， background-image：背景图片，图片大小如果小于div的大小。则无限堆叠 水平垂直都堆叠。可通过background-repeat属性对是否堆叠进行设置 no-repeat(不堆叠) repeat-y(纵向堆叠) repeat-x(横向堆叠)。 background-position 针对div设置图片展示的位置。background-position-y: 10px 纵向移动图片 background-position-x: 10px 横向移动图片。也可以不写x或y，默认第一个为x的值 第二个位y的值，background-position:10px 10px。可以通过background直接简写，background 简写 参数分别为 颜色 背景图 postion横向 纵向 是否堆叠
<div style="background-image: url('http://ui.imdsx.cn/static/image/dsx_Small.jpg');background-repeat:repeat-y;width: 200px;height: 200px;border: 1px black solid">
</div>
<div style="background-position: 1px 1px;background-repeat: no-repeat;background-image: url('http://ui.imdsx.cn/static/image/icon.png');width: 20px;height: 20px;border: 1px black solid;"></div>
--------------------------------------------------------------------------------
分层：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 48px;
position: fixed; 有了这行width: 100%就不需要了，就可以删了
top:0; 下面这三个就是配合position这个属性使用的，这个div就会固定在顶部，滚动页面也冻结显示
left: 0;
right: 0;
}
</style>
</head>
<!--postion 分层 fixed 绝对定位-->
<body style="margin: 0"> 0的话就不用加px了，这样整个样式都会贴合，没有默认的8px的边距
<div class="c1"></div>
<div style="height: 48px;width: 48px;position: fixed;right: 0;bottom: 0;"></div> 这行是右下角加个固定的
<div style="margin-top:48px;height: 1000px;width: 100%;border: 1px red solid;
金牛座 真厉害
</div> 加了margin-top:48px ，金牛座 真厉害 这行就能显示出来了，就不会被上行冻结的那行挡住了
postion 相对定位
<div style="position: relative;width:500px;height:500px;border:1px black solid;">
<div style="position: absolute;width: 100px;height: 100px;</div>
<div style="left: 0;bottom:0;position: absolute;width: 100px;height: 100px;background-color: black"></div>左下角
<div style="right: 0;top:0;position: absolute;width: 100px;height: 100px;</div>右上角
<div style="right: 0;bottom:0;position: absolute;width: 100px;height: 100px;background-color: pink"></div> 此行是相对于外边框，固定到右下角
</div>
z-index 谁的值大，谁的层级优先级显示的就高，就优先显示。最大值为999
<div style="position: relative;width: 200px;height: 200px;border: 1px red solid">
<div style="z-index: 10;position: absolute;width: 200px;height: 200px;</div>
<div style="z-index: 9;position: absolute;width: 200px;height: 200px;background-color: blue"></div>
</div>
</body>
</html>
