走进前端技术栈-CSS
CSS：Cascading Style Sheets 层叠样式表
基本概念
用来定义页面元素的样式
-
基础代码
h1: 选择器(Selector)给页面上所有的h1来定义样式
color: 属性(Property)
white; 属性值(Value)
Declaration: color : white 属性:属性值 称为一个声明
规则：Selector + n * Declaration 称为一条规则
h1 {
color : white;
font-size: 14px;
}
-
在页面中使用CSS(组件中不使用外链)
- 外链 link rel = "stylesheet" href = "" (推荐) (实现内容与样式分离)
- 嵌入 style /style
- 内联 所有的标签都有style属性，把style直接写在属性里 (不推荐)
CSS是如何工作的：
选择器(Selector)
- 找出页面中的元素，以便给他们设置样式
-
使用多种方式选择元素
- 按照标签名、类名、ID
- 按照属性
- 按照DOM树中的位置
-
通配选择器 (*) : 选择所有
-
标签选择器 : 用标签名称来选择样式
-
ID选择器: #id { Declaration } id需要是唯一的，如果不唯一的也可以生效，但是会有意料之外的效果
-
类选择器: .class{ Declaration } 标签加一个class属性，就可以通过类选择器设置标签的样式 (常用)
-
属性选择器: [property]
-
input disabled/ 就可以通过[disabled]设置input的样式(根据属性名称)
-
label [property = " "] { Declaration } input type = "password"/ (根据属性特定的值)
input[type="password"] 只会选择上面的label进行样式的更改
-
a[href^= "#"] : 匹配 a 中的 href 以 # 开头的label
-
a[href$= ".jpg"] : 匹配a中的href以.jpg结尾的label
-
-
伪类选择器
-
状态的伪类(设置某种状态下的样式)
a:link 超链接本色
a:hover 鼠标挪过去
a:active 点击中
a:visited 点击后
:focus { 点击后聚焦在某处时添加边框 outline: 2px solid orange; }
-
结构的伪类(根据DOM节点在DOM树中出现的位置来决定是否选中该元素)
目前只需要知道伪类可以通过在父节点中的相对位置来进行选中即可。
比如说ol 有序列表，浏览器是按照顺序进行渲染的。
所以就有了 li:first-child 第一个渲染的
li:last-child 最后一个渲染的
-
- 组合
提示：后代组合： A B，出现在A标签下的B标签都会被选中 子 孙 曾孙 都生效
亲子组合: A B A标签下的子标签B都会被选中 子 生效
相邻选择器： A + B 紧跟在A后面的B标签会被选中
- 选择器组： 用逗号分隔开
颜色(RGB)
RGB: rgb( R , G , B) = # R G B 前面括号内写十进制，后面RGB用十六进制表示
颜色-HSL
更加符合人类习惯。
例如：按钮颜色为蓝色，鼠标移动上去之后进行亮度的调整即可进行颜色的更改。
- Hue 色相: 0-360
- Saturation 饱和度 : 0-100% 越高越鲜艳
- Lightness 亮度 : 0-100% 越高颜色越亮
透明度-alpha
其实是不透明度，alpha = 1时不透明，alpha = 0 透明
使用：rgba(R,G,B,alpha) = # rgba hsla(H,S,L,alpha)
直接写rgb后面传4个值也是ok的
字体
font-family
字体族： h1{font-family: Optima, Georgia, serif;}
为什么设置多个，从前往后进行选择，如果没有第一个就渲染第二个，以此类推。一层一层去匹配。
通用字体族： (Sans-Serif使用较多)
最好先写英文，再写中文。因为中文字体可能会有英文，但是英文字体中不可能有中文。
在设置字体时需要设置一个通用字体族。如果没有指定字体时，也不至于和期望的字体差别太大。
Web Fonts：通过在style中,
@font-face{
font-family:" ";
src:url();
}
可以从url中下载对应字体，但是会带来性能上的开销。
font-size
-
关键字
- small、medium、large
-
长度
- px、em
-
百分数
- 相对于父元素字体大小
font-style
- font-style: italic 斜体
- font-style: normal;正常的
font-weight
字体粗细(100-900)
- font-weight: 400 normal
- font-weight: 700 bold
line-height
- line-height: 45px;
- line-height: 1.6; 自身字体大小的多少倍 (推荐)
font
将这些属性合起来使用
font: style weight size/height family
font: size family
white-space
- normal (默认) 多个连续的空格会进行合并
- nowrap 强制不换行 有一个滚动条
- pre 所有的空格和换行都会显示 和代码中一样
- pre-wrap 一行内显示不下的时候会进行换行
- pre-line 合并空格但是保留换行
