zoukankan      html  css  js  c++  java
  • css引用方法介绍

    Css

     

    Css称为层叠样式表,

    作用:

    用来控制网页数据的表现,可以使网页的表现与数据内容分离

     

    Css四种引入方式:

    1、行内式 在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用(原因:太死板)
    放在
    <body>里面, <p style="background-color: rebeccapurple">hello world</p> //这是设置背景颜色
    2、嵌入式 如:将CSS样式集中写在网页的
    <head></head>标签对的<style></style>标签中 (不推荐使用,原因:因为这样只能控制当前的HTML中这一个标签的样式)
    <head>     <meta charset="UTF-8">     <title>Title</title>     <style>         标签名div{             属性名background-color: 颜色值#2b99ff; //格式要记住(不推荐使用)         }     </style> </head> 3、链接式--推荐!!! 划重点:将一个.css文件引入HTML文件中-------推荐使用!!! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--<style>--> <!--div{--> <!--color: red;--> <!--background: green;--> <!--}--> <!--</style>--> <link type="text/css" rel="stylesheet" href="css.css"> //rel表示指明这是使用css,href表示引用的css文件链接路径 </head> <body> <div>helloworld</div> </body> </html> 注意:上面的href 是指的引入的css.css这个文件; css.css文件,内容: div{ color: red; background: green; }
    总结:
    这样的方式就相当于将css文件样式变成了一个变量,要使用时就引入使用。 然后HTML 文件的
    <body>里面的标签,就会自己去找css.css这个文件里面对应设置好的标签的css样式并使用。
    (并且:使用这种链接的方式,在网页展示之前就将css文件加载好,最后和网页一起直接展示出来。)



    4、导入式 将一个独立的.css文件引入HTML文件中,导入式使用CSS规则引入外部CSS文件
    --->>不推荐使用;
    原因:这种@import是css语法,而上面的link这种引入变量的形式用链接的形式引入,是符合HTML语法的,更加契合。
    否则使用@import导入会导致页面大量css文件存在时,页面会全部展示不可预览状。等待加载完全后再展示出来。体验很不好
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> @import "css.css"; //注意,这是一个css语法,导入一个外部的css文件。 </style> </head> <body> <div>helloworld</div> </body> </html>

     

  • 相关阅读:
    pgspider sqlite mysql docker 镜像
    pgspider docker 镜像
    pgspider基于pg 的高性能数据可视化sql 集群引擎
    diesel rust orm 框架试用
    golang 条件编译
    Performance Profiling Zeebe
    bazel 学习一 简单java 项目运行
    一个好用node http keeplive agnet
    gox 简单灵活的golang 跨平台编译工具
    mailhog 作为smtp server mock工具
  • 原文地址:https://www.cnblogs.com/QiKa/p/14264672.html
Copyright © 2011-2022 走看看