这是我参与「第五届青训营 」伴学笔记创作活动的第 2天
初识CSS
CSS，层叠样式表 描述网页样式的一种技术
在页面中使用CSS
- 外链式
<link rel = "stylesheet" href = "./style.css"> - 嵌入式
<style> li {margin: 0; list-style: none:} </style> - 内联式
<p style = 'margin: lem 0'> Example Content</p>
推荐外链式写法 内容和样式分离
CSS是如何工作的
选择器
- 通配选择器 *
- 标签选择器 标签名
- id选择器 id id唯一
- 类选择器 class
- 属性选择器 [属性] / [属性名 = 属性值] /也可以对属性值做一些匹配 并不是严格的等于
- 伪类选择器 分为 状态伪类 和 结构伪类
属性选择器
<input type="password" value="12345">
input[type="password"] { border-color:pink;}
、对属性值做些匹配 有些属性值并不需要严格等于
<style> a[href$=".jpg"]{ color:pink }</style>
状态伪类
1.链接状态伪类
-
a:link
-
a:visited
-
a:hover
-
a:active 2.input状态伪类 焦点聚焦于input框时 input:focus { } 结构伪类 li:first-child{ } li:last-child{ }
-
组合 AB 满足A同时满足B input:focus
-
组合 A B 选中B，如果它是A的子孙 ,av a
-
组合 A>B 选中B，如果它是A的子元素,section>p,
-
兄弟A~B 选中B ,如果它在A后 与A同级
-
相邻A+B 如果它紧跟A后面 h2+p A,B,c 选择器组 同时选中A，B，C
RGB
rgb(0255,0255,0~255)
#6位十六进制数字
HSL
H 色相（H）是色彩的基本属性，如红色，黄色等 ；取值0360
Saturation 饱和度（S是指色彩的鲜艳程度，越高越鲜艳；取值0100%
Lightness 亮度 （L）是指颜色的明亮程度 越高颜色越高 取值范围0~100%
alpha 透明度
rgba(0-255,0-255,0-255,0-1) 或者#8位十六进制数字
font-family
h1 {font-family: Optima,Georgia,serift}
line-height
line-height: 属性值在没给单位时 比如 line-height:1.6 表示相对于自身高度的1.6
HTML多个连续的空格换行会归并为一个
white-space：pre 会保留空格包括换行
`ite-space : pre-wrap 保留空格 该换行换行
