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

CSS是什么？

CSS全名Cascading Style Sheets 用来定义页面元素的样式

用来设置字体和颜色
设置位置和大小
添加动画效果

CSS的一个基础例子:

给所有h1标签内容设置为白色，字体大小为14像素

h1{
    color: white;
    font-size: 14px;
}
复制代码

使用css的三个方式

1.外链：

使用link标签链接外部写好的css样式的文件

<link rel="当前文档与被链接文档的关系" href="外部的css文件地址">
复制代码

2.嵌入：

在html页面中嵌入css代码块：

<style type="text/css">
    h1{
        color: white;
        font-size: 14px;
    }
</style>
复制代码

3.内联：

在需要使用css的标签中使用style属性：

<p style="css内容">段落内容</p>
复制代码

一般推荐使用第一种，方便且耦合度低，方便维护,方便组件式开发

css的具体部分：

选择器selector：

找出页面中的元素
使用多种方式选择元素：
1. 按照标签名，类名，id
2. 按照属性
3. 按照DOM树中的位置

常见且基础的例子：

<style type="text/css">
    /*给id为a的标签添加css*/
    #a{
        color: white;
        font-size: 14px;
    }
    /*给类名为b的标签添加css*/
    .b{
        color: white;
        font-size: 14px;
    }
    /*给q标签添加css*/
    q{
        color: white;
        font-size: 14px;
    }
    /*给含有disabled属性的标签添加css*/
    [disabled]{
        color: white;
        font-size: 14px;
    }
</style>
<p id="a">段落内容</p>
<p class="b">段落内容</p>
<q></q>
<input disabled>
复制代码

颜色：

最常用的是RGB：

通过输入不同的Red-Green-Blue值来得到不同颜色，RGB(Red值，Green值，Blue值)来调节

使用HSL：

通过对Hue（色相，值0-360），Saturation（饱和度，0%到100%），lightness（亮度，0%到100%）来调节

两种方法都可以添加一个alpha值，来表示颜色的透明度如rgb（255，0，0，1）表示完全不透明红色

字体：

使用font-family来设置字体

p{
    font-family:Optima,Georgia,Serif;
}
复制代码

给p标签设置字体，如果浏览器支持Optima字体则使用，如不支持则选择下一个，serif是通用字体组，存在5种通用字体组，最好加上通用字体组

「理解CSS」第四届字节跳动青训营｜青训营笔记