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