java的web开发之旅——第2站&css

本文链接：https://blog.csdn.net/qq_49948651/article/details/121610292

CSS

1. CSS简介
2. CSS选择器
3. CSS样式
4. CSS盒子模型
5. CSS和HTML结合

1. CSS简介

1.1 css是什么

HTML------》页面结构-------》相当于人脸（素颜状态）
CSS--------》美化页面-------》想当于化妆
CSS(Cascading Style Sheets)：层叠样式表
样式表：存储样式的地方

给人化妆	打粉底	画眼线	图口红
HTML标签	样式1	样式2	样式3

在这里插入图片描述
CSS作用：修饰HTML页面，更丰富多彩的展示超文本信息

1.2 为什么用CSS代替HTMl属性设置样式

因为HTML属性在单独使用时有一定局限性，所以要配合CSS样式代码才可以更高的展示丰富的效果。

1.3 CSS代码规范

放置规范：

在style标签内容体中写css样式代码；
把style标签放置在head标签中。

格式规范：

选择器名称{属性名1：属性值1；属性名2：属性值2； ……}；
选择器：即指定CSS样式作用在哪些HTML标签上。

代码规范：

属性名和属性值是键值对关系；
属性名和属性值之间用‘：’连接，属性名和属性名之间用‘；’连接，最后以‘；’结尾。
如何一个属性名有多个值，多个值之间用‘空格’隔开。
CSS注释是/* 内容*/ 等同于java的多行注释。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>在标签内容体里写style</title>
</head>
<body>
	<font>今天2021-11-08</font>	
	<br/>
	<font style="font-size:200px;color:blue;">今天2021-11-08</font>
</body>
</html>

2. CSS选择器

2.1 基本选择器

2.1.1 元素选择器

HTMl标签又名HTML元素
元素选择器：也就是HTMl标签的选择器。
作用：选择CSS样式代码，作用于对应标签。
适用范围：将某一样式作用在同名的标签上。
在这里插入图片描述 在这里插入代码片

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>style放置在head标签内</title>
	<style>
		span{
			font-size:200px;
			color:blue;
			border:5px solid red;
			/*css注释用法*/
		}
	</style>
</head>
<body>
	<span>123456</span><br/>
	<span>654321</span>
</body>
</html>

2.1.2 类选择器

每个 HTML标签都有一个class属性，class属性值即为类名。
类选择器：即以HTML的类名(class属性值)作为选择器名称。
作用：选择CSS样式代码，作用于相同类名的HTML标签。
适用范围：将某一样式作用在同类名的所有标签上。
在这里插入图片描述

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>类选择器</title>
	<style>
		.Ablue{
			color:blue
		}
	</style>

</head>
<body>
	<span>span11</span>
	<span class="Ablue">spanblue22</span>
	<div>div11</div>
	<div class="Ablue">divblue22</div>
	
</body>
</html>

2.1.3 id选择器

每个 HTML标签都有一个id属性，id属性值在本页面必须唯一。
id选择器：即以HTML的id(id属性值)作为选择器名称。
作用：选择CSS样式代码，作用于某个id值的HTML标签。
适用范围：将某一样式作用在某个标签上。
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style>
#b1 {
	color: blue
}
</style>
</head>
<body>
	<span>span11</span>
	<span>span22</span>
	<div>div11</div>
	<div id="b1">divblue22</div>
</body>
</html>

2.2 基本选择器的组合

2.2.1 层级关系

标签和标签间有层级关系，如html标签的子标签有title和body标签。
我们可以对基本选择器进行组合，表现出层级关系，从而更加针对性的把样式作用于某些标签上。
在这里插入图片描述 在这里插入代码片

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层级关系</title>
	<style>
	div font{
		color: blue
		}
	</style>
</head>
<body>
	<div>
		<font>蓝色</font>
		黑色
	</div>
	<font>黑色</font>
</body>
</html>

3. CSS样式

3.1 边框属性

所有的HTML标签都有边框，只是默认边框0像素，故不可见而已。

3.1.1 border（边框样式）

在这里插入图片描述

3.1.2 width（边框宽度）

3.1.3 height（边框高度）

3.1.4 background-color（边框背景颜色）

在这里插入图片描述

3.1.5 代码演示

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>边框</title>
	<style>
		div{
			border:5px solid red;
			width:300px;
			height:100px;
			background-color:#0099ff;
		}
	</style>
</head>
<body>
	<div>EDG牛逼！</div>
</body>
</html>

