一、CSS学习笔记（CSS层叠样式表一）

已于 2024-03-11 15:35:17 修改
阅读量1.7k 收藏 30
点赞数 19
分类专栏： 前端 CSS 文章标签： 笔记
于 2024-03-08 14:45:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46108997/article/details/136536555
版权

title: 一、CSS学习笔记（CSS层叠样式表一）
date: 2024/02/04

CSS 简介

CSS 的主要作用是用来美化页面、布局页面的

HTML 的局限性

HTML 只关注页面的内容，只关注页面内容的显示，但至于显示的丑与美，并不在意。

CSS-网页的美容师

CSS 是层叠样式表的简称，也称CSS 样式表或级联样式表，CSS 也是一种标记语言，主要用于页面的美化，包括字体颜色、字体大小、图片的宽高以及页面的布局和外观的显示。

CSS 语法规范

CSS 语法规范主要由两部分组成：选择器和多条声明

  • 01-体验CSS语法规范.html

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatiable" content="ie=edge">
	<title>体验CSS语法规范</title>
	<!-- CSS 代码写在 style 标签中，style 标签嵌套在 head 标签中-->
	<style>
		/*选择器 -> 选择 p 标签*/
		p {
			/*声明 -> 颜色为红色*/
			color: red;
			/*声明 -> 字体大小 12 个像素*/
			font-size: 12px;
		}
	</style>
</head>
<body>
	<p>有点意思</p>
</body>
</html>

CSS 代码风格

样式格式书写

  1. 紧凑格式

    p {color: red;font-size: 12px;}

  2. 展开格式（建议）

    p {
	color: red;
	font-size: 12px;
}

样式大小写

使用小写

空格规范

  1. 选择器名和括号之间

  2. 冒号和属性值之间

CSS 基础选择器

CSS 选择器的作用

选择器就是根据不同的需求将指定的标签选择出来，简单来说就是选择标签用的

选择器的分类

选择器分为基础选择器和复合选择器两大类

基础选择器

标签选择器

标签选择器是指使用 HTML 标签名作为选择器，优点：可以快速为页面内同名标签统一修改样式。缺点：不能差异化设置，无法单独设置指定标签，比如有 3 个 div 标签，要么都改，要么都不改，不能只改其中一个

标签名 {
	样式......
}

  • 02-标签选择器.html

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatiable" content="ie=edge">
	<title>标签选择器</title>
	<!-- CSS 代码写在 style 标签中，style 标签嵌套在 head 标签中-->
	<style>
		/*标签选择器，只选择 p 标签*/
		p {
			color: green;;
		}
		/*标签选择器，选择 div 标签*/
		div {
			color: pink;
		}
	</style>
</head>
<body>
	<p>男生</p>
	<p>男生</p>
	<p>男生</p>
	<div>女生</div>
	<div>女生</div>
	<div>女生</div>
</body>
</html>

类选择器

通过类属性，可以为指定的单独某个标签设置样式，可以实现同名标签差异化设置

.类名 {
	样式......
}

<p class=“类名”></p>

  • 03-类选择器.html

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatiable" content="ie=edge">
	<title>类选择器</title>
	<!-- CSS 代码写在 style 标签中，style 标签嵌套在 head 标签中-->
	<style>
		/*类选择器，定义 red 类*/
		/*一定要注意类名前有个“.”，类名可以自定义名称，但不可以使用标签名，如“.div”*/
		.red {
			color: red;
		}
	</style>
</head>
<body>
	<ul>
		<!-- 谁的 class 属性添加了 red 类，谁就会被 red 类选择器修改样式 -->
		<li class="red">冰雨</li>
		<li>来生缘</li>
		<li class="red">李香兰</li>
		<li>生僻字</li>
		<li>江南Style</li>
	</ul>
</body>
</html>

  • 04-课堂案例.html

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatiable" content="ie=edge">
	<title>画盒子</title>
	<style>
		.red {
			width: 100px;
			higth: 100px;
			background-color: red;
		}
		.green {
			width: 100px;
			higth: 100px;
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="red">红色</div>
	<div class="green">绿色</div>
	<div class="red">红色</div>
</body>
</html>

  • class 属性可以有多个值，也就是说一个标签可以使用多个类名，在使用的时候使用空格隔开即可

  • 05-类选择器多类名的使用.html

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatiable" content="ie=edge">
	<title>画盒子</title>
	<style>
		.red {
			width: 100px;
			higth: 100px;
			background-color: red;
		}
		.font-size-big {
			font-size: 35ps;
		}
	</style>
</head>
<body>
	<!-- 使用两个类名 -->
	<div class="red font-size-big">CodeDog</div>
</body>
</html>

  • 06-课堂案例.html（使用多类名改进）

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatiable" content="ie=edge">
	<title>画盒子</title>
	<style>
		/*公共样式抽出处理*/
		.rectangle {
			width: 100px;
			higth: 100px;
		}
		.red {
			background-color: red;
		}
		.green {
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="red rectangle">红色</div>
	<div class="green rectangle">绿色</div>
	<div class="red rectangle">红色</div>
</body>
</html>

id 选择器

和类选择器相似，只不过是通过 id 属性来选择标签

#nav {
	color: red;
}

<div id="nav">id 选择器</div>

  • 07-id选择器.html

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatiable" content="ie=edge">
	<title>id选择器</title>
	<style>
/*因为 id 在画面中是唯一的，所以一个 id 选择器只能被一个标签使用，且一个标签只能使用一个 id 选择器*/
		#pink {
			color: pink;
		}
	</style>
