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

CSS学习

CSS是什么

CSS全称为Cascading Style Sheets，是那个了设置页面元素样式的，比如设置字体和颜色、设置位置和大小、添加动画效果等等。

CSS的基本代码样式

h1 {
    color: white;
    font-size:14px;
}

其中，h1是选择器Selector，选择该元素h1设置元素样式，比如有颜色属性color、大小属性font-size等等。

在页面中使用CSS

可以通过外链的方式去使用CSS，比如<link rel="stylesheet" href="文件地址"
可以采用嵌入式，在html里面现写CSS，用标签style隔开
可以才用内联式，就是在便签里面设置style，比如<h1 sytle="color: while">xx</h1> 推荐采用第一种方式，因为可以做到内容和样式的分离，这样在合作上可以做到功能式的分工。

选择器Selector

选择器Selector的功能是选择页面中的元素，给它们设置样式。而有很多方式来选择元素，比如：1、按照标签名、类目或者ID；按照属性以及按照DOM树中的位置。

通配选择器

存在一种特殊的选择器——通配选择器，使用方式是在选择器上用*来表示，那么就是全局设置。

ID选择器

就在标签内设置id="xxx"，那么选择器的使用为#xxx。

类选择器

当该元素块的内容都需要进行设置，那么在标签内设置类class="xxx"，那么选择器使用的时候为.xxx。

属性选择器

<input value="xxx" disabled />

<style>
    [disable]{
        background: #eee;
        color: #999;
    }
</style>

如上所示，这个是属性选择器的使用，需要在选择器上加上[]。如果想选择特定的属性，那么要以下写法：

<input value="xxx" disabled />

<style>
    input[value="xxx"]{
        background: #eee;
        color: #999;
    }
</style>

其实也是有属性值匹配的方式的，比如开头是#，写法就是a[href^="#"]；假如以.xxx结尾的话，写法就是a[href$=".xxx"]。

伪类选择器

伪类选择器就是不基于标签和属性定位元素，分为状态伪类和结构性伪类等等。
状态伪类例子说明：

<a href="xxx">xxx</a>
<style>
a:link{
    color:black;
}
a:visited{
    color:gray;
}
a:hover{
    color:orange;
}
a:active{
    color:red;
}
</style>

a:link是表示链接原本的设置；
a:visited是表示链接被点击之后的设置；
a:hover是表示鼠标碰到链接时这个状态的设置； a:active是表示鼠标点击这个链接时的设置；
不同状态下的设置可以设置成不一样的，那么提高用户的体验
结构伪类例子说明：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<style>
li:first-child{
      xxxx
}
li:last-child{
      xxxx
}
</style>

这个是结构伪类，在结构上的某一个部分设置成xxxx。

组合选择器

名称	语法	说明	示例
直接组合	AB	AB情况都满足	a:visited
后代组合	A B	满足选择了B，并且满足B是A的子孙元素	nav a
亲子组合	A>B	满足选择B，并且满足B是A的子元素	A>B
兄弟选择器	A~B	满足选择B，并且满足B在A后面并且与A同级	A~B
相邻选择器	A+B	满足选择B，并且满足B紧跟A后面	A+B

选择器组

h1,h2,h3,h4{}这样形式的被成为选择器组，还可以是[],[],[]{}这个形式。

颜色

RGB是作为形成颜色的基本条件，采取十六进制的方式表示，如#8fac87，把8fac87分成8f、ac、87三个部分。都知道颜色是有红绿蓝三原色来构成的。那么这三个部分分别表示红、绿、蓝的数量。
为了方便人们使用，可以把颜色分成三个部分：色相（Hue）、饱和度（Saturation）、亮度（Lightness），简称为HSL。
色相是指颜色的基本色彩，取值范围是0~360。
饱和度是指颜色的鲜艳程度，取值范围是0~100%。
亮度是指颜是明亮程度，取值范围是0~100%。

字体

字体的设置样式属性为font-family。一般字体设置要设置多个，并且在最后的字体中设置一个通用的字体族，因为不同浏览器的字体库是不一样的，所以就要应对这个问题。
通用的字体族有:Serif、Sans-Serif、Cursive、Fantasy、Monospace。
字体大小的设置属性为font-size，赋值单位可以是px、em、%。
字体粗细的设置属性为font-weight。
字体状态的设置属性为font-style。

引用

视频教程——走进前端技术栈 - CSS

CSS学习｜青训营笔记