JavaWeb（2）之CSS

最新推荐文章于 2022-01-22 20:37:21 发布

A.夕阳

最新推荐文章于 2022-01-22 20:37:21 发布

阅读量267

点赞数

分类专栏： JavaWeb 文章标签： css

本文链接：https://blog.csdn.net/qq_43581078/article/details/105338899

版权

JavaWeb 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

CSS简述

css是什么？有什么作用？

HTML------>页面的结构------>人的面部(素颜)。

CSS------>美化页面------>给人化妆。

CSS通常称为CSS样式或层叠样式表，主要用于设置HTML页面中的文本内容(字体、大小、对其方式等)、图片的外形(高宽、边框样式、边距等)以及版面的布局等外观显示样式。
CSS可以使HTML页面更好看，CSS色系的搭配可以让用户更舒服，CSS+DIV布局更佳灵活，更容易绘制出用户需要的结构。

css入门案例

步骤1:创建一个HTML文件。
步骤2:在HTML上创建一个字体标签。
步骤3:字体标签中新增一一个 style属性，并修改style属性值。
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<font size="7">hell,oworld</font>
		<br />
		<font size="70">hell,oworld</font>
		<br />
		<font style="font-size: 70px;">hell,oworld</font>
	</body>
</html>

运行结果：
使用html的标签设置字体大小时最大就是7，而使用css设置字体标签时没有最大值。
在这里插入图片描述

为什么使用CSS替代HTML属性设置样式

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

css的代码规范

放置规范:
在< style >标签内容体中书写css样式代码。

< style >标签放置在< head >标签之中。

格式规范:
选择器名称 { 属性名1:属性值1; 属性名2:属性值2; … }

选择器:即指定CSS样式作用在哪些HTML标签上。

代码规范:
属性名和属性值之间是键值对关系。

属性名和属性值之间用“:”连接，最后“;”结尾。
例如: font-size:120px;

如果一个属性名有多个值，多个值之间用空格隔开。
例如: border:5px solid red;

CSS注释：在这里插入图片描述
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			span{
				/* 设置span标签的大小 */
				font-size: 70px;
				/* 设置span标签的颜色 */
				color: red;
				/* 设置span标签的线框，有多个属性用空格隔开 */
				border: 1px solid blue;
			}
		</style>
	</head>
	<body>
		<span>111111111111</span>
		<br />
		<span>222222222222</span>
	</body>
</html>

运行结果：
在这里插入图片描述

css选择器

基本选择器

元素选择器

HTML标签又名HTML元素。

元素选择器:即以HTML标签名作为选择器名称。

作用:选择CSS样式代码作用于对应标签名的标签上。

格式：
标签名：{
css样式代码
}
适用范围：适用于将相同样式作用在多个同名标签上。
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			span{
				font-size: 70px;
			}
		</style>
	</head>
	<body>
		<span>我是span11111111</span>
		<span>我是span22222222</span>
		<div>我是div1111111111</div>
		<div>我是div2222222222</div>
	</body>
</html>

运行结果：
修改了span标签的样式
在这里插入图片描述

类选择器

每个HTML标签都有一个class属性，class 属性值即为类名。

类选择器:即以HTML的类名 (class 属性值) 作为选择器名称。

作用:选择CSS样式代码作用于对应类名的HTML标签上。

格式：
.类名{
css样式代码
}
适用范围:适用于将样式一次作用在相同类名的标签上。(即使标签名不同)
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.red{
				color: red;
			}
		</style>
	</head>
	<body>
		<span>span1:我是黑色</span>
		<span class="red">span2我是红色</span>
		<div>div1：我是黑色</div>
		<div class="red">div2：我是红色</div>
	</body>
</html>

运行结果：
span和div的标签名不一样，但是设置了类名也是可以一起修改的。
在这里插入图片描述

id选择器

每个HTML标签都有一个id属性，id的属性值必须在本页面是唯一的。

id选择器:即以HTML的id (id 属性值)作为选择器名称。

作用:选择CSS样式代码作用于某个规定id值的html标签上。

格式：
#id值{
css样式代码
}

适用范围:适用于将样式作用某个标签上。（更有针对性）

