6 CSS基础

作者: 好好顽 | 来源:发表于2017-06-27 19:21 被阅读20次
    1. CSS的全称是什么?
      答:Cascading Style Sheets ,层叠样式表,html布局文件。

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

    3. 内联:样式直接写入标签中<td style="color:#c00; font-size:15px; line-height:18px;>

    4. 嵌入:样式写入html头标签head里<head><style>.content {background: red; }</style></head>

    5. 链接:样式以文件方式从link标签引入<link rel=stylesheet type="text/css" href="example.css">

    6. 导入:样式使用 CSS 规则引入外部 CSS 文件<style>@import url(style.css);</style>
      区别:@import 为CSS服务。link是为当前的页服务。
      link 属于 HTML,通过 <link> 标签中的 href 属性来引入外部文件,而 @import 属于 CSS,所以导入语句应写在 CSS 中,要注意的是导入语句应写在样式表的开头,否则无法正确导入外部文件。
      当 HTML 文件被加载时,link 引用的文件会同时被加载,而 @import 引用的文件则会等页面全部下载完毕再被加载。
      @import 是 CSS2.1 才出现的概念,所以如果浏览器版本较低,无法正确导入外部样式文件。

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

    • 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
      绝对路径:User文件夹下hunger文件夹下project文件夹下css文件夹下a.css
    • /static/css/a.css
      绝对路径,在网站服务器通过该路径找到a.css文件
    • http://cdn.jirengu.com/kejian1/8-1.png
      同上
    1. 如果我想在js.jirengu.com上展示一个图片,需要怎么操作?
      答:一种是将图片上传到该网站的服务,第二种是引用图片链接。当然第二种的时间空间效率就很高了。
    2. 列出5条以上html和 css 的书写规范
    3. 引入JS库文件, 文件名须包含库名称及版本号及是否为压缩版, 比如jquery-1.4.1.min.js; 引入插件, 文件名格式为库名称+插件名称, 比如jQuery.cookie.js。
    4. 充分利用无兼容性问题的html自身标签, 比如span, em, strong, optgroup, label,等等;
    5. 需要为html元素添加自定义属性的时候, 首先要考虑下有没有默认的已有的合适标签去设置, 如果没有,
      可以使用须以”data-”为前缀来添加自定义属性,避免使用”data:”等其他命名方式;
    6. 语义化html, 如 标题根据重要性用h*(同一页面只能有一个h1), 段落标记用p, 列表用ul, 内联元素中不可嵌套块级元素;
    7. 尽可能减少div嵌套,
    8. 书写链接地址时, 必须避免重定向
      能以背景形式呈现的图片, 尽量写入css样式中;
    9. 截图介绍 chrome 开发者工具的功能区

      答:
    10. Elements看到chrome渲染页面所需要的的HTML、CSS可以编辑这些内容更改页面显示效果。
    11. Console: 显示各种警告与错误信息,并且可以直接在上面写js代码。
    12. Sources: 看资源文件,主要用来调试js。
    13. Network: 页面向服务器请求了哪些资源、资源的大小以及加载资源花费的时间,哪些资源不能成功加载,查看HTTP的请求头,返回内容等。
    14. Timeline:加载页面时花费时间的完整分析,所有事件,从下载资源到处理Javascript,计算CSS样式等花费的时间都展示在Timeline中;
    15. Profiles: 分析web应用或者页面的执行时间以及内存使用情况;
    16. Resources: 对本地缓存(IndexedDB、Web SQL、Cookie、应用程序缓存、Web Storage)中的数据进行确认及编辑;
    17. Audits: 分析页面加载的过程,进而提供减少页面加载时间、提升响应速度的方案;

    相关文章

      网友评论

        本文标题:6 CSS基础

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