CSS(Cascading Style Sheet),层叠样式表
写法
- @开头。例:
@charset "utf-8"
- 选择器 {属性: 值;}
页面引入CSS
- 内联样式
<h1 style="color:red;font-size:20px;"></h1>
- 内部样式
// type="text/css"最好省略
<style type="text/css">
h1 {
color: red;
font-size: 20px;
}
</style>
- 外部样式
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<style>
@import url("index.css");
@import "index.css";
</style>
-
浏览器默认样式
文件路径
- 相对路径
- css/a.css
- ./css/a.css
- ../imgs/a.png
- 绝对路径
- 网站路径
html编码规范
命名技巧
- 语义化
- 标签语义化
- 命名语义化
- 命名规范
- 所有命名都使用英文小写
- 用中横线连接
- 命名体现功能,不涉及表现样式(颜色、字体、边框、背景等)
- 常见命名
- .wrap或.wrapper ——用于外侧包裹
- .container或.ct ——包裹容器
- .header ——用于头部
- aside、sidebar ——侧边栏
- navigation ——导航元素
- pagination ——分页
- tab
- breadcrumbs ——导航列表、面包屑
- .panel
- tooltip ——鼠标放上去的提示
- popup —— 鼠标点击弹出框提示
- thumbnail ——头像、小图像
- media
- artical
- dropdown ——下拉菜单
- summary ——摘要
- banner ——广告条
CSS 编码规范
- tab 用两个空格表示
- css的:后面加个空格,{前加空格
- 小数不用写前缀,0.5 -> .5;0不用加单位
- 尽量缩写