javaWeb学习（1）——CSS的使用
一.html与css结合的四种方式
1.在需要引用的标签上直接进行使用
<div style="">天行有常，不为舜存，不为桀亡</div>
2.通过在头文件中规定<style>标签，从而改变样式
<style type="text/css">
div{
background-color:blue;
}
</style>
3.通过在头文件中引入css文件来实现
（1）用<link></link>标签来引入
<head>
<link rel="stylesheet" type="text/css" href="CSS文件的地址"/>
</head>
（2）用@import来引入
首先在Mac上就不能用，所以排除
<style type="text/css">
@import url("文件地址");
</style>
二.CSS优先级
1.CSS从左向右，从前往后依次加载。以后加载的为主
三.CSS基本选择器
1.class选择器
div.text{
background-color: yellow;
}
之后使用class=“text”来访问
2.id选择器
div#text{
background-color: yellow;
}
与之类似，只不过中间的.用#来替换
3.标签选择器
div{
background-color: yellow;
}
对所有的div标签进行修改，优先级最低
4.style选择器
在使用时进行声明
<div style="
5.优先级问题
style选择器>id选择器>class选择器>标签选择器
四.CSS拓展选择器
1.关联选择器
.text,p{
background-color: red;
}
用英文，来将两个不同的标签改为一个格式
2.组合选择器
div p{
background-color: yellow;
}
对标签之下的标签进行访问
3.伪元素选择器
设定初始状态
a:link{
background-color: green;
}
设定悬停状态
a:hover{
background-color: orange;
}
设定点击状态
a:active{
background-color: blue;
}
设定访问之后的状态
a:visited{
background-color: gray;
}
Tip：设定超链接时，要使用http来访问
五.盒子模型
1.对边框的设定（border）
***边框宽度 边框格式 边框颜色
#border1{
border: 2px solid blue;
}
2.对内边距的设定（padding）
***长度
#border2{
padding: 2px;
}
3.对外边距的设定（margin）
***长度
#border3{
margin-left: 300px;
}
Tip：以上三种均可以对上下左右进行分别设定
六.关于CSS布局
1.漂浮（Mac上不能使用）
Float——>left :将所选的框固定在左边，其他向其右边滑动
——>right :将所选的框固定在右边，其他向其左边滑动
——>none:不做设定
Tip：使用的环境有图文混排，让文字环绕在图片周围等
2.定位布局
通过position来设定
static：默认，不发生改变。不能对该框进行位置设置
absolute：表示该框不再该页面中占据实际位置，其他页面自动补位。可以对该框进行位置设置
relative：该框占据实际位置，其他页面不变。可以对该框进行位置设置
#border1{
background-color: red;
position: absolute;
top: 100px;
left: 150px;
}
#border2{
background-color: orange;
position: static;
width: 300px;
height: 150px;
//在此处设置无效
top: 90px;
}
#border3{
background-color: green;
position: relative;
top: 110px;
left: 120px;
}
Tip：使用的环境文字漂浮在图片上面等
来源：https://www.cnblogs.com/tianxiayoujiu/p/8460146.html