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

认识CSS

CSS是级联样式表，用来控制HTML的外观

使用CSS

外链式

每张 HTML 页面必须在 head 部分的<link>元素内包含对外部样式表文件的引用

<head>
    <link rel="stylesheet" href="/assets/style.css">
</head>

嵌入式

内部样式是在 head 部分的 <style> 元素中进行定义

<head>
    <style>
        body {
          background-color: linen;
        }
    </style>
</head>

内联式

行内样式在相关元素的 "style" 属性中定义

<h1 style="color:blue;text-align:center;">This is a heading</h1>

选择器

用于“查找”（或选取）要设置样式的 HTML 元素

简单选择器

元素选择器 —— 利用元素名称选中内容，可选择所有该元素

p {
  text-align: center;
  color: red;
}

id选择器 —— 元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素
语法：# + id名

#para1 {
  text-align: center;
  color: red;
}

类选择器 —— 选择拥有特定 class 的元素
语法：. + 类名

.center {
  text-align: center;
  color: red;
}

通用选择器 —— 通用选择器（*）选择页面上的所有的 HTML 元素

* {
  text-align: center;
  color: blue;
}

组合选择器

后代选择器 (空格)
子选择器 (>)
相邻兄弟选择器 (+)
通用兄弟选择器 (~)

案例：

<body>
    <p>0</p>
    <div>
      <p>1</p>
      <p>2</p>
      <section><p>3</p></section>
    </div>
    <p>4</p>
    <code>一些代码</code>
    <p>5</p>
</body>

后代选择器

指定元素的后代所有元素
选择 <div> 元素内的所有 <p> 元素

/* 选中1、2、3 */
div p {
    background-color: yellow;
}

子选择器

指定元素子元素的所有元素
选择属于 <div> 元素子元素的所有 <p> 元素

/* 选中1、2*/
div > p {
    background-color: yellow;
}

相邻兄弟选择器

兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”
下面的例子选择紧随 <div> 元素之后的所有 <p> 元素

/* 选中4*/
div + p {
  background-color: yellow;
}

通用兄弟选择器

指定元素的同级元素的所有元素
选择属于 <div> 元素的同级元素的所有 <p> 元素：

/* 选中4、5*/
div ~ p {
  background-color: yellow;
}

部分伪类选择器

选择器	描述
:active	选择活动的链接
:hover	选择鼠标悬停上方的链接
:link	选择所有未被访问的链接
:visited	选择所有已访问的链接
:focus	选择获得焦点的元素
:first-child	选择作为其父的首个指定子元素
:last-child	选择作为其父的最后一个指定子元素

伪元素选择器

选择器	例子	例子描述
[::after]	p::after	在每个 `<p>` 元素之后插入内容。
[::before]	p::before	在每个 `<p>` 元素之前插入内容。
[::first-letter]	p::first-letter	选择每个 `<p>` 元素的首字母。
[::first-line]	p::first-line	选择每个 `<p>` 元素的首行。
[::selection]	p::selection	选择用户选择的元素部分。

属性选择器

属性选择器可以根据元素的属性及属性值来选择元素
例子1：
如果您希望把包含标题（title）的所有元素变为红色，可以写作：

*[title] {color:red;}

例子2：
假设只希望选择 moons 属性值为 1 的那些 planet 元素

<head>
    <style>
        planet[moons="1"] {color: red;}
    </style>
</head>
<body>
    <planet>Venus</planet>
    <planet moons="1">Earth</planet>
    <planet moons="2">Mars</planet>
</body>

例子3：
如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）

p[class~="important"] {color: red;}

补充：

类型	描述
[abc^="def"]	选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"]	选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"]	选择 abc 属性值中包含子串 "def" 的所有元素

理解css【1】 | 青训营笔记