首页 > 教程 > 关键词  > CSS最新资讯  > 正文

CSS注释、命名、继承性、样式排序等CSS技巧的小结

2007-10-30 09:34 · 稿源:cz268.com

一、关于注释

在创建xhtml+CSS网站时,CSS中的注释非常重要。在创建CSS样式时,应当保持随手注释的习惯。一般的,我习惯于使用“/* 注释内容 */”的格式来写注释,因为在EditPlus等具有高亮功能的编辑器里,使用C语言中常用的“/***************/”之类的注释是无意义的,没有必要填充大量无意义内容作为分隔。带有注释的文档作为网站的原始CSS文档,在发布网站的时候,可以使用CSS压缩工具压缩CSS,在输出的CSS中去掉注释以提高文件传输效率。

二、关于命名

在给CSS文件命名的时候,我比较喜欢使用符合语义的英文名或者缩写命名,在非常用部分也许会用部分拼音命名。另外,在某些有从属关系的class里,我可能会使用类似“list_banner”之类的命名,即父元素名加上“_”再加上元素名。

关于命名,可以根据团队设计师的习惯进行协商。但最好在命名之后加上注释,以便将来生成文档备查。

三、关于继承性

在CSS中,要善用继承性。比如在两个嵌套的div中,父元素定义了background-color属性为黑色,如果子元素的背景同为黑色,则不需重复定义。善于利用CSS的继承性可以让代码更有效、更精简。

四、关于CSS定义的层次

在定义CSS中的class时,建议使用层次分明的方式来描述语句。

示例结构:

以下为引用的内容:
<div id="menu">
<div class="menulist">
<div class="selectit"></div>
</div>
</div>

示例CSS:

以下为引用的内容:
#menu { ... }
#menu .menulist { ... }
#menu .menulist .selectit { ... }

在上例中,从最终效果来看,#menu没有必要重复出现,但是实际上如果能够在前面加上#menu,将会让文档的层次更加明了,更利于阅读。

五、关于样式排序

在设计CSS样式表时,我们大多是手写代码,这样很容易造成class中的样式排序混乱。比如有几个class中用到了padding、margin、background、color等样式,但是排序的时候,有的class是background比较靠前,有的是margin比较靠前。这样就造成了一定的混乱,容易让思路受挫。我建议个人或者团队的设计师协定一个大致顺序,这样从个别来说看不出太大差别,但从整体上将更加易于阅读和管理,整体效率会提高不少。

比如,我默认将width、height和padding、margin、border等放在较靠前的位置,background其次,然后是控制文本的font、color、text-align等,接着是某些特殊标签才能用到的元素,像list-style等,最后是css滤镜。当遇到特殊情况时(比如CSS某些属性的优先级需要定义)可以灵活处理。

