一、CSS学习笔记（CSS层叠样式表一）-程序员宅基地

技术标签： CSS 笔记前端

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 代码风格

样式格式书写

紧凑格式
```
p {
      color: red;font-size: 12px;}
```

展开格式（建议）

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

样式大小写

使用小写

空格规范

选择器名和括号之间
冒号和属性值之间

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>

<!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 的三种样式表

行内样式表
内部样式表
外部样式表

内部样式表

在 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 文件

新建 style.css 文件
编写样式代码
```
p {
      
	color: red;
}
```

新建 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 调试工具

略

本文链接：https://blog.csdn.net/weixin_46108997/article/details/136536555

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

前端开发之vue-grid-layout的使用和实例-程序员宅基地

文章浏览阅读1.1w次，点赞7次，收藏34次。vue-grid-layout的使用、实例、遇到的问题和解决方案_vue-grid-layout

Power Apps-上传附件控件_powerapps点击按钮上传附件-程序员宅基地

文章浏览阅读218次。然后连接一个数据源，就会在下面自动产生一个添加附件的组件。把这个控件复制粘贴到页面里，就可以单独使用来上传了。插入一个“编辑”窗体。_powerapps点击按钮上传附件

C++ 面向对象（Object-Oriented）的特征 & 构造函数& 析构函数_"object(cnofd[\"ofdrender\"])十条"-程序员宅基地

文章浏览阅读264次。(1) Abstraction (抽象)(2) Polymorphism (多态)(3) Inheritance (继承)(4) Encapsulation (封装)_"object(cnofd[\"ofdrender\"])十条"

修改node_modules源码，并保存，使用patch-package打补丁，git提交代码后，所有人可以用到修改后的_修改 node_modules-程序员宅基地

文章浏览阅读133次。删除node_modules，重新npm install看是否成功。在 package.json 文件中的 scripts 中加入。修改你的第三方库的bug等。然后目录会多出一个目录文件。_修改 node_modules

【】kali--password:su的 Authentication failure问题，&sudo passwd root输入密码时Sorry, try again._password: su: authentication failure-程序员宅基地

文章浏览阅读883次。【代码】【】kali--password:su的 Authentication failure问题，&sudo passwd root输入密码时Sorry, try again._password: su: authentication failure

整理5个优秀的微信小程序开源项目_微信小程序开源模板-程序员宅基地

文章浏览阅读1w次，点赞13次，收藏97次。整理5个优秀的微信小程序开源项目。收集了微信小程序开发过程中会使用到的资料、问题以及第三方组件库。_微信小程序开源模板

随便推点

Centos7最简搭建NFS服务器_centos7 搭建nfs server-程序员宅基地

文章浏览阅读128次。Centos7最简搭建NFS服务器_centos7 搭建nfs server

Springboot整合Mybatis-Plus使用总结(mybatis 坑补充)_mybaitis-plus ruledataobjectattributemapper' and '-程序员宅基地

文章浏览阅读1.2k次，点赞2次，收藏3次。前言mybatis在持久层框架中还是比较火的，一般项目都是基于ssm。虽然mybatis可以直接在xml中通过SQL语句操作数据库，很是灵活。但正其操作都要通过SQL语句进行，就必须写大量的xml文件，很是麻烦。mybatis-plus就很好的解决了这个问题。..._mybaitis-plus ruledataobjectattributemapper' and 'com.picc.rule.management.d

EECE 1080C / Programming for ECESummer 2022 Laboratory 4: Global Functions Practice_eece1080c-程序员宅基地

文章浏览阅读325次。EECE 1080C / Programming for ECESummer 2022Laboratory 4: Global Functions PracticePlagiarism will not be tolerated:Topics covered:function creation and call statements (emphasis on global functions)Objective:To practice program development b_eece1080c

洛谷p4777 【模板】扩展中国剩余定理-程序员宅基地

文章浏览阅读53次。被同机房早就1年前就学过的东西我现在才学，wtcl。设要求的数为\(x\)。设当前处理到第\(k\)个同余式，设\(M = LCM ^ {k - 1} _ {i - 1}\) ，前\(k - 1\)个的通解就是\(x + i * M\)。那么其实第\(k\)个来说，其实就是求一个\(y\)使得\(x + y * M ≡ a_k(mod b_k)\)转化一下就是\(y * M ...

android 退出应用没有走ondestory方法,[Android基础论]为何Activity退出之后，系统没有调用onDestroy方法？...-程序员宅基地

文章浏览阅读1.3k次。首先，问题是如何出现的？晚上复查代码，发现一个activity没有调用自己的ondestroy方法我表示非常的费解，于是我检查了下代码。发现再finish代码之后接了如下代码finish();System.exit(0);//这就是罪魁祸首为什么这样写会出现问题System.exit(0);////看一下函数的原型public static void exit (int code)//Added ..._android 手动杀死app,activity不执行ondestroy

SylixOS快问快答_select函数导致堆栈溢出 sylixos-程序员宅基地

文章浏览阅读894次。Q: SylixOS 版权是什么形式, 是否分为<开发版税>和<运行时版税>.A: SylixOS 是开源并免费的操作系统, 支持 BSD/GPL 协议(GPL 版本暂未确定). 没有任何的运行时版税. 您可以用她来做任何您喜欢做的项目. 也可以修改 SylixOS 的源代码, 不需要支付任何费用. 当然笔者希望您可以将使用 SylixOS 开发的项目 (不需要开源)或对 SylixOS 源码的修改及时告知笔者.需要指出: SylixOS 本身仅是笔者用来提升自己水平而开发的_select函数导致堆栈溢出 sylixos