文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

写css的技巧有哪些

2024-04-02 19:55

关注

本文小编为大家详细介绍“写css的技巧有哪些”,内容详细,步骤清晰,细节处理妥当,希望这篇“写css的技巧有哪些”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

技巧一

每当你写CSS时,你想尽可能的回到树形顶部。换句话说,回到:root。

例如,我们的网站有一个侧边栏,希望在这个侧边栏上添加一个简短的个人介绍。其HTML的结构看起来可能会像这样:

<body>

<main class=“Posts”>

<aside class=“SideBar”>

<nav class=“Nav”>

<p class=“Bio”>

CSS是这样写的:

.Bio {

font-size: .8em;

line-height: 1.5;

color: #888;

}

这样写是能正常工作的,并不存在样式上的问题。但是,侧边栏还有一个导航  nav ,很有可能他们有一些样式是相同的。在我们这个示例中 font-size 和 color 都是相同的。让我们把这些属性从 nav 和  .Bio 中提取出来,并且将它们添加到其父元素 .SideBar 中:

.SideBar {

font-size: .8em;

color: #888;

}

事实证明,在 .Posts 中已经设置了 line-height:1.5; 。似乎整个页面都使用了相同的行高,那么我们可以将 .Bio 和 .Posts 中的 line-height 移到根元素中:

:root {

line-height: 1.5;

}

这看起来是一个CSS常识,但他也不会太关注兄弟元素定义同样的事情。这也让你发现,有一些代码产生重复。其实这并不可怕,因为我们只需要花点时间重新重构代码,但这样保持了CSS的代码处理健康状态。

技巧二

样式总是作为特定属性组合出现

一个很好的例子就是  color 和 bakground-color  的组合。除非你只做小调整,不然你需要一起调整他们。当给一个元素添加背景颜色时,它可能不包含任何文本,但可能会有一些子元素。因此,我们一起设置前景色(color)和背景色(background-color),我们总是可以确定这些元素不会遇到任何易读性和对比问题。下次我们改变背景色时,不需要到处寻找需要修改的文本颜色,因为他们都以一个组合的形式出现在一起。

技巧三

使用动态值,比如currentColor和em等

有时候文本颜色也会使用在其他属性上。比如说border、box-shadow或者SVG图标中的fill上。定义相同颜色有一个替代方案,可以直接使用currentColor。默认情况下,color是可以继承的,你只需要在一个地方修改就可以改变其他属性的颜色。

同样的,给font-size属性使用em单位,允许你只修改:root的font-size就可以改变元素的盒模型大小。

技巧四

使用 inherit 属性值继承其父元素样式来覆盖UA自带样式。

像 button 、 input 这样的表单控件,不同的浏览器都会有自己的样式风格(UA样式)。我们可以使用 inherit 继承其父元素样式,从而覆盖浏览器的UA样式。

button,

input,

select,

textarea {

color: inherit;

font-family: inherit;

font-style: inherit;

font-weight: inherit;

}

上面示例代码取自sanitize.css。normalize.css也是这样使用的。如果你不是这样使用,说明你已经&hellip;

你也可以尝试在  input[type="range"] 、 input[type="radio"] 和 input[type="checkbox"]  等元素上直接使用前面介绍的currentColor属性自动匹配颜色。或许你不需要改变什么,可以将一个亮色系变成一个暗色系。

读到这里,这篇“写css的技巧有哪些”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