CSS基础

1.CSS的全称是什么?

CSS的全称是Cascading Style Sheet,汉语意思是「级联样式表」,通常又称为“风格样式表(Style Sheet)

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

三种

  • 内联样式
<h1 style="color: red; font-size: 20px;"> Hello World </h1>
  • 内部样式
<style>
    h1{
      color: red;
      font-size: 20px;
    }
</style>
<h1>Hello World  </h1>
  • 外部样式
<head>
        <link rel="style sheet"  type="text/css"  href="css/style.css">
</head>
  <style>
    @import url("hello.css");
    @import "world.css";
  <\style>

link 和@import 区别如下

  1. 从属差别
    link是XHTML中的标签,除了用来引用CSS之外,还能加载RSS等其他事物,@import属于CSS范畴,只能加载CSS
  2. 加载顺序差别
    link引用的CSS会和HTML同时加载,@import会在HTML渲染完之后再开始加载
  3. 兼容性差别
    link标签可以说没有浏览器不能识别,@import是CSS 2.1中提出的,老浏览器不能识别,IE5以上才能识别(不过现在应该没有人用IE5以下的版本了)
  4. 使用DOM控制样式时的区别
    当使用JavaScript控制DOM来改变样式的时候,只能使用link标签,因为@impotent不是DOM可控的
  5. @import可以用在CSS中嵌套使用(注意写在最前面,否则无法生效)

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

路径 含义 分类
css/a.css 当前文件位置下的 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 根目录下的 Users/hunger/project/css 文件夹中的 a.css 文件 绝对路径
/static/css/a.css 根目录下的 static/css 文件夹中的 a.css 文件 网站路径
http://cdn.jirengu.com/kejian1/8-1.png 相应服务器上网站根目录下 kejian1 文件夹中的 8-1.png 文件 网站路径
  • 相对路径
    方便网站的本地测试,网站整体迁移方便
    相对路径的网页在被人复制或转载时,不能返回正常的外部链接导入

  • 绝对路径
    不方便本地测试,修改麻烦
    在被人复制或转载时,可以给网站带来很多外链

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

将所需图片上传至任意图床,获取到该图片的url,然后在需要用该图片的地方引入它的url

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

  • html中除了开头的DOC和 'UTF-8'或者head里特殊情况可以大写外,其他都为小写,css类都为小写
  • 不使用内联的style属性定义样式
  • id和class使用有意义的单词,分隔符建议使用-
  • 属性值是0的省略单位
  • 块内容缩进
  • 属性名冒号后面添加一个空格

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

  • Elements 元素
    查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。
    自由操纵DOM和CSS来调整页面的布局和设计
    左上第一个按钮点击之后,再选择页面中的任何元素,Elements窗口中会实施跳转到选中的元素的源码


    Elements 元素

    左上第二个按钮点击之后,可以模拟出各种尺寸的移动设备


    Device
  • Console 控制台
    在开发期间,可以使用控制台面板记录诊断信息。或者使用它作为 shell,在页面上与JavaScript交互


    Console 控制台
  • Sources 源代码
    在“源代码”面板中,可以断点调试 JavaScript 。或者通过Workspaces(工作区)连接本地文件,使用开发者工具实时编辑


    Sources 源代码
  • Network 网络
    从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息(包括状态、资源类型、大小、所用时间等),可以根据这些信息来进行网络性能优化

Network 网络
  • Performance 性能
    使用时间轴面板,可以通过记录并分析页面内的各种事件,由此可以针对性的进行优化,提供网页运行的性能


    erformance 性能
  • Application 资源面板
    记录网站加载的所有资源信息,包括存储数据(Local Storage、Session Storage、IndexedDB、Web SQL、Cookies)、缓存数据、字体、图片、脚本、样式表等

Application 资源面板
  • Security 安全
    判断当前网页是否安全
Security 安全
  • Audits 审计
    对当前网页进行网络利用情况、网页性能方面的诊断,并给出一些优化建议。比如列出所有没有用到的CSS文件等
Audits 审计
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • CSS的全称是什么? CSS全程是Cascading Style Sheets层叠样式表 CSS有几种引入方式? ...
    Taaaaaaaurus阅读 2,915评论 0 1
  • 1.CSS的全称是什么? 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTM...
    billa_8f6b阅读 3,251评论 0 1
  • 1、CSS的全称是什么? 答:CSS全称是Cascading Style Sheets,层叠样式表 2、CSS有几...
    饥人谷_牛牛阅读 2,860评论 0 1
  • 蘅芜一笑阅读 3,114评论 0 0

友情链接更多精彩内容