美文网首页
css-基础-应用方式

css-基础-应用方式

作者: 缺月楼 | 来源:发表于2019-01-01 23:40 被阅读10次

    什么是css

    指层叠样式表 (Cascading Style Sheets),是用来为网页添加样式的代码。例如:

    p { 
    color: red;
      width: 500px;
    } 
    

    上面的代码就为HTML文档中的p元素增加了 样式 颜色为红色,高度为500px。
    选中多种元素

    p, li, h1 {
      color: red;
    }
    

    上面的代码就为HTML文档中的p元素,li元素,和标题h1增加了 样式 颜色为红色

    css应用方式

    外部样式表

    • 通过 <link> 引入 CSS。
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8" />
      <title>CSS</title>
      <link rel="stylesheet" href="index.css">
    <--注释!!注意应用的文件引用路径 href="index.css" -->
    </head>
    <body>
      <h1>Hello CSS!</h1>
    </body>
    </html>
    
    • 通过 @import 引入样式,放入 css 中
    <style>
    @import url("index.css");
    @import url('index.css');
    @import url(index.css);
    @import 'custom.css';
    @import "common.css";
    @import url('landscape.css') screen and (orientation:landscape);
    </style>
    
    

    内部样式表

    • css放在<style>元素中
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8" />
      <title>CSS</title>
      <style>
        h1 { color: red; }
      </style>
    </head>
    <body>
      <h1>Hello World!</h1>
    </body>
    </html>
    

    内联样式

    • 将css写在元素中,在某些情况下使用(不推荐)
      <p style="color: red; font-size: 24px;">你好 CSS<p>
    

    相关文章

      网友评论

          本文标题:css-基础-应用方式

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