CSS基础

作者: 不是我的简书 | 来源:发表于2017-01-16 11:11 被阅读157次

    1、CSS的全称是什么?

    层叠样式表Cascading Style Sheet

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

    1. 行内式
    <div  style="color: #333"></div>
    
    1. 内嵌式(放在head中)
    <style type="text/css">
            *{
                padding: 0;margin: 0
            }
        </style>
    
    1. 外联式(放在head中,推荐!)
    <link href="css/style.css" rel="stylesheet" type="text/css">
    
    1. 在 <style> 里面写上 @import url("http://xxx.css")
    <style>@import url("http://xxx.css")</style>
    

    link 和@import 区别

    1. 语法结构差别。link 是 HTML 标签除了 CSS 还能定义别的东西,而@import是CSS提供的一种方式,只能加载CSS了。
    2. 加载顺序的差别。link 和页面本体是会同时加载的,而 @import 得等到页面加载完成再加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁)。
    3. 兼容性的差别。@import 是 CSS 2 标准,所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
    4. 使用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(static文件夹中的css文件夹中的a.css文件)
    http://cdn.hunger.com/kejian1/8-1.png (网站的图片地址)

    PS:如果想在js.baidu.com上展示一个图片,需要怎么操作?
    1. 把图片上传服务器,然后引用相对路径
      qw2ie2. 第二种生成图片的链接,然后引用图片

    4、介绍 chrome 开发者工具的功能区

    chrome 开发者工具的功能区
    参考资料
    参考知乎回答

    5、长度单位

    相对长度单位
    px 像素点
    em //font-size的值,若一个元素的font-zise值为16px,则1em=16px
    rem
    ex //x字符的高度,有些浏览器会把它计算成0.5em
    vh vm

    相关文章

      网友评论

        本文标题:CSS基础

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