前端基础03

作者: IT男的成长记录 | 来源:发表于2017-01-17 12:48 被阅读0次

    1.CSS简介:

    • CSS(Cascading Style Sheets):层叠样式表
    • 样式定义如何显示 HTML 元素,样式通常存储在样式表中

    2.CSS引入方式

    • 内联样式:<h1 style="color:red; font-size: 20px;"></h1>
    • 内部样式:
    <style type="text/css">
        h1 {
          color: red;
          font-size: 20px;
        }
    </style>
    
    • 外部样式:
      • 用link标签来引入(link是HTML的一个标签)
    <head>
        <link rel="stylesheet" type="text/css" href="index.css" />
    </head>
    
    * 用@import来引入(@import 是css的语法)
    
    <style>
        @import url("hello.css");
        @import "world.css";
    </style>
    
    • 样式表优先顺序:内联样式 > 内部样式 > 外部样式 > 浏览器缺省设置

    3.文件路径

    • 相对路径:以文件(HTML页面)所在路径为基准来查找相关文件
      • css/a.css:在当前路径(HTML文件所在路径)下存在css文件夹,选择该文件夹下的a.css文件
      • ./css/a.css:和第一个意义相同,其中./表示当前目录,选择当前目录下css文件夹中的a.css文件
      • b.css:选择当前目录中的b.css文件
      • ../imgs/a.png:其中../表示上一级目录,即选择上一级目录中的imgs文件夹下的a.png文件
    • 绝对路径:文件或目录在硬盘上真正的路径
      • /Users/hunger/project/css/a.css:在本地计算机上可以通过该路径找到a.css文件
    • 网路路径:例如当前页面的地址为http://localhost:8080/code/index.html, 在该HTML文件中存在以下路径:
      • /static/css/a.css:以绝对路径的方式在服务器中寻找a.css文件,即在服务器上直接通过该路径寻找相关文件
      • css/a.css:以相对路径的方式在服务器中寻找a.css文件,即在index.html文件所在路径(目录)中寻找css文件夹下的a.css文件
      • http://cdn.jirengu.com/kejian1/8-1.png: 通过该地址可以找到网络上的8-1.png文件

    4.在js.jirengu.com上展示一个图片

    • 打开某图床网站,上传所需图片,得到图片的链接


    • 在img标签的src属性中填写图片的网络路径,即可展示图片


    5.html和css书写规范:

    HTML常用规范(强制):
    • 使用 4 个空格做为一个缩进层级,不允许使用 2 个空格 或 tab 字符。
    • class 必须单词全字母小写,单词间以 - 分隔。
    • 对于无需自闭合的标签,不允许自闭合,例如input、br、img、hr等
    • 对 HTML5 中规定允许省略的闭合标签,不允许省略闭合标签。
    • 使用 HTML5 的 doctype 来启用标准模式,建议使用大写的 DOCTYPE。
    • 页面必须使用精简形式,明确指定字符编码。指定字符编码的 meta 必须是 head 的第一个直接子元素。
    • 引入 CSS 时必须指明 rel="stylesheet"。
    • 页面必须包含 title 标签声明标题。title 必须作为 head 的直接子元素,并紧随 charset 声明之后。
    • 有文本标题的控件必须使用 label 标签将其与其标题相关联。<label><input type="checkbox" name="confirm" value="on"> 我已确认上述条款</label>
    • 使用 button 元素时必须指明 type 属性值。
    • 其他建议规范:HTML编码规范
    CSS常用规范(强制):
    • 使用 4 个空格做为一个缩进层级,不允许使用 2 个空格 或 tab 字符。
    • 选择器 与 { 之间必须包含空格。
    • 属性名 与之后的 : 之间不允许包含空格, : 与 属性值 之间必须包含空格。
    • 列表型属性值 书写在单行时,, 后必须跟一个空格。font-family: Arial, sans-serif;
    • 每行不得超过 120 个字符,除非单行不可分割。
    • 当一个 rule 包含多个 selector 时,每个选择器声明必须独占一行。
    /* good */
    .post,
    .page,
    .comment {
        line-height: 1.5;
    }
    
    /* bad */
    .post, .page, .comment {
        line-height: 1.5;
    }
    
    • >、+、~ 选择器的两边各保留一个空格。
    • 属性选择器中的值必须用双引号包围。
    • 属性定义必须另起一行。
    • 属性定义后必须以分号结尾。
    • 文本内容必须用双引号包围。
    • 当数值为 0 - 1 之间的小数时,省略整数部分的 0。
    • url() 函数中的路径不加引号。
    • 长度为 0 时须省略单位。
    • RGB颜色值必须使用十六进制记号形式 #rrggbb。不允许使用 rgb()。
    • 颜色值可以缩写时,必须使用缩写形式。
    • 颜色值不允许使用命名色值。
    • 需要在 Windows 平台显示的中文内容,其字号应不小于 12px。
    • 其他建议规范:CSS编码规范

    6.chrome开发者工具介绍:

    • 移动开发:


    • 页面与样式:


    • JavaScript相关:



    • 资源相关:




    相关文章

      网友评论

        本文标题:前端基础03

        本文链接:https://www.haomeiwen.com/subject/gvymbttx.html