css样式

CSS(Cascading Style Sheets) 是用来为网页添加样式的代码。

样式的三种引用方式

• 内联样式
  不推荐，但在某些情况下很有用。
  <p style="background: orange; font-size: 24px;">CSS 很 👍<p>
• 内部样式
  将 CSS 放在页面的 <style>元素中。
• 外链样式
  <link rel="stylesheet" href="index.css">

CSS 选择器

(1)元素选择器

 p {
    color: red;
  }
 div {
    color: blue;
  }

(2)ID 选择器

<p id="notification">通知：明天放假</p>

#notification {
    font-size: 24px;
}

(3)类选择器

一个 CSS 类可以应用到多个不同的元素，一个元素也可以应用多个不同的 CSS 类

<ul>
     <li class="first done">起床</li>
     <li class="second done">刷牙</li>
     <li class="third">洗脸</li>
</ul>
.first {
    font-weight: bold;
}
.done {
    text-decoration: none;
}

(4)通用选择器
* { margin:0; padding:0; box-sizing:border-box; }

(5)伪类

a:link { ... }  --------未访问的链接
a:visited { ... }  -----------已经访问过得链接
a:hover { ... } ----------鼠标移动到链接上
a:active { ... } ---------选定的链接

(6)伪元素

• ::after

  .clearfix::after {
      content: '';
      clear: both;
      display: block;
  }
  

• ::before

  .happy::before {
      content: '😁';
  }
  

(7)组合选择器
A, B
A, B 选中匹配 A 或/和 B 的元素

.author, .famous {
    font-weight: bold;
}

<h1>登鹳雀楼</h1>
<p class="author">王之涣<p>
<p class="normal">百日依山尽，黄河入海流。</p>
<p class="famous">欲穷千里目，更上一层楼。</p>

A B
A B 选中匹配 B 且为匹配 A 的元素的后代元素。

.article a {
  color: #384ebf;
}
<div class="article">
  <a href="#">文字</a>
</div>

A > B
A > B 选中匹配 B 且为匹配 A 的元素的直接子元素。

.warriors > li {
    background-image: url(../images/warrior.png);
}

<ul class="warriors">
    <li>
          斯蒂芬·库里
          <ul>
              <li>微博：<a     href="http://weibo.com/u/3432945104">@StephenCurry</a></li>
              <li>Twitter: <a href="https://twitter.com/stephencurry30">@StephenCurry30</a></li>
          </ul>
    </li>
    <li>凯文·杜兰特</li>
    <li>克莱·汤普森</li>
    <li>德雷蒙德·格林</li>
</ul>

A + B
A + B 选中匹配 B 且为匹配 A 的元素的下一相邻元素。

.cavs .lbj + li {
      text-shadow: 1px 1px 5px #ccc;
  }
 <ul class="cavs">
    <li class="lbj">勒布朗·詹姆斯</li>
    <li>凯里·欧文</li><!-- ✅ -->
    <li>凯文·乐福</li>
  </ul>