JavaWeb学习笔记（CSS）

最新推荐文章于 2025-07-15 21:04:18 发布

转载最新推荐文章于 2025-07-15 21:04:18 发布 · 365 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：www.itcast.cn

JavaWeb基础专栏收录该内容

15 篇文章

订阅专栏

本文深入解析CSS的多种结合方式，包括style属性、style标签、导入和链接方式。探讨了CSS优先级、代码规范、基本及扩展选择器，如标签、class、id选择器，关联、组合和伪元素选择器。同时，详细介绍了CSS盒子模型，包含边框、内边距和外边距的设置，以及布局属性如漂浮和定位的应用。

知识点总结于崔希凡+王泽(广陵散)的JavaWeb视频教程，侵权请联系删除。

CSS

概述

CSS （Cascading Style Sheets）是层叠样式表，用来定义网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。

CSS和HTML结合的方式

style属性方式：在每个html标签上面都有一个属性 style，把css和html结合在了一起
示例：<div style=“background-color:red;color:green;”>
style标签方式(内嵌方式)：使用html的一个标签实现<style>标签，写在head里面

<style type="text/css"> /*这句话表示写的是css的代码*/
	css代码;
</style>

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

导入方式：在style标签里使用语句@import url(css文件的路径);
先创建一个.css文件，后来再通过语句导入
示例：<style type=“text/css”>@import url(css文件路径)</style>
链接方式：使用头标签 <link>，引入外部css文件
先创建一个.css文件，再引入<link rel=“stylesheet” type=“text/css” href=“css文件的路径” />

第三种结合方式在某些浏览器下不起作用，一般使用第四种方式

优先级和代码规范

当出现不止一种方式的时候，CSS样式的优先级是（在一般情况下）：由上到下，由外到内。优先级由低到高。 即：后加载的优先级高。

CSS样式代码规范（包括CSS文件格式）：选择器名称 { 属性名：属性值；属性名：属性值；…….}

属性与属性之间用分号隔开；
属性与属性值直接按用冒号连接；
如果一个属性有多个值的话，那么多个值用空格隔开。

CSS的基本选择器

就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。

标签选择器：使用标签名作为选择器的名称

div {
	background-color:gray;
	color:white;
}
//把div标签的背景色改为灰色，前景色改为白色

class选择器(.)：使用的是标签中的class属性
每个html标签都有一个属性 class

<html>
	<head>
		<title>HTML示例</title>
		<style type="text/css">
		/*
			div.haha{
				background-color:yellow;
			}
			p.haha{
				background-color:yellow;
			}
		*/
		.haha{background-color:yellow;}	
		</style>
	</head>
	<body>
		<div class="haha">111</div>
		<p class="haha">222</p>
	</body>
</html>

id选择器(#)：使用的是标签的中的id属性
每个html标签上面有一个属性 id

<html>
	<head>
		<title>HTML示例</title>
		<style type="text/css">
		/*
			div#hehe{
				background-color:yellow;
			}
			p#hehe{
				background-color:yellow;
			}
		*/
		#hehe{background-color:yellow;}	
		</style>
	</head>
	<body>
		<div id="hehe">111</div>
		<p id="hehe">222</p>
	</body>
</html>

优先级

优先级：style>id>class>标签

CSS的扩展选择器

关联选择器：标签是可以嵌套的，两个或多个选择器之间产生关系，就可以用此选择器。
设置div标签里面p标签的样式，嵌套标签里面的样式：

<!DOCTYPE html>
<html lang="en">
 <head>
  <style>
  	div p{background-color:blue;}
  </style>
  <title>Document</title>
 </head>
 <body>
	<div><p>111</p></div>
 </body>
</html>

组合选择器：对多个不同选择器进行相同样式设置的时候应用此选择器。
把div和p标签设置成相同的样式，把不同的标签设置成相同的样式：

<!DOCTYPE html>
<html lang="en">
 <head>
  <style>
  	div,p{background-color:blue;}
  </style>
  <title>Document</title>
 </head>
 <body>
	<div>111</div>
	<p>222</p>
 </body>
</html>

伪元素选择器：其实就在html中预先定义好的一些选择器。或者说当前元素处于的状态。
比如：超链接
:link（原始状态） :hover（鼠标放上去状态） :active（点击时） :visited（点击之后）

<!DOCTYPE html>
<html lang="en">
 <head>
  <style>
  	a:hover{background-color:blue;}
  </style>
  <title>Document</title>
 </head>
 <body>
	<a href="https://www.baidu.com">aa</a>
 </body>
</html>

CSS盒子模型

在进行布局前需要把数据封装到一块一块的区域（DIV）内，这个区域的专业术语叫盒子。

边框（border）
- 分为上（border-top）下（border-bottom）左（border-left）右（border-right），也可以统一设置

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">
	div {
		width: 200px;
		height: 100px;
		border: 2px solid blue;
	}

	#div12 {
		border-right: 2px dashed yellow;
	}
  </style>
 </head>
 <body>
	<div id="div11">AAAAAAAAAAAAAAA</div>
	<div id="div12">BBBBBBBBBBBBBBB</div>
	<div id="div13">CCCCCCCCCCCCCCC</div>
 </body>
</html>

内边距（padding）
- 分为上下左右四个内边距，也可统一设置

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">
	div {
		width: 200px;
		height: 100px;
		border: 2px solid blue;
	}
	#div12 {
		border-right: 2px dashed yellow;
	}
  </style>
 </head>
 <body>
	<div id="div11">AAAAAAAAAAAAAAA</div>
	<div id="div12">BBBBBBBBBBBBBBB</div>
	<div id="div13">CCCCCCCCCCCCCCC</div>
 </body>
</html>

外边距（margin）
- 分为上下左右四个外边距，也可统一设置

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">
	div {
		border: 2px solid blue;
	}
	#div32 {
		margin: 20px;
	}
	#div33 {
		margin-left : 30px;
	}
  </style>
 </head>
 <body>
	<div id="div31">AAAAAAAAAAAAAAA</div>
	<div id="div32">BBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
	<div id="div33">CCCCCCCCCCCCCCC</div>
 </body>
</html>

CSS布局漂浮属性

漂浮（float）
- none:　默认值。对象不飘浮
- left:　文本流向对象的右边
- right:　文本流向对象的左边

CSS布局定位属性

position
- static：默认值。无特殊定位，对象遵循HTML定位规则
- absolute：将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其进行绝对定位。
- relative :对象不可层叠（不会从文档流中拖出），但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置

absolute：
在这里插入图片描述
relative：