CSS学习笔记[1]——CSS简介及使用

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>
  • 浏览器默认样式


文件路径

  • 相对路径
  1. css/a.css
  2. ./css/a.css
  3. ../imgs/a.png
  • 绝对路径
  • 网站路径

html编码规范

命名技巧

  • 语义化
  1. 标签语义化
  2. 命名语义化
  • 命名规范
  1. 所有命名都使用英文小写
  2. 用中横线连接
  3. 命名体现功能,不涉及表现样式(颜色、字体、边框、背景等)
  • 常见命名
  1. .wrap或.wrapper ——用于外侧包裹
  2. .container或.ct ——包裹容器
  3. .header ——用于头部
  4. aside、sidebar ——侧边栏
  5. navigation ——导航元素
  6. pagination ——分页
  7. tab
  8. breadcrumbs ——导航列表、面包屑
  9. .panel
  10. tooltip ——鼠标放上去的提示
  11. popup —— 鼠标点击弹出框提示
  12. thumbnail ——头像、小图像
  13. media
  14. artical
  15. dropdown ——下拉菜单
  16. summary ——摘要
  17. banner ——广告条

CSS 编码规范

  1. tab 用两个空格表示
  2. css的:后面加个空格,{前加空格
  3. 小数不用写前缀,0.5 -> .5;0不用加单位
  4. 尽量缩写

规范参考
http://codeguide.bootcss.com/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容