CSS基础

作者: DeeJay_Y | 来源:发表于2017-07-30 11:39 被阅读21次

一. CSS的全称是什么?

CSS的全称是Cascading Style Sheets,层叠样式表。

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

  • 浏览器默认样式
    即 user agent stylesheet

  • 内联样式
    <h1 style="color: red; font-size: 20px;"></h1>

  • 内部样式

<style type="text/css">
  h1 {
    color: red;
    font-size: 20px;
  }
  </style>
  <h1>hello,deejay!</h1>
  • 外部样式
  1. <link>标签 (一般建议放到<head>标签中)
<head>
  <link rel="stylesheet" href="index.css" type="text/css">
</head>
  1. @import
 <style>
 @import url("hello.css");
 @import "world.css";
 </style>
  1. <link>和@import的区别
  • 本质区别
    <link>标签本质上就是一个HTML标签,跟普通的<h1>,<p>等一样,而@import是一种css语法,是css的语法,而不属于HTML。
  • 用法区别
    @import是要放到<style>标签中或者外部css文件中的。而<link>标签可以放到html的任何地方。
  • 加载顺序区别
    <link>标签引用的CSS文件在网页加载同时就会加载,而@import引入的CSS文件会等到页面被加载完成后才开始加载。
  • 兼容性区别
    @import在是相对较新的属性(在CSS2.1),对于IE5以下的浏览器不支持。
  • DOM操作区别
    用@import引入的样式不可以通过DOM去改变。<link>标签的可以。

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

  • 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
    绝对路径,以/开头的表示要引入的css文件在本地的绝对路径。

  • /static/css/a.css
    网站路径,表示在主域名下的CSS文件的路径。

  • http://cdn.jirengu.com/kejian1/8-1.png
    网站路径

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

  • 先将本地图片上传到某个地方例如微博微信等,生成一个线上的地址,然后进行引用。

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

  • 语法不区分大小写,但是建议统一小写
  • 不使用内联的style属性定义样式。
  • id和class使用有意义的单词,分隔符建议使用-,不建议使用下划线。
  • 属性值是0的省略单位
  • 块内容缩进。
  • 属性名冒号后面添加一个空格

六.对Chrome开发者工具的了解

开发者调试工具

在element区域中,可以看到页面中所有的元素,并且可以操作相应的元素。在style区域中可以看到页面元素应用的样式,element.style是元素的内联样式。inherited from ...是代表从父元素继承过来的样式。同时也可以操作css样式来改变页面元素样式。


开发者调试工具

相关文章

网友评论

    本文标题:CSS基础

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