了解CSS | 青训营笔记

史习武
135 阅读2分钟

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

本课重点

  • CSS的基础代码构成、工作过程
  • CSS中的选择器
  • CSS中的颜色与字体

走进CSS

什么是CSS

  • CSS是Cascading Style Sheets的缩写，中文含义为层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言。
  • CSS是用来定义页面元素的样式，如：
    • 设置字体和颜色
    • 设置位置和大小
    • 添加动画效果

CSS基础语法

CSS基础代码

CSS基础代码由选择器、属性、属性值以及声明构成。 image.png

在页面中使用CSS的方法

  1. 外链
    将CSS的定义放在一个单独的文件中，用link标签引入页面中。

image.png

  1. 嵌入
    直接将CSS样式代码嵌入到HTML标签中。

image.png

  1. 内联
    将CSS样式写进HTML标签的style属性中。

image.png

在页面中使用CSS的完整例子[：](CodePen Embed - 青训营/CSS/最简Demo)

CSS的工作过程

image.png

选择器

  • 找出页面中的元素，以便给他们设置样式
  • 使用多种方式选择元素，如：
    • 按照标签名、类名或id
    • 按照属性名
    • 按照DOM树中的位置
  1. 通配选择器* ：适配所有

image.png 2. 标签选择器：用标签来设置样式

image.png 3. id选择器：当给标签设置了id属性时，可通过#id属性设置样式

image.png 4. 类选择器class：需要给同一类型的标签设置样式时

image.png 5. 属性选择器：通过元素的属性or属性值选择元素

image.png 6. 伪类选择器

  • 伪类：不基于标签和属性定位元素
  • 几种伪类
    • 状态伪类 ：处于某种状态下才会被选中

image.png

    • 结构性伪类：根据dom节点在dom树中的位置来决定是否选中元素
  1. 组合

image.png

颜色

1.rgb：对red、green、blue三原色进行调节。

CodePen - 青训营/CSS/RGB (cdpn.io)

2.hsl：对颜色的色调、饱和度、亮度进行调节。

CodePen - 青训营/CSS/HSL (cdpn.io)

  1. hsla：在hsl上增加了alpha透明度，对颜色透明度调节。

CodePen - 青训营/CSS/alpha (cdpn.io)

字体

  • font-family：设置字体

  • CSS字体族

image.png

  • font-size：设置字体大小
    • 关键字：small、medium、large
    • 长度：px、em
    • 百分数：相对于父元素字体的大小

line-hight：设置行高

课后总结

本课主要从简单介绍css的概念引入，接着介绍了css中的选择器，以及如何设置页面中的颜色、字体样式。经过本课的学习，我掌握了css的部分简单语法，学会了简单设置页面的颜色字体样式。但由于课堂时间有限，因此我还需要课后多花时间去深入了解css的语法，并且多多练习，熟练掌握css。

avatar
文章
阅读
粉丝