freecodecamp学习笔记【二】

• 浏览器读取 CSS 是由上到下的。 这就意味着，如果发生冲突，浏览器将会应用最后声明的样式。

  也就是说，即使在html代码中把class1放在class2前面，如果在css中，class2才是最后出现的，那么依然会显示class2样式。网页检查的是声明顺序，而不是使用顺序。

• id 选择器无论在 style 标签的任何位置声明，都会覆盖 class 声明的样式；而内联样式的优先级高于 ID 选择器；color: xx !important ；的优先级最高

• 创建css变量：–+变量名

• 引用在别的class或id中的自定义变量：如：background: var(–penguin-skin);

• background: var(--penguin-skin, black);
  在本行代码中，black的作用是在浏览器在找不到你的变量时可以显示该颜色，这对代码调试也很有帮助。
  

• 提高代码对浏览器的兼容性，采取降级处理，只需在原有的css声明中再添加一个更宽泛的声明。

  对于老版本的IE浏览器，将会降级处理；而在新版本中，会因后面的声明而覆盖掉降级处理。

• 在：root 中的变量相当于全局变量

• 应用视觉设计

  • text-align:justify; 指的是让 除最后一行 外的文本贴着两边行线对齐。

  • 注：以下几条涉及文本处理，更像是markdown语法学习

  • 在

    元素中的某段文本插入标签，浏览器会自动给元素添加这段样式：font-weight:bold;。

    例如：

    哈哈哈哈呵呵呵

  • 标签等效于text-decoration: underline;

  • 标签等效于font-style: italic;（斜体）

  • 标签等效于text-decoration: line-through;（删除线）

  • ---

    标签等效于分割线，其为自闭合标签，没有结束标签

  • opacity(透明度)：1 完全不透明 0 透明 中间程度随值变化

  • fixed 定位，它是一种特殊的绝对（absolute）定位，将元素相对于浏览器窗口定位。 类似于绝对位置，它与 CSS 偏移属性一起使用，并且也会将元素从当前的文档流里面移除。 其它元素会忽略它的存在，这样也许需要调整其他位置的布局。

    但 fixed 和 absolute 的最明显的区别在于，前者定位的元素不会随着屏幕滚动而移动。

  • 在应用设计中经常需要把一个块级元素水平居中显示。 一种常见的实现方式是把块级元素的 margin 值设置为 auto。

    同样的，这个方法也对图片奏效。 图片默认是内联元素，但是可以通过设置其 display 属性为 block来把它变成块级元素。

  • hsl() 包括色相、饱和度和亮度

    • 色相是色彩的基本属性，就是平常所说的颜色名称。色相用色环来代替光谱，色相值就是色环里面的颜色对应的从 0 到 360 度的角度值。0表示红色
    • 饱和度是指色彩的纯度，也就是颜色里灰色的占比。 饱和度越高则灰色占比越少，色彩也就越纯；饱和度为100的颜色最纯。
    • 亮度决定颜色的明暗程度。其中，100% 的亮度表示纯白色， 0% 的亮度则表示纯黑色。

  • transform: scale( ); 放大元素的倍数
    

• 无障碍设计

  • 包裹单选框：关键词 fieldset

    <form>
      <fieldset>
        <legend>Choose one of these three items:</legend>
        <input id="one" type="radio" name="items" value="one">
        <label for="one">Choice One</label><br>
        <input id="two" type="radio" name="items" value="two">
        <label for="two">Choice Two</label><br>
        <input id="three" type="radio" name="items" value="three">
        <label for="three">Choice Three</label>
      </fieldset>
    </form>
    

  • 设置快捷键：accesskey

  • 让图像正确出现在高分辨率显示器（例如 MacBook Pros “Revistina display”）上的最简单方式， 是定义它们的 width 和 height 值为原始值的一半。

​