</head>
<body>
	<div id="pink">粉色</div>
</body>
</html>

通配符选择器

可以使用 * 来选择页面内的所有标签

* {
	color: red;
}

  • 08-通配符选择器.html

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatiable" content="ie=edge">
	<title>通配符选择器</title>
	<style>
		* {
			color: pink;
		}
	</style>
</head>
<body>
	<div>粉色</div>
	<p>粉色</p>
</body>
</html>

CSS 字体属性

字体系列

CSS 使用 font-family 属性定义文本的字体

p {
	font-family: '微软雅黑';
}

  • 09-字体系列.html

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatiable" content="ie=edge">
	<title>字体系列</title>
	<style>
		h2 {
			font-family: '微软雅黑';
		}
		p {
			/* 微软雅黑 英文写法（推荐）*/
			/* 可以使用多个字体，用逗号隔开，按顺序检测字体是否可用 */
			font-family: 'Microsoft Yahei', Arial;
		}
	</style>
</head>
<body>
	<h2>微软雅黑</h2>
	<p>Microsoft Yahei</p>
</body>
</html>

字体大小

使用 font-size 设置字体大小，单位是 px（像素）

p {
	font-size: 20px;
}

  • 10-字体大小.html

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatiable" content="ie=edge">
	<title>字体大小</title>
	<style>
		p {
			font-size: 20px;
		}
	</style>
</head>
<body>
	<p>字体大小</p>
</body>
</html>

字体粗细

使用 font-weight 设置字体粗细

p {
	font-weigth: normal;
}
属性值描述
lighter细体
normal正常
bold粗体
bolder特粗
number直接写数字，如font-weigth: 400;，400 等同于 normal、700 等同于 bold

  • 11-字体粗细.html

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatiable" content="ie=edge">
	<title>字体粗细</title>
	<style>
		p {
			/* font-weigth: bold; */
			font-weigth: 700;
		}
	</style>
</head>
<body>
	<p>字体粗细</p>
</body>
</html>

文字样式

CSS 使用 font-style 设置文字样式

p {
	font-style: normal;
}
属性值描述
normal默认值。浏览器显示一个标准的字体样式。
italic浏览器会显示一个斜体的字体样式。
oblique浏览器会显示一个倾斜的字体样式。
inherit规定应该从父元素继承字体样式。

  • 12-文字样式.html

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatiable" content="ie=edge">
	<title>文字样式</title>
	<style>
		p {
			font-style: italic;
		}
	</style>
</head>
<body>
	<p>文字样式</p>
</body>
</html>

字体复合属性

p {
	font：/* font-style font-weight font-size/line-height font-family*/;
}

  • 13-字体复合属性.html

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatiable" content="ie=edge">
	<title>字体复合属性</title>
	<style>
		/* p {
			font-style: italic;
			font-weight: 400;
			font-size: 16px;
			font-family: 'Microsoft YaHei';
		} */
		p {
			/* 严格按照顺序填写各属性的值，不可以颠倒顺序 */
			font: italic 400 16px 'Microsoft YaHei';
		}
	</style>
</head>
<body>
	<p>字体复合属性</p>
</body>
</html>

CSS 文本属性

文本颜色

使用 color 属性来修改文本颜色

p {
	color: red;
}
属性值描述
red、green、blue…预定义的颜色值，颜色对应的英文单词
#FFFFFF、#FFF000、#3213D1十六进制颜色值
RGB代码rbg(255, 0, 0)，取值范围 0 ～ 255

  • 14-文本颜色.html

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatiable" content="ie=edge">
	<title>文本颜色</title>
	<style>
		p {
			/* color: red; */
			/* color: #FF0000; */
			color: rgb(255, 0, 0);
		}
	</style>
</head>
<body>
	<p>文本颜色</p>
</body>
</html>

文本对齐

使用 text-align 属性可以设置标签内的文本相对于标签本身的水平对齐方式

p {
	text-align: center;
}
属性值描述
left靠左
center居中
right靠右

  • 15-文本对齐.html

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatiable" content="ie=edge">
	<title>文本对齐</title>
	<style>
		div {
			text-align: center; /* center、left、right */
		}
	</style>
