第四次网页前端培训笔记（CSS）

最新推荐文章于 2023-04-19 18:20:13 发布

桃桃薄荷瑶

最新推荐文章于 2023-04-19 18:20:13 发布

阅读量273

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_62854583/article/details/122812139

版权

1.CSS背景

CSS背景属性用于定义HTML元素的背景

1.1.背景颜色background-color

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>试一试</title>
		<style>
			#test1{
				background-color: coral;
			}
			#test2{
				background-color: #4CD964;
			}
		</style>
	</head>
	<body>
		<h1 id="test1">测试背景颜色111</h1>
		<h2 id="test2">测试背景颜色111</h2>
	</body>
</html>

1.2.背景图像background-image

默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.

body{
        background-image:url('图片网址');
    }

只想水平方向铺:（竖直方向同理）

body{
        background-image:url('图片网址');
        background-repeat:repeat-x;
    }

不想重复铺图片，只让图片出现一次：

body{
        background-image:url('图片网址');
        background-repeat:no-repeat;
    }

1.3.简写背景属性

当使用简写属性时，属性值的顺序为：:

background-color
background-image
background-repeat
background-attachment
background-position

以上属性无需全部使用，可以按照页面的实际需要使用。

2.CSS链接

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。特别的链接，可以有不同的样式，这取决于他们是什么状态。

2.1.未访问的链接a:link

2.2.已访问的链接a:visited

2.3.鼠标在链接处时a:hover

2.4.链接被点击那一刻a:active

注意：3必须跟在1和2后面，4必须跟在3后面。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>试一试</title>
		<style>
		#test1{
			background-color: #DD524D;
		}
			a:link {color:#000000;}      /* 未访问链接*/
			a:visited {color:#00FF00;}  /* 已访问链接 */
			a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
			a:active {color:#0000FF;}  /* 鼠标点击时 */
		</style>
	</head>
	<body>
		<h1 id="test1">测试背景颜色111</h1>
		<a href=" ">点击一下吧</a>
	</body>
</html>

2.5.文本修饰（删除链接中的下划线）text-decoration

2.6.链接背景颜色background-color

3.CSS盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

4.display

4.1.隐藏元素display:none

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

4.2.隐藏元素visibility:hidden

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

4.3.显示元素display:block

5.浮动float

5.1.一个元素的浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>试一试</title>
		<style>
		#test1{
			background-color: #DD524D;
		}
			a:link {color:#000000;}      /* 未访问链接*/
			a:visited {color:#00FF00;}  /* 已访问链接 */
			a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
			a:active {color:#0000FF;}  /* 鼠标点击时 */
			img{
				float: right;
			}
		</style>
	</head>
	<body>
		<h1 id="test1">测试背景颜色111</h1>
		<a href=" ">点击一下吧</a>
		<p>
			<img src="img/例子.jpg" />
			大悲时不发言，大怒时不争辩，大喜时不许诺总有一天，你会明白，能够治愈你的，从来都不是时间，而是你心里的那股释怀和格局。只要内心不慌乱，连世界都难影响你。你可以消沉，也可以抱怨，甚至可以崩溃，但不能丧失自愈的能力，要学会及时止损。人生不一定要赢，但绝不能输给过去的错误和愚蠢。人生哪有白走的路，每一步都是成长，你要把头抬起来，一直往前走，天总会亮的。一辈子很短，要好好爱自己，你的优秀要遇到识货的人，你的真心要遇到珍惜你的人，你的善良要遇到感恩的人。谋生的路上不抛弃良知，某爱的路不放弃尊严。你该有的样子就是：十分沉静，九分气质，八分遗憾，七分现实，三分颜值，两分糊涂，一分自知之明。无论身在何方，陷于陷于何地，都要试着去做环境的主人，向下生根，向上开花，不负生活，不负自己。谋生的路上不抛弃良知，谋爱的路上不放弃尊严。爱自己胜于别人爱你。一辈子很短，要好好爱自己，你的优秀，要遇到识货的人，你的真诚，要遇到珍惜你的人，你的善良，要遇到感恩的人。          来源于——公众号“小声清” </p>
		
	</body>
</html>

该页面拉伸后：图片始终在右边

5.2. 彼此相邻的浮动元素

未展开时：

展开后：

桃桃薄荷瑶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第四次网页前端培训笔记（CSS）

1.CSS背景CSS背景属性用于定义HTML元素的背景1.1.背景颜色background-color<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>试一试</title> <style> #test1{ background-color: coral; } #test2{ backgroun
复制链接

扫一扫