重构

原因

需求变化

架构调整

最佳实践变化

原则

适用

实施

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

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[……]

阅读全文

相信大家在使用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;}/*竖屏时字体绿色*/
}[......]

阅读全文