CSS基础部分问题整理

CSS进阶技巧与优化
最新推荐文章于 2025-12-05 07:37:55 发布
原创 最新推荐文章于 2025-12-05 07:37:55 发布 · 296 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css

本文深入探讨CSS样式优先级、雪碧图、自定义字体、base64使用、伪类与伪元素区别及CheckBox美化技巧，助你提升网页性能与视觉效果。

本文内容整理于慕课网视频教程
1.CSS样式（选择器）的优先级

  • 选择器权重计算。谁的权重更大，谁才会生效。
  • ！important带有这个属性的优先级是最高的。
  • 内联样式。直接写在元素属性上的样式的优先级更高。
  • 同等权重下，后写的优先级生效。
  • 具体排序：！important>行内样式>ID选择器>类选择器>元素选择器>通配符选择器（用星号*表示）>继承>浏览器默认属性

2.雪碧图的作用

  • 减少HTTP请求数，提高加载性能
  • 有一些情况下可以减少图片大小。（只是作用不是特别明显）

3.自定义字体的使用场景

  • 宣传/品牌/banner等固定文案
  • 字体图标

4.base64的使用

  • 用于减少HTTP请求
  • 适用于小图片
  • base64的体积约为原图的4/3

5.伪类和伪元素的区别

  • 伪类表状态
  • 伪元素是真的有元素
  • 前者单冒号，后者双冒号

6.如何美化CheckBox

  • label[for]和id
  • 隐藏原生input
  • 写法：：checked + label
