HTML5教程

前端速成-CSS | 02.CSS样式

本文主要是介绍前端速成-CSS | 02.CSS样式,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

文章目录

  • 1.颜色
  • 2.字体
    • 2.1.font-family:字体样式
    • 2.2.font-size:字体大小
    • 2.3.font-weitht:字重
    • 2.4.font-style: 字体风格(是否倾斜)
    • 2.5.实践
  • 3.其他样式设置
    • 3.1.line-height:行高
    • 3.2.word-spacing:单词字间距
    • 3.3.letter-spacing:字间距(汉字、字母有效)
    • 3.4.text-decoration:下划线、删除线等
    • 3.5.text-transform:大小写相关设置

1.颜色

  • 十六进制值:#ff0000

  • 颜色名:black,silver,white…

上述两种是比较常用的。颜色对照表:CSS 颜色

下方是对颜色进行更加细致的定义:

  • RGB:rgb(255,0,0) 定义红、绿、蓝

  • RGBA:rgb(255,0,0,0.8) 定义红、绿、蓝,不透明度为80%

  • HSL:hsl(0,100%,50%) 定义色相、饱和度、明度

  • HSLA:hsl(0,100%,50%,0.8) 定义色相、饱和度、明度,不透明度为80%

2.字体

2.1.font-family:字体样式

image-20210912144816804

  • sans-serif:无衬线体,平滑时尚
  • monospace:等宽字体
  • 可以指定多个字体,越靠前的字体优先级越高
  • 若字体由多个单词组成(中间有空格),需要用引号括起

2.2.font-size:字体大小

值为对应的像素值

2.3.font-weitht:字重

可以理解为加粗的程度。值有如下:

可用值值的说明
normal默认值(400)
bold加粗(700)
lighter比父对象更淡一些
bolder比父对象更粗一些
100-900数值越大,字体越粗

说明一下lighter和bolder:

.parent {
    font-weight: normal;
}

. child {
    font-weight: bolder;
}
<div class="parent">
    内容1:字重为"normal"
    
    <div class="child">
        内容2:字重为"bolder",由于父级为"normal",因此这里的字体采用"bold"
    </div>
</div>

border和lighter都是相对于其父对象而言的。

2.4.font-style: 字体风格(是否倾斜)

常用值描述
normal默认
oblique倾斜

值得一提的是,"italic"的作用也是使字体倾斜,但这里是使用字体自带的倾斜方式。若某些字体中没有倾斜的样式,使用"italic"便没有效果。

italic和oblique的区别

2.5.实践

image-20210912150851736

3.其他样式设置

3.1.line-height:行高

特殊用法:当line-height(行高)和height(字体高度)相同时,字体便可以垂直居中

3.2.word-spacing:单词字间距

需要注意的是:这只对英文单词有效,对中文汉字是无效的!

3.3.letter-spacing:字间距(汉字、字母有效)

image-20210912154621013

3.4.text-decoration:下划线、删除线等

image-20210912153949734

3.5.text-transform:大小写相关设置

image-20210912154917416

这篇关于前端速成-CSS | 02.CSS样式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!