Java学习笔记Part03-CSS初探_拥有对网页对象和模型样式编辑的能力-CSDN博客

本文链接：https://blog.csdn.net/weixin_51657833/article/details/113738791

CSS初探

1.什么是CSS？

CSS：层叠样式表(Cascading Style Sheets)可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。人话：让网页更好康

HTML用来搭建网页主体结构，是毛坯房；而CSS用来修饰网页，相当于精装修。

2.CSS的引入

行内式引入：
借助标签的style属性引入，style属性中的值语法为样式名:样式值; 样式名:样式值; ......
例：

<span style="font-size: 20px; 
             color: darkslateblue; 
             background-color: lightcoral;">
    CSS!你值得拥有
</span>

内嵌式
将css样式的代码抽取出来，通过选择器确定样式作用范围。在head中使用一对style标签定义css样式

在style中写注释要用/* */

减少相同代码编写量，减少代码维护工作量
例：

<head>
	<style>
		/* 选择器 */
		span{
		   "font-size: 20px; 
		    color: darkslateblue; 
			background-color: lightcoral;"
		}
	</style>
</head>
<body>
	<span>aaaaaaa</span>
	<span>bbbbbbb</span>
	<span>ccccccc</span>
</body>

链接式

行内式只能将样式作用于当前标签；内嵌式可以将样式作用与多个标签，但不能作用于其他网页。

链接式可以将CSS代码放入独立的.css文件中，可以使当前页面简洁，可以将样式作用扩大到多个不同网页。
每一个需要引入样式的HTML，在head中使用link标签即可。

属性作用
rel 告诉浏览器链接的文件的类型
href 链接文件路径
当三种引用同时作用与同一个标签，优先级原则：就近原则

属性	作用
rel	告诉浏览器链接的文件的类型
href	链接文件路径

code（multifile）：

.css:

span{
   "font-size: 20px; 
    color: darkslateblue; 
	background-color: lightcoral;"
}

.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>11 CSS的引入方式</title>
		
		<link rel="stylesheet" href="css/11 CSS的引入方式.css" />
		
		<!--<style>
			/* 选择器 */
			span{
			   "font-size: 20px; 
			    color: darkslateblue; 
				background-color: lightcoral;"
			}
		</style>-->
	</head>
	<body>
		<!--<span style="font-size: 20px; 
			     	 color: darkslateblue; 
					 background-color: lightcoral;">
			CSS!你值得拥有
		</span>-->
		<span>aaaaaaa</span>
		<span>bbbbbbb</span>
		<span>ccccccc</span>
	</body>
</html>

3.CSS选择器

3.1基本选择器

选择器	作用&写法
标签名选择器	给页面所有同名的标签定义样式的选择器写法：标签名{样式}
id选择器	一般body任何一个标签都有id属性，它帮助我们定位给到页面上唯一的一个标签，不允许重复值 id属性命名有规则：不能有空格和一些特殊符号（特殊符号中仅可以使用_和 $，不推荐$ ，会和jquery命名冲突，不可以数字开头）推荐写法：英文字母开头，数字放在后面。写法：#id值{样式}
类选择器	一般body任何一个标签都有class属性多个不同的标签可以有相同的calss属性通过标签的class属性确定样式的作用范围写法：.class属性值{样式}

code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>12 CSS基本选择器</title>
		<style>
			/* 标签名选择器 */
			span{
				border: 4px solid red;
			}
			/* id选择器 */
			#p1{
				border: 4px solid green;
			}
			/* 类选择器 */
			.c1{
				border: 4px solid blue;
			}
		</style>
	</head>
	<body>
		<span>ohhhhhhh</span>
		<p id="p1">ohhhhhhh</p>
		<h1 class="c1">ohhhhhhh</h1>
		<h2 class="c1">ohhhhhhh</h2>
	</body>
</html>

3.2其他选择器

选择器	作用&写法
层级选择器	通过层级关系定位样式的作用范围写法：第一层第二层 … 目标层（目标层里所有目标标签全部被选择）（每层可以是标签，id，class……）
属性选择器	根据标签的某个属性的特定值确定样式的作用范围写法：标签\|\|id\|\|class[值]{样式}
分组选择器	将多个不同层级关系不同class属性 id 标签名同时使用相同的样式效果写法：标签\|\|id\|\|class,标签\|\|id\|\|class,…{样式}

code：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>13 CSS其他选择器</title>
		<style type="text/css">
			/* 层级选择器 */
			p span{
				border: 4px solid red;
			}
			/* 属性选择器 */
			input[type="password"]{
				border: 4px solid green;
			}
			/* 分组选择器 */
			#ha, .c2{
				border: 4px solid blue;
			}
		</style>
	</head>
	<body>
			<span>ohhhhhhh</span>
			<p><span>ohhhhhhh</span><p>
				
			<input type="password" /><br /><br />
			
			<input type="text" id="ha" />
			<input type="text" class="c2"/>
	</body>
</html>

3.3 伪类选择器

伪类选择器用于向某些选择器添加特殊效果

写法：选择器:伪类名{样式}

伪类选择器顺序要求严格，如hover必须置于link/visited后，而active必须置于hover后。

code：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>14 CSS伪类选择器</title>
		<style>
			a:link{
				color: black;
			}
			a:visited{
				color: darkgrey;
			}
			a:hover{
				color: green;
			}
			a:active{
				color: red;
			}
			div{
				border: 2px double cyan;
				width: 100px;
				height: 100px;
				background-color: lightcoral;
			}
			div:hover{
				background-color: coral;
			}
		</style>
	</head>
	<body>
		<a href="https://www.baidu.com">打开百度</a>
		<div>	</div>
	</body>
