by ·0评论

重构

原因

需求变化

架构调整

最佳实践变化

原则

适用

实施

当需要改动的时候再进行优化

CSS样式的优先级：

CSS样式的特指度：（a,b,c,d）

如果用 style 属性应用样式，则 a=1，否则 a=0。

b 为 ID 选择器的数量。

c 为类选择器、属性选择器和伪类的数量。

d 为类型选择器和伪元素的数量。

根据特指度确定样式的优先级

！important为最高优先级

CSS子元素继承父元素的完整列表：  https://www.w3.org/TR/CSS21/propidx.html

CSS伪类

:link 样式应用于具有合法 href 属性的元素。

:visited 样式应用于具有合法 href 属性的超链接元素，并且浏览器的历史记录之中含 有该链接。

:focus 样式应用于获得焦点的超链接元素。当点击、轻触元素，或使用 Tab 键跳转到 当前元素时，元素获得焦点。outline属性有助于键盘访问视角展示

:hover 样式应用于鼠标光标悬浮于超链接之上时。触摸设备，没有光标悬浮状态。因此， 通常当轻触元素时，应用 :hov[……]

阅读全文

by ·0评论

相信大家在使用phone/pad在浏览网页时都有这样的感受，横屏/竖屏看网页时，内容一致，但是排班和样式却大不一样；这也是移动开发过程需要注意的地方，作为web开发人员需要尽可能优化用户体验，横、竖屏显示就是其中很关键的一项，利用CSS3中media媒体查询可以很轻易的实现横竖屏不同样式排版定义
举例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<style>
@media all and (orientation : landscape) { 
h2{color:red;}/*横屏时字体红色*/
} 
@media all and (orientation : portrait){ 
h2{color:green;}/*竖屏时字体绿色*/
}[......]
阅读全文