js 前端各种类型进行判断比较
qq_40010745的博客
07-04 1847
字符串行转换为int类型。否则加起来为     01   尴尬 var index = parseInt('0')+1;数字类型进行比较大小  判断两个int类型是否相等if(eval(index) == eval(imgPath.length))字符串类型if(data.res == "abnormal_type01")判断一个input标签 value 是否为空，若为空会直接进入该条件var...
CSS基础知识整理
菜鸟博客
11-05 3054
目录一、css基础1.选择器1.1标签选择器1.2类选择器1.3id选择器1.4后代选择器1.5子代选择器1.6并集选择器1.7交集选择器1.8hover伪类选择器1.9通配符选择器1.10结构伪类选择器1.10.1查找单个1.10.2查找多个1.10.3 根据类型查找1.11 类与id的区别1.11链接伪类选择器1.12焦点伪类选择器1.13属性选择器2.字体文本相关样式2.1字体样式2.1.1字体大小font-size2.1.2字体粗细font-weight2.1.3字体样式font-style2.1.
HTML CSS整理笔记
热门推荐
Lin16819的博客
12-12 3万+
常见字体单位： 1.em 移动端常用的字体尺寸单位，说白em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5。 但当div进行嵌套时，em始终按当前div继承的字体大小来缩放。 2.rem r是root的意思，即相对于根节点html的font-size进行缩放，当有嵌套关系时，嵌套关系的元素的字体大小始终按照根节点的字体大小...
CSS基础样式
qq_62283164的博客
07-19 1703
CSS基础样式 一、css语法规范 二、CSS选择器 1.类（class）选择器 2.id选择器 3.CSS选择器优先级 三、网页中引入css样式 1.内联（行内）样式 2.内部样式表 3.外部样式表 4.link标签引入外部样式文件 ​编辑 5.CSS样式优先级 四、字体样式 五、文本样式 六、鼠标样式 七、背景样式 八、列表样式 九、CSS伪类 十、CSS练习之美团左侧菜单栏...
CSS面试题整理汇总
山雀的博客
03-13 8094
CSS面试题汇总
CSS基础总结（一）
人生处处是围城，一切都是最好的安排！
12-15 1369
CSS基础知识：基础选择器、字体属性、文本属性、CSS引入的三种方式
CSS基础之CSS选择器
2401_84093054的博客
04-19 1377
标签选择器可以把某一类标签全部选择出来，比如所有的标签和所有的标签能快速为页面中同类型的标签统一样式不能设计差异化样式，只能选择全部的当前标签2.类选择器如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器在HTML中以表示，在CSS中，类选择器以一个点号显示内容类选择器使用进行标识，后面紧跟类名不要使用纯数字、中文等来给类命名，尽量使用来表示3.类选择器-多类名我们可以给一个标签指定，从而达到更多的选择的目的内容在标签中写多个类名。
前端css基础学习笔记
a_big_panda的博客
01-22 1287
例如： 效果：例如：效果：例如：效果：选择页面中对应的标签（找她），方便后续设置样式（改她）例如：效果：例如：效果：注意：一个id选中多个标签也有效果，但不符合规范，规范是一个id选择器只选中一个标签例如：效果：例如：效果：例如：效果：注意点：例如：效果：例如：效果：注意：注意：例如：效果：例如：效果：注意：例如：效果：例如：效果：注意：如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置例如：效果：注意：开发中会使用text-decoration：none；清除a标签默认的下
CSS知识点复习整理
qq_47000934的博客
12-19 1551
CSS知识点复习整理1.常用CSS属性2.CSS样式应用到元素上3.内联样式（inline style）4.文档样式表（document style sheet）5.外部样式表6.@import7.CSS选择器（selector）8.通用选择器（universal selector）9.元素选择器（type selectors）10.类选择器（class selectors）11.class注意点12.id选择器（id selectors）13.id注意点14.设置网页图标15.最常用的CSS属性16.CS
CSS学习笔记整理
bfbshs_ddd的博客
12-16 2002
整理过去的CSS学习笔记。CSS 即 层叠样式表/CSS样式表/级联样式表，也是标记语言， 用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距）以及版面的布局和外观显示样式
css基础知识plonk精心整理
04-22
css基础笔记，是css的基础部分 内容通俗易懂
html与css基础整理
05-05
2. **属性和值**：CSS由选择器、属性和值三部分组成，如`color: red;`将文本颜色设置为红色。 3. **盒模型**：CSS盒模型包括内容、内边距（padding）、边框（border）和外边距（margin），影响元素的大小和位置。 ...
精选资源
html + css 学习笔记整理.zip
11-08
HTML和CSS是构建和设计网页的基础技术。HTML（超文本标记语言）负责网页内容的结构，而CSS（层叠样式表）则负责网页内容的呈现。在现代网页开发中，它们的作用不可或缺，无论是简单的个人博客还是复杂的商业网站，都...
gxt部分css整理
03-25
这个“gxt部分css整理”主题主要聚焦于GXT应用中的CSS样式管理和优化。CSS（Cascading Style Sheets）是用于控制网页元素外观的关键技术，对于GXT这样的富客户端框架来说，恰当的CSS管理能够极大地提升应用的视觉...
精选资源
《Web前端设计基础——HTML5、CSS3、JavaScript》课后答案整理.pdf
06-10
根据提供的文件内容，我们可以整理出以下Web前端设计基础的知识点： 1. HTML5、CSS3、JavaScript概述 - HTML5是最新版本的超文本标记语言，用于创建网页的标准标记语言。它具有更快的访问速度、更好的搜索引擎优化...
CSS 网页布局：技术基础与实践技巧
csbysj2020的博客
12-02 948
CSS网页布局是前端开发中的核心技术之一，掌握CSS布局的基础知识和实践技巧对于成为一名优秀的前端开发者至关重要。本文介绍了CSS布局的基础知识、布局模型、实践技巧以及响应式布局，希望对读者有所帮助。
CSS 面试题
d81895606的博客
12-03 345
API类型特点微任务最常用，立即执行微任务现代API，推荐使用宏任务最小延迟，让出控制权宏任务Node.js特有，I/O后执行伪宏任务下一帧前，适合动画宏任务高优先级，比setTimeout快Node.js特快比微任务还快。
【JavaWeb】CSS_三种引入方式
最新发布
qq_43494013的博客
12-05 412
【JavaWeb】CSS_三种引入方式
DevUI主题系统进阶：CSS-in-JS与暗黑模式无缝切换架构
m0_37613794的博客
12-04 816
本文深入解析了华为DevUI主题系统的混合架构实现方案，提出结合CSS-in-JS灵活性与CSS Variables性能优势的创新设计。核心内容包括：1）主题令牌管理算法，实现语义化到具体值的映射；2）运行时主题切换引擎，支持平滑过渡和状态持久化；3）性能优化策略，包括CSS变量作用域隔离和编译时优化。通过MateChat等大型项目验证，该方案显著提升了主题定制能力，使主题切换时间从300ms降至28ms，样式文件体积减少73%。文章还提供了从原理到实践的全套解决方案，包括React集成、组件适配和常见问题
HTML与CSS基础知识深度整理
### CSS基础知识 #### 1. CSS选择器 CSS通过选择器来指定样式应用的HTML元素。常见的选择器包括： - 元素选择器：直接使用元素名，如`p`。 - 类选择器：使用`.`加类名，如`.my-class`。 - ID选择器：使用`#`加ID名...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值