CSS|青训营笔记

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

一、CSS简介

CSS，即“Cascading Style Sheet（层叠样式表）”，是用来控制网页的外观的一门技术。在开发中我们通常通过对CSS的编写来美化我们的页面以达到用户的需求。

二、学习成果

1、选择器

(1)属性选择器：

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

//指定某标签特定属性值
<input type="psw></input>
input[type="psw"]{
    border:5px soild black;
}

//对标签某属性进行判断
//^=:以xxx开头   $=:以xxx结尾
<a href = "#123">
a[href^="#"]{
    color:#aaa;
}
<a href = "1234.jpg">
a[href$=".jpg"]{
    color:#bbb;
}

(2)组合：

二、颜色

(1) RGB:三原色(r,g,b)

(2) HSL:hsl(h,s%,l%)

Hue:色相 =>色彩的基本属性
Saturation:饱和度 =>色彩的鲜艳程度，值越高越鲜艳反之越暗沉
Lightness:亮度 => 颜色的明亮程度，值越高颜色越亮

(3) alpha:透明度 =>rgba/hsla

三、字体

(1)行高：line-height => 表示两行文字基准线之间的距离

(2)空白:white-space

normal:默认，合并多个空格与换行
nowrap:不换行
pre:保留html文件中所有的文字与空格以及换行
pre-wrap:保留空格，换行
pre-line:保留换行

四、样式的优先级

总结

今天主要学习的内容是前端三件套中的CSS，在学习的过程中我发现了很多过往没有注意的点都被提及了，好好的复习了一遍，这也巩固了我接下来即将要做的大项目--组件库的一个比较重要的地基，因为一个好的样式真的可以让使用者用户感觉赏心悦目

CSS ｜ 青训营笔记