2020-04-03

JavaWeb--了解CSS

字数统计: 775字 | 阅读时长: 3分

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

1 2	/方法一：使用标签中的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>

1 2	/使用头标签 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样式大全(整理版）

Java新手，若有错误，欢迎指正！

| 阅读量次