注意：必须手动保证id值在本页唯一。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#d2{
				color: red;
			}
		</style>
	</head>
	<body>
		<span>span1：我是黑色</span>
		<span>span2：我是黑色</span>
		<div>div1：我是黑色</div>
		<div id="d2">div2：我是红色</div>
	</body>
</html>

运行效果：
在这里插入图片描述

基本选择器的组合方式

层级关系

标签和标签之间有层级关系，例如: 标签的子标签为< body >标签。

我们可以对基本选择器进行组合,表现出层级关系，从而更加针对性地把样式作用于某些标签上。

格式：
选择器1 选择器2…{
css样式代码
}
选择器1下的选择器2，相当于< html >标签下的< body >。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div font{
				color: red;
			}
		</style>
	</head>
	<body>
		
		<div>
			<font>我想变红</font>
		</div>
		
		<font>我保持黑色</font>
		
	</body>
</html>

运行结果：
通过层级关系将div标签下的font标签中的内容体改为了红色。
在这里插入图片描述

边框属性

所有的HTML标签都有边框，默认边框不可见。

边框：border

设置边框的样式

格式:宽度样式颜色
例如: border:1px solid red ，1像素粗的实线红色边框。
线条样式:solid实线，none无边，double 双线。

宽度：width

用于设置标签的宽度

高度：height

用于设置标签的高度

背景颜色：background - color

用于设置标签的背景颜色。

背景颜色设置的两种主流方式:
①英文单词
例如: red,blue,yellow
②颜色代码
格式: #红绿蓝，每一个颜色用两个16进制位数表示。
例如: #ff1100 红色ff，绿色11，蓝色00，红色颜色最重，绿色其次，没有蓝色。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				border: 1px solid red;
				width: 100px;
				height: 100px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div>hello,word</div>
	</body>
</html>

运行结果：
在这里插入图片描述

布局

浮动属性：float

通常默认的排版方式，将页面中的元素从上到下一一罗列，而实际开发中，需要左右方式进行排版，就需要使用浮动属性。

格式：
选择器{float:属性值;}
常用属性值:
none:元素不浮动(默认值)。
left:元素向左浮动。
right:元素向右浮动。

注意:因为元素设置浮动属性后，会脱离原有文档流(会脱离原有的板式),从而会影响其他元素的样式，所以设置浮动以后，页面样式需要重新调整。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#d1 {
				background-color: red;
				width: 100px;
				height: 100px;
				float: right;
			}

			#d2 {
				background-color: green;
				width: 110px;
				height: 110px;
				float: right;
			}

			#d3 {
				background-color: blue;
				width: 120px;
				height: 120px;
				float: right;
			}
		</style>
	</head>
	<body>
		<div id="d1"></div>
		<div id="d2"></div>
		<div id="d3"></div>
	</body>
</html>

运行结果：
将三个div浮动到右方
在这里插入图片描述

转换

display

在这里插入图片描述
display属性可以使得元素在行内元素和块元素之间相互转换。

格式:
选择器{display:属性值}
常用的属性值:。
block:此元素将显为块元素(块元素默认的display属性值)
inline:此元素将显示为行内元素(行内元素默认的display属性值)。
none:此元素将被隐藏，不显示，也不占用页面空间。

示例：
没有添加转换时的页面
在这里插入图片描述
添加转换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				display: inline;
			}
			li{
				display: inline;
			}
			span{
				display: block;
			}
			a{
				display: none;
			}
		</style>
	</head>
	<body>

		<h2>块级元素1-div----------由块元素转换为行内元素</h2>
		<div>div1</div>
		<div>div2</div>

		<h2>块级元素2-无序列表</h2>
		<ul>
			<li>111</li>
			<li>222</li>
			<li>333</li>
		</ul>

		<h2>行内元素1-span----------由行内元素转换为块元素</h2>
		<span>span1</span>
		<span>span2</span>

		<h2>行内元素2-a</h2>
		<a>a1</a>
		<a>a2</a>
		html

	</body>
</html>

运行结果：
块级元素都转换为了行内元素，而行内元素也转换为了块元素，最后的a标签页设置了none属性而隐藏了起来，但是也不占页面空间。
在这里插入图片描述

