【CSS】快速入门笔记

已于 2023-03-11 22:50:58 修改
阅读量407 收藏 1
点赞数 1
分类专栏： 前端知识 文章标签： css html 前端
于 2023-03-11 22:49:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40844116/article/details/129467343
版权

视频链接：https://www.bilibili.com/video/BV1mS4y1Z7Ga/?spm_id_from=333.999.0.0&vd_source=1ad00d913eae8281cbadad6ae66fb06c

文章目录

一、CSS语法

1.结构

在这里插入图片描述

2.样式类型

1）内联样式 Inline Style

特点：直接写到html元素上，没有选择器，直接就是声明，仅对当前的html元素有效

<p style="color:red">我是一段文字</p>

在这里插入图片描述

2）内部样式 Internal Style

特点：写在html文档的head标签中，使用style标签，包含一个或多个css规则

<head>
	<meta charset="UTF-8">
	<style>
	.box{
		width:600px;
		height:1200px;
	}
	</style>
</head>

在这里插入图片描述

3）外部样式 External Style

特点：先在外部存储独立的css文件，通过把Link标签放在head标签内，指定其href属性，来指定外部css属性,使用最多

<!--主体代码-->
<html>
	<head>
		<meta charset="UTF-8">
		<title>我是标题</title>
		<link rel="stylesheet" href="mystyle.css">
	</head>
	<body>
	......
	</body>
</html>

/*css文件mystyle.css*/
h1{
	width:600px;
	height:1200px;
	margin:auto;
}

在这里插入图片描述

二、选择器（Selector）

描述：用于在css语句或文档中，选择html元素。

1.类型

1）类型选择器

特点：直接写元素标签的名称，例如上面的h1，可用于选择页面上所有的该类型标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外部样式</title>
		<link rel="stylesheet" href="mystyle-选择器测试.css">
	</head>
	<body>
		<h1>我的第一个h1标签</h1>
		<h1>我的第二个h1标签</h1>
		<h1>我的第三个h1标签</h1>
		<h2>我的第一个h2标签</h2>
		<h2>我的第二个h2标签</h2>
		<h2>我的第三个h2标签</h2>
	</body>
</html>

/*css文件    mystyle-选择器测试.css*/
h1{
	color: red;
}
h2{
	color: blue;
}

在这里插入图片描述

2）类选择器

特点：点.+类名，类名可自定义，同时html对应元素中，有同名的class属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外部样式</title>
		<link rel="stylesheet" href="mystyle-选择器测试.css">
	</head>
	<body>
		<h1>我的第一个h1标签</h1>
		<h1>我的第二个h1标签</h1>
		<h1>我的第三个h1标签</h1>
		<h2>我的第一个h2标签</h2>
		<h2>我的第二个h2标签</h2>
		<h2>我的第三个h2标签</h2>
		<p class="my_p">我是一个段落</p>
	</body>
</html>

/*css文件    mystyle-选择器测试.css*/
h1{
	color: red;
}
h2{
	color: blue;
}
.my_p{
	color: green;/*类选择器*/
}

在这里插入图片描述

3）id选择器

特点：#加id名称，同时html对应元素中，有同名的id属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外部样式</title>
		<link rel="stylesheet" href="mystyle-选择器测试.css">
	</head>
	<body>
		<h1>我的第一个h1标签</h1>
		<h1>我的第二个h1标签</h1>
		<h1>我的第三个h1标签</h1>
		<h2>我的第一个h2标签</h2>
		<h2>我的第二个h2标签</h2>
		<h2>我的第三个h2标签</h2>
		<p class="my_p">我是一个段落</p>
		<p id="my_pid">我也是一个段落</p>
	</body>
</html>

/*css文件    mystyle-选择器测试.css*/
h1{
	color: red;
}
h2{
	color: blue;
}
.my_p{
	color: green;/*类选择器*/
	}
#my_pid{
	color: orange;/*类选择器*/
}

在这里插入图片描述

4）属性选择器

特点1：不常用，标签[属性]，选择所有该类型标签并包含该属性的所有元素

<!DOCTYPE html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外部样式</title>
		<link rel="stylesheet" href="mystyle-选择器测试.css">
	</head>
	<body>
		<h1>我的第一个h1标签</h1>
		<h1>我的第二个h1标签</h1>
		<h1>我的第三个h1标签</h1>
		<h2>我的第一个h2标签</h2>
		<h2>我的第二个h2标签</h2>
		<h2>我的第三个h2标签</h2>
		<p class="my_p">我是一个段落</p>
		<p id="my_pid">我也是一个段落</p>
		<a title="baidu" href="http://www.baidu.com">百度</a>
		<a title="" href="http://www.baidu.com">百度</a>
		<a href="http://www.baidu.com">百度</a>
	</body>
