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不用加单位
- 尽量缩写
网友评论