字体

大小：font-size

用于设置字体的大小。

颜色：color

用于设置字体的颜色。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			span{
				font-size: 70px;
				color: red;
			}
		</style>
	</head>
	<body>
		你好吗
		<span>我想要变大变红</span>
		你好啊
	</body>
</html>

运行结果：
在这里插入图片描述

css盒子模型

什么是盒子模型

所有的HTML元素，我们都可以看成一个四边形，即一个盒子。

用CSS来设置元素盒子的内边距、边框和外边距的样式的方式。

相当于设置盒子的样式，所以我们将其称之为盒子模型。

在这里插入图片描述

边框（border回顾及再概述）

边框：HTML元素盒子的框体，和css的边框属性是一样的。
在这里插入图片描述
边框有四个属性可以设置:

border- top:上边框。

border -right:右边框。

border -bottom:下边框。

border -left:左边框。

示例：

<span style="border-top: 1px solid red;">内容体</span>

效果：
在这里插入图片描述
通用性设置：
一次性设置上下左右边框样式为：1像素的实体红色线。
border:1px solid red;e
示例：

<span style="border: 1px solid red;">内容体</span>

效果：
在这里插入图片描述

内边距：padding

内边距: HTML元素里的内容体到HTML元素边框的距离。

在这里插入图片描述
内边距有四个属性可以设置:

padding-top:上边距

padding-right:右边距

padding-bottom:下边距

padding-left:左边距

通用性设置：
次性设置上下左右内边距距离为10px
padding:10px;

示例：

使用了通用性设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				border: 1px solid red;
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<div>内容体</div>
	</body>
</html>

运行结果：
在这里插入图片描述

外边距：margin

外边距: HTML元素边框到其他HTML元素边框的距离
在这里插入图片描述
外边距有四个属性可以设置:
margin-top:上边距

margin-right:右边距

margin-bottom:下边距

margin-left:左边距

通用性设置:
一次性设置上下左右外边距距离为10px
margin:10px;

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				border: 1px solid red;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		内容体
		<div>内容体</div>
	</body>
</html>

运行结果：
在这里插入图片描述

css和html的结合方式

内部样式

行内样式

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

格式:
< html标签 style="css 样式代码”/ >

示例：

<span style="font-size: 100px; color: red; ">hello,world</span>

效果：
在这里插入图片描述

< style >标签方式

当某些样式在页面中被多个标签重复使用，为了编码更加灵活，避免书写重复代码。

我们将样式代码从标签style属性中抽取出来，统一写入到style标签中。

格式：
< style >
css样式
< /style >

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			span{
				font-size: 100px;
				color: red;
			}
		</style>
	</head>
	<body>
		<span>hello,world</span>
		<br />
		<span>html</span>
	</body>
</html>

运行结果：
在这里插入图片描述

应用环境:适合页面中进行样式复用，设置多个标签。

外部样式

< link/ >标签方式

< link/ >又称为链入式，是将所有的样式放在一个或多个以css为扩展名的外部样式表文件中，通过< link >标签将样式连接到HTML文档中。

格式:
< link rel=“stylesheet” type=“text/css” href=“css文件路径”/ >
rel=“stylesheet” ,固定值，表示样式表

type=“text/css”，固定值，表示css类型

href，表示css文件位置

适合：不同页面进行样式复用。

示例：

HTML文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css.css" />
	</head>
	<body>
		<a>hello</a>
		<a>hello</a>
		<a>hello</a>
		<a>hello</a>
	</body>
</html>

css文件

a{
	font-size: 100px;
	color: red;
}

运行结果：
在这里插入图片描述

A.夕阳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb（2）之CSS

CSS简述css是什么？有什么作用？HTML------>页面的结构------>人的面部(素颜)。CSS------>美化页面------>给人化妆。CSS通常称为CSS样式或层叠样式表，主要用于设置HTML页面中的文本内容(字体、大小、对其方式等)、图片的外形(高宽、边框样式、边距等)以及版面的布局等外观显示样式。CSS可以使HTML页面更好看，CSS色系的...
复制链接

扫一扫

专栏目录