CSS书写规范

于 2019-08-09 15:36:42 发布
阅读量381 收藏 4
点赞数 3
分类专栏： 前端就那么回事 AIGC架构设计师 文章标签： CSS书写规范 class命名规范 常见class命名
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38209578/article/details/98958290
版权
前端就那么回事 同时被 2 个专栏收录
119 篇文章 22 订阅 ¥19.90 ¥99.00
订阅专栏
AIGC架构设计师
73 篇文章 21 订阅 ¥19.90 ¥99.00
订阅专栏
本文详细阐述了CSS书写顺序，包括位置属性、大小、文本样式、背景和其它效果；探讨了CSS缩写属性的使用，如边距、背景色等的优化；并提出了CSS命名规则，强调简写命名、避免随意使用id以及推荐的class名称实践。
摘要由CSDN通过智能技术生成

本文主要介绍CSS书写规范，CSS书写顺序、CSS属性、CSS命名规则等。

一、CSS书写顺序
1.1位置属性(定位层级布局、显隐性)

position, top, right, z-index, display, float等。

1.2大小(宽高、内外间距)

width,height,padding,margin

1.3文本样式

font,line-height,letter-spacing,color-text-align等

1.4背景(背景色、边框)

background、border等

1.5其他(动画、位移等)

animation,transition等

