JavaWeb--了解CSS

Posted 2020-11-28 Java_biao

一、CSS与html的四种结合方式：

/*方法一：使用标签中的style属性*/
<div style="background-color:red;color:green;">

/*方法二：使用style标签*/
<style>标签，写在head里面
    <style type="text/css">
   	  css代码;
    </style>

	<style type="text/css">	
        div {
            background-color:blue;
            color: red;
        }		
	</style>

/*方法三：使用@import语句*/
在style标签里面 使用语句（兼容性差）
	@import url(css文件的路径);

    <style type="text/css">
   		 @import url(div.css);
    </style>

/*使用头标签 link，引入外部css文件*/
<link rel="stylesheet" type="text/css" href="css文件的路径" />

优先级：一般情况下，由上到下，由外到内。优先级由低到高。

二、CSS的三种基本选择器

标签选择器：

使用标签名作为选择器的名称 
	div {
		background-color:gray;
		color:white;
	}

class选择器：

每个html标签都有一个属性 class 
	 <div class="hhh">aaaaaaa</div>
	 
	 .hhh {
		background-color: orange;
	 }

id选择器：

每个html标签上面有一个属性 id
	 <div id="hhh">bbbbb</div>
	 
	 #hhh {
		background-color: #333300;
	 }

优先级：style > id选择器 > class选择器 > 标签选择器

三、CSS的扩展选择器

关联选择器

	<div><p>wwwwwwww</p></div>
	设置div标签里面p标签的样式，嵌套标签里面的样式
	div p {	
		background-color: green;
	}

组合选择器

	<div>1111</div>
	<p>22222</p>
	把div和p标签设置成相同的样式，把不同的标签设置成相同的样式
	div,p {
		background-color: orange;
	}

伪元素（伪类）选择器（兼容性差）

css里面提供了一些定义好的样式，可以拿过来使用
	比如超链接 
	超链接的状态
	原始状态   鼠标放上去状态    点击           点击之后
	:link         :hover        :active        :visited

<a href="www.baidu.com" target="_blank">测试伪类元素选择器</a>

<style type="text/css">
    a:link{
        background-color:#33cc00;
    }
    a:hover{
        background-color:#ff00ff;
    }
    a:active{
        background-color:#0066ff;
    }
    a:visited{
        background-color:#999900;
    }
</style>

四、CSS中的盒子模型

在进行布局前需要把数据封装到一块一块的区域内（div）

有三个属性：

（1）边框
	border: 2px solid blue;
	border：统一设置
	上 border-top
	下 border-bottom
	左 border-left
	右 border-right

（2）内边距
	padding:20px;
	使用padding统一设置
	也可以分别设置上下左右四个内边距

（3）外边距
	margin: 20px;
	可以使用margin统一设置
	也可以分别设置上下左右四个外边距

五、CSS的布局

css的布局的漂浮
	float： 
		属性值 
		left  :　 文本流向对象的右边 
		right  :　 文本流向对象的左边

css的布局的定位
	position：
		属性值
		absolute ：
			*** 将对象从文档流中拖出
			*** 可以是top、bottom等属性进行定位
		relative ：
			*** 不会把对象从文档流中拖出
			*** 可以使用top、bottom等属性进行定位

更多CSS样式可以参考该博文：css样式大全(整理版）