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上展示一个图片,需要怎么操作?

  1. 网站路径引用
    通过网站地址引用来显示,例:
    点我查看
<body>
  ![百度logo](http://upload-images.jianshu.io/upload_images/4496284-7d6989b2f990c358.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
</body>
  1. 本地开服务器,通过网站路径来引用
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用于对网站做安全环境做综合评估

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

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 179,001评论 25 709
  • 一、css是什么? CSS全称是Cascading Style Sheets,简写为CSS,称作:层叠样式表,又称...
    青鸣阅读 1,106评论 0 1
  • CSS的全称是什么? CSS全程是Cascading Style Sheets层叠样式表 CSS有几种引入方式? ...
    Taaaaaaaurus阅读 444评论 0 1
  • 小肉瘤变小了…
    咖啡大寫C阅读 285评论 0 0
  • 我曾是一只自由的小船 后来 生活的航标引领我前行 今天 在不经意中被你牵引 凝望你深沉的双眸 我的心便紧紧抽紧 啊...
    清风一隅阅读 243评论 0 0

友情链接更多精彩内容