阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      HTML中怎么使用CSS

      css中的行内、嵌入式、外链式

      具体原理请参考 HTML中怎么使用JS

      下面就是css的各种写法;

      他的优缺点和js一样;如果简单的样式,可能感觉差不多,但是如果在项目里,重复利用等各方面考虑,还是外链式是最佳选择;

      上面这种可以看出最明显的区别;

      行内写

      每一个标签都需要重复写N多代码,这当然是不明智的;

      嵌入式

      相比行内,容易维护,但是不能缓存

      外链式

      相比嵌入式,不仅容易维护,而且还可以缓存;

      推荐使用 外链式 进行编写

      演示代码1

      <!DOCTYPE html>
      <html lang="zh-CN">
      <head>
          <meta charset="UTF-8">
          <title>Title</title>
          <!--嵌入式的写法-->
          <style>
              #demo-ul{
                  color: aqua;
              }
              .item-2{
                  color: orange;
              }
              .item-9999{
                  color: orange;
              }
      
      
              .ol-item{
                  color: coral;
                  border-bottom: 1px solid darkgreen;
              }
              .light-hight{
                  color: orange;
              }
              /* id 分 100*/
              #test-demo{  color: rebeccapurple;  }
              /* class 分10  标签是1分*/
              body .test-demo{  color: orange;  }
      
          </style>
          <!--外链的写法-->
          <!--<style src="./wui/color.css?t=201708261529"></style>-->
          <link rel="stylesheet" href="./wui/color.css?t=201708261529">
      
      </head>
      <body>
      <!--行内的CSS写法:css直接写在标签上-->
      <!--style="color: red"-->
      <div style="color: red" class="test-demo" id="test-demo">this is  div <span>span</span></div>
      <div >2</div>
      <div style="color: red">3</div>
      <div style="color: red">4</div>
      <div style="color: red">5</div>
      <div style="color: red">5</div>
      
      <!--嵌入式的写法-->
      <!--比起行内写法,方便维护;减少代码量-->
      <h1 class="light-hight">这是高亮的</h1>
      <ul id="demo-ul">
          <li>001</li>
          <li class="item-2">002</li>
          <li>003</li>
          <li>004</li>
          <li>004</li>
          <li>004</li>
          <li>004</li>
          <li>004</li>
          <li>004</li>
          <li>004</li>
          <li>004</li>
          <li>004</li>
      </ul>
      <ol>
          <li class="ol-item">111</li>
          <li class="ol-item">222</li>
          <li class="ol-item">333</li>
          <li class="ol-item">444</li>
      </ol>
      <p class="warning">你确定提交修改的信息吗?</p>
      </body>
      </html>
      

      演示代码2

      <!DOCTYPE html>
      <html lang="zh-CN">
      <head>
          <meta charset="UTF-8">
          <title>Title</title>
          <style>
              .light-hight{
                  color: orange;
              }
          </style>
          <!--??-->
          <link rel="stylesheet" href="./wui/color.css">
      </head>
      <body>
      <p class="light-hight">这是高亮的</p>
      <p class="warning">这是警告信息</p>
      </body>
      </html>
      
      目录
      目录