举报

  • 相关推荐
  • SSD Fans评测:忆联消费级SSD AM541|强性能 高可靠 长守护

    国内知名技术社区SSD Fans对忆联消费级SSD AM541进行了深度评测。这款PCIe4.0固态硬盘采用3D NAND闪存颗粒和最新主控芯片,1TB版本顺序读取速度达7143MB/s,写入6037MB/s,远超标称值。评测显示AM541在性能、压力测试和可靠性方面表现优异,采用无缓存DRAM-Less设计配合智能SLC缓存机制,在CDM、SNIA标准测试中均展现业界领先水平。游戏实测《FF14》加载仅7.445秒,《黑神话:悟空》启动快40%,充分满足消费级用户对高性能存储的需求,展现了忆联在存储领域的技术实力。

  • Checkout.com携手Visa推出发卡业务 (Card Issuing)

    Checkout.com与Visa达成战略合作,在英国及欧洲地区推出全方位发卡业务。通过Visa全球支付网络,商户可即时获取收款资金用于支付供应商款项,显著提升资金使用效率。该合作特别针对旅游业企业,解决其支付流程分散、资金周转慢的痛点。Checkout.com每年处理数千亿交易的技术能力与Visa网络结合,帮助商户消除预存资金需求,优化现金流管理。双方表示这将大幅提升欧洲商户运营效率,释放增长潜力。

  • 饭店用脏话命名 知情人:是店主绰号 网友称辣眼睛

    8月3日,江苏南通海门区三星镇一家新开业的丸子汤店因使用不雅词汇作为招牌引发关注。有当地网友拍摄视频显示,该店招牌上出现的脏话内容十分刺眼,被指“辣眼睛”。 事件经网络传播后,三星镇政府迅速介入处理。相关工作人员向记者证实,8月3日当晚已派员前往该店与店主沟通。经教育劝导,店主认识到使用不雅绰号作为招牌的错误性,表示将尽快拆除现有店招并�

  • 从数字枷锁到智能伙伴:AI Agent正在系统性重构CRM价值逻辑

    微软CEO纳德拉提出AI Agent将彻底改变SaaS行业,以Copilot Workspace为代表的新型交互方式正在重塑CRM领域。Salesforce和销售易等企业已推出AI Agent产品,通过自然语言交互优化销售流程,解决传统CRM数据录入繁琐、决策滞后等痛点。AI Agent能自动分析客户数据、生成拜访计划、实时转录会议内容,并精准识别增量客户,将销售效率提升10倍以上。腾讯投资的销售易NeoAgent平台已上线渠道助理、营销Agent等产品,通过大模型与业务系统深度整合,实现从"流程固化"到"智能协同"的转变。这场变革标志着SaaS 2.0时代的到来——软件不再是工具,而是能理解意图、主动规划的数字员工。未来商业竞争的核心,将转向数据资产厚度与场景落地的精准度。

  • 免费入场+高能福利!AGON爱攻ChinaJoy CS水友赛玩家招募通道即刻开启

    2025年ChinaJoy将于8月1-4日在上海举办,AGON爱攻将携手完美世界电竞打造精彩赛事活动。亮点包括:水友可报名与传奇战队"钢盔队"对决,还有机会与三大CS主播组队;现场将展示多款电竞显示器新品,包括CS24A定制款;参与互动问答和抽奖有机会赢取AGON大礼包。活动地点为N1-G201完美世界展区主舞台,14:00开赛。线上观众关注B站AGON官方账号参与话题互动也有福利。这是一�

  • BOSS直聘通报“王某香”涉黄简历:男子恶意编造 已被刑拘

    今日,@BOSS直聘在微博就近日网络热议的“简历涉黄”事件作出回应。 此前,网络流传BOSS直聘平台上一名自称“王某香”的求职者与招聘方沟通时出现低俗信息。这些截图在社交媒体迅速热传,引发公众对BOSS直聘存在“色情招聘”的强烈声讨。 针对这一事件,BOSS直聘迅速与警方展开核实工作。经查,账号使用人为一尹姓男子,该男子为寻求刺激,盗用他人信息,冒充女性�

  • 推动差异,理解共融:有录网入围英国两项女性影响力奖项!

    有录网入选"2025全英国家女性商业奖"和"2025年度女性奖"两项大奖,彰显其多元包容的价值观。该平台通过《Uoffer Global Frontiers》播客邀请全球女性领袖分享职场经验,探讨如何打破性别刻板印象、平衡工作生活。英国哈德斯菲尔德大学Jodie Boyd博士指出女性面临显性和隐性挑战,建议首先承认这些障碍的存在。目前有录网已帮助超20万国际学生进入顶尖大学,在全球40多个城市设立办公室,与100多所高校合作,致力于推动包容性教育变革。

  • 苹果预计明年发布个性化Siri 库克称进展良好

    今日,苹果公司发布2025财年第三季度财报。 报告期内,苹果总营收为940.36亿美元,较上年同期的857.77亿美元增长10%;净利润为234.34亿美元,较上年同期的214.48亿美元增长9%。 大中华区收入为153.69亿美元,较上年同期的147.28亿美元增长4%,结束了前两个季度的下滑,恢复增长。 据悉,苹果CEO库克在财报电话会议上透露了诸多有趣的信息,明确表达了苹果在AI领域的雄心。 他�

  • OpenAI发布2款开源模型:gpt-oss系列 能力接近o3和o4-mini

    OpenAI发布开源模型系列GPT-OSS,包含120B和20B两个版本。120B旗舰模型适配单H100 GPU架构,20B轻量版适合边缘计算。两款模型均开放完整推理链监控接口,支持动态参数调节和任务微调优化,性能接近闭源的GPT-O3和O4-mini。该系列突破性地支持代理功能,包括网页交互和Python代码执行,在标准化测试中表现优异。开源策略为开发者提供高性能替代方案,重新定义了AI模型的应用边界。

  • 90岁老人确诊乳腺癌 医生提醒:绝经后女性仍需警惕

    ​近日,江苏省中医院乳腺病科接诊了一位特殊患者——90岁的王奶奶(化名),其因左乳肿块破溃就医,最终被确诊为激素受体阳性乳腺癌。这一病例引发医学界对老年女性乳腺健康问题的关注。据家属回忆,两年前老人就曾发现左乳存在肿块,但因无疼痛感未引起重视,直至近期女儿为其洗澡时发现肿块表面破溃,才紧急送医检查。 经详细检查,王奶奶左乳肿块直径已超