</head>
<body>
	<div>文本对齐</div>
</body>
</html>

文本装饰

使用 text-decoration 属性可以对文本进行装饰，比如添加上划线、下划线、删除线

p {
	text-decoration: underline;
}
属性值描述
none没有装饰线，默认是 none
underline下划线
overline上划线
line-through删除线

  • 16-文本装饰.html

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatiable" content="ie=edge">
	<title>文本装饰</title>
	<style>
		p {
			text-decoration: underline;
		}
	</style>
</head>
<body>
	<p>文本装饰</p>
</body>
</html>

文本缩进

使用 text-indent 属性可以指定文本段落的首行缩进

p {
	text-indent: 10px;
}

  • 17-文本缩进.html

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatiable" content="ie=edge">
	<title>文本缩进</title>
	<style>
		p {
			/* text-indent: 20px; */
			/* em 是一种相对单位，相对于当前一个文字大小的单位 */
			/* 如果当前文字是 16 px，那么 1em = 16px */
			/* 所以不论文字多大，2em 始终等于两个文字大小 */
			text-indent: 2em;
		}
	</style>
</head>
<body>
	<p>文本缩进</p>
</body>
</html>

行间距

使用 line-hight 指定文本行与行之间的距离

p {
	line-hight: 10px;
}

  • 17-行间距.html

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatiable" content="ie=edge">
	<title>行间距</title>
	<style>
		p {
			line-hight: 20px;
		}
	</style>
</head>
<body>
	<p>行间距</p>
	<p>行间距</p>
	<p>行间距</p>
</body>
</html>

CSS 的引入方式

CSS 的三种样式表

  1. 行内样式表

  2. 内部样式表

  3. 外部样式表

内部样式表

在 HTML文档内部 的 <style> 标签中编写 CSS 代码，理论上 <style> 标签可以放到任何位置，但是建议放在 <head> 标签内

  • 19-内部样式表.html

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatiable" content="ie=edge">
	<title>内部样式表</title>
	<style>
		p {
			color: red;
		}
	</style>
</head>
<body>
	<p>内部样式表</p>
</body>
</html>

行内样式表

通过 style 属性，可以为单个标签设置一些简单样式

<p style="color: red; font-size: 16px;">行内样式表</p>

  • 20-行内样式表.html

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatiable" content="ie=edge">
	<title>行内样式表</title>
</head>
<body>
	<p style="color: red; font-size: 16px;">行内样式表</p>
</body>
</html>

外部样式表

单独创建一个后缀为 css 的文件来编写样式代码，然后通过 <link rel="stylesheet" href="css文件路径" > 标签引入 CSS 文件

  1. 新建 style.css 文件

  2. 编写样式代码

    p {
	color: red;
}

  3. 新建 21-外部样式表.html 文件

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatiable" content="ie=edge">
	<title>外部样式表</title>
	<!-- 引入 css 文件 -->
	<link rel="stylesheet" href="./style.css" >
</head>
<body>
	<p>外部样式表</p>
</body>
</html>

综合案例

略

Chrome 调试工具

略

