CSS基础

作者: 魔王卡卡 | 来源:发表于2017-07-12 11:52 被阅读0次

CSS的全称是什么?

CSS全称Cascading Style Sheets,层叠样式表


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

CSS有以下几种引入方式:

  • 内联样式
    <h1 style="color:red;"></h1>
  • 内部样式
    <style>
    h1{
        color: red;
    }
    </style>
    
  • 外联样式
    <link rel="stylesheet" type="text/css" href="index.css">
    <style>
        @import url(index.css)
        @import "index.css"
    </style>
    

link与@import的区别

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

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

  • 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.jirengu.com/kejian1/8-1.png
    网络路径,代表图片8-1.png在网站上的位置

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

使用<img>标签,将图片地址放在src属性中,可以是本地图片也可以是网络图片


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

  1. 语法全部使用小写;
  2. id和class属性名使用有意义的单词,分隔符用-
  3. 条件允许的情况下尽量使用缩写;
  4. 块内容缩进使代码更清晰可读;
  5. 尽量不使用内联样式;
  6. 属性值为0时省略单位;
  7. 属性名冒号后加一个空格。

认识chrome 开发者工具的功能区

Elements & Styles


Elements&Styles.png

Console


Console.png

Sources


Sources.png

Network


Network.png

相关文章

网友评论

    本文标题:CSS基础

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