CSS基础

2017-03-05 本文已影响0人高进哥哥

1.CSS的全称是什么?

层叠样式表

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

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

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 本地绝对路径中的a.css文件
网络路径
/static/css/a.css
当前本地服务器地址为http://localhost:8080/code/index.html, 在该HTML文件中存在以下路径：/static/css/a.css：以绝对路径的方式在服务器中寻找a.css文件，即在服务器上直接通过该路径寻找相关文件
css/a.css:以相对路径的方式在服务器中寻找a.css文件
http://cdn.jirengu.com/kejian1/8-1.png 通过这个网络地址寻找图片

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

将图片上传至图床，获取链接，插入img属性中,然后上传到服务器内部并用相对路径读取。

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

HTML：

DOCTYPE标签使用大写，如<!DOCTYPE html>
对 input、img 等不无需自闭合的标签，不要自闭合，即写成<img scr="#">，而不是<img scr="#"/>
对需要闭合的标签，闭合标签不要省略
页面要指定字符编码，指定字符编码的 meta 元素应为 head 的第一个子元素
有文本标签的控件必须使用label标签将文本和控件关联
不要在HTML里使用内联样式

CSS：

统一使用小写
不使用内联的style属性定义样式
id 和 class 使用有意义的单词，命名连字符使用-
要有一定的缩进
数值为0时不带单位
属性值在冒号后面加一个空格
使用缩写

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

Elements：查看当前页面的元素
Console：记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell
Sources：用于对JS进行断点调试
Network：从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化
Timeline：记录并分析在网站的生命周期内所发生的各类事件，以此可以提高网页的运行时间的性能
Profiles：如果你需要Timeline所能提供的更多信息时，可以尝试一下Profiles,比如记录JS CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗、记录内存的分配细节
Application：记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等
Security：判断当前网页是否安全
Audits：对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议