CSS&路径相关

1. CSS的全称是什么？

CSS：Cascading Style Sheets

2. CSS有几种引入方式? link 和@import 有什么区别?

CSS引入方式有4种

内联样式：

<body>
    <!-- 内联样式，在 HTML 元素内部 -->
    <h1 style="color: red; font-size: 20px; ">我是标题1</h1>
    <div style="font-size: 14px;color: blue">
        <p>你好</p>
    </div>
</body>

内部样式：

<head>
    <!-- 内部样式，位于 <head> 标签内部 -->
    <style type="text/css">
         h1 {
            color: red;
            font-size: 20px;
         }
    </style>
</head>

外部样式：

  外部样式1：
  <head>
      <!-- 外部样式 -->
      <link rel="stylesheet" href="css/a.css" />
  </head>
  --------------------------------------------------------------
  外部样式2：
  <head>
    <style>
      @import url("hello.css");
      @import "world.css";
    </style>
  </head>

浏览器缺省样式：

QQ截图20171003235042.png

3. 以下这几种文件路径分别用在什么地方，代表什么意思?

lujing.png

css/a.css----------------------------------相对路径，与html文件同级的css文件下的css文件，用在本地或者服务器
./css/a.css--------------------------------相对路径，与html文件同级的css文件下的css文件，用在本地或者服务器
b.css--------------------------------------相对路径，与html处于同一目录下，用在本地或者服务器
../imgs/a.png------------------------------相对路径，与html处于不同一目录下，在html上一级的imgs文件夹下，用在本地或者服务器
/Users/hunger/project/css/a.css------------绝对路径，一般用在本地
/static/css/a.css--------------------------网站路径，一般用在服务器，不常用
http://cdn.jirengu.com/kejian1/8-1.png-----网站路径，引用的情况下常用

4. 如果我想在js.jirengu.com上展示一个图片，需要怎么操作?

网站路径引用
通过网站地址引用来显示，例：
点我查看

<body>
  ![百度logo](http://upload-images.jianshu.io/upload_images/4496284-7d6989b2f990c358.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
</body>

本地开服务器，通过网站路径来引用

5. 列出5条以上html和 css 的书写规范

- 标签小写
- 标签闭合
- 标题里不可有段落，段落里不可以有标题
- 不使用内联式（嵌入式）样式
- 不使用“_”下划线来连接单词
- 遵从语义化书写原则，标签、name、id都尽量选择适宜的

6. 截图介绍 chrome 开发者工具的功能区

打开chrome开发者工具的方式

键盘 F12
Ctrl + Shift + i
鼠标右键 - "检查"
chrome - "更多工具" -"开发者工具"

搜狗为例

printScreen2.png

printScreen1.png

Elements展示了html标签和css样式表

sources.png

Sources展示了网站结构和访问页面过程中加载的资源

network.png

Network展示了页面各部分响应时间和加载时间

performance.png

Performance展示了JS的加载时间和页面元素渲染时间

Audits.png

Audits-2.png

Audits用于优化前端页面、移动页面等的加载速度

Security.png

Security用于对网站做安全环境做综合评估

最后编辑于：2017.12.11 00:02:21