CSS的全称是什么?
Cascading Style Sheet 层叠样式表
CSS有几种引入方式? link 和@import 有什么区别?
行内样式
最直接最简单的一种,直接对HTML标签使用style="",例如:
<p style="color:#F00; "></p>缺点:HTML页面不纯净,文件体积大,不利于蜘蛛爬行,后期维护不方便。内嵌样式
内嵌样式就是将CSS代码写在<head></head>之间,并且用<style></style>进行声明,例如:
<style type="text/css">body,div,a,img,p{margin:0; padding:0;}</style>优缺点:页面使用公共CSS代码,也是每个页面都要定义的,如果一个网站有很多页面,每个文件都会变大,后期维护难度也大,如果文件很少,CSS代码也不多,这种样式还是很不错的。链接样式
链接样式是使用频率最高,最实用的样式,只需要在<head></head>之间加上<link…/>就可以了,如下:
<link type="text/css" rel="stylesheet" href="style.css" />优缺点:实现了页面框架代码与表现CSS代码的完全分离,使得前期制作和后期维护都十分方便导入样式(不建议使用)
导入样式和链接样式比较相似,采用@import样式导入CSS样式表,在HTML初始化时,会被导入到HTML或者CSS文件中,成为文件的一部分,类似第二种内嵌样式。@import在html中使用,如下:
<style type="text/css">@import url(style.css);</style>
@import在CSS中使用,如下:@import url(style.css);
四种CSS引入方式的优先级
- 就近原则
- 理论上:行内>内嵌>链接>导入
- 实际上:内嵌、链接、导入在同一个文件头部,谁离 相应的代码近,谁的优先级高
link和@import的区别
- link属于html标签,而@import是css的语法。
- 页面被加载时,link会同时被加载,而@import引用的css会等到页面加载结束后加载。
- link是html标签,因此没有兼容性,而@import只有IE5以上才能识别。
- link方式样式的权重高于@import
以下这几种文件路径分别用在什么地方,代表什么意思?
- css/a.css 当前目录下css文件中的a.css
- ./css/a.css 代表当前目录下css文件中的a.css
- b.css 代表当前目录下css文件中的b.css
- ../imgs/a.png ../代表上一级目录中imgs文件中的a.png文件
- /Users/hunger/project/css/a.css 绝对路径 本地文件地址
- /static/css/a.css 主域名下static文件中css的a.css文件
- http://cdn.jirengu.com/kejian1/8-1.png 网站路径
如果我想在js.jirengu.com上展示一个图片,需要怎么操作?
使用网站路径链接的方式将图片文件夹上传至服务器上
列出5条以上html和 css 的书写规范
html规范
id class建议单词全字母小写,单词间以 -分隔。同项目必须保持风格一致。
HTML 标签的使用应该遵循标签的语义。
禁止 img的 src取值为空。延迟加载的图片也要增加默认的 src
使用 button元素时必须指明 type 属性值。
在 CSS 可以实现相同需求的情况下不得使用表格进行布局css规范
属性名与之后的 :之间不允许包含空格, :与 属性值之间必须包含空格
选择器的嵌套层级应不大于 3级,位置靠后的限定条件应尽可能精确
在可以使用缩写的情况下,尽量使用属性缩写
尽量不使用 !important声明。将 z-inde 进行分层,对文档流外绝对定位元素的视觉层级关系进行管理
截图介绍 chrome 开发者工具的功能区
- Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。
- 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:对当前网页进行网络利用情况、网页性能方面的诊断,并给出一些优化建议。比如列出所有没有用到的CSS文件等。