CSS

二、CSS样式
1.CSS:Cascading Style Sheets,层叠样式表，用于设置HTML元素的样式信息。

2.多个样式可以层层覆盖叠加，如果不同的css样式对同一html标签进行修饰，样式有冲突的
应用优先级高的，不冲突的共同作用

3.作用：
美化界面元素
外部的CSS样式表可以实现CSS样式的复用
样式代码和HTML标签代码分离，后期维护方便

4.导入CSS样式信息的方式：
方式一：内联方式：通过在要设置CSS样式的标签上添加style属性，写上样式信息

方式二：内部方式：在head标签中添加

方式三：外部引入方式：在外部文件夹中创建一个以.css后缀名的CSS文件，在该文件中写入CSS样式信息，然后在HTML的标签中通过标签引入。
当前Module创建css文件夹，在css文件夹中创建set.css样式文件，写上样式信息

5.CSS的语法：
选择器 {属性:值;属性:值;属性:值…}

选择器：你要进行CSS样式更改的HTML元素
属性：待更改的CSS样式属性
值：样式值
属性和值之间通过":“分割，多个CSS样式属性之间通过”;"

6.选择器
(1)通配符选择器："*"匹配所有HTML元素
*{
margin:0px;
padding:0px;
}

(2)标签选择器：直接通过HTML的标签名来选择某些HTML元素来进行CSS的修改
div{
width:300px;
height:300px;
border:2px solid red;
}

(3)id选择器：通过给HTML元素添加唯一的id属性，通过"#id名"来选中该元素

我是第二个DIV

#secdiv { color:#4323FF; }

(4)类(class)选择器：通过给HTML元素添加class属性，通过".class名"来选择该元素，可以给同一个HTML元素添加多个class来修饰

我是第三个DIV

.one {
width:200px;
height:200px;
background-color:#FFDC3E;
}

.two {
color:#4323FF;
}

(5)层级选择器：
后代选择器：语法：父元素选择器 后代元素选择器
div.one div{
background-color:red;
}

子代选择器：语法：父元素选择器>子代元素选择器
div.one>div{
background-color:red;
}

下一个相邻兄弟选择器：语法：sibling+sibling
#myli+li{
color:red;
}

后面所有的兄弟选择器：语法：sibling~sibling
#myli~li{
color:red;
}

(6)属性选择器：
语法：
I.选择器[属性]
II.选择器[属性=值]

input[type=“text”]{
border:2px dashed blue;
}

(7)伪类选择器：
a:link{ //静止状态
color:red;
}

a:hover{ //鼠标悬停状态
color:green;
}

a:active{ //激活状态
color:yellow;
}

a:visited{ //访问过后的状态
color:blue;
}

7.属性：
/*
1.文字属性：
*/
.main{
font-family:“微软雅黑”;/设置字体/
font-size:20px;/设置字体大小/
font-style: italic;/设置字体样式，normal：正常的样式 italic：斜体/
font-weight: 100;/设置字体的粗细，blod:粗，lighter:细，还可以设置100~900的数字来表示粗细/
}

/*
2.文本属性：
/
.two{
width:1000px;
height:40px;
border:1px solid #ccc;
color:red; /字体颜色/
/text-indent: 100px; 文字的缩进/
text-decoration: line-through;/文本的装饰，none:无装饰，underline:下划线，overline:上划线，line-through:删除线/
word-spacing: 40px;/单词间距/
letter-spacing: 30px;/字符间距/
text-align: right;/文字的位置：center:居中，left:居左，right:居右/
line-height: 40px;/行高:将行高设置为该元素的高度，则内容自动居中/
}
a{
color:deepskyblue;
text-decoration: none;
}
/
3.背景属性
/
.three{
width:500px;
height:300px;
border:1px solid #ccc;
/background-color: red;!设置背景颜色!/
background-image:url(“img/icons.png”);/设置背景图片，url中为背景图片的地址/
background-repeat: no-repeat;/设置背景图片的重复情况/
background-size:cover;/设置背景图片大小，auto:图片原来的大小，cover:使图片适应背景大小/
}
#four{
width:16px;
height:16px;
background-image:url(“img/icons.png”);/设置背景图片，url中为背景图片的地址/
background-repeat: no-repeat;/设置背景图片的重复情况/
background-position:-32px 0px;/图片的定位，第一个值为水平位置，向左为正数，第二个值为垂直位置，向上为正/
}
/
4.列表属性：

/
ul{
list-style-type: disc;/列表类型样式：decimal:数字，circle:空心圆，disc:实心圆，默认/
list-style-image: url(“img/p1.png”);/设置列表样式的图片/
list-style-position: outside;/设置样式图片的位置：inside:内部，outside:外部!/
}

/*
4.显示属性
*/
.five{
width:300px;
height: 300px;
background-color:blue;
display: none;/显示属性，none:隐藏，block:以块级元素显示，inline:以行级元素显示/
}

例子：attrtest.html

5.边框：
#myspan{
display:block;
width:200px;
height:200px;
border:1px dashed #ccc;
/*
border:边框，接收三个属性值：第一个表示粗细，第二个表示线条样式
:solid–实线；dotted:点；dashed–虚线，第三个表示线条颜色*/
}

6.浮动：
语法：属性：float,值：left–向左浮动,right–向右浮动
当元素向左或向右浮动后，它会向左或向右紧靠着它的父容器的边框或紧靠着另一个浮动元素的边框，浮动元素会脱离文档流，在文档流中可以完全把它当作不存在的元素而浮动起来。

7.清除浮动：
属性：clear
属性值：
both:两边都不允许浮动
left:左边不允许浮动
right:右边不允许浮动

例子：menus.html

8.定位的属性
(1)相对定位：position:relative
相对自己原来的位置进行移动，通过left,right,top,bottom来相对自己原来的位置移动，但是它原来占用的空间将保留

(2)绝对定位：position:absolute
相对于自己已经定位的靠的最近的祖先元素的位置进行移动，通过left,right,top,bottom来相对自己已经定位的父元素进行移动，一直追溯到"body"。绝对定位的元素会脱离主文档流，在主文档流中就像它不存在一样。

(3)固定定位：position=fixed
类似于absolute,只是它的参考物是窗口。

例子：position.html

9.盒子模型：
见图：盒子模型.png