前端学习CSS上(?)|青训营笔记

99 阅读2分钟

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

在青训营的第二天中,依旧是收获满满的一天,在温习昨天学习内容上较为顺利,在学习新知识过程中稍有阻碍。

今天主要看的是CSS,萌新小菜鸡粗浅地学习了一点。

CSS

css--层叠样式表,英文全称(Cascading Style Sheets),用来定义页面元素的样式。

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

基本框架

1.PNG

使用方式

2.PNG

三种方法:

  • 外链式,外部由link引入
  • 嵌入式,直接在文件中用style包括
  • 内联式,直接添加在标签的属性中

选择器

选择器是用来选择将需要的样式准确无误地添加到哪一个标签中

通配选择器

3.PNG

匹配所有的标签

标签选择器

4.PNG

较为简单(不做过多概述)

ID选择器

5.PNG

ID是标签的一个属性,类似于名称,一般是独一无二的,可以通过ID来准确地寻找到需要的标签

类选择器

6.PNG

通过标签中的class属性,来辨别需要添加样式的标签

属性选择器

7.PNG

通过寻找各个标签中的某一个属性确定满足条件的属性值,来确定所需标签

伪类选择器

8.PNG

该类选择器通过某一元素的特殊事件来选择标签,如访问、点击等

复合选择器

9.PNG

基于以上几类选择器的各种组合

样式

颜色

字体的颜色,常用方式有RGB、HSL等

10.PNG

透明度

alpha值,0为百分百透明,1为不透明

字体

font-family

11.PNG

font-size

12.PNG

font-weight

13.PNG

line-height 调整行距

总体来说,掌握得还相较生疏,后续部分还在努力摸索