CSS基础

作者: cross_王 | 来源:发表于2017-06-16 01:05 被阅读0次

    CSS的全称是什么?

    • CSS是Cascading Style sheets的简称。层叠样式表,用于控制页面的样式。

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

    • CSS有4种引用方式。行内样式,内联样式,外联样式,@import引入。
    • link与@import的区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。区别4:ink支持使用Javascript控制DOM去改变样式;而@import不支持。

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

    • 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 : 网址为http://cdn.jirengu.com/kejian1/8-1.png的文件

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

    • 如果是本地图片把图片上传到服务器,使用相对路径
    • 如果是网络图片,使用图片的链接

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

    • 语法不区分大小写,但建议统一使用小写
    • div尽量在三层以内,还是从seo方面考虑
    • 不使用内联的style属性定义样式
    • 属性值是0的省略单位
    • 块内容缩进
    • 属性名冒号后面添加一个空格

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

    • Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。


      1.png
    • Console:记录开发者开发过程中的日志信息,且可以作为与JS进行交互的命令行Shell。


      2.png
    • Sources:断点调试JS


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


      4.png
    • Application:记录网站加载的所有资源信息,包括存储数据(Local Storage、Session Storage、IndexedDB、Web SQL、Cookies)、缓存数据、字体、图片、脚本、样式表等。 6.png

      -Security:判断当前网页是否安全。


      7.png
    • Audits:对当前网页进行网络利用情况、网页性能方面的诊断,并给出一些优化建议。比如列出所有没有用到的CSS文件等。


      8.png

    相关文章

      网友评论

        本文标题:CSS基础

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