这是我参与「第五届青训营 」伴学笔记创作活动的第2天
- css层叠样式表 用来定义页面元素的样式,设置字体样式、颜色、位置、大小以及添加动画效果。
- 一条CSS样式规则
h1{ //选择器
Selector color:white; //选择器Property:属性值
Value; font-size:14px; // 声明Declaration
}
选择h1标签的内容 设置其颜色字体
-
CSS使用形式 外链、嵌入、内联
一般使用外链因为它可以实现内容与样式的分离,不推荐使用内联——样式与标签绑定。
-
CSS如何工作的
加载HTML—解析HTML—(加载CSS—解析CSS—)创建DOM树(添加CSS样式到DOM树)—展示页面 -
选择器:找出页面中的元素,以便给他们设置样式。选择器命名可以使用标签名、类名、id、属性或在DOM树中的位置。 通配选择器 *{} 匹配所有 标签选择器 利用标签设置样式 id选择器 id唯一,#id名{}
-
类选择器 class相同属性的对象设置样式 较常用 属性选择器 对包含此属性或此属性在具体值时的所有对象设置样式。 *a[$=".jpg"] {}*对包含.jpg的对象设置样式
-
伪类 状态性伪类、结构性伪类。 状态性伪类 对于链接选中、访问过或未访问过的状态、输入框选中未选中的状态。 结构性伪类 为一个结构中具体位置对象设置样式。
-
组合 直接组合 AB 同时满足则选中 后代组合 A B B属于A内时选中 亲子组合 A>B B为A的子元素则选中 兄弟选择器 A~B B在A后且同级则选中 相邻选择器 A+B B在A后第一个选中 选择器组 用,隔开的选择器
-
颜色 RGB/HLS RGB 三原色组合
HLS 色相、饱和度、亮度组合 alpha 不透明度 写做 rgb(a)/hls(a) (0,0,0,0.1) -
字体 font-family 设置多个值用于不同情况使用
通用字体族:Serif 衬线体、Sans-Serif 无衬线体、Cursive 手写体、Fantasy、Monospace 等宽字体
Web Fonts 使用在线字体 font-size
关键字:small、medium、large;长度:px、em;百分数:相对于父元素字体大小。
line-height属性 调整每行的高度 font-weight属性 字体加粗 font-style属性 文本变为斜体
-
normal 合并多余空格
nowrap 强制不换行
pre 保留所有
pre-wrap 保留空格 自动换行
pre-line 合并空格 保留换行