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

CSS基本格式

CSS 是由** W3C(万维网联盟)** 中的一个名叫 CSS Working Group 团体发展起来的。

使用css修饰的类型

使用类名class 在.css文件中用.类名对具有该类名的元素进行修饰

.special {
  color: orange;
  font-weight: bold;
}

选中每个 special 类的 li 元素

li.special {
  color: orange;
  font-weight: bold; 
}

该选择器将选择<li>内部的任何<em>元素（<li>的后代）

li em {
  color: rebeccapurple;
}

CSS运算规则

+设置直接出现在标题后面并且与标题具有相同层级的段落样式

h1 + p {
  font-size: 200%;
}

补充：定位（针对） <a> （锚）标签

内部样式表

将 CSS 放在 HTML 文件<head>标签里的<style>标签之中

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

内联样式

内联样式表存在于 HTML 元素的 style 属性之中。其特点是每个 CSS 表只影响一个元素

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
    <p style="color:red;">This is my first CSS example</p>
  </body>
</html>

缺点：难以维护

函数

calc() 函数

虽然大多数值是相对简单的关键字或数值，但也有一些可能的值以函数的形式出现。一个例子是 calc() 函数。例如：

<div class="outer"><div class="box">The inner box is 90% - 30px.</div></div>

.outer {
  border: 5px solid black;
}

.box {
padding: 10px;
width: calc(90% - 30px);
background-color: rebeccapurple;
color: white;
}

一个函数由函数名和一些括号组成，其中放置了该函数的允许值。在上面的 calc() 示例中，我要求此框的宽度为包含块宽度的 90%，减去 30 像素。这不是我可以提前计算的东西，只是在 CSS 中输入值，因为我不知道 90% 会是什么。

CSS基础学习笔记| 青训营笔记