【CSS】快速入门笔记
视频链接:https://www.bilibili.com/video/BV1mS4y1Z7Ga/?spm_id_from=333.999.0.0&vd_source=1ad00d913eae8281cbadad6ae66fb06c
文章目录
- 一、CSS语法
- 1.结构
- 2.样式类型
- 1)内联样式 Inline Style
- 2)内部样式 Internal Style
- 3)外部样式 External Style
- 二、选择器(Selector)
- 1.类型
- 1)类型选择器
- 2)类选择器
- 3)id选择器
- 4)属性选择器
- 5)通用选择器
- 2.使用
- 1)组合使用
- 2)优先级(Priority)
- 三、盒子模型(Box Model)
- 1.边框 border
- 2.内边距padding
- 3.外边距margin
一、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;/*简洁写法:上右下左*/}
}
外框和页面产生了距离


相关文章:
【CSS】快速入门笔记
视频链接:https://www.bilibili.com/video/BV1mS4y1Z7Ga/?spm_id_from333.999.0.0&vd_source1ad00d913eae8281cbadad6ae66fb06c 文章目录一、CSS语法1.结构2.样式类型1)内联样式 Inline Style2)内部样式 Internal Style3)外部…...
第161篇 笔记-去中心化的含义
本文主要内容来自Vitalik Buterin的文章。“去中心化”这个词是在加密经济学领域用得最多的一个词,通常也作为辨别区块链的依据。然而,这个词也可能是被定义得最不恰当的一个词。数千小时的研究和价值数十亿美元哈希算力的投入都旨在实现去中心化&#x…...
「计算机组成原理」数据的表示和运算(二)
文章目录五、奇偶校验码六、算术逻辑单元ALU6.1 电路的基本原理6.2 加法器的设计6.2.1 一位全加器6.2.2 串行加法器6.2.3 串行进位的并行加法器6.2.4 并行进位的并行加法器七、补码加减运算器八、标志位的生成九、定点数的移位运算9.1 算数移位9.2 逻辑移位9.3 循环移位五、奇偶…...
建立自己的博客
环境安装: w10系统安装 第一步:安装git Git 官网: https://git-scm.com/ 第二步:安装Node.js Node.js官网:https://nodejs.org/zh-cn/ 使用cmd检测: node -v 第三步:安装Hexo Hexo官网:htt…...
Docker 安装mysql Mac 环境下
已安装桌面端 Docker (Mac安装Docker) 安装方式一 打开链接 https://www.docker.com/products/docker-desktop 选择平台下载 安装方式二 安装homebrew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/m…...
《C++代码分析》第三回:类成员函数覆盖父类函数的调用(分析this指针的变化)
一、前言 在C的学习中我们知道,子类是可以覆盖父类的方法,这里我们探讨一下子类方法调用父类方法时this指针时如何变化的。 二、示例代码 #include "windows.h" #include "windef.h" #include <iostream> #include <tch…...
Altium designer--软件简介及安装教程(Altium designer16)
一、软件介绍(完整安装包资源见文末链接,含破解license) Altium Designer 是一款简单易用、原生3D设计增强的一体化设计环境,结合了原理图、ECAD库、规则和限制条件、BoM、供应链管理、ECO流程和世界一流的PCB设计工具。通过原理…...
Windows系统下基于开源软件的多物理场仿真
Windows系统下基于开源软件的多物理场仿真实践技术应用随着计算机技术的发展,计算机仿真技术日益成为继实验和理论之后的第三种重要研究和设计手段。真实世界中遇到的问题往往是固体力学,流体力学,热,电磁等多种现象耦合而成&…...
【STL】list剖析及模拟实现
✍作者:阿润菜菜 📖专栏:C 初识list 1. list基本概况 list是可以在常数范围内在任意位置进行插入和删除的序列式容器,并且该容器可以前后双向迭代。list的底层是双向链表结构,双向链表中每个元素存储在互不相关的独立…...
Go打包附件内容到执行文件
前言 如果我们的应用在启动的时候需要对数据库进行初始化(比如建表等), 可以通过读取.sql文件内容直接执行. 但是, 这样会带出一个问题: 在发送可执行文件的时候, 需要连带着附件文件, 并且相对路径还不能出错. 这样太麻烦了有时我们并不希望附件的内容被使用者看到 处于种种…...
Spring的配置属性
介绍 以前都是用XML来设置属性值,SpringBoot的自动配置可以简化Spring应用的开发。配置属性只是配置Spring应用上下文中bean的属性而已,可以通过多个源来配置,包括JVM系统属性、环境变量等。 Spring中有两种不同(但相关)的配置 bean装配&…...
132.《render-props, Hoc,自定义hooks 详解》
文章目录render-props 模式props 方式children 方式(推荐)Hoc(高阶组件)使用步骤示例props 丢失解决方案自定义 hook1.只执行一次2.防抖hook高阶组件与自定义hook有什么区别相同点不同点React 中代码逻辑复用有三种方式,render-props, Hoc&am…...
通过Session共享数据验证码进行用户登录
通过Session共享数据验证码进行用户登录 需求: 访问带有验证码的登录页面login.jsp。用户输入用户名,密码以及验证码。 ①。如果用户名和密码输入有误,跳转登陆页面,提示:用户名或密码错误。 ②。如果验证码输入有误…...
C++STL详解(六)——stack和queue
文章目录空间适配器stackstack的定义方式stack的使用stack的模拟实现queuequeue的定义方式queue的使用queue的模拟实现空间适配器 适配器是一种设计模式(设计模式是一套被反复使用的,多数人知晓的,经过分类编目的,代码设计经验的…...
javaEE 初阶 — CSS 的 基本语法 与 引入方式
文章目录1. 基本语法规范2. 三种引入方式1. 基本语法规范 CSS 的基本语法规范是由 选择器 和 若干个声明 组成的。 选择器选中一个元素之后,这些属性都是针对于这个元素展开的。 先来看一个没有 CSS 的效果。 <body><p>这是一个段落</p> </bo…...
QEMU启动ARM32 Linux内核
目录前言前置知识ARM Versatile Express开发板简介ARM处理器家族简介安装qemu-system-arm安装交叉编译工具交叉编译ARM32 Linux内核交叉编译ARM32 Busybox使用busybox制作initramfs使用QEMU启动ARM32 Linux内核模拟vexpress-a9开发板模拟vexpress-a15开发板参考前言 本文介绍采…...
than的用法合集
首先需要了解一下than的词性,其有两个词性,一个是介词,一个是连词。 介词后面一定要接上名词性的词语,比如 i am taller then him 我比我的老师高 连词就比较自由,一般用来连接两个句子;但是使用than连词词…...
Unet 基于TCGA颅脑肿瘤MRI分割(高阶API分割模型)
目录 1. 介绍 2. dice 指标 3. resnet34 作为 backbone 的分割 4. deeplabv3 图像分割 4.1 问题 4.2 训练 4.3 预测 5. MAnet 图像分割...
[NIPS 2017] Improved Training of Wasserstein GANs (WGAN-GP)
Contents IntroductionDifficulties with weight constraintsCapacity underuseExploding and vanishing gradientsGradient penaltyReferencesIntroduction WGAN 增加了 GAN 模型训练的稳定性,但有时仍然会有生成质量不高或难以收敛的问题。作者发现上述问题经常是由 WGAN 中…...
力扣-每天的领导和合伙人
大家好,我是空空star,本篇带大家了解一道简单的力扣sql练习题。 文章目录前言一、题目:1693. 每天的领导和合伙人二、解题1.正确示范①提交SQL运行结果2.正确示范②提交SQL运行结果3.正确示范③提交SQL运行结果4.正确示范④提交SQL运行结果5.…...
开源视觉模型推荐:GLM-4v-9B,高分辨率输入,中文OCR领先
开源视觉模型推荐:GLM-4v-9B,高分辨率输入,中文OCR领先 1. 引言 在当今多模态AI快速发展的时代,视觉-语言模型正成为技术前沿的热点。GLM-4v-9B作为智谱AI最新开源的90亿参数视觉-语言多模态模型,凭借其11201120高分…...
Mi-Create终极指南:三步快速创建专属小米手表表盘
Mi-Create终极指南:三步快速创建专属小米手表表盘 【免费下载链接】Mi-Create Unofficial watchface creator for Xiaomi wearables ~2021 and above 项目地址: https://gitcode.com/gh_mirrors/mi/Mi-Create 想要为你的小米手表打造独一无二的个性化表盘吗&…...
OpenProject全球化协作本地化策略指南:打破语言壁垒的实战方案
OpenProject全球化协作本地化策略指南:打破语言壁垒的实战方案 【免费下载链接】openproject OpenProject is the leading open source project management software. 项目地址: https://gitcode.com/GitHub_Trending/op/openproject OpenProject作为领先的开…...
nli-distilroberta-base企业应用:HR简历筛选中‘要求’与‘经历’逻辑匹配系统
nli-distilroberta-base企业应用:HR简历筛选中要求与经历逻辑匹配系统 1. 项目背景与价值 在人力资源招聘流程中,简历筛选是最耗时的工作环节之一。传统的人工筛选方式面临两大核心痛点: 效率低下:HR需要逐份阅读简历ÿ…...
Kubernetes 集群管理新选择:Kuboard 图形化界面实战解析
1. 为什么你需要Kuboard这样的Kubernetes图形化管理工具 如果你刚开始接触Kubernetes,可能会被它复杂的命令行操作吓到。记得我第一次使用kubectl时,光是记住各种命令参数就花了两周时间。后来团队规模扩大,管理多个集群时,命令行…...
学术PDF处理神器:OpenClaw+GLM-4.7-Flash自动提取关键结论
学术PDF处理神器:OpenClawGLM-4.7-Flash自动提取关键结论 1. 为什么需要自动化文献处理? 作为一名经常需要阅读大量学术文献的研究者,我发现自己花费在整理文献上的时间甚至超过了实际阅读时间。每次下载几十篇PDF后,手动提取目…...
Qwen2.5-72B-GPTQ-Int4保姆级教程:log排查技巧+Chainlit响应延迟优化
Qwen2.5-72B-GPTQ-Int4保姆级教程:log排查技巧Chainlit响应延迟优化 1. 模型简介与部署准备 Qwen2.5-72B-Instruct-GPTQ-Int4是通义千问大模型系列的最新版本,在知识量、编程能力和数学能力方面有显著提升。这个72.7B参数的模型经过GPTQ 4-bit量化&…...
HP-Socket创新项目原型迭代记录:变更、原因与效果
HP-Socket创新项目原型迭代记录:变更、原因与效果 【免费下载链接】HP-Socket High Performance TCP/UDP/HTTP Communication Component 项目地址: https://gitcode.com/gh_mirrors/hp/HP-Socket HP-Socket作为一款高性能TCP/UDP/HTTP通信组件,其…...
手把手教你用PHPStudy部署彩虹云商城二开版(2025修复完整版,含自动对接与漏洞修复)
零基础实战:PHPStudy环境下的彩虹云商城完整部署指南(2025安全强化版) 在个人站长和电商创业者的圈子里,彩虹云商城系统一直以其轻量化和易用性备受青睐。最近接触到的这个2025修复版,不仅保留了原系统的核心优势&…...
大数据毕业设计 hadoop+spark+kafka+hive动漫推荐系统 动漫数据分析 可视化 漫画推荐
1、项目介绍 技术栈: Python语言、Django框架、SQLite数据库、Echarts可视化 、HTML、基于物品协同过滤推荐算法 (1)首页------不同类 型的动漫数据 (2)动漫类型饼图 (3)动漫收藏排名和不同国家…...
