CSS相关知识

作者: leocz | 来源:发表于2017-05-16 17:40 被阅读0次

    CSS是什么

    css 全称Cascading Style Sheets, 层叠样式表,用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)

    CSS的引入方式,link与@import的区别

    引入方式:

    • 内联方式
      <p style="color:red,font-size:16px,">我是一个段落</p>
    • 内部样式
    <style>
      p{
      color: red;
     font-size: 16px;
    }
    </style>
    
    • 外部样式
    通过link方式
    <head>
      <link rel="stylesheet" type="text/css" href="css/index.css">
    </head>
    通过@import方式
    <head>
      @import url(index.css)  /*路径引号可有可无,也可以写成  @import "index.css" */
    </head>
    
    • link与@import的区别如下
      • link 是 XHTML 标签,除了加载 CSS 外,还可以定义RSS等其他事务;@import 是 CSS 的一个语法,只能加载 CSS 。
      • link 引用 CSS 时,在页面载入时同时加载;@import 需要页面网页完全载入以后加载。
      • link是 XHTML 标签,无兼容问题;@import 是在 CSS2.1 提出的,低版本的浏览器不支持,只有IE5以上才能识别。
      • link 支持使用 Javascript 控制 DOM 去改变样式;而 @import 不支持。

    为体现内容,样式,行为分离原则,目前的大多数网页的css是通过link来引入。

    常见文件路径写法

    相对路径

    • css/a.css 当前目录css文件夹里面的 a.css 文件
    • ./css/a.css 同上,上面的写法不过是将./省略而已
    • b.css 当前目录下的 b.css 文件
    • ../imgs/a.png 当前目录的上一级目录里面 imgs 文件夹里面的 a.png 文件

    绝对路径
    /user/hunger/project/css/a.css 本地电脑 user/hunger/project/css文件夹下的a.css文件

    网站路径
    /static/css/a.css 网站相对路径 网站根目录下static文件夹下的css文件夹下的 a.css 文件
    http://cdn.jirengu.com/kejian1/8-1.png 网上的一张图片,通过网站路径引入一张图片

    在 js.jirengu.com 上展示一张图片

    首先将图片上传到饥人谷的服务器,然后在页面上将img的scr属性设置成刚刚上传图片的路径即可。

    html和css的书写规范

    html书写规范

    1. html中不要混入样式代码
    2. id和class的命名要有意义
    3. html不区分大小写,但统一小写
    4. 做好缩进,使代码便于阅读
    5. link 中type属性可省略,默认值就是我们需要的值

    css书写规范

    1. 属性值时0的可以省略单位,属性值是 0.2 等可以省略0 写成 .2
    2. 一些可缩写的属性就缩写,既精简代码又便于阅读
    3. 在需要写多个样式的时候,影响元素位置的属性写在前面,颜色等外观写在后面
    4. 简写形式的十六进制值,例如,用 #fff 代替 #ffffff
    5. 所有声明语句都应当以分号结尾

    相关文章

      网友评论

        本文标题:CSS相关知识

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