3.2 布局

3.2.1 float

在这里插入图片描述

3.2.2 排版样式

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float排版</title>
	<style>
		#d1{
		background-color:red;
		width:100px;
		height:100px;
		float:right;
		}
		#d2{
		background-color:green;
		width:150px;
		height:150px;
		float:right;
		}
		#d3{
		background-color:blue;
		width:200px;
		height:200px;
		float:right;
		}
	</style>
</head>
<body>
	<div id="d1"></div>
	<div id="d2"></div>
	<div id="d3"></div>
</body>
</html>

3.2.3 float本质

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float本质</title>
	<style>
		#d1{
		background-color:red;
		width:100px;
		height:100px;
		float:left;
		}
		#d2{
		background-color:green;
		width:150px;
		height:150px;
		float:left;
		}
		#d3{
		background-color:blue;
		width:200px;
		height:200px;
		}
	</style>
</head>
<body>
	<div id="d1"></div>
	<div id="d2"></div>
	<div id="d3"></div>
</body>
</html>

3.3 转换

3.3.1 display

HTML提供丰富的标签，这些标签被定义成不同的类型，一般分为：块级元素和行内元素、
在这里插入图片描述
display属性可以使元素在行内元素和块内元素之间相互转换。

在这里插入图片描述

3.3.2 代码演示

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<style>
		div{
			display:inline;
		}
		span{
			display:block;
		}
		p{
			display:inline;
		}
		a{
			display:block;
		}
	</style>
</head>
<body>
	<div>我div就是不换行</div>
	<div>我div就是不换行</div>
	<span>我span就是要换行</span>
	<span>我span就是要换行</span>
	<p>我是p就是不换行</p>
	<p>我是p就是不换行</p>
	<a>我是a就是要换行</a>
	<a>我是a就是要换行</a>
</body>
</html>

3.4 字体

3.4.1 font-size（设置字体大小）

3.4.2 color（设置字体颜色）

3.4.3 代码演示

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<style>
	 	span{
	 		font-size:100px;
	 		color:green;
	 	}
	</style>
</head>
<body>
	哇塞
	<span>我想更大更硬</span>
	哇塞！
</body>
</html>

4. CSS盒子模型

4.1 什么是盒子模型

请添加图片描述

4.2 边框（border）

边框：HTML元素盒子的框体
通用性设置：border 一次性设置4条边。
在这里插入图片描述

4.3 内边距（padding）

内边距：HTML元素里的内容体到HTML元素边框的距离。
通用性设置：padding 一次性设置所有内边距。

在这里插入图片描述

4.4 外边距（margin）

外边距：HTML元素边框到其他HTML元素边框的距离。
通用性设置：margin一次性设置所有外边距。
在这里插入图片描述

4.5 代码演示

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<style>
		div{
			border:5px solid red;
			border-top:5px solid blue;
			width:100px;
			padding:30px;
			padding-left:60px;
			margin:50px;
			margin-left:200px;
		}
	</style>
</head>
<body>
	<p>IG牛逼！</p>
	<div>EDG牛逼！</div>
	<p>FPX牛逼！</p>
</body>
</html>

在这里插入图片描述

5. CSS和HTML结合

5.1 内部样式

5.1.1 行内样式

行内样式：是通过标签的style属性来设置元素的样式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<a>IG牛逼</a>
	<a style="font-size:100px;color:blue;">EDG牛逼</a>
	<a>FPX牛逼</a>
</body>
</html>

5.1.2 标签方式

某些样式在页面被多个标签重复使用，为了编码更加灵活，避免书写重复代码，可以将样式代码从标签style属性提取出来统一写入style标签中。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<style>
		a{
			font-size:50px;
			color:red;
		}
	</style>
</head>
<body>
	<a>IG牛逼&nbsp&nbsp&nbsp</a>
	<a>EDG牛逼&nbsp&nbsp&nbsp</a>
	<a>FPX牛逼</a>
</body>
</html>

5.2 外部样式

5.2.1 标签样式

link方式又称为链入式，是将所有的样式放到一个或多个以.css为扩展名的外部样式表文件中，通过link标签将样式连接到html文档中。
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<link rel="stylesheet" type="text/css" href="css01.css">
</head>
<body>
	<a>IG牛逼&nbsp&nbsp&nbsp</a>
	<a>EDG牛逼&nbsp&nbsp&nbsp</a>
	<a>FPX牛逼&nbsp&nbsp&nbsp</a>
</body>
</html>