JavaWeb--了解CSS

Posted Java_biao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaWeb--了解CSS相关的知识,希望对你有一定的参考价值。

一、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样式大全(整理版)

以上是关于JavaWeb--了解CSS的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段——CSS选择器

动态SQL基础概念复习(Javaweb作业5)

VSCode自定义代码片段——CSS动画

VSCode自定义代码片段7——CSS动画

VSCode自定义代码片段7——CSS动画

VSCode自定义代码片段6——CSS选择器