CSS基础2--简单应用

作者: 伊洛的小屋 | 来源:发表于2020-09-15 11:50 被阅读0次
    应用CSS

    CSS编写在扩展名为.css的单独文件中,并利用HTML 的<link>元素引用

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>CSS DEMO</title>
        <link rel="stylesheet" href="index.css">
      </head>
      <body>
        <h1>微信搜索:伊洛的小屋</h1>
        <p>凡是过去,皆为序章</p>
      </body>
    </html>
    

    标记CSS文件

    h1 {
      color: blue;
      background-color: cornflowerblue;
      border: 1px solid black;
    }
    
    p {
      color: darkviolet;
    }
    

    打开浏览器查看效果



    <link>元素的href指向css文件的地址

    内部样式表
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>CSS DEMO</title>
          <style>
              h1 {
                 color: blue;
                  background-color: cornflowerblue;
                 border: 1px solid black;
               }
    
              p {
                 color: darkviolet;
               }
          </style>
      </head>
      <body>
        <h1>微信搜索:伊洛的小屋</h1>
        <p>凡是过去,皆为序章</p>
      </body>
    </html>
    

    不使用外部CSS文件,而是将CSS放在HTML文件放在<style>标签中

    内联样式

    内联样式表存在于HTML元素的style属性之中

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>CSS DEMO</title>
      </head>
      <body>
        <h1 style="color: blue;background: cornflowerblue; border: 1px solid black">微信搜索:伊洛的小屋</h1>
        <p style="color:red;">凡是过去,皆为序章</p>
      </body>
    </html>
    
    选择器

    每个CSS规则都以一个选择器或一组选择器为开始,选择器具有专一性且稍后的样式将覆盖以前的样式

    属性和值

    CSS由两部分组成:1.属性 2.值
    与值配对的属性称为CSS声明,CSS声明放在CSS声明块中,属性和值都是区分大小写的,每对中的属性和值由冒号(:)分隔

    规则

    @rules

    注释

    CSS中的注释以/*开头,以*/结尾

    /* 公众号:伊洛的小屋
    个人主页:https://yiluotalk.com/
    博客园:https://www.cnblogs.com/yiluotalk/ */
    h1 {
      color: blue;
      background-color: cornflowerblue;
      border: 1px solid black;
    }
    
    p {
      color: darkviolet;
    }
    

    相关文章

      网友评论

        本文标题:CSS基础2--简单应用

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