- CSS选择器
- 通配符
- 元素/标签
- id
- class
- 后代选择器
- 子选择器( > )
- 相邻兄弟元素选择器( + )
- 分组( , )
- CSS执行顺序
外部样式
内部样式
内联样式
important
// 层叠次序
浏览器缺省 < 外部 < 内部 < 内联 < important
- CSS书写顺序
// 位置/显示属性
position, 内容生成(content), list-style, display, float, clear, overflow rotation flex box z-index ..
// 自身属性
width, height, margin, padding, 边框(border&outline), 背景(background) ..
// 文字属性
font, color, hyperline属性, text-decoration, text-align, vertical-align ..
// 其他
动画(animation), transform, transition, zoom
/******************************************************************************/
// 部分属性顺序
pading&margin
上 右 下 左
上 右左 下
上下 右左
上右下左
font
font-style // 字体样式
font-variant // 大写字母样式
font-weight // 字体粗细
font-size/line-height // 大小/行高
font-family // 字体
font: italic small-caps 700 16px/1.7 "yahei" // font-size和font-family必需
background
background-color // 颜色
background-image // 图片
background-repeat // 重复方式
background-attachment //固定or滚动
background-position/background-size // 位置/尺寸
background-origin // 定位区域
background-clip // 绘制区域(裁减)
background: #fefefe url('...') repeat-x 20px center/20px content-box
animation
animation-name // keyframe名称
animation-duration // 持续时间
animation-timing-function // 速度曲线
animation-delay // 开始延迟
animation-iteration-count // 播放次数
animation-direction // 播放方向
animation: animate 5s ease-in-out 3s 2 linear
transition
transition-property // 过渡效果名称
transtion-duration // 过渡持续时间
transition-timing-function // 速度曲线
transition-delay // 开始延迟
transition: wide 5s ease-in 2s
- CSS规范
1. 去掉小数点前的0
2. id不滥用
3. 使用连字符"-"而不使用下划线"_"
4. 16进制颜色代码缩写
5. 表示状态加前缀".is-"
6. 命名简写易懂
- CSS命名规则
- 具体使用根据层级省略
// 布局
wrapper/page // 页面
status-bar // 状态栏
header // 页眉
nav // 导航
container // 主体
sidebar // 侧边栏
content // 内容主体
footer // 页脚
left right center // 定位
// 颜色
bg-color // 背景色
bs-color // 主体色
error // 错误红
warning // 警告黄
success // 成功绿
xxx/spc-xxx // 指定色(xxx为颜色的英语单词)
// 图标字体
icon // 统一前缀
icon-xxx // xxx为图标名称
// 特定组件
logo // 标志
banner // 告示
banner-item // 告示子项
carousel // 轮播
carousel-item // 轮播子项
hot // 热点
news // 新闻
download // 下载
upload // 上传
menu // 菜单
menu-item // 菜单子项
sub-menu // 子菜单
search // 搜索
list // 列表
list-item // 列表子项
friend-link // 友链
copyright // 版权
tag // 标签
msg // 提示信息
tips // 小贴士
guide // 引导
status-xxx // 状态
article // 文章
title // 标题
summary // 简述
content // 内容
img-xxx // 图片
link-xxx // 链接
tab // 标签页
tab-item // 标签子项
btn // 按钮统一前缀
btn-xxx // 特定按钮
top // 回到顶部
close // 关闭
row // 行
text-xxx // 文字相关
pull-right // float: right
// 导航
nav // 导航标记
nav-bar // 导航
sidebar // 侧边栏
// 功能
lg-box // 登录
lg-header
lg-body
lg-footer
is-xxx // 状态标记
card // 卡片
card-item // 子项
item-img // 图片
item-title // 标题
item-desc // 描述
popover // 弹出框
tool-tip // 文字提示
dialog // 对话框
dialog-title // 标题
dialog-body // 内容主体
dialog-footer // 页脚
steps // 步骤条/时间轴
dropmenu // 下拉菜单
menu-item // 菜单子项
loading // 加载中...
msg-box // 消息框
badge // 标记
tree // 树形菜单
tree-item // 菜单子项
progress // 进度条
rate // 评分
rate-item // 评分子项
slider // 滑块
switch // 开关
- 语义化
当清除所有自定义的样式与布局，只使用浏览器默认缺省值时，采用语义标签，使得页面结构清晰易读。h5语义化标签：
(图片来源：http://www.html5jscss.com/html5-semantics-section.html)
语义化布局
网友评论