CSS颜色与文本


颜色:

预定义的颜色值

black、white、red、green、blue、lightblue等。


16进制表示法

使用6位16进制数表示颜色,例如:#ADD8E6
其中第1-2位表示红色,第3-4位表示绿色,第5-6位表示蓝色。

简写方式:#ABC,等价于#AABBCC


RGB表示法

rgb(173, 216, 230)

其中第一个数表示红色,第二个数表示绿色,第三个数表示蓝色。


RGBA表示法

rgba(173, 216, 230, 0.5)
前三个数同上,第四个数表示透明度。


取色方式

  • 网页里的颜色,可以在chrome的调试模式下获取
  • 其他颜色可以使用QQ的截图软件:
    • 直接按c键,可以复制rgb颜色值。
    • 按住shift再按c键,可以复制16进制颜色值

文本:

text-align

text-align CSS属性定义行内内容(例如文字)如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐,只控制它的行内内容的对齐。


line-height

line-height CSS 属性用于设置多行元素的空间量,如多行文本的间距。对于块级元素,它指定元素行盒(line boxes)的最小高度。对于非替代的 inline 元素,它用于计算行盒(line box)的高度。

  • 补充知识点:长度单位
单位 描述
px 设备上的像素点
% 相对于父元素的百分比
em 相对于当前元素的字体大小
rem 相对于根元素的字体大小
vw 相对于视窗宽度的百分比
vh 相对于视窗高度的百分比

letter-spacing

CSS 的 letter-spacing 属性用于设置文本字符的间距。


text-indent

text-indent属性能定义一个块元素首行文本内容之前的缩进量。


text-decoration

text-decoration 这个 CSS 属性是用于设置文本的修饰线外观的(下划线、上划线、贯穿线/删除线 或 闪烁)它是 text-decoration-line, text-decoration-color, text-decoration-style, 和新出现的 text-decoration-thickness 属性的缩写。


text-shadow

text-shadow为文字添加阴影。可以为文字与 text-decorations 添加多个阴影,阴影值之间用逗号隔开。每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成。


以上均出自y总课程


文章作者: FW
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 FW !
评论
  目录