欢迎来到小猪猪广西seo搜索引擎优化外包!

玉林网站a 标签的样式规划

2019-10-08 18:07:48 蓝德高 4

  玉林网站a 标签有 link, visited, hover, 玉林网站active 这几个常用的伪类用于定义不同状态. 这些伪类意思明确, 使用简单, 看起来不会存在什么问题, 而实际上他们的使用顺序, 是否应该使用都需要考虑清楚.

网站优化

  玉林网站a 标签在网页中无所不在, 而且样式复用性很高. 一般来说, 一个网站上的链接形式是比较统一的, 所以作为 reset 或者基本的 玉林网站a 标签 CSS 定义十分重要.

  玉林网站a 标签伪类的 lvh玉林网站a 顺序

  为了解决伪类状态覆盖的问题, 网上建议开发者书写 玉林网站a 标签样式如下:

  玉林网站a:link {color:#FF0000;}/* 没访问过的链接样式 */

  玉林网站a:visited {color:#00FF00;}/* 访问过的链接样式 */

  玉林网站a:hover {color:#FF00FF;}/* 鼠标进入链接区域的链接样式 */

  玉林网站a:玉林网站active {color:#0000FF;}/* 点击链接时的链接样式 */

  相信很多开发者都看了这段称为 lvh玉林网站a (love & h玉林网站ate) 的书写顺序建议, 我看了很多网站在全站通用的 CSS 里已经也是这么写的. 除了样式上有特殊需要, 我不建议这样来定义 玉林网站a 链接的样式, 尤其是在通用样式中.

  玉林网站a 标签 lvh玉林网站a 存在的问题

  lvh玉林网站a 的写法从逻辑上没有问题, 而事实上这种写法是过度设计, 为代码维护带来很多额外的维护成本.

  假设全局通用 CSS 中已经按 lvh玉林网站a 定义样式, 而页面中一些链接即便被访问过, 要求跟没访问过的样式一致, 开发便需要重写 visited 样式; 如果某些链接颜色跟通用样式不一样, 基本上要重写所有链接伪类的样式, 代码量大, 也相当麻烦.

  下面是一段过度设计的示例代码摘要.

  玉林网站a:link{color:#06C;text-decor玉林网站ation:none;}

  玉林网站a:visited{color:#969;text-decot玉林网站ation:none;}

  玉林网站a:hover{color:#F90;text-decor玉林网站ation:underline;}

  .norm玉林网站al 玉林网站a:link,.norm玉林网站al 玉林网站a:visited{color:#666;}.norm玉林网站al 玉林网站a:hover{color:#000;}

  有什么问题相信大家看看就知道了, 几乎所有对链接的重新定义, 都需要将 玉林网站a 链接对应的个伪类的样式重写一遍.

  玉林网站a 标签样式规划建议

  为什么会出现上述的写法? 我猜这是因为设计库中存在一套对文本和链接的完整的设计规范, 编写代码的人认为可以通过通用的样式一劳永逸, 而这可能弄巧反拙. 下面是 玉林网站alib玉林网站ab玉林网站a DPL 的一个片段, 一看便知.

  link 和 hover 状态的链接样式通用性很高, 但 visited 样式仅在搜索页面的商品标题, 帮助中心的问题链接等少部分列表的主要链接上才会使用. 所以完全有理由将它们分开处理.

  在通用 CSS 中只定义 玉林网站a 和 玉林网站a:hover 样式, 需要使用 玉林网站a:visited 样式时再做定义. 则前面那段 CSS 可以定义如下:

  玉林网站a{color:#06C;text-decor玉林网站ation:none;}

  玉林网站a:hover{color:#F90;text-decor玉林网站ation:underline;}

  .norm玉林网站al 玉林网站a{color:#666;}.norm玉林网站al 玉林网站a:hover{color:#000;}

  .list 玉林网站a:visied{color:#969;}

  从代码可以看到, 一般的链接样式修改, 只需要顾及到 玉林网站a 和 玉林网站a:hover, 而其他状态仅在使用的时候进行定义. 因为前者常有, 后者少用, 所以维护量是非常小的.

  后话

  过度设计无所不在, 三年前我刚入职写过一段商品价格的 CSS 定义, 对货币, 价钱, 单位以及各种场景都做了看起来完美的定义, 但现在看来这是我做的最错误的一件事情, 因为强定义导致样式覆盖的代码量大. 而随着网站的发展, 这些修改和重写必将越来越多.

  当我们希望有一套 CSS 架构解决掉所有页面外观需求, 甚至出现如: size-35, m玉林网站argin-left-10 这样的 cl玉林网站ass, 过度设计就开始了…


电话咨询
邮件咨询
在线地图
QQ客服