CSS基础

作者: 饥人谷张雪莲 | 来源:发表于2018-08-07 15:11 被阅读0次

    1.css的全称:(cascading style sheets)层叠样式表

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

    1.内联样式

    <h1 style="color:red; font-size:20px;> </h1>
    

    2.内部样式

    <style type="text/css">
    h1{
       color:red;
       font-size:20px;
    }
    </style>
    

    3.外部样式:使用链接引入来加载页面

    a:<head>
            <link rel="stylesheet" type="text/css" href="index.css">
      </head>
    b:<style>
           @import url ("hello css");
           @import "world.css"
    </style>
    

    4.浏览器默认样式

    link 和@import 有什么区别?

    link和@import的本质都是为了加载CSS文件,但是还是存在一些细微的差别

    • link属性xhtml标签,而@import完全属于css提供的一种方式。link标签除了加载css以外,还可以做很多其他的事情,比如定义rss,定义rel链接属性,而@import只能加载css。
    • 加载顺序的差别,当一个页面被加载的时候,link引用的css会同时被加载,而@import引用的css会被等到页面被下载完以后再加载,所以有时候浏览@import引用的css加载页面时性能较差。
    • 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
    • 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。

    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:绝对路径;表示a.css的绝对路径,在本地硬盘中真实存在的地址;
    • /static/css/a.css:网络路径;最前面有斜线,表示当前主域名下的路径去寻找a.css文件,例如,主域名为localhost:8080,那么就以licalhost:8080/static/css/a.css的路径去寻找a.css文件,如果没有最前面的斜线,就是在相对当前html的同级目录下以static/css/a.css去寻找a.css;
    • http://cdn.jirengu.com/kejian1/8-1.png:8-1.png被上传到互联网上,这是它在互联网中真实准确的地址网络路径;

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

    1. 直接把图片上传到服务器,用相对路径。
    2. 网上图片获得图片地址,用网络路径,本地图片可以上传到图床获得地址。

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

    html:
    1.一行代码表示一个内容
    2.代码缩写使用tab键
    3.标签与它的属性必须小写
    4.所有的标签必须合理嵌套
    5.大部分标签有属性 格式:属性=“属性值”(多个属性之间用空格隔开)
    css:
    1.选择器{ 属性:值;} :与值之间空一个空格
    2.属性值是0的省略单位
    3.块内容缩写
    4.ID和class用有意义的单词
    5.有可能就用缩写

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

    wode.png

    Elements 查看元素
    Console 控制台,用于调试
    Sources 文件资源情况
    Network 网络状况
    timeline 页面渲染时间

    相关文章

      网友评论

          本文标题:CSS基础

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