</html>

/*css文件    mystyle-选择器测试.css*/
h1{
	color: red;
}
h2{
	color: blue;
}
.my_p{
	color: green;/*类选择器*/
}
#my_pid{
	color: orange;/*类选择器*/
}
a[title]{
	color: fuchsia;/*属性选择器*/
}

在这里插入图片描述
特点2：属性也可指定值，更精确选择

/*css文件    mystyle-选择器测试.css*/
h1{
	color: red;
}
h2{
	color: blue;
}
.my_p{
	color: green;/*类选择器*/
}
#my_pid{
	color: orange;/*类选择器*/
}
a[title]{
	color: fuchsia;/*属性选择器*/
}
a[title=""]{
	color: saddlebrown;/*属性选择器-指定属性内容*/
}

在这里插入图片描述

5）通用选择器

特点：星号*，代表所有元素

/*css文件    mystyle-选择器测试.css*/
h1{
	color: red;
}
h2{
	color: blue;
}
.my_p{
	color: green;/*类选择器*/
}
#my_pid{
	color: orange;/*类选择器*/
}
a[title]{
	color: fuchsia;/*属性选择器*/
}
a[title=""]{
	color: saddlebrown;/*属性选择器-指定属性内容*/
}
*{
	font-family: KaiTi;/*通用选择器，更改字体为楷体*/
}

在这里插入图片描述

2.使用

1）组合使用

组合1：以上选择器直接连写，需要满足所有同条件后生效；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外部样式</title>
		<link rel="stylesheet" href="mystyle-选择器测试.css">
	</head>
	<body>
		<h1 class="my_p">我的第一个h1标签</h1>
		<h1>我的第二个h1标签</h1>
		<h1>我的第三个h1标签</h1>
		<h2>我的第一个h2标签</h2>
		<h2>我的第二个h2标签</h2>
		<h2>我的第三个h2标签</h2>
		<p class="my_p">我是一个段落</p>
		<p id="my_pid">我也是一个段落</p>
		<a title="baidu" href="http://www.baidu.com">百度</a>
		<a title="" href="http://www.baidu.com">百度</a>
		<a href="http://www.baidu.com">百度</a>
	</body>
</html>


h1{
	color: red;
}
h2{
	color: blue;
}
.my_p{
	color: green;/*类选择器*/
}
#my_pid{
	color: orange;/*类选择器*/
}
a[title]{
	color: fuchsia;/*属性选择器*/
}
a[title=""]{
	color: saddlebrown;/*属性选择器-指定属性内容*/
}
*{
	font-family: KaiTi;/*通用选择器，更改字体为楷体*/
}
h1.my_p{
	font-style: oblique;/*组合选择器，字体斜体*/
}

在这里插入图片描述
组合2：以上选择器用逗号连接，则对列出的选择器都生效


h1{
	color: red;
}
h2{
	color: blue;
}
.my_p{
	color: green;/*类选择器*/
}
#my_pid{
	color: orange;/*类选择器*/
}
a[title]{
	color: fuchsia;/*属性选择器*/
}
a[title=""]{
	color: saddlebrown;/*属性选择器-指定属性内容*/
}
*{
	font-family: KaiTi;/*通用选择器，更改字体为楷体*/
}
h1.my_p{
	font-style: oblique;/*组合选择器，字体斜体*/
}
h1,h2{
	font-size: 20px;/*组合选择器，字体大写变成20px*/
}

在这里插入图片描述
组合3：父子组合，需要一个父标签用空格连接一个子标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外部样式</title>
		<link rel="stylesheet" href="mystyle-选择器测试.css">
	</head>
	<body>
		<h1 class="my_p">我的第一个h1标签</h1>
		<h1>我的第二个h1标签</h1>
		<h1>我的第三个h1标签</h1>
		<h2>我的第一个h2标签</h2>
		<h2>我的第二个h2标签</h2>
		<h2>我的第三个h2标签</h2>
		<p class="my_p">我是一个段落</p>
		<p id="my_pid">我也是一个段落</p>
		<a title="baidu" href="http://www.baidu.com">百度</a>
		<a title="" href="http://www.baidu.com">百度</a>
		<a href="http://www.baidu.com">百度</a>
		<div>
			<h1>我是div里的h1标签 </h1>
		</div>		
	</body>