</html>

4.网页的布局

网页要有格局，网页的布局就是网页内容的主体规划

要想完成网页的布局，需要三种基本技术

盒子模型——标签和标签存在包含关系时位置的调整
浮动——多个块标签处于同一行的位置处理问题
定位——块标签在页面指定位置的处理问题

块标签→独立站用一行的标签，行内标签→不会独占一行的标签

一般布局时使用的是块标签div，它可以帮助我们将网页划分为多个小方块

div边线类型：dotted,dashed,solid,double,groove,ridge,inset,outset

4.1盒子模型

标签和标签存在包含关系时位置的调整，好比两个一大一小的盒子大的装小的，小盒子在大盒子内部的位置调整

内边距：

当前块标签内部的元素和当前块标签边缘的距离

内边距不会向内占用空间，而是会将块标签放大

写法1——padding: 内边距px; 同时设定上下左右四个内边距

写法2——padding: 上下内边距px 左右px

写法3——padding：顶部内边距px 右内边距px 底部内边距px 左内边距px（顺时针）

写法4——padding-top/bottom/left/right

外边距：

当前块标签外部的元素和父级标签边缘的距离

写法1——margin: 外边距px; 同时设定上下左右四个外边距

写法2——margin: 上下外边距px 左右px

写法3——margin：顶部外边距px 右外边距px 底部外边距px 左外边距px（顺时针）

写法4——margin-top/bottom/left/right

调整盒子位置：

可以选择调整外部盒子内边距或内部盒子外边距

外边距设置居中：

利用auto实现

code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>15 盒子模型_1</title>
		<style>
			#outerDiv{
				border: 3px dotted darkcyan;
				width: 500px;
				height: 500px;
				/*内边距设定 */
				/*padding: 100px;
				/*padding: 10px 20px;
				/*padding: 10px 20px 30px 40px;/*按照顺时针设置内边距*/
				padding-top: 20px;
				padding-bottom: 20px;
				padding-left: 20px;
				padding-right: 20px;

				/*外边距设定*/
				/*margin: 100px;
				/*margin: 10px 20px;
				/*margin: 10px 20px 30px 40px;/*按照顺时针设置外边距*/
				/*margin-top: 20px;
				margin-bottom: 20px;
				margin-left: 20px;
				margin-right: 20px;*/
				margin: 20px auto;
			}
			#innerDiv{
				border: 1px solid cyan;
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body style="border: 1px inset darkblue ;">
		<div id="outerDiv" >
			<div id="innerDiv"></div>
		</div>
	</body>
</html>

块标签和行内标签的转换：

span是一个行内元素，行内元素没有盒子模型，不可以设置内外边距，只有块标签才有盒子模型，如果一个行内标签非要使用盒子模型，那么可以将行内元素转换为块元素。

转换方法：display: block/inline

block转换为块，inline转换为行内

code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>16 块标签和行内标签的转换</title>
		<style>
			#div1_16{
				border: 3px double blue;
				background-color: lightcyan;
				width: 500px;
				height: 500px;
				margin: 0px auto;
			}
			#span1_16{
				display: block;
				width: 300px;
				margin: 20px auto;
				background-color: darkcyan;
				color: lightgoldenrodyellow;
			}
		</style>
	</head>
	<body>
		<div id="div1_16">
			<span id="span1_16">我是行内标签，但我被转换为了块标签</span>
		</div>1
		
	</body>
</html>

注意：

width：块标签实际容量宽度

height：块标签实际容量高度

盒子模型无论内边距还是外边距的调整都不会影响块标签内部容量

4.2浮动

可以让多个块标签处于同一行（在父标签下浮动）而不用转换成行内元素，这使块标签的样式可以保留。使用float实现

code：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>17 浮动</title>
		
		<style>
			.d1,.d2,.d3{
				width: 197px;
				height: 497px;
				border: 3px double darkgray;
				
				/*浮动*/
				float: left;
				
				margin-left: 20px;
			}
			.d1{
				background-color: lightcoral;
			}
			.d2{
				background-color: lightgoldenrodyellow;
			}
			.d3{
				background-color: lightblue;
			}

		</style>
	</head>
	<body>
		<div class = "d1">
			1
		</div>
		<div class = "d2">
			2
		</div>
		<div class = "d3">
			3
		</div>
	</body>
</html>

浮动案例：12306广告位

4.3定位

页面布局手段。

绝对定位

绝对的位置

当位置发生改变时，会释放原来的位置，其他标签可以占用原来的位置

使用absolute实现

相对定位

相对于原来的位置

当位置发生改变时，不会释放原来的位置，其他标签不可以占用原来的位置

使用relative实现

相对浏览器窗口定位

相对于浏览器窗口定位

使用fixed实现

code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>19 定位</title>
		<style>
			.blocks{
				width: 97px;
				height: 97px;
				background-color: lightcoral;
				border: 3px double red;
			}
			#div1_19{
				position: absolute;
				top: 200px;
				left: 500px;
			}
			#div2_19{
				position: absolute;
				top: 500px;
				left: 100px;
			}
			#div3_19{
				position: relative;
				top: 200px;
				left: 200px;
			}
			#div4_19{
				position: fixed;
				top: 800px;
				left: 800px;
			}
		</style>
	</head>
	<body ">
		<div class="blocks" id="div1_19">1</div>
		<div class="blocks" id="div2_19">2</div>
		<div class="blocks" id="div3_19">3</div>
        <div class="blocks" id="div4_19">4</div>
	</body>
</html