css入门基础

作者: 饥人谷_林嘉俊 | 来源:发表于2017-08-03 14:40 被阅读23次

    1.CSS的全称是什么?

    层叠样式表 (Cascading Style Sheets)

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

    1.内联样式:
    <h1 style="color:blue; font-size:10px;"></h1>
    2.内部样式:
    <style type="text/css">
    h1 {
    color:red;
    font-size:10px;
    }
    </style>
    3.外部样式:
    <head>
    <link rel="stylesheet" type="text/css" href="index.css>
    </head>
    4.@import引入:
    <style>
    @import url("hello.css");
    @import "world.css"
    </style>

    区别:
    1.link是HTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。
    2.link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
    link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
    3.link支持使用Javascript控制DOM去改变样式;而@import不支持。

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

    css/a.css 当前目录下的css文件夹下的a.css文件
    ./css/a.css 同上,.代表当前目录
    b.css 当前目录下的b.css文件
    ../imgs/a.png 上级目录中的imgs 文件夹中的a图片
    /Users/hunger/project/css/a.css 本地绝对路径中的a.css文件
    /static/css/a.css 主域名下的文件路径
    http://cdn.jirengu.com/kejian1/8-1.png网站中的路径,是一个绝对路径

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

    把图片上传到服务器上,然后通过标签

    image.png

    文件路径为图片在服务器上的相对路径

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

    规范大全

    https://github.com/fex-team/styleguide/blob/master/css.md

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

    image.png

    elements:显示dom元素,修改当前页面的dom元素浏览器实时展示,该页所修改的内容只有自己可以看到,通常可以用来 测试网页展示效果。
    style:对应的是当前页面的样式,可以测试改变修改样式。
    console:可以看js代码的执行状态和变量,输入al_c可以看到全局变量,在页面js页面添加console.log(想输入的内容),不在浏览器中显示,打开控制台出现。
    sources:可以调试js
    network:查看调试ajax接口,前后台交互的问题。
    里面可以查看很多部分
    js css img media 等等


    image.png

    application:当前页面请求的资源
    memory:分析cpu和内存

    相关文章

      网友评论

        本文标题:css入门基础

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