java开发css基础
Css
Css与HTML的结合方式（四种）
- 在每个HTML的标签上面都有一个style属性，此属性将css和HTML结合在一起
<div style=”background-color:red;color:green;”>长风几万里</div>
- 使用HTML的一个标签实现：<style>标签，写在<head>里面
<style type=”text/css”>
需要修饰的标签{
Css代码；
}
</style>
- 在style标签里面 使用语句 @import url(css文件的路径)
<style type=”text/css”>
Import @url(css文件的路径)
</style>
- 使用头标签<link>,引入外部css文件
第一步，创建css文件
<link rel=”stylesheet” type=”text/css” href=”css的文件路径”/>
一般使用第四种方式，第三种方式在某些浏览器下不起作用
优先级（一般情况）
由上到下，由外到内，优先级由低到高。
后加载的优先级高
格式 选择器名称{属性名：属性值;属性名：属性值;.....}
Css的基本选择器（三种）
要对那个标签里面的数据进行操作
- 标签选择器
使用标签名作为选择器的名称
Div{
Background-color:gray;
Color:white;
}
- class选择器
每个HTML标签都有一个属性 class
- <div class=”haha” >aa</div>
在样式表中：
Div.haha{
Color:green;
}
- id选择器
每个HTML标签上面都有一个属性id
-<div id=”hehe”>bbbb</div>
在样式表中
Div#hehe{
}
选择器优先级：
标签内的style属性 > Id选择器 > Class选择器 > 标签选择器
css的扩展选择器
- 关联选择器
<div><p>wewefwegew</p></div>设置div标签里面p标签的样式
Div p
{
background-color:red;
}
- 组合选择器
<div>234</div>
<p>dfhs32</p>
将div和p标签设置成相同的样式，把不同的标签设置成相同的样式
Div,p{
Color:red;
}
- 伪元素选择器（了解）
css里面提供了一些定义好的样式，可以拿过来
比如超链接
超链接的状态
:link 原始状态
:hover 鼠标放上去的状态
:active 点击
:visited 点击之后
a:link{
background-color:red;
}
a:visited{
background-color:green;
}
a:hover{
background-color: blue;
}
a:active{
background-color:pink;
}
Css的盒子模型
在进行布局前需要把数据封装到一块一块的区域内（div）
- 边框
-border
三个属性border:2px solid blue;
可以统一设置
也可以单独设置
上 border-top
下 border-bottom
左 border-left
右 border-right
- 内边距
-padding
Padding:10px;
可以统一设置
也可以单独设置
上 padding-top
下 padding-bottom
左 padding-left
右 padding-right
- 外边距
-margin
一样.......
css的布局的漂浮（了解）
*float
属性值：
*left：文本流向对象的右边
设置这个属性之后 这个标签的位置居左，下面的块向上飘上来 位于设置float的标签的右侧
*right：文本流向对象的左边
Css的布局的定位
*position
属性值：
-absolute：
将对象从文档中拖出
position:absolute 这是与漂浮不一样的 漂浮流动是不会重叠在一起
而定位的绝对 就是好似飘在空中 下面的空间会被 其他文本流顶上来
可以使用top bottom等进行其在外层空间的位置定位
-relative：
不会将对象将文档流中拖出去也可以使用top bottom left等定位