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

1.CSS是什么？

CSS全称为Cascading Style Sheets，中文翻译为“层叠样式表”，简称CSS样式表，是一种用来表现HTML或XML等文件式样的计算机语言，是一种标准的样式表语言，用于描述网页的表示，即布局和格式。

h1{ color:white; font-size:14px; } 在上面代码中，h1为选择器（selector），color为选择器（property），white为属性值（value），font-size:14px;为声明（declaration）

2.CSS使用方式

内联式/行内式
嵌入式
外链式（推荐）

举例如下：

内联式/行内式

<h1 style="color: maroon; margin-left: 40px">这是一个标题</h1>
<p style="color: blue;">这是一个段落</p>

效果如下：

这是一个标题

这是一个段落

嵌入式

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
h1 {
    color: maroon;
    margin-left: 40px;
}
</style>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落</p>
</body>
</html>

效果如下：

h1 { color: maroon; margin-left: 40px; }
这是一个标题

这是一个段落

外链式（推荐）

<title></title>
    //在head中导入链接
<link rel="stylesheet" href="./style.css">
</head>

//在css文件中写入样式
h1 {
    color: maroon;
    margin-left: 40px;
}

效果同上

3.CSS是如何工作的？

4.选择器

在 CSS 中，选择器是选取需设置样式的元素的模式。
使用多种方式选择元素
- 类型选择器例：h1{}
- 通配选择器例：*{}
- 类选择器例：.box{}
  
  使用时需<p class="box">这是一个段落</p>
- Id选择器需要唯一例：#box{}
  
  使用时需<p id="box">这是一个段落</p>
- 属性选择器通过已经存在的属性名或属性值匹配元素例：a[title]{color: purple;}
  选取存在 title 属性的<a> 元素并将字体颜色变为紫色

[attr]表示带有以 attr 命名的属性的元素。

[attr=value] 表示带有以 attr 命名的属性，且属性值为 value 的元素。

[attr~=value] 表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。

[attr|=value] 表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（"-"为连字符，Unicode 编码为 U+002D）开头。典型的应用场景是用来匹配语言简写代码（如 zh-CN，zh-TW 可以用 zh 作为 value）。

[attr^=value] 表示带有以 attr 命名的属性，且属性值是以 value 开头的元素。

[attr$=value] 表示带有以 attr 命名的属性，且属性值是以 value 结尾的元素。

[attr*=value] 表示带有以 attr 命名的属性，且属性值至少包含一个 value 值的元素。

伪类选择器是添加到选择器的关键字，指定要选择的元素的特殊状态例：p:first-child{}

E:link 设置超链接a在未被访问前的样式。

E:visited 设置超链接a在其链接地址已被访问过时的样式。

E:hover 设置元素在其鼠标悬停时的样式

E:active 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式

E:focus 设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式。

E:lang(fr) 匹配使用特殊语言的E元素

还有

E:not(s) E:root E:first-child E:last-child E:only-child E:nth-child(n) E:nth-last-child(n) E:first-of-type E:last-of-type E:only-of-type E:nth-of-type(n) E:nth-last-of-type(n) E:empty E:checked E:enabled E:disabled E:target @page:first @page:left @page:right

感兴趣的可以去css.doyoe.com/selectors/i… 自行查阅

伪元对象选择器例：p::first-line{}

E:first-letter/E::first-letter 设置对象内的第一个字符的样式。

E:first-line/E::first-line 设置对象内的第一行的样式。

E:before/E::before 设置在对象前（依据对象树的逻辑结构）发生的内容。用来和[content]属性一起使用，并且必须定义content属性 E:after/E::after 设置在对象后（依据对象树的逻辑结构）发生的内容。用来和[content]属性一起使用，并且必须定义content属性

E::placeholder 设置对象文字占位符的样式。

E::selection 设置对象被选择时的样式。

后代选择器例：h1 p{}
子代选择器例：h1 > p{}
相邻兄弟选择器例：h1 + p{}
通用兄弟选择器例：h1 ~ p{}

理解CSS| 青训营笔记

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