javaweb之前端css学习笔记

最新推荐文章于 2024-03-09 14:13:55 发布

mocas_wang

最新推荐文章于 2024-03-09 14:13:55 发布

阅读量291

点赞数 1

分类专栏： javaWeb

本文链接：https://blog.csdn.net/mocas_wang/article/details/105675970

版权

javaWeb 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

CSS

CSS：层叠样式表用来定义网页的显示效果（解决html代码对样式定义的重复）
将网页内容和显示样式进行分离，提高了显示功能

CSS和html的四种结合方式

1.每个html标签上都有一个style属性，各属性之间用分号隔开

<div style="background-color:red;color:green;">这是演示语句/*这句话是body部分*/</div>

2.使用html的<style>标签，写在head里面

<head>
		<style type="text/css">
			div{<!-- 对body当中的所有div中的数据设置样式，就是一个选择器 -->
				background-color:blue;<!-- 格式 属性名:属性值; -->
				color:red;
			}
		</style>
</head>

3.在style标签里使用语句 @import url(css文件的路径)

<style type="text/css">
		@import url(div.css);
</style>
<!--
	div.css文件中可以写
	div{
		background-color:green;
		color:red;
	}
-->

4.使用头标签link，引入外部css文件

<link rel="stylesheet" type="text/css" href="css文件路径" />

第三种结合方式，在某些浏览器不起作用，我们一般采用第四种方式
结合方式之间的优先级:由上到下，由内到外，优先级由低到高（即后加载优先级高）

CSS的选择器

1.三种基本选择器

(1)使用标签名作为选择器的名称

div{
		background-color:blue;
		color:red;
	}

这种情况下，要写在head里面，所有div标签属性都一致

(2)class选择器（每个标签都有一个class属性）

 <head>
	<!-- 选择器 -->
	div.haha{
		backgrond-color:yellow;
	}
	.haha{<!-- 作用于所有class为haha的标签 -->
		backgrond-color:yellow;
	}
<head>

<body>
    <div class="haha">演示1！</div>
    <p class="haha">演示2！</p>
<body>

3)id选择器（每个标签都有一个属性id）


<head>
	div#hehe{
		background-color:green;
	}
	#hehe{}<!-- 作用于所有id为hehe的标签 -->
<head>

<body>
    <div id="hehe">演示！</div>
<body>

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

2.三种扩展选择器

(1)关联选择器（单独改变嵌套标签的样式）

<head>
    div p{
		background-color:green;
	    }
<head>

<body>
    <div><p>演示！</p></div>
<body>

(2)组合选择器（不同标签设置相同的样式）

<head>
	div,p{
		background-color:orenge;
	}
<head>

<body>
	<div>演示1</div>
	<p>演示2</p>
<body>

(3)伪元素选择器（css里面提供了定义好的样式，可以直接使用，详见CSS文档）
例如：超链接的状态（原始状态link，鼠标悬停状态hover，点击状态active，点击后状态visted）

<head>
<style type="text/css">
		a:link{
			background-color:red;
		}
		a:hover{
			background-color:green;
		}
		a:active{
			background-color:blue;
		}
		a:visted{
			background-color:orenge;
		}
</style>
	<a href="超链接地址">超链接</a>
<head>

CSS的盒子模型

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

1.边框:文本内容的边框，border（可以统一设置，也可以分别设置border-top,border-bottom,border-left,boder-right）

<head>
div{
		width:200px;
		height:150px;
		border:2px solid blue;<!-- 粗细 样式 颜色 -->
	}
<head>

2.内边距：文本距边框的距离，padding（padding-top,padding-bottom,padding-left,padding-right）

#div32{
		border:2px solid blue;
		padding:20px;
	}

3.外边距：边框距外边框的距离，margin（margin-top,margin-bottom,margin-left,margin-right）

#div33{
		margin:30px;
	}

CSS的布局

1.布局的漂浮，属性float（属性值：left,right）

<!-- div都是盒子封装过的数据 -->
#div34{
		float:left;<!-- 文本（div35）流向对象的右边 -->
	}

2.布局的定位，属性position（属性值：static,absolute,relative）

#div36{
		position:absolute;<!-- 将对象（div36）从文本流中脱出,div36叠在div37上面 -->
		top:300px;
		left:300px;
		right:300px;
		bottom:400px;<!-- 可以通过这些进行div36的定位 -->
	}
#div36{
		position:relative;<!-- 不会将对象从文本流中脱出（区别） -->
		top:300px;
		left:300px;
		right:300px;
		bottom:400px;<!-- 可以通过这些进行div36的定位 -->
	}

mocas_wang

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javaweb之前端css学习笔记

CSSCSS：层叠样式表用来定义网页的显示效果（解决html代码对样式定义的重复）将网页内容和显示样式进行分离，提高了显示功能目录CSSCSS和html的四种结合方式CSS的选择器1.三种基本选择器2.三种扩展选择器CSS的盒子模型CSS的布局CSS和html的四种结合方式1.每个html标签上都有一个style属性，各属性之间用分号隔开&...
复制链接

扫一扫

专栏目录