美文网首页
CSS选择器基础

CSS选择器基础

作者: whuisu | 来源:发表于2019-11-28 20:56 被阅读0次

    为网页添加CSS有三种,分别是:外部样式、内部样式和内联样式。
    最推荐使用外部样式表,更加符合Web标准所主张的内容和表现相分离思想。

    1 内联样式

    <p style="color: red;">I'm learning to code!</p>
    

    2 内部样式

    <head>
      <style>
        p {
          color: red;
          font-size: 20px;
        }
      </style>
    </head>
    

    3 使用<link>自闭合标签在html中引入外部样式,link元素必须放在HTML文档的head元素里面

    <head>
      <link href="global_v1.5.1.css" rel="stylesheet" type="text/css" media="screen"/>
    </head>
    

    标签名 Tag Name 🏷️

    p {
      font-family: Arial;
    }
    
    h1 {
      color: maroon;
    }
    

    https://yangjh.oschina.io/front-end/css/thewayofuse.html

    类名 Class Name

    <p class="title">Sole Shoe Company</p>
    
    .title {
      color: teal
    }
    

    链式选择 Chaining Selectors

    h2.destination{
      font-family: cursive;
    }
    

    嵌套元素 Nested Elements

    <ul class='main-list'>
      <li> ... </li>
      <li> ... </li>
      <li> ... </li>
    </ul>
    .main-list li {
    
    }
    

    多个选择器 Multiple Selectors

    h5, p {
      font-family: Georgia;
    }
    

    相关文章

      网友评论

          本文标题:CSS选择器基础

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