</html>

h1{
	color: red;
}
h2{
	color: blue;
}
.my_p{
	color: green;/*类选择器*/
}
#my_pid{
	color: orange;/*类选择器*/
}
a[title]{
	color: fuchsia;/*属性选择器*/
}
a[title=""]{
	color: saddlebrown;/*属性选择器-指定属性内容*/
}
*{
	font-family: KaiTi;/*通用选择器，更改字体为楷体*/
}
h1.my_p{
	font-style: oblique;/*组合选择器，字体斜体*/
}
h1,h2{
	font-size: 20px;/*组合选择器，字体大写变成20px*/
}
div h1{
	text-decoration: underline;/*组合选择器，字体加下划线*/
}

在这里插入图片描述

2）优先级（Priority）

a.相同的规则按照加载顺序，写在后面的优先级更高

h1{
	color: red;/*字体红色*/
}
h1{
	color: green;/*字体绿色*/
}

在这里插入图片描述
这里先定义了红色，后定义了绿色，以绿色为准

b.继承下来的样式优先级永远低于直接指定的样式
案例1：

body{
	color: skyblue;/*字体天空蓝色*/
}
h1{
	color: green;/*字体绿色*/
}

h1本来应该继承body的天空蓝，但它自己定义了绿色，自己指定的优先级高于继承，所以最终显示绿色
在这里插入图片描述

案例2：

h1{
	color: green;/*字体绿色*/
}
div h1{
	color: blue;/*字体蓝色*/
}

后面的标签对同一属性有自己的直接指定的时候就不再继承前面统一定义过的属性
在这里插入图片描述

c. 内联样式优先级最高，!important是个例外
内部样式和外部样式的优先级没有太大区别，主要是语句顺序导致的加载顺序，但内联样式的优先级最高

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外部样式</title>
		<link rel="stylesheet" href="mystyle-选择器测试优先级.css">
	</head>
	<body>
		<h1 class="my_p">我的第一个h1标签</h1>
		<h1 style="color:red;">我的第二个h1标签</h1>
		<h1>我的第三个h1标签</h1>
		<h2>我的第一个h2标签</h2>
		<h2>我的第二个h2标签</h2>
		<h2>我的第三个h2标签</h2>
		<p class="my_p">我是一个段落</p>
		<p id="my_pid">我也是一个段落</p>
		<a title="baidu" href="http://www.baidu.com">百度</a>
		<a title="" href="http://www.baidu.com">百度</a>
		<a href="http://www.baidu.com">百度</a>
		<div>
			<h1>我是div里的h1标签 </h1>
		</div>
		
	</body>
</html>

在之前的基础上，单独给h2添加了内联样式，最后呈现的是内联样式指定的颜色
在这里插入图片描述
加了important,可以打破内联样式的优先级,颜色又被扳到外部样式的绿色

body{
	color: skyblue;/*字体蓝色*/
}
h1{
	color: green!important;/*字体绿色,并且!important*/
}

在这里插入图片描述

d. 类型选择器<类选择器<ID选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外部样式</title>
		<link rel="stylesheet" href="mystyle-选择器测试优先级.css">
	</head>
	<body>
		<h1 class="my_p">我的第一个h1标签</h1>
		<h1 style="color:red;">我的第二个h1标签</h1>
		<h1>我的第三个h1标签</h1>
		<h2>我的第一个h2标签</h2>
		<h2>我的第二个h2标签</h2>
		<h2>我的第三个h2标签</h2>
		<p class="my_p">我是一个段落</p>
		<p id="my_pid" class="my_p">我也是一个段落</p>
		<a title="baidu" href="http://www.baidu.com">百度</a>
		<a title="" href="http://www.baidu.com">百度</a>
		<a href="http://www.baidu.com">百度</a>
		<div>
			<h1>我是div里的h1标签 </h1>
		</div>
		
	</body>
</html>

.my_p{
	color:peru;/*字体褐色*/
}
p{
	color: green;/*字体绿色*/
}

类选择器高于类型选择器，与加载顺序无关
在这里插入图片描述

#my_pid{
	color: coral;/*字体珊瑚红色*/
}
.my_p{
	color:peru;/*字体褐色*/
}
p{
	color: green;/*字体绿色*/
}

在这里插入图片描述
id选择器的加载顺序最高

三、盒子模型（Box Model）

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<link rel="stylesheet" href="myboxstyle.css">
	</head>
	<body>
		<div class="box">
			div内容
		</div>
	</body>
