【字节青训营】DAY1 基础CSS学习笔记

CSS基础

---

CSS简介

CSS全称：Cascading Style Sheets。主要用于用来定义页面元素的样式、设置字体和颜色、设置位置和大小、添加动画效果。

---

在页面使用CSS方法

• 外链（推荐采用，使得前后端功能分离、便于模块化）
• 嵌入（通过

  disabled="disabled"或者直接使用disabled会使标签失效，被禁用的input元素既不可用，也不可点击。可以设置disabled属性，直到满足某些其他的条件为止.被禁用的input可以通过CSS修改样式。

  伪类选择器

  伪类选择器不基于标签和属性定位元素，主要有状态伪类与结构性伪类

  状态伪类，常见的如下：

  • :link{}
  • :visited{}
  • :hover{}
  • :active{}
  • 对input，有:focus{}

  结构性伪类：
  根据DOM节点在DOM树中的位置，例如：
  :firstchild{}

  组合

  名称	语法	说明9	示例9
  直接组合	AB	满足A同时满足B	input:focus
  后代组合	AB	选中B，如果它是A的子孙	nav a
  亲子组合	A>B	选中B，如果它是A的子元素	section>p
  兄弟选择器	A~B	选中B，如果它在A后且和A同级	h2～p
  相邻选择器	A+B	选中B，如果它紧跟在A后面	h2+p

  后代组合范围大于亲子组合，兄弟选择器范围大于相邻选择器

  选择器组：将选择器之间用，分开

  颜色

  RGB模式

  十六进制标识：#ffffff 等价于
  rgb(255,255,255)

  HSL模式：

  使用场景：例如，可以设置button点击前后的不同状态

  名称	含义
  Hue色相（H）	是色彩的基本属性，如红色、黄色等；取值范围是0-360。
  Saturation饱和度（S）	是指色彩的鲜艳程度，越高约鲜艳；取值范围0-100%。
  Lightness亮度（L）	指颜色的明亮程度；越高颜色越亮；取值范围是0-100%。

  alpha:透明度:三种表示方法：#ff0000ff、rgba(255, 0, 0, 1) 、hsla(0, 100%, 50%, 1)

  关键字模式

  ---

  字体

  为什么设置默认字体？防止不同设备渲染效果等原因导致显示结果与期望值不同，设置多个字体，中间以逗号分隔。设置兜底的通用字体簇。

  常见字体簇	对应字体
  Serif 衬线体	Georgia、宋体
  Sans-Serif 无衬线体	Arial、Helvetica、黑体、微软雅黑
  Cursive手写体	Caflisch Script、楷体型
  Fantasy	Comic Sans MS，Papurus
  Monospace 等宽字体	Consolas、Courier、中文字体

  使用建议：

  • 字体列表最后写上通用字体族
  • 英文字体放在中文字体前面

  也可以通过Web Fonts来引用外部的字体库，英文只有26个字母，包相对较小。中文字符较多，因此包相对较大，可能大小达到几M，可能导致加载较慢

  //Web Fonts引用外部字体
  
  

  font-size设置

  • 关键字：small、medium、large
  • 长度：px、em(em相对父元素font-size的大小，rem相对root元素的大小、常用于移动端）（em弹性布局采用，px固定布局采用）
  • 百分数：相对于父元素字体大小

  font-size：设置字体样式

  font-weight：设置字体粗细

  line-height：设置行高。如果是小数，标识相对font-size的大小

  font:style weight size/height family对应
  /斜体 粗细 大小/行高 字体族/

  text-align
  文字对齐：left、center、right、justify（justify使得文本两端对齐，不包括最后一行）

  spacing
  1etter-spacing:字母间距
  word-spacing:单词间距

  text-indent:设置缩进

  text-decoration
  文字修饰：none、underline、line-through、overline

  white-space空白格设置：
  normal、nowrap（合并空格，不换行，自动设置水平滚动条）、pre（保留空白与换行）、pre-wrap（不合并空格，自动换行）、pre-line（合并空格，并且自动换行）

  ---

  调试CSS

  ·右键点击页面，选择[检查]

  使用快捷键
  Ctr1+Shift+I（Windows）
  cmd+opt+I（Mac）