Java EE day08学习总结
今天主要学习CSS
思维导图：
一.CSS入门
1.什么是CSS
css又被称之为层叠样式、级联样式表，是一个用于来美化网页的一种语法
2.CSS优点
（1）内容和表现进行了分离
（2）网页的表现统一，易于维护
（3）具备非常丰富的样式，使得页面的布局更加的灵活
（4）极度的减少了网页的代码量,增加了网页的加载速度，节省了服务器资源和带宽。
二．CSS的基础语法
CSS的基础选择器
1.标签选择器
标签名{
属性名:属性值;
}
------
h1{
color: red;
}
标签选择器的特点:
标签选择器选择的是指定页面的所有相关标签，只要符合这个标签就全部生效。
2.类选择器
类名{
属性名:属性值;
}
------
.demo{
color: red;
}
<p class="demo"></p>
类选择器的特点:
调用哪个class,则哪个class生效
（1）一个页面当中允许定义N个class
（2）一个标签允许定义多个class
（3）一个页面当中允许出现N个同名的class
（4）class是存在命名规则
（5）不能使用数字进行开头
（6）不能使用特殊符号进行类名的定义
（7）一般不建议使用中文
（8）一般不建议使用关键字(标签名、属性名)
3.ID选择器
ID名{
属性名:属性值;
}
------
#demo{
color: red;
}
<p id="demo"></p>
ID选择器的特点:
（1）一个ID选择器只能在一个页面被调用一次，如果是2次以上使用的话，就违背了W3C的标准，以后JS继续调用就会出现问题。
（2）一个标签允许同时定义类和ID，并且可以同时调用且生效
（3）一个标签只能定义一个ID
4.通配选择器
*{
属性名:属性值;
}
------
*{
color: red;
}
通配选择器的特点:
（1）页面当中的所有选择器都会生效，但是优先级最低
（2）除非特殊原因，否则不推荐使用，因为这种方式是生效整个页面的所有类型的选择器，极大的增加服务器的负担
5.选择器的优先级问题
ID选择器 > 类选择器 > 标签选择器 > 通配选择器
三．复合选择器
所谓的复合选择器其实就是两个以上的选择器进行混合使用。
1.交集选择器
标签名类(ID)选择器{
属性名:值;
}
------
<style type="text/css">
p.t3{
color: red;
}
</style>
<p>TOOBUG1</p>
<h1>TOOBUG2</h1>
<p class="t3">TOOBUG3</p>
<h1 class="t3">TOOBUG4</h1>
交集选择器的特点:
要求既要满足是某一个标签，同时还要满足是某一个类或者ID选择。
2.后代选择器
选择器 选择器{
属性名:值;
}
------
<style type="text/css">
.div_1 div{
color: red;
}
</style>
<div>
你好1
</div>
<!-- ------------ -->
<div>
<div>
你好2
</div>
</div>
<!-- ------------ -->
<div class="div_1">
<div>
<div>
你好3
</div>
</div>
</div>
后代选择器的特点:
（1）使用后代选择器的前提条件一定是存在嵌套关系
（2）父选择器在前，后代选择器在后
（3）存在无限隔代的问题
（4）后代选择可以任意选择器的*组合
3.子代选择器
选择器>选择器{
属性名:值;
}
------
<style type="text/css">
div>span{
color: red;
}
</style>
<div class="d1">
<p>
<span>TOOBUG1</span>
</p>
</div>
<div class="d1">
<span>TOOBUG2</span>
</div>
子代选择器的特点:
（1）使用子代选择器的前提条件一定是存在嵌套关系
（2）父选择器在前，后代选择器在后
（3）不能存在任何隔代的问题
（4）子代选择可以任意选择器的*组合
4.并集选择器
选择器,选择器,选择器,选择器{
属性名:值;
}
------
<style type="text/css">
h1,div,.d_1,p{
color: red;
}
</style>
<h1>h1</h1>
<div>div</div>
<div class="d_1">div2</div>
<p>p</p
并集选择器的特点:
（1）并集选择器可以任意选择器无限混搭
（2）并集选择器可以将多个选择器实现同一种效果
四．样式表的三种导入方式
1.行内样式表
定义在标签当中，只针对该标签本身生效，不影响其他标签
<h1 style="color: #7FFFD4;">不同样式的导入方式</h1>
2.内部样式表
定义在head当中，只针对该HTML本身生效，不影响其他HTML文件
<head>
<style type="text/css">
h1{
color: red;
}
</style>
</head>
<h1 style="color: #7FFFD4;">不同样式的导入方式</h1>
3.外部样式表
定义在一个独立的css文件当中，可以影响任何的HTML文件,只需某一个HTML对他进行导入即可。
<head>
<link rel="stylesheet" href="css/demo06.css" />
</head>
<h1 style="color: #7FFFD4;">不同样式的导入方式</h1>
4.导入样式需要注意的问题:
（1）内部样式表一定是写在head当中，并且写好<style type="text/css">
（2）外部样式表是独立的，不需要在独立文件写任何无关于样式的代码，包括<style type="text/css">的本身，并且在谁需要导入的HTML文件的head进行<link rel="stylesheet" href="css/demo06.css" />的导入。
（3）样式表的优先级别为行内样式 > 内部样式 > 外部样式
（4）在实际开发当中，则尽量绝对优先使用外部样式表,如有特殊情况(例如选择器冲突需要提高优先级)才可能考虑使用内部样式，但也尽量避免。行内样式因为紧密的将颜色和内容捆绑，请尽量杜绝使用。
5.span标签
在很多时候，我们需要给一个文字进行一些样式的修饰，这个时候我们就需要使用一个标签对文字进行包裹，但是如果使用的是h标签或者p标签等等，那么这个文字就会受标签自己附带的一些属性干扰，这个时候呢，我们就可以使用span标签，span是一个用于修饰文字的标签，这个标签本身没有任何的效果，非常的赶紧纯粹，但是他可以应用任何修饰文字的CSS属性。
6.字体CSS修饰
- font-family:设置的是字体的类型
- font-size:设置的是字体的大小
- font-style:设置是字体的风格
- font-weigth:设置字体的粗细
- font:字体设置连写(风格 粗细 大小 类)
/* 设置字体大小 */
font-size: 30px;
/* 设置字体的风格 */
font-family: "仿宋";
/* 设置字体的风格 */
font-style:normal;
/* 设置字体的粗细 */
font-weight: bold;
7.字体的连写
关于字体的连写，要求顺序必须一致，可以少些 但是不能打乱顺序(但是字体的大小和类型为必写）
8.文本样式
/* 文本颜色 */
color:red;
/* 文本水平对齐 left 左 |center 中 | right右*/
text-align:right ;
/* 文本的首行缩进 */
text-indent:2em ;
/* 文本的行高 */
line-height:30px ;
/* 文本的修饰 none 默认 | underline 下划线 | overline 上划线 | line-through 删除线*/
text-decoration:line-through ;
9.DIV标签
div标签跟span标签其实都是一个本身不具备任何功能和效果的标签。
只不过span一般用于来修饰一段文字，而div一般是作为布局使用，他是一个容器。
div{
/* 设置高度 */
height: 300px;
/* 设置宽度 */
width: 300px;
/* 设置边框 */
border: 1px solid red;
color: seagreen;
}
-----
<div>
我是一个div
</div>
网页背景
/* 背景颜色 */
background-color: firebrick;
/* 设置网页的背景图像 url里面写入背景图片的位置*/
background-image: url(d.jpg);
/* 设置网页的背景重复 */
/* 设置网页的x轴平铺方式 repeat 平铺| no-repeat 不平铺 */
/* background-repeat-x: no-repeat; */
/* 设置网页的y轴平铺方式 repeat 平铺| no-repeat 不平铺 */
/* background-repeat-y: no-repeat; */
/* 设置网页的x,y轴平铺方式 repeat 平铺| no-repeat 不平铺(第一个参数为x,第二个参数为y) */
background-repeat:no-repeat;
/* 设置网页背景的定位 */
/* 设置网页的x轴定位 */
/* background-position-x:80px; */
/* 设置网页的y轴定位 */
/* background-position-y:80px; */
/* 设置同时网页的x,y轴定位 */
background-position:80px 80px;
10.列表样式
/* 处理列表的样式 */
list-style-type:none;
五．CSS其它内容
1.CSS的层叠性:
当一个标签、类、ID被选择器调用，且这个选择器出现了冲突，根据CSS的层叠性在同等优先级下永远只会调用最后面的选择器样式，跟CSS的调用顺序无关。
2.CSS的继承性:
在存在嵌套关系的情况下,子标签没有设置某一个样式，而父标签存在某一个的样式，父标签的样式会继承到子标签当中，但是要注意两个问题，有一些标签本身就存在一些默认样式，这种情况下，父标签的样式就不会被继承下来：
（1）a标签本身存在了样式和下划线，那么父标签的颜色和下划线就不会被继承
（2）h标签本身存在的字体加粗和字号大小，那么父标签的字体加粗和大小的样式就不会被继承下来
（3）行内选择器 > ID选择器 > 类选择器 > 标签选择器 > 默认样式
六．标签的元素分类(标签对于浏览器的显示方式):
1.块级元素:
举例:p、h、li
特点:
（1）独自占用整行
（2）可以允许设置高和宽度
（3）如果存在嵌套，子元素没有定义宽度的情况下会默认参考父级元素
2.行内元素:
举例:span、a、em、del...
特点:
（1）不独占一行，允许在同一行显示
（2）不能设定高和宽
（3）实际的宽度是由内容进行撑开
3.行内块元素:
举例:img、input
特点:
（1）不独占一行，允许在同一行显示
（2）可以设定高和宽
七.HTML的标准流:
1.其实就是HTML默认的流向方式，从上往下，从左往右。
浮动:float: left | right
2.特点:
（1）浮动的元素不会继续占据原来的位置(脱离标准流)
（2）浮动元素可以允许在同一行显示(会默认的将一个元素类型转换成行内块)
因为元素的浮动，会失去该元素本身存在的位置，所以后面会直接的受到影响 取代上一个元素的位置。。
八.网页定位:
1.概念：
在实际的开发当中,很多标签出现的位置其实的不标准,那么这种不贴合上下左右的位置，如果使用所谓内外间距进行布局，就非常难以实现，因为所谓的间距布局 只是非常公整的方向式布局。
为了固定某一个标签的位置，以及灵活的调整这个位置，我们可以使用定位进行完成。
position:
top 上
bottom 下
left 左
right 右
2.三种定位方式:
（1）静态定位(标准流,默认定位方式):
position:static
（2）绝对定位:(脱标)
position:absolute;
特点:
<1>出发的位置是参考浏览器的边框(就是从浏览器开始出发)
<2>使用绝对定位之后,会脱标,不会继续占据原来的位置
<3>在嵌套情况下,如果父盒子使用绝对定位,子盒子使用绝对定位出发的位置是基于父盒子开始。
<4>在嵌套情况下,如果父盒子没有使用绝对定位,子盒子使用绝对定位出发的位置是基于浏览器开始。
<5>如果使用了绝对定位，这个元素如果是行内元素会自动转换行内块元素(一般注意即可,不要作为重点使用)
(3)相对定位:position: relative;
特点:
<1>使用相对定位,出发的位置是参考元素本身的位置(从自己位置出发)
<2>使用相对定位并不会造成脱标,仍然占据自己元素本身的位置
<3>在嵌套的情况下，父盒子使用相对定位，子盒子使用相对定位，子盒子出发的位置是基于自身。
<4>在嵌套的情况下，父盒子使用相对定位，子盒子使用绝对定位，子盒子出发的位置是基于父盒子开始。
(4)那么我们到底是使用相对还是使用绝对呢?
子绝父相(子盒子使用绝对定位，父盒子使用相对为)
固定定位: position: fixed;
特点:
<1>使用固定定位,出发的位置是参考浏览器
<2>使用固定定位并不会造成脱标,仍然占据自己元素本身的位置
<3>会自动的将行内元素转换行内块元素