css基础

作者: liushaung | 来源:发表于2017-07-25 12:36 被阅读0次

1.css的全称是什么?

  • 层叠样式表(英语:Cascading Style Sheets,简写CSS)

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

  • 内联方式,指直接在 HTML 标签中的 style 属性中添加 CSS。
    <pre> <div style="background: red"></div> </pre>

  • 嵌入方式,指在 HTML 头部中的 <style> 标签下书写 CSS 代码。
    <pre><head>
    <style>
    .content {
    background: red;
    }
    </style>
    </head>
    </pre>

  • 链接方式, 指使用 HTML 头部的 <head> 标签引入外部的 CSS 文件。
    <pre>
    <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    </pre>

  • 导入方式, 指使用 CSS 规则引入外部 CSS 文件。
    <pre>
    <style>
    @import url(style.css);
    </style>
    </pre>

  • link和@import的区别:

    • link属于HTML标签,而@import属于css的语法;link必须在HTML文件中使用,而@import可以在<style>标签或css文件中使用。
    • 加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显。
    • 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。
    • 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。

3. 文件路径

  • 绝对路径:资源相对于跟目录的位置。
    • /Users/hunger/project/css/a.css
    • /static/css/a.css
  • 相对路径:资源相对于当前目录的位置。
    • css/a.css
    • ./css/a.css
    • b.css
    • ../imgs/a.png
  • 网站路径:从网站根目录到文件的路径。
    • http: //cdn.jirengu.com/kejian1/8-1.png
    • /static/css/a.css/static/css/a.css
    • css/a.css

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

  • 可以直接将图片上传到服务器,在页面使用这张图片
  • 如果这张图片存在于网络中,直接使用图片的网络绝对路径

5.一些html和 css 的书写规范

  • HTML标签全部使用小写。
  • 代码必须要有合理的缩进。
  • 选择器与 ‘{’ 之间必须要有空格
  • 属性值与 ‘:’ 之间必须要有空格
  • >、+、~ 选择器的两边各保留一个空格。
  • 属性定义后必须以分号结尾。

6.chrome开发者工具

123.png

相关文章

网友评论

    本文标题:css基础

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