这是我参与「第四届青训营 」笔记创作活动的的第2天
CSS是什么?
- Cascading Style Sheets
- 用来定义页面元素的样式
- 设置字体和颜色设置位置和大小
- 添加动画效果
在页面中使用CSS
1 <!-—外链--> 2<link rel= " stylesheet" href= " / assets/ style.csa" > 3 4<!--嵌入--> 5<style> 6li {margin : 0 ; list- style : none;} 7p { margin : 1em o;} 8<l style> 9 10<!-— 内联―-> 11 <p style= " margin: 1 em 0 " >Example Content</ p>
选择器 Selector
- 找出页面中的元素，以更给他们设置样式使用
- 多种方式选择元素
-
- 按照标签名、类名或id
-
- 按照属性
-
- 按照 DOM树中的位置
伪类(pseudo-classes)
- 不基于标签和属性定位元素
- 几种伪类
-
- 状态伪类
-
- 结构性伪类
| 组合(Combinators) | |||
|---|---|---|---|
| 名称 | 语法 | 说明 | 示例 |
| 直接组合 | AB | 满足A同时满足B | input:focus |
| 后代组合 | A B | 选中B，如果它是A的子孙 | nav a |
| 亲子组合 | A>B | 选中B，如果它是A的子元素 | section>p |
| 兄弟选择器 | A~B | 选中B，如果它在A后且和A同级 | h2~p |
| 相邻选择器 | A+B | 选中B，如果它紧跟在B后面 | h2+p |
选择器组
l body,h1, h2,h3,h4,h5, h6, ul,ol,li{ 2 margin : 0 ; 3 padding : 0 ; 4 } 5 6[ type= " checkbox" ],[ type= " radio" ] { 7 box- sizing: border- box; 8 padding : 0 ; 9 }
颜色—HSL
- Hue:色相(H)是色彩的基本属性,如红色、黄色等;取值范围是0-360。
- Saturation：饱和度(S)是指色彩的鲜艳程度,越高约鲜艳;取值范围0-100%。
- Lightness：亮度(L)指颜色的明亮程度;越高颜色越亮;取值范围是0-100%。
font-family使用建议
- 字体列表最后写上通用字体族
- 英文字体放在中文字体前面
font-size
- 关键字
-
- small、medium、large
- 长度
-
- px、em
- 百分数
-
- 相对于父元素字体大小
调试CSS
- 右键点击页面，选择「检查」
- 使用快捷键
-
- ctrl+shift+I(windows)
-
- Cmd+Opt+I (Mac)
