首页 > 博客列表 > css样式

博主信息

博文 18

粉丝 0

访问量 15468

专题推荐

更多>

CSS样式的作用

html标签只是网页中的内容，但这些标签实现出来的效果往往比较难看，CSS就是美化标签的。就像word中打字后调整字体大小，颜色等。

CSS的三种用法

行内
<h1 style="color:green">php.cn</h1>

页面内

 <style>
     h1{
         color:red;
     }
 </style>

单独放在一个文件中,注意link标签

   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
     <link rel="stylesheet" href="css/style1.css" />
   </head>

CSS的选择器

就是怎样选择标签元素

属性选择器

  <h2 title="hello!">item1</h2>
  <style>
      h2[title] {
          color: blue;
        }
  </style>

如果是类和id属性，可以分别用.和#简写

<h2 class="abc">hello css!</h2>
<h2 id="abcd">hello css!</h2>
<style>
  h2.abc {
  color: cyan;
  }
  h2#abcd {
  color: red;
  }
</style>

群组选择器，用逗号分开

h2.abc, h2#abcd {
      background-color: yellow;
    }

提权用！important

  <div>
    <p>abc</p>
  </div>
  <p>
    <span>abcd</span>
  </p>
  <style>
    div p {
      color: blue;
    }
    p {
      color: red !important;
    }
  </style>

后代元素，子元素，兄弟元素

  <ul class="list">
    <li class="item">item1</li>
    <li class="item second">item2</li>
    <li class="item">
      item3
      <ul class="inner">
        <li>item3-1</li>
        <li>item3-2</li>
        <li>item3-3</li>
        <p>123</p>
      </ul>
    </li>
    <li class="item">item4</li>
    <li class="item">item5</li>
    <li class="item">item6</li>
    <li class="item">item7</li>
    <li class="item">item8</li>
  </ul>
      <style>
    /* 后代元素用空格 */
    .list li {
      border: 1px solid red;
    }
    /* 子元素用> */
    .list > li {
      border: 1px solid blue;
    }
    /* 相邻兄弟用加号 下面例子找到的是第3个li标签[item3那个] */
    .item.second + li {
      color: red;
      background-color: blue;
    }
  </style>

后面的所有元素~,下面的例子中演示：要满足标签是p

<ul class="list">
    <li class="item">item1</li>
    <li class="item second">item2</li>
    <li class="item">
      item3
      <ul class="inner">
        <li>item3-1</li>
        <li>item3-2</li>
        <li>item3-3</li>
        <p>123</p>
      </ul>
    </li>
    <li class="item">item4</li>
    <li class="item">item5</li>
    <li class="item">item6</li>
    <li class="item">item7</li>
    <li class="item">item8</li>
    <p>asdf</p>
  </ul>
  <style>
        .item.second ~ p {
      color: red;
      background-color: lightcyan;
    }
  </style>

把p换成li选的就是里标签。

选择器优先级的权重重点

为什么显示的颜色是绿色？因为body h1的权重是（0 0 2），比（0 0 1）大

    <h1>Hello</h1>
    <style>
      body h1 {
        color: green;
      }
      h1 {
        color: darkorange;
      }
    </style>

权重的三个数字表示：id数量 class数量标签数量。组成的值越大越优先。
不推荐用id，因为权重太高。建议用class，class可以任意命名
bootstrap，element ui都是很好的框架，如果想改其中的特征，就通过自定义class 使优先级增高，从而完成想要自定义的功能

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

table标签用法

2021-12-23 16:56:17