理解CSS | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第2天

1、CSS是什么

CSS即Cascading Style Sheets

用来定义页面元素的样式

• 设置字体和颜色
• 设置位置和大小
• 添加动画效果

下面是一个基础代码：

 h1 {
     color : white;
     font-size: 14px;
 }

2、在页面中使用CSS

有三种方法

1. 外链

   把CSS的定义放在单独的文件里，用link标签引入页面里面，推荐使用

2. 嵌入

   直接把样式的代码嵌到style标签里

3. 内联

   所有标签都有属性，把样式直接写进标签的属性

3、CSS 是如何工作的

我们打开页面之后，浏览器加载HTML然后解析HTML，创建DOM树，把CSS加载解析，把每一个节点的位置样式属性解析出来然后渲染，附加到DOM树，再展示页面。

4、选择器Selector

选择器找出页面中的元素，以便给他们设置样式

使用多种方式选择元素

• 按照标签名、类名或id
• 按照属性
• 按照DOM树中的位置

常见选择器

通配选择器

 * {
    color : red;
 }

*表示匹配所有，选择所有元素

标签选择器

 h1 {
    color : orange;
 }

用标签设置样式

id选择器

 <h1 id="logo">
   <img src="" />
 </h1>
 <style>
  #logo {
     font-size: 60px;
     font-weight :200;
  }
 </style>

设置id的值，通过#声明设置样式，id需要在页面中是唯一的

类选择器

 <h2>Todo List</h2>
  <ul>
     <li class="done">Learn HTML</li>
     <li class="done">Learn CSS</li>
     <li>Learn JavaScript</li>
  </ul>
  <style>
     .done {
         color: gray;
         text-decoration: line-through;
     }
  </style>

对同一类型的标签可以通过class设置样式

属性选择器

  <label>用户名： </label>
  <input value="xx" disabled />
  <!--disabled表示禁用-->
  <style>
     [disabled] {
         background: #eee;
         color: #999;
     }
  </style>

通过元素的属性值选中元素

伪类（pseudo-classes）

不基于标签和属性定位元素

几种伪类

• 状态伪类

  具体的元素处于某种状态下才会被选中，表现为和用户交互时候状态不同

   <a href="https://example.com">
       example.com
      </a>
      <!--链接有很多状态-->
      <label>
         用户名:
         <input type ="text">
      </label>
      <style>
         /*链接默认状态下*/
         a:link {
            color: black;
         }
         /*链接已访问过*/
         a:visited {
            color: grey;
         }
         /*鼠标移到链接上变色*/
         a:hover {
            color: orange;
         }
         /*鼠标按下去链接变色*/
         a:active {
            color: red;
         }
      </style>
  

• 结构性伪类

  根据DOM节点在DOM树出现的位置来决定是否选择这个样式

   <ol>
      <li>aa</li>
      <li>bb</li>
      <li>cc</li>
      <li>dd</li>
   </ol>
   ​
   <style>
      li {
         list-style-position: inside;
         border-bottom: 1px solid;
         padding: 0.5em
      }
      li:first-child {
         color: coral;
      }
      li :last-child {
         border-bottom: none;
      }
   </style>
  

组合（Combinators）

名称	语法	说明	示例
直接组合	AB	满足A同时满足B	input:focus
后代组合	A B	选中B，如果它是A的子孙	nav a
亲子组合	A>B	选中B，如果它是A的子元素	section > p
兄弟选择器	A~B	选中B，如果它在A后且和A同级	h2 ~ p
相邻选择器	A+B	选中B，如果它紧跟在A后面	h2 + p

选择器组

当我们想给多个选择器设置样式，可以用逗号隔开

 body,h1,h2,h3,h4,h5,h6,ul,ol,li{
    margin: 0;
    padding : 0;
 }

5、总结

在上节课中，学到了css在前端开发中的地位和作用，css是用来定义页面元素样式的，它可以让我们的页面更加美丽，通过设置样式和调整元素，让页面好看又好用，也可以给用户带来良好的使用体验。