走进前端技术栈-CSS | 青训营笔记

67 阅读2分钟

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

CSS是什么?

全称:Cascading Style Sheets 其用来定义页面元素的样式

  • 设置字体和颜色
  • 设置位置和大小
  • 添加动画效果

页面中使用CSS的三种方法

  1. 外链(外部导入方式)
  2. 嵌入(内部方式)
  3. 内联(行内样式)

dc108e85c0a797cae29c76562cfbe68.jpg

CSS如何工作?

88a9286246786e06998161cc4ac7093.jpg

CSS的选择器

通配选择器

6deda48a4c3bab8031b98c8ad2f3f87.jpg

标签选择器

标签选择器也称为元素选择器、类型选择器,它直接使用元素的标签名当作选择器,将选择页面上所有该种标签,即快速为同一类标签添加样式。

919e9c48e72187e18136430ad865d1e.jpg

id选择器

标签可以有id属性,是这个标签的唯一标识,且同一个页面上不能有相同的id标签 94c9727d88517d6a10ab475401014ba.jpg

类选择器

类选择器要使用.来开头,并且一个类可以被多个标签使用,一个标签也能使用多个类 084da0c1053383455f2b3d3e1c09615.jpg

伪类选择器(链接伪类)

是添加到选择器的描述性词语,指定要选择的元素的特殊状态

  • a:link 选择未被访问过的链接
  • a:visited 选择已经被访问过的链接
  • a:hover 选择鼠标指针悬停上的链接
  • a:active 选择活动链接
注意顺序必须为LVHA,否则不生效

组合类型有哪些类型?

b145a46bf0c7bfde8e9df77bab7d7b7.jpg

颜色

RGB的组成(全为0是黑色,全为255是白色)

1ecd849ad841b24525168a10f7bd32f.jpg

HSL

199ce32155446ff00eaad73c1a1d662.jpg

透明度(alpha)

透明度可以理解为不透明度,接近0为透明,接近1为不透明

通用字体:

  • Serif衬线体(Georgia,宋体)
  • Sans-Serif无衬线体(Arial,Helvetica,黑体,微软雅黑)
  • Cursive手写体(Caflisch Script,楷体)
  • Fantasy(Comic Sans MS,Papyrus)
  • Monospace等宽字体(Consolas,Courier,中文字体)

怎样调式CSS:

  • 右键点击页面,选择【检查】
  • 使用快捷键
  • Ctrl+Shift+I
  • Cmd+Opt+I