CSS基础

作者: 谨言_慎行 | 来源:发表于2017-06-21 06:53 被阅读0次

1. CSS的全称是什么?

层叠样式表

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

  • 内联CSS,<p style="background-color: red ">123</p>
  • 内部CSS,在head标签中添加style标签
<head>
        <style type="text/css">
        h1 {
            color: red;
        }
        </style>
</head>
<body>
        <h1>一级标题</h1>
</body>
  • 外部CSS ,在HTML中引入外部链接,
<head>
      <link rel="stylesheet" type="text/css" href="index.css"/>
</head>
  • 外部CSS,@import导入
<head>
       <style>
       @import url("a.css");    @import"b.css"; 
       </style>
</head>
  • ink与@import的区别
    1.用途 link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。
    2 加载方式link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
    3.兼容支持link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持
    4.ink支持使用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 —— 本地绝对路径,本地根目录下Wsers目录下的hunger目录下project目录下css目录下的a.css文件
/static/css/a.css —— 网络相对路径,服务器根目录下的static目录下的css目录下的a.css文件
http://cdn.jirengu.com/kejian1/8-1.png1
—— 网络路径,通过该路径可以找到cdn.jirengu.com域名下kejian1目录下的8-1.png文件

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

  • 若是本地图片就将其上传至服务器与HTML文件在同一目录下,这时在用相对路径引入图片![](images/a.png )
  • 若是网络图片就可以用网络路径引入<img src="网络图片的链接" alt="图片"

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

  • 语法不区分大小写,但建议统一使用小写
  • div尽量在三层以内,还是从seo方面考虑
  • 不使用内联的style属性定义样式
  • 属性值是0的省略单位
  • 块内容缩进
  • 属性名冒号后面添加一个空格

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

  • Elements,要素,我们可以看到构成当前页面的组成要素,HTML、CSS、DOM对象,还可以对其进行编辑以更改页面显示的效果。

    2.png1318x543 54.4 KB

    4.png1292x504 116 KB

    3.png993x360 33.4 KB

    通过1指示的箭头来在页面中选择一个元素,我们可以编辑它们。
  • 此页面在移动端效果


    5.png
  • Console,显示各种警告与错误信息,并且提供了shell用来和文档、开发者工具交互

    6.png1143x426 27.9 KB
  • Sources,调试JS

    7.png864x722 30.1 KB
  • Network,从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息(包括状态、资源类型、大小、所用时间等),可以根据这个进行网络性能优化

    8.png1164x805 60.7 KB
  • Security网页安全性

    9.png889x727 18.3 KB
  • Audits分析页面加载的过程,进而提供减少页面加载时间、提升响应速度的方案[

相关文章

网友评论

    本文标题:CSS基础

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