freecodecamp-html小本本

1)应用多个class到一个元素,只需要在多个class之间用空格分开即可。例如:
<img class="class1 class2">
给class1 或者class2设置属性都会生效
class 声明的顺序却非常重要,第二个声明总是比第一个具有优先权。因为class2是第二个声明,它覆盖了class1 属性。

2)margin/padding设置距离

  • margin:10px 5px 15px 20px; 上 右 下 左;
  • margin:10px 5px 15px; 上 右and左 下
  • margin:10px 5px; 上下 左右
  • all

3)很多情况下,你会使用 CSS 库,这些库可能会意外覆盖掉你自己的 CSS。所以当你需要确保某元素具有指定的 CSS 时,你可以使用 !important
<h1 id="orange-text" class="pink-text blue-text" style="color: pink !important;">Hello World</h1>
这样就确保这个样式不会受其他class 声明、id 声明和行内样式所覆盖了

4)在 CSS 中,我们可以使用 6 位十六进制数字来表示颜色,每 2 位分别表示红色 ®、绿色 (G) 和蓝色 (B) 成分。例如,#000000 是黑色,同时也是可能的数值中最小的。
0 是 hex code(十六进制编码)中最小的一个,它代表颜色的完全缺失。
F 是 hex code(十六进制编码)中最大的一个,它代表最大可能的亮度。
Hex code 遵循 red-green-blue(红-绿-蓝),或者叫 rgb 格式。
hex code 中的前两位表示颜色中红色的数量,#FF0000代表纯红色
第三四位代表绿色的数量,#00FF00 纯绿
第五六位代表蓝色的数量。#0000FF纯蓝
因为这三种颜色混合可以获得所有的颜色
例如,橙色是纯红,混合一些绿,没有蓝。#FFA500 就是橙红色
我们也可以通过平均混合所有三种颜色得到不同灰度等级的灰色。#808080 灰色
当然这样的话会有6^16中情况了
为了便于记忆 出现了缩写 这会把所有可能的颜色数减少至大约 4000 种,但是浏览器会把 #FF0000 和 #F00 解释为完全相同的颜色。
5)在 CSS 中表示颜色的另一个方法是使用 rgb 值。
代表黑色的 RGB 值看起来是下面的样子:rgb(0, 0, 0)
使用 rgb,你通过 0 至 255 之间的一个数字来指定每种颜色的亮度,而不是像 hex code 那样使用六个十六进制数字。
这些数值遵循 RGB 顺序模式:第一位表示红色,第二位表示绿色,第三位表示蓝色。
红色的 RGB 值:rgb(255, 0, 0)。
绿色的 rgb 值:rgb(0, 255, 0)
蓝色的 RGB 值:rgb(0, 0, 255)
橙色的 RGB 值:rgb(255, 165, 0)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值