</html>

.box{
	width: 100px;
	height: 100px;
	background-color: red;
}

在这里插入图片描述

1.边框 border

.box{
	width: 100px;
	height: 100px;
	background-color: red;
	border: 3px solid blue;/*3px 实线 蓝色*/
}

出现了3px的实线蓝色边框
在这里插入图片描述

2.内边距padding

.box{
	width: 100px;
	height: 100px;
	background-color: red;
	border: 3px solid blue;/*3px 实线 蓝色*/
	padding: 20px;/*内边距20px*/
}

文字和边框产生了距离，同时外框也变大
在这里插入图片描述

.box{
	width: 100px;
	height: 100px;
	background-color: red;
	border: 3px solid blue;/*3px 实线 蓝色*/
	padding: 20px;/*内边距20px*/
	
	padding-left: 5px;
	padding-top: 10px;
	padding-right: 15px;
	padding-bottom: 25px;
	padding: 10px 15px 25px 5px;/*简洁写法：上右下左*/
}

也可单独指定上下左右的内边距
在这里插入图片描述
右击-审查元素
在这里插入图片描述

3.外边距margin

.box{
	width: 100px;
	height: 100px;
	background-color: red;
	border: 3px solid blue;/*3px 实线 蓝色*/
	padding: 20px;/*内边距20px*/
	
	padding-left: 5px;
	padding-top: 10px;
	padding-right: 15px;
	padding-bottom: 25px;
	padding: 10px 15px 25px 5px;/*简洁写法：上右下左*/
	
	margin: 25px;
	margin-top: 20px;
	margin-bottom: 30px;
	margin-left: 15px;
	margin-right: 10px;
	margin: 20px 10px 30px 15px;/*简洁写法：上右下左*/
	
}
}

外框和页面产生了距离
在这里插入图片描述

在这里插入图片描述

