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

基础篇

CSS基本格式：

selector{

    property1：value1；

    property2：value2；

}

举例：

h1{
    color：white；
}

在页面中使用CSS的三种方式：

<!--外链-->
<link rel="stylesheet" href="/assets/style.css">

<!--嵌入-->
<style>
    p{
    margin: lem 0;
    }
    </style>

<!--内联-->
<p style="margin: lem 0">Example content</p>

多种方式选择选择器：

按照标签名或id或类名
按照属性名
按照DOM树位置

通配选择器（*）
*{
    color:red;
    font-size:20px;
}
标签选择器（标签名）
p{
    margin: lem 0;
}
id选择器（#+id属性值）
#logo{
    color:red;
}
类名选择器（.+class属性值）
.done{
    color：gray;
}
属性选择器（[属性名]）
eg1.
[disabled]{
    color:#999;
}
eg2.
input[type="password"]{
    color:white;
}
eg3.“^=”表示以···开头；“$=”表示以···结尾;
   以此来匹配符合条件的标签。
a[href^="#"]{
....
}
a[href$=".jpg"]{
....
}

伪类定位元素：即根据标签状态来选择元素样式。

graph TD
伪类 --> 结构性伪类
伪类 --> 状态性伪类

状态性伪类：元素处于某种特定状态才会被选中。

标签名：状态{
}
a:hover{
...
}

结构性伪类：按照DOM树位置

<ol>
<li>hhh</li>
<li>ddd</li>
<li>rrr</li>
</ol>

标签名：位置{
}
li:first-child{
...
}
li:last-child{
...
}

更加复杂灵活的组合如下：

常用属性

颜色color

rgb(123,123,123);（红0 ~ 255，绿0 ~ 255，蓝0 ~ 255）
hsl(111,22,33);（色相0 ~ 360，饱和度0 ~ 100%，亮度0 ~ 100%）
rgba(,,,0.5),,,透明度（0~1）
hsla(,,,0.1)
eg.
h1{
    color:rgb(123,123,123)
}

字体font-family

fony-family:字体1,字体2,字体3,···，通用字体族；
h1{
font-family:"Times New Roman",Georgia,Serif;
}

使用web font：
@font-face{
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}