CodeDog1024
关注
  • 19
    点赞
  • 踩
  • 30
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
二、CSS学习笔记（CSS层叠样式表一）
CodedOG 的小屋
03-11 266
二、CSS学习笔记（CSS层叠样式表一）
css层叠样式表学习笔记
我的个人博客
04-20 1035
为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。
css层叠样式表——css基础介绍
Xiaohuang的博客
12-08 485
css笔记学习第一天
HTML学习笔记（css层叠样式表介绍）
weixin_47878443的博客
02-10 358
什么是css：1.css指层叠样式表（cascading style sheets） 2.样式定义如何显示控制HTML元素，从而实现美化HTML网页 3.样式通常储存再样式表中，目的也是为了解决内容与表现分离的问题 4.外部样式表（css文件）可以极大地提高工作效率 5.多个样式定义可以层叠为一，后者可以覆盖前者的样式。 css的语法：格式：选择器{属性：值；属性：值；属性：值；...}, 其中选择器也叫选择符，用来寻找网页中的标签并加以控制。 例：P{color：red；text-ali
CSS入门学习笔记+案例
热门推荐
itboy
06-16 29万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
CSS学习笔记一——基本语法及样式表
weixin_43328954的博客
01-22 588
一、CSS基本介绍 CSS（Cascading Style Sheets）层叠样式表，是 WEB 标准中的表现标准语言，主要用于修饰网页信息的显示样式，目前推荐遵循 W3C 发布的 CSS 3.0，最基本要学会CSS 2.0的写法。 二、基本语法 1. 每个CSS样式由两部分组成，即 选择符和声明，声明又分为属性和属性值； 2. 属性必须放在 花括号 中，属性与属性值用 冒号 连接； 3. 每条声明用分号结束； 4. 当一个属性有多个属性值的时候，属性值与属性值不分先后顺序用 空格 隔开；
CSS层叠式样式表学习笔记
david2000999的博客
02-29 319
CSS和HTML分开的优点 HTML负责基本的内容展示，而CSS负责样式的控制，制造效果。 1、实现解耦合的作用 2、使得协作更加明确 3、开发效率得到提高 CSS和HTML的结合方式 内联：就是在想要控制样式的的标签内直接控制，只能作用于该部分，范围最小。 内部：直接在head内部中控制该文件的样式。 外部：通过link标签链接一个外部的css文件，而控制方式就直接书写在这个外部css文件中。 ...
CSS学习笔记一
qq_59301215的博客
11-13 436
css基础知识，pink老师教学所授。
【CSS3学习笔记】1：认识层叠样式表
LauZyHou的笔记
06-12 871
CSS层叠样式表，用来对HTML文档外观的表现形式进行排版和格式化。 几个名词 ①层叠：同一个元素通过不同方式的设置产生的样式叠加或冲突覆盖。优先级从低到高为浏览器样式 ②继承：一个被嵌套的元素得到它父元素的样式。样式继承只适用于元素的外观(文字、颜色、字体等)，而元素页面上的布局样式不会被继承。如果要继承这种样式，就必须用强制继承inherit。 ③浏览器样式：元素本身就具有的样式。
CSS（层叠样式）学习笔记
11-09
CSS（层叠样式）学习笔记
CSS层叠样式表.pdf
11-18
css学习最强总结笔记 适合入门小白理解和有经验的作为快速查找使用 分门别类 易于理解 深入浅出 总结到位 点到核心 没有废话 持续更新中
精心整理的一份CSS学习笔记+CSS思维导图
01-08
CSS全称：层叠样式表 (Cascading Style Sheets) 。 CSS作用：美化界面，布局页面，修饰元素外观，修改元素位置等。 CSS引入方式： 1.行内样式： 我是一个块级的标签 2.内嵌样式：将CSS样式表放到head中用 ... ....
css学习笔记.docx
09-11
什么是CSS翻译为“层叠样式表”或者“级联样式表”，简称样式表。 它主要是用来给HTML网页来设置外观或者样式 外观或者样式：HTML网页中的文字的大小、颜色、字体，网页的背景颜色、背景图片！
CSS选择器到底有哪些？CSS笔记（一）
01-20
文章目录CSS简介CSS样式编写1、内联样式2、内部样式3、外部样式CSS语法选择器常用的选择器元素选择器id选择器类选择器选择器分组（并集选择器）通配选择器复合选择器（交集选择器）后代元素选择器子元素选择器伪类...
XTuner笔记
qq_19859865的博客
05-10 396
方法：在模型的每一层之间添加可训练的小规模的网络，冻结原始网络权重，以此来减少fine-tune所需要的参数量。应用：适用于那些希望在保持预训练模型结构不变的同时，对模型进行特定任务调整的场景。缺点：引入推理延时在LoRA的基础上，添加了NF4的数据压缩（信息理论中最有的正太分布数据量化数据类型），进一步减少了显存和内存的消耗；然后添加一组可学习的LoRA权重，这些权重通过量化权重的反向传播梯度进行调整。块状 k-bit 量化：既压缩了数据，又解决了异常值（我理解为噪声）对数据压缩的影响。
Linux知识点笔记
最新发布
exercise_smile的博客
05-16 555
Linux 主要的发行版(release):Ubuntu(乌班图)、 RedHat(红帽)、 CentOS、 Debain[蝶变]、 Fedora、 SuSE、 OpenSUSE [示意图]在 linux 中的每个用户必须属于一个组， 不能独立于组外。在 linux 中每个文件 有所有者、 所在组、 其它组的概念。ls -l 中显示的内容如下：0-9 位说明：第 0 位确定文件类型(d, - , l , c , b)l 是链接， 相当于 windows 的快捷方式。
Linux FT260驱动内核学习笔记
pq的博客
05-12 782
系统采用Ubuntu 22，X86 64。
openGauss学习笔记-279 openGauss性能调优-实际调优案例08-改写SQL消除in-clause
超哥的博客
05-10 72
openGauss学习笔记-279 openGauss性能调优-实际调优案例08-改写SQL消除in-clause279.1 现象描述279.2 优化说明 openGauss学习笔记-279 open
给我一个css用于介绍法式料理的样式表
06-12
以下是一个简单的CSS样式表，用于介绍法式料理： ```css /* 设置页面背景颜色 */ body { background-color: #f8f8f8; } /* 设置标题样式 */ h1 { font-size: 36px; font-weight: bold; text-align: center; ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值