青训营第三天| 豆包MarsCode AI刷题

css

css用来定义页面元素的样式

第一，定义字体和颜色

第二，设置位置和大小

第三，添加动画效果

基本组成

css在浏览器上如何工作的？

选择器的分类

以下是一些常用的 CSS 选择器，它们帮助你高效地选择和样式化 HTML 元素：

1. 基本选择器

• 元素选择器：选择所有特定类型的元素。

  p {
      color: blue;
  }
  

• 类选择器：选择所有具有指定类的元素。

  .classname {
      font-size: 16px;
  }
  

• ID 选择器：选择具有特定 ID 的元素。

  #idname {
      background-color: yellow;
  }
  

2. 组合选择器

• 后代选择器：选择指定元素内的所有后代元素。

  div p {
      margin: 10px;
  }
  

• 子元素选择器：选择直接子元素。

  ul > li {
      list-style-type: none;
  }
  

• 相邻兄弟选择器：选择紧接在某个元素后面的兄弟元素。

  h1 + p {
      font-weight: bold;
  }
  

• 通用兄弟选择器：选择同一父元素下的所有兄弟元素。

  h1 ~ p {
      color: gray;
  }
  

3. 属性选择器

• 根据元素的属性选择元素。

  input[type="text"] {
      border: 1px solid black;
  }
  

4. 伪类选择器

• 选择特定状态的元素。

  a:hover {
      text-decoration: underline;
  }
  

• 选择第一个子元素。

  li:first-child {
      font-weight: bold;
  }
  

5. 伪元素选择器

• 选择元素的特定部分。

  p::first-line {
      font-size: 1.2em;
  }
  

颜色

RGB 颜色
使用 rgb() 函数定义颜色，接受红、绿、蓝三种颜色的数值（0-255）：
h1 {
    color: rgb(255, 0, 0); /* 红色 */
}

HSL 颜色
使用 hsl() 函数定义颜色，通过色相（0-360度）、饱和度（0%-100%）、亮度（0%-100%）来表示：

h1 {
    color: hsl(0, 100%, 50%); /* 红色 */
}

字体

font-family:

指定多个字体
在选择字体时，你可以提供多个字体，浏览器会按顺序查找可用的字体：

css
Copy Code
p {
    font-family: "Times New Roman", Times, serif; /* 优先使用 Times New Roman */
}

通用字体族

web-font

font-size