理解CSS | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天

什么是CSS

• 全称：Cascading Style Sheets 层叠样式表
• 作用：定义页面元素的样式 字体 颜色 位置大小 动画效果

CSS基础代码

在页面中使用CSS的方法

• 外链 将CSS放入单独的CSS文件中，用link标签引入到html中
  <link rel="stylesheet" href="bala.css">
• 嵌入 直接将CSS代码写入html标签中
  <style></style>
• 内联 在html里面的元素标签中用style属性单独添加样式(大部分情况不推荐)
  <p style="margin:lem 0">example</p>

CSS如何工作

CSS基础内容

选择器

• 通配选择器（通配所有元素） * {}
• 标签选择器 h1 {}
• id选择器（id值应是唯一的，为单独标签设置样式）
  <h1 id="bala"></h1> #bala {}
• 类选择器（class可出现多次，为多种标签设置同一样式）
  <h1 class="bala"></h1> .bala {}
• 属性选择器（通过元素属性值选中元素)
  • 只要某元素有某种属性就可以被选中（如为所有被禁用的输入框设置样式）
    <input value="bala" diabled /> [disabled] {}
  • 只有某个属性为一个特定值时才选中
    <input type="password" value="bala" /> input[type="password"] {}
  • 通过筛选属性符合某些特征来选中
    1. 筛选属性的开头值 a[href^="bala"] {}
    2. 筛选属性的结尾值 a[href$="bala"] {}
• 伪类选择器

  • 状态伪类（当元素处于某种状态下会被选中）

    • 链接
    1. 正常状态 a:link {}
    2. 访问过之后 a:visited {}
    3. 鼠标移动到上面时 a:hover {}
    4. 鼠标单击时 a:active {}
    • 输入框和链接被点击时的状态 bala:focus {}

  • 结构性伪类（根据dom节点在dom树中所处的位置来选择元素）

    1. 选择列表中排名第一的元素 li:first-child {}
    2. 选择列表中排名最后的元素 li:last-child {}
• 选择器的组合

• 选择器组
  • body, h1, h2, h3, ul, ol, li {}
    
  • [type="checkbox"], [type="radio"] {}

颜色

• RGB模型 rgb(143, 172, 135) 或 #8fac87
• HSL模型（Hue色相 Saturation饱和度 Lightness亮度） hsl(x, y%, z%)
• 关键字 如aliceblue
• alpha 透明度（透明 0 —— 1 不透明）
  #ff000078 或 rgba(255, 0, 0, 0.47) 或 hsla(0, 100%, 50%, 0.47)

字体 font-family

• font-family: Optima, Georgia, serif;
  逐级向下匹配，有哪个用哪个，最后一个选择通用字体族保底，保证与理想差距不会太大
  当中英文混排时将英文字体放在中文字体前，因为中文字体会替换中英文，而英文字体只替换英文

• 使用Web Fonts拓展字体

字体大小 font-size

• 关键字 small medium large
• 长度 px em（em为相对单位，是相对于父级元素字体大小的倍数）
• 百分数 x%（相对于父级元素字体的大小）

其他字体效果

• 斜体 font-style:italic
• 默认值 font-style:normal
• 字重（粗细100-900 400=normal 700=bold）（字重范围与字体有关）font-wight:100
• 行高（x为字体大小的倍数） line-height:x

空白符 white-space

• normal 多个空格合并为一个 按屏幕宽度进行换行
• nowrap 多个空格合并为一个 强制不换行
• pre 保留所有空格 按代码进行换行
• pre-wrap 保留空格 按屏幕宽度以及代码进行换行
• pre-line 多个空格合并为一个 按屏幕宽度以及代码进行换行

对齐方式 text-align

• 水平居中 center
• 居左/右 left/right
• 分散对齐 justify

文字间距

• 字母间距 letter-spacing
• 单词间距 word-spacing

首行缩进 text-indent

文字装饰 text-decoration

• 上划线 overline
• 下划线 underline
• 删除线 line-through
• 无装饰（删除装饰）none