美文网首页
4. CSS基础知识

4. CSS基础知识

作者: 石林涛 | 来源:发表于2017-04-10 11:55 被阅读0次

    CSS的全称是什么?

    Cascading Style Sheets, 层叠样式表。

    CSS的引入方式

    • 有三种引入方式:
    1. 内联样式
      <h1 style="color: red; font-size: 20px;"></h1>
    2. 内部样式
    <style type="text/css">
    h1 {
     color: red;
     font-size: 20px;
    }
    </style>
    
    1. 外部样式
    <head>
    <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    
    <style>
    @import url("hello.css");
    @import "world.css";
    </style>
    
    • link 和@import的区别:
    1. link是HTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。
    2. 加载顺序差别。link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
    3. link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
    4. ink支持使用Javascript控制DOM去改变样式;而@import不支持。

    相对路径和绝对路径

    路径 分类 描述
    css/a.css 相对路径 当前目录下 css 文件夹中的 a.css 文件
    ./css/a.css 相对路径 当前目录下 css 文件夹中的 a.css 文件
    b.css 相对路径 当前文件夹下的 b.css 文件
    ../imgs/a.png 相对路径 上级目录中的imgs文件夹里面的图片
    /Users/hunger/project/css/a.css 绝对路径 本地路径中的a.css文件
    /static/css/a.css 网络相对路径 当前服务器根目录下的a.css文件
    http://cdn.jirengu.com/kejian1/8-1.png 网络绝对路径 网络上的图片地址

    怎么在网站上展示图片?

    • 上传到服务器内部并用相对路径读取。
    • 直接用其他网站上的图片链接或上传到图床使用图床的绝对链接。
      语法:
      <img src = "myimage.gif" alt = "My Image" title = "My Image" >
      讲解:
    1. src:标识图像的位置;

    2. alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;

    3. title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);

    4. 图像可以是GIF,PNG,JPEG格式的图像文件。

    html和 css 的书写规范

    1. 语法不区分大小写,但建议统一使用小写;
    2. 不使用内联的style属性定义样式;
    3. id和class使用有意义的单词,分隔符建议使用“-”;
    4. 有可能用就用缩写;
    5. 属性值是0的省略单位;
    6. 块内容缩进;
    7. 属性名冒号后面添加一个空格;
      更多规范请参考:https://github.com/fex-team/styleguide/blob/master/css.md

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

    相关文章

      网友评论

          本文标题:4. CSS基础知识

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