理解CSS|青训营笔记

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

了解CSS

什么是CSS

CSS(Cascading Style Sheets)层叠样式表，用来定义页面元素的样式。包括(设置字体颜色，设置位置和大小，添加动画效果)。

CSS的语法

• 语法由一个 选择器 (selector) 起头。它 选择 (selects)  了我们将要用来添加样式的 HTML 元素。
• 接着输入一对大括号{ }。在大括号内部定义一个或多个形式为 属性 (property):值 (value);  的 声明 (declarations) 。每个声明都指定了我们所选择元素的一个属性，之后跟一个我们想赋给这个属性的值。

页面中使用CSS的方法

外链式 <link rel="stylesheet" href="/assets/style.css">
嵌入式 <style> h1 { color: white; } </style>
内联式 <p style="margin:1em">Example</p>

CSS如何工作

CSS选择器类型

通配选择器:*选择页面所有元素
标签选择器：通过标签作为选择器
id选择器：将id属性作为选择器，适合整个页面中只出现一次的元素 class选择器(类选择器)：将class属性作为选择器，适合页面中相似的元素 属性选择器: 通过某些元素中特定的属性作为选择器，适合页面中需要输入内容的元素

伪类

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

颜色

RGB和HSL是CSS常用的设置颜色属性值的方式

RGB(RED,GREEN,BLUE)是用红绿蓝三种颜色相互混合形成不同颜色，每个颜色的值范围从0 ~ 255
表示方法: 1.color:rgb(0, 0, 0) 2.#000000(16进制表示)

HSL(Hue, Saturation, Lightness)色相，饱和度，亮度。色相的值从0 ~ 360，饱和度和亮度分别从0~100%

透明度(alpha)

范围从0 ~ 1，1为不透明
使用方式rgba(0, 0, 0, 1) hsla(0, 50%, 50%, 1)

字体

字体样式 font-family
五种通用字体族在字体样式最后需写明使用那种通用字体族

1. Serif衬线体
2. Sans-Serif无衬线体
3. Cursive手写体
4. Fantasy艺术体
5. Monospace等宽字体 字体大小 font-size
   

• 关键字
  • small、medium、large
• 长度
  • px、em
• 百分数
  • 相对于父元素字体大小 字体粗细 font-weight
    范围从100 ~ 900 (400)为基准度

深入CSS

选择器的特异度

通过比较id选择器，类选择器，标签选择器的数量来比较选择器的优先顺序

初始值

布局