Mercy92
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS快速入门笔记
weixin_46016309的博客
09-11 118
CSS快速入门、后端学习前端基础
CSS入门学习笔记+案例
热门推荐
itboy
06-16 30万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
css的入门笔记
小小城序员的博客
08-01 298
css入门笔记 这些都是本人（小白）在学习css过程中记录下的笔记，都是些基础的知识，部分过于深入的知识没有加以记录/span> css的简介 什么是css？ css指层叠样式表,可以定义如何显示html元素，控制页面的布局与外观。 css的内容 css的注释 /*这是css的注释*/ css的三种选择器 标签选择器，id选择器，class选择器 /*标签选择器:用于修饰标签是<div>的所有元素*/ div { color:yellow; } /*id选择器:用于修饰id=id1
【CSS】入门笔记
微子细的博客
08-06 326
本文笔记基于B站资源：千峰教育 转载请注明出处！ 目录 1.初识CSS 2.容器的作用 3.内部样式 4.选择器权重小结 5.文本属性 6.背景图 7.元素浮动布局（上） 8.元素浮动布局（下） 9.盒模型CSS+DIV 10.简写 1.初识CSS 标签内style： 1.字体标红：<td rowspan="4" align="center" style=...
CSS快速入门学习笔记
Goallegoal的博客
05-12 200
CSS快速入门学习笔记 概述 CSS 即层叠样式表（Cascading Style Sheets），用于定义 HTML 内容在浏览器内的显示样式，如文字大 小、颜色、布局等。 CSS 分为内联式、嵌入式和外联式三类（三类的优先级为距离被修饰内容越近越优先），具有继承和层叠的特点。 语法 CSS 的代码语法由选择器和声明组成。 p { font-size:10px; } p为选择器，{font-size:10px}为声明，声明由属性和值组成，其中font-size为属性，10px为值。 举例： <!
html+css入门学习笔记
01-24
本入门学习笔记将帮助初学者理解这两门技术的基本概念，逐步掌握创建动态、美观网页的方法。 HTML是用于创建网页内容的语言，它通过一系列标签来定义网页的各个部分，如标题、段落、图片、链接等。在HTML5中，新增...
css入门笔记
05-15
1.css的概述 1.问题 HTML属性修饰有一定局限，是不太便捷 2.css的语法规范 1.使用css样式方式 1.内联样式 行内样式 特点：将css样式定义在HTML标记中 语法： 样式声明：用样式属性和值组成（属性:值;） ...
CSS入门笔记
03-28
**CSS（层叠样式表）入门笔记** 在网页设计领域，CSS（Cascading Style Sheets）扮演着至关重要的角色，它负责控制网页的布局和视觉样式。本笔记将引导初学者逐步了解CSS的基础知识，包括选择器、属性、值以及如何...
基础css入门笔记.pdf
08-04
刚刚开始接触前端
css基础入门学习笔记详细教程
04-15
css入门学习笔记详细教程
CSS 技巧与案例详解：开篇介绍
粉丝们务必加入微信粉丝群
07-14 727
本系列文章分为多个部分，每个部分都详细解析了CSS的各种实用技巧和经典案例。CSS 单位速查表 & 自定义引用标记 & 重置所有样式：了解常见CSS单位，并学习如何创建自定义的引用标记和重置样式表。隐藏空元素 & 完美的嵌套边框圆角 & 排版比例基础知识：掌握隐藏元素的方法，实现嵌套圆角边框，以及排版比例的基本概念。自定义文本选择 & 流式排版：定制文本选择的样式，探索流式排版的奥秘。为什么line-height是无单位的 & 兄弟元素淡出效果 & 蚀刻文字效果。
最新！CSSCI（2023-2024）期刊目录公布！
2301_76900678的博客
07-19 191
C刊一般指CSSCI来源期刊，即南大核心的缩写，中文名称为《中文社会科学引文索引》，由南京大学中国社会科学研究评价中心制定，用来评价中文社会科学领域的论文收录和文献被引用情况，是我国人文社会科学评价领域的标志性工程。C扩即CSSCI来源期刊扩展版。由于上文所述的C刊是国内期刊中的重要刊物，遴选数量有限，一些优秀刊物由于数量限制无法进入C刊目录，C扩一般指办刊水平和学术价值与真正入选目录期刊还有一些差距但差距不大的刊物，C扩有进入C刊的预期，但C扩是否为核心期刊具体仍由不同单位自己判断。
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1307
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
HTML5+CSS3小实例：纯CSS实现奥运五环
艾恩小灰灰的博客
07-15 1911
实例：纯CSS实现奥运五环。技术栈：HTML+CSS。
网页隐藏版之一行小说阅读器
m0_47147246的博客
07-19 77
网页隐藏版一行小说阅读器
CSS|06 背景样式
Catherinemin的博客
07-19 346
距离他左边的盒子的距离为100px，第二个100px表示 背景图片的。/*左内填充，盒子里面的内容到左边边框线的距离，就称为左内填充*/语法： background-color: red;/*background-repeat 平铺*//*background-repeat 平铺*//*background-repeat 平铺*/
动态美学：WebKit中CSS转换与动画的魔力
2401_85743969的博客
07-19 288
CSS转换允许我们对元素进行旋转、缩放、移动和倾斜等操作。：移动元素。rotate()：旋转元素。scale()：缩放元素。skew()：倾斜元素。matrix()：更复杂的转换组合。CSS动画允许我们为元素的属性变化定义动画效果。：指定需要动画效果的属性。：指定动画的持续时间。：指定动画的速度曲线。：指定动画的延迟时间。
掌控视界：WebKit与CSS视口单位的卓越支持
最新发布
2401_85742452的博客
07-19 315
CSS视口单位是一种相对单位，它们相对于视口（浏览器窗口）的大小进行缩放。vw（Viewport Width）：视口宽度的1%。vh（Viewport Height）：视口高度的1%。vmin：视口宽度和高度中的较小值的1%。vmax：视口宽度和高度中的最大值的1%。
CSS基础
lvshihao_的博客
07-15 705
项目上线时，我们会通过工具将【展开风格】的代码，变成【紧凑风格】，这样可以减小文。：选择器与声明块之间，属性名与属性值之间，均有一个空格，理论上能省略，但最好。外部样式的优势：样式可以复用、结构清晰、可触发浏览器的缓存机制，提高访问速。件体积，节约网络流量，同时也能让用户打开网页时速度更快。行内样式表，只能控制当前标签的样式，对其他标签无效。：最后一个声明后的分号理论上能省略，但最好还是写上。1. 内部样式、外部样式，这二者的优先级相同。添加样式，实现了：结构与样式的分离。的思想，不推荐大量使用，只。
前端开发学习笔记：CSS基础入门
"《页面制作》笔记（5.CSS-1）是网易微专业《前端开发工程师》课程的学习笔记，由西风潇潇编写的，主要介绍了CSS的基本概念、历史以及如何在HTML中引用CSS样式。笔记中提到了CSS用于定义HTML内容的显示样式，包括...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值