CSS学习 | 青训营笔记

Serene1
93 阅读4分钟

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

1.1 CSS是什么

  • Cascading Style Sheets
  • 用来定义页面元素的样式
    • 设置字体和颜色
    • 设置位置和大小
    • 添加动画效果
h1 {
   color: white;
   font-size:14px;
}
  • 基础代码示例：
    • h1为选择器Selector，选择页面中的元素并给它们设置样式
    • color、font-size为属性Property
    • white、14px为属性值Value
    • font-size:14px这样使用分号隔开的为声明Declaration

1.2 在页面中使用CSS

  • 外链：把CSS定义放在单独文件里，再用link标签引入页面（一般推荐这种）

image.png

  • 嵌入：把样式代码嵌入HTML标签里

image.png

  • 内联：把样式写在style属性里（比较不推荐）

image.png

  • 代码示例：

image.png

1.3 CSS的工作方式

image.png

1.4 选择器Selector

  • 找出页面中的元素，一边给他们设置样式
  • 可以使用多种方式选择元素
    • 按照标签名、类名或id
    • 按照属性
    • 按照DOM树中的位置
  • 通配选择器
    • ✳表示匹配所有

image.png

  • 标签选择器（也就是内联法）

image.png

  • id选择器（id值在页面中最好是唯一的）

image.png

  • 类选择器（比较常用）

image.png

  • 属性选择器（通过元素的属性或者属性值来选中元素）

image.png

image.png

image.png

  • 选择器组

image.png

1.5 伪类Pseudo-classes

  • 不基于标签和属性定位元素
  • 几种伪类
    • 状态伪类 image.png
    • 结构性伪类 image.png

1.6 标签组合

名称 语法 说明 示例
直接组合 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，如果它紧跟在A后面 h2+p

1.7 CSS的应用

1.7.1 颜色——RGB

  • rgb(red, green, blue)：每个参数定义了0到255之间的颜色强度
  • 16进制颜色值，例：#B60023

1.7.2 颜色——HSL

  • Hue：色相（H）是色彩的基本属性，取值范围为0-360
  • Saturatin：饱和度（S）是指色彩的鲜艳程度，取值范围为0-100%
  • Lightness：亮度（L）指颜色的明亮程度，取值范围为0-100%

1.7.3 alpha透明度（值越低越透明）

  • 16进制表示法，例：ff000ff
  • rgba(red, green, blue, alpha)
  • hsla(hue, saturation, lightness, alpha)

1.7.4 字体font family

  • 不同设备上安装的字体有限，所以我们可以使用逗号分隔开多种不同的字体，在最后一般要加上一个通用字体族；
  • 中英文混排的场景下，一般把英文写在中文前面。

image.png

  • 通用字体族
    • Serif衬线体：Georgia，宋体
    • Sans-Serif 无衬线体：Arial，Helvetica，黑体，微软雅黑
    • Cursive手写体：Caflisch Script，楷体
    • Fantasy：Comic Sans MS，Papyrus
    • Monospace等宽字体:Consolas，Courier，中文字体
  • 使用Web Fonts:随着网页的加载下载自定义字体实现以更多不同的、自定义的文本样式

image.png

1.7.5 字体大小font-size

  • 关键字：small，medium，large
  • 长度：px，em（px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小）
  • 百分数：相对于父元素字体大小

1.7.6 字体样式font-style

  • 正常：font-style: normal
  • 斜体：font-style: italic

1.7.7 字体粗细font-weight

  • 关键字法：关键字包括“normal”和“bold”
  • 相对粗细值法：相对粗细也是由关键字定义，但是它的粗细是相对于上级元素的继承值而言的，包括“bolder”和“lighter”
  • 数字法：包括从“100”到“900”的9个数字序列（只能是整百数）

1.7.8 行高line-height

  • normal：默认，设置合理的行间距
  • number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距
  • %： 基于当前字体尺寸的百分比行间距。

1.7.9 文本对齐text-align

  • left： 把文本排列到左边（默认值：由浏览器决定）
  • right：把文本排列到右边
  • center：把文本排列到中间
  • justify：实现两端对齐文本效果

1.7.10 字间距letter-spacing

  • 默认值为 normal，等同于设置为0
  • 在定义字间距时，letter-spacing属性的取值可以为负 image.png

1.7.11 词间距word-spacing

  • 默认值为 normal,等同于设置为0
  • 取值可以为负

1.7.12 首行缩进text-indent

  • 允许使用负值。如果使用负值，那么首行会被缩进到左边
  • length：定义固定的缩进。默认值：0
  • %：定义基于父元素宽度的百分比的缩进

1.7.13 white-space

  • normal：默认，空白会被浏览器忽略
  • pre：空白会被浏览器保留。其行为方式类似 HTML 中的pre标签。
  • nowrap：文本不会换行，文本会在在同一行上继续，直到遇到br标签为止
  • pre-wrap：保留空白符序列，但是正常地进行换行
  • pre-line：合并空白符序列，但是保留换行符 image.png

1.8 调试CSS

  • 右键点击页面，选择检查
  • 使用快捷键
    • Ctrl+Shift+I(Windows)
    • Cmd+Opt+I(Mac)
avatar
文章
阅读
粉丝