前端学习之css

最新推荐文章于 2024-08-02 20:34:24 发布

携手凡生

最新推荐文章于 2024-08-02 20:34:24 发布

阅读量199

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/salove_y/article/details/84145083

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

0. HTML的简单了解

1. HTML中的三种布局格式：

a. 标准流（网页中默认的方式)
b. 浮动
c. 定位

2. HTML的两大元素

a. 块级元素（独占一行）：div、H1~H6、table、p、有序无序列表(ol、ul、li)、等等
b. 内联元素（和相邻的内联元素在同一行）：a、span、image、input、等等

3. 代码示例及效果展示：

3.1 块级元素和内联元素的对比

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>标准流</title>
	<style>
		.test{
			width: 100px;
			height: 100px;
			background: red;
			border: 1px solid #FFF;
		}
	</style>
</head>
<body>
	<div class="test"></div>
	<div class="test"></div>
	<div class="test"></div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>标准流</title>
	<style>

	</style>
</head>
<body>
	<span>文字1</span>
	<span>文字2</span>
	<span>文字3</span>
	<span>文字4</span>
</body>
</html>

在这里插入图片描述

3.2 position定位元素
- position属性决定了元素将如何定位，通过top、right、bottom、left实现位置
- position中的可选参数：static、relative、absolute、fixed、inherit

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>position</title>
	<style>
		.div1{
			width: 100px;
			height: 100px;
			background: red;
			position: relative;
			left: 0;
			top: 100px;
		}
		.div2{
			width: 100px;
			height: 100px;
			background: blue;
			position: relative;
			left: 0;
			top: -50px;
		}
	</style>
</head>
<body>
	<div class="div1"></div>
	<div class="div2"></div>
</body>
</html>

该图表明默认的块之间的层级关系是：后写块元素特性 > 先写的
在这里插入图片描述

1. css的编写格式

1.内嵌式：

概念：写在html文件中一对style标签内部
优点：结构和样式分离
缺点：大段的css样式还是写在html文件中，造成html文件冗余，css文件不能多次使用。

<style type=text/css>
	body{
		background: skyblue;
		font-size: 14px;
		font-family: "宋体";
		color: #fff;
	}
</style>

或

<style>
	body{
		background: skyblue;
		font-size: 14px;
		font-family: "宋体";
		color: #fff;
	}
</style>

2.外链式

概念：
1>css文件是一个单独的文件，通过一个link的标签引入我们的html文件里面;
2>css文件是一个纯文本文件（扩展名.css）。
3>通过link标签在html与css文件中间建立联系，让html可以加载css里的样式。
优点：
1>结构和样式完全分离，html文件只负责结构，css文件只负责css样式；
2>同一个css样式可以被多个文件使用。一旦css样式更改，多个html文件同时更改。
注意事项：
1>外链式的css样式不需要写在一对style标签内部；
2>外链式样式表里，选择器使用方法与html里面是一样的，而且选择器权重计算也是一样的。跟内嵌式比较时，比较方法是一样的。

# 01.css
div {
	width: 200px;
	height: 200px;
	background: yellow;
}

<link rel="stylesheet" href="css/01.css" type="text/css">

link：链接
rel：relationship，关系；stylesheet：表示html里面引入的这个css是样式表
href：css路径，既可以是相对路径，也可以是绝对路径（http格式）
type：规定的是引入文件的类型，是纯文本形式的css文件