这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
前端技术栈——CSS是什么
-
用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
CSS包括选择器selector，选择器property，属性值，和声明
h1{//选择器selector
color:white;
//color是选择器property，white是属性
font-size:14px;
//声明
}
在页面使用CSS
外链式
嵌入式
内联式（不推荐）
CSS如何工作
选择器
-
找出页面中的元素，以便给他们设置样式
-
使用多种方式选择元素
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置
通配选择器： *
id选择器，class等
属性选择器：【属性】或者input[type=""{}]
^= [ ]表示选中以什么开头的属性值
$= [ ]表示选中以什么结尾的属性值
-
伪类选择器
-
不基于标签和属性定位元素
-
几种伪类
- 结构性伪类
- 状态伪类
-
结构性伪类
例子：
first-child，last-child等。
rgb颜色-（hsl）
rgb（ ，，）
或者hsl：
Hue：色相，取值范围0~360
Saturation：饱和度，取值范围0~100%
Lightness：亮度，取值范围0~100%
透明度alpha：为1是不透明的。
字体font-family
通用字体：
-
Serif 衬线体
- Georgia、宋体
-
Sans-Serif 无衬线体
- Arial、Helvetica、黑体、微软雅黑
-
Cursive 手写体
- Caflisch Script、楷体
-
Fantasy
- Comic Sans MS, Papyrus, Zapfino
-
Monospace 等宽字体
- Consolas、Courier、中文字体
font-family使用建议
- 字体列表最后写上通用字体族
- 英文字体放在文字体前面
font-size
-
关键字
- small，medium，large
-
长度
- px、em
-
百分数
- 像对于父元素字体大小
line-height——行间距
深入CSS（上）
选择器的特异度
越特殊越优先。
优先内联式，其次便是id选择器，（伪）类选择器，标签选择器。
继承
某些属性会自动继承其父元素的计算值，除非显式指定一个值。
显示继承
inherit，元素继承父级内容。使得不可继承的元素变得可继承。
初始值
-
CSS中，每个属性都有一个初始值
- background-color的初始值为transparent
- margin-left的初始值为0
-
可以使用刮泥机案子显式重置为初始值
- background-color：initial