二、CSS缩写属
了解本专栏 订阅专栏 解锁全文
吴维炜
关注
专栏目录
订阅专栏
博客
认识大前端，开启无限可能
11-05 1万+
万丈高楼平地起。开课第一周，我们将以轻松幽默的方式，从实际工作中的开发痛点出发，以项目全生命周期为主线，对全栈有全局的认识。从整体项目分析开始，培养项目架构思维。一、了解大前端知识体系，有全局的认知1.1 工程师的技能树在大前端知识体系中，每个阶段的工程师，需要有不同的知识技能储备。江湖封号程序猿（媛），业内一般称呼软件开发工程师。1.1.1 初级工程师初级前端工程师的标准，就是能够完成日常的功能开发和debug，可以在已有的代码基础上做修改，优化和维护；熟练使用平时开发需要用到的工具即.
博客
你想成为什么样的人，你就要以什么样的标准来要求自己
09-03 5676
梦想还是要有的，没有梦想跟咸鱼有什么两样慎重的考虑了，最后给自己一个阶段的小目标——“前端第一人”主要职责： 1.准确理解产品需求、交互文档或原型, 进行 web 产品前端开发； 2.优化用户体验，修正项目中出现的问题； 3.与设计美工配合完成页面的静态化； 4.参与用户相关交互设计，配合后台开发人员，完成页面的交互功能，联调工作；自我要求： 1.精通 div+css......
博客
「UCD」用户体验设计专家
08-23 905
评估产品的用户体验（User Experience, UX）是一项多维度的工作，要考虑用户在使用产品时的各个方面，包括易用性、满意度、效能和可访问性等。虽然没有单一的评估方法可以全面覆盖所有维度，但通过结合定量和定性的方法，可以获得更全面的评估结果。通过创建详细的用户画像，设计师和开发团队可以更好地理解目标用户的需求、行为和痛点，从而更有针对性地设计产品功能与界面。结合出问题的位置进行可用性测试，以找到并修复痛点。综合这些评估方法，你可以得到比较全方位的数据支持和定性的洞察，从而不断优化你产品的用户体验。
博客
「Vue组件化」封装i18n国际化
07-18 487
在Vue应用中实现国际化（i18n），通常需要使用一些专门的库，比如vue-i18n。本文主要介绍自定义封装i18n，支持Vue、uniapp等版本。
博客
「Vue组件化」封装SVG图标
07-18 244
首先创建一个用于加载SVG文件的Vue组件。将SVG文件放在项目的某个目录下，例如components/svgIcon/。创建一个函数来动态导入SVG文件，并注册到Vue组件中。在项目中通过组件标签使用SVG图标。
博客
「Conda」在Linux系统中安装Conda环境管理器
07-15 460
在Linux系统中安装Conda环境管理器是一个相对简单的过程。
博客
「Python」基于Gunicorn、Flask和Docker的高并发部署
07-15 904
参数确保使用最新的Dockerfile重新构建镜像。这个命令会构建Docker镜像并启动服务。，来模拟高并发请求并测试应用的性能。（Apache Bench）或。使用压力测试工具，如。
博客
「UCD」用户体验设计
07-11 264
用户体验设计是产品设计的心脏，它跨越多个学科，包括界面设计、信息架构、人机交互等，以确保最终产品能够提供卓越的用户体验。UX设计不仅关注产品的功能性和美观性，还关注产品如何与用户进行有效沟通，以及如何在竞争激烈的市场中突显其品牌价值。
博客
「UCD」浅谈蓝湖Figma交互设计对齐
07-11 463
在现代数字产品的设计和开发过程中，选择合适的工具对于提高团队效率和保证产品质量至关重要。本文将从开发和设计两个不同的角度，探讨蓝湖和Figma两款流行工具的优势与不足，并提出结论和建议。
博客
「AIGC」“AI+作业”，是辅助还是颠覆
07-09 148
总的来说，"AI+作业"目前更多地被视为一种辅助手段，它为教育领域带来了许多积极的变化和可能性。然而，我们也应注意到它可能带来的挑战，并采取措施确保技术的健康发展和应用，避免对教育的本质造成负面影响。例如，通过制定合理的教学策略，平衡技术使用和传统教学方法，以及确保所有学生都能公平地获得AI辅助学习的机会。"AI+作业"指的是将人工智能技术应用于作业辅导和学习过程中，这可以包括个性化学习计划、自动化作业批改、智能辅导和推荐学习资源等功能。
博客
「AIGC」使用AI集成工具提升工作效率
07-09 275
使用AI集成工具提升工作效率的一个实际例子是通过自动化数据分析和生成报告。以下是一个更丰富的示例，我们将构建一个简单的Python脚本，使用pandas进行数据分析，matplotlib进行数据可视化，以及进行简单的预测建模。这个流程可以用于快速洞察数据特征，自动化报告生成，从而节省时间并减少重复性工作。5pandasmatplotlib请注意，这个示例假设你有一个名为的CSV文件，其中包含至少一个名为Purchased的列，用于表示客户是否购买了产品。
博客
「AIGC」大语言模型系列-Transformer详解
07-08 1469
这个示例代码提供了一个Transformer模型的框架，包括多头自注意力机制、编码器和解码器层、以及最终的输出层。然而，为了保持简洁，解码器的实现和训练逻辑没有包括在内。Transformer模型相对复杂，下面我将提供一个简化版的Transformer模型的Python代码示例，使用PyTorch库实现。这个示例将包括模型的基本结构，如编码器和解码器，自注意力机制，位置编码，以及前馈网络。请注意，这个示例主要用于教学目的，可能不包括一些生产环境中所需的特性，比如层标准化、残差连接、优化器、训练循环等。
博客
「AIGC」TDSQL技术详解
07-08 818
创建一个完整的TDSQL实例涉及到多个步骤，包括数据库的创建、配置、连接以及基本的数据库操作。请注意，以下示例代码是模拟操作，实际使用时需要根据TDSQL的具体环境和要求进行调整。
博客
「树莓派入门」树莓派进阶05-智能门禁系统
07-06 254
创建一个基本的智能门禁系统，该系统可以检测到靠近门禁的人或物体，并根据距离控制门的开关。这只是一个起点，你可以根据自己的需求添加更多的功能和改进。
博客
「树莓派入门」树莓派进阶03-RGB彩灯控制与应用
07-05 316
RGB彩灯为创意项目提供了丰富的视觉元素。通过控制RGB LED，你可以实现各种颜色效果，增加项目的吸引力。在连接和控制RGB LED时，请注意信号引脚的正确连接，避免损坏设备。
博客
「树莓派入门」树莓派进阶04-直流电机控制与PWM应用
07-05 288
直流电机控制是树莓派硬件项目中的一项重要技能。通过PWM技术，你可以实现对电机速度的精确控制。在实验过程中，请注意电机的电源匹配和GPIO引脚的保护。
博客
「树莓派入门」树莓派进阶02-传感器应用与交通灯项目
07-04 327
传感器是树莓派实现智能化的关键。通过本教程，你可以开始尝试使用传感器来增强树莓派的功能。
博客
「树莓派入门」树莓派进阶-光子星传感器套件
07-04 466
光子星是一款专为树莓派设计的传感器套件，它包括多个版本，满足从初学者到高级用户的不同需求。套件中包含多种传感器，可以用于各种创意项目。检测声音强度。
博客
「前端」快速排序算法演示
07-03 345
快速排序算法演示。
博客
「算法题」二分查找算法演示
07-03 269
一个样式更加美观大方的HTML页面示例，其中包括了二分查找算法的演示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值