【前端基础篇】CSS基础速通万字介绍（上篇）2：https://developer.aliyun.com/article/1617326
文字样式
/* 设置倾斜 */ font-style: italic; /* 取消倾斜 */ font-style: normal;
很少把某个文字变倾斜.
但是经常要把 em / i 改成不倾斜
<style> .font-style em { font-style: normal; } .font-style div { font-style: italic; } </style> <div class="font-style"> <em> 放假啦 </em> <div class="one"> 听说要补课 </div> </div>
文本属性
文本颜色
认识 RGB
我们的显示器是由很多很多的 “像素” 构成的. 每个像素视为一个点, 这个点就能反映出一个具体的颜色.
我们使用 R (red), G (green), B (blue) 的方式表示颜色(色光三原色). 三种颜色按照不同的比例搭配, 就能混合出各种五彩斑斓的效果.
计算机中针对 R, G, B 三个分量, 分别使用一个字节表示(8个比特位, 表示的范围是 0-255, 十六进制表示为 00-FF).
数值越大, 表示该分量的颜色就越浓.
255, 255, 255 就表示白色; 0, 0, 0 就表示黑色.
设置文本颜色
color: red; color: #ff0000; color: rgb(255, 0, 0);
鼠标悬停在 vscode 的颜色上, 会出现颜色选择器, 可以手动调整颜色.
color 属性值的写法:
- 预定义的颜色值(直接是单词)
- [最常用] 十六进制形式
- RGB 方式
十六进制形式表示颜色, 如果两两相同, 就可以用一个来表示.
#ff00ff => #f0f
<style> .color { color: red; /* color: rgb(255, 0, 0); */ /* color: #ff0000; */ } </style> <div class="color">这是一段话</div>
送命题: 请说出一下口红颜色的区别. 😂🤣
看起来都是红色, 但是本质上 RGB 值不同. 可以使用取色器(QQ截图就自带) 查看每种颜色的 RGB 的值.
文本对齐
控制文字水平方向的对齐.
不光能控制文本对齐, 也能控制图片等元素居中或者靠右
text-align: [值];
- center: 居中对齐
- left: 左对齐
- right: 右对齐
<style> .text-align .one { text-align: left; } .text-align .two { text-align: right; } .text-align .three { text-align: center; } </style> <div class="text-align"> <div class="one">左对齐</div> <div class="two">右对齐</div> <div class="three">居中对齐</div> </div>
文本装饰
text-decoration: [值];
常用取值:
underline下划线. [常用]none啥都没有. 可以给a标签去掉下划线.overline上划线. [不常用]line-through删除线 [不常用]
<style> .text-decorate .one { text-decoration: none; } .text-decorate .two { text-decoration: underline; } .text-decorate .three { text-decoration: overline; } .text-decorate .four { text-decoration: line-through; } </style> <div class="text-decorate"> <div class="one">啥都没有</div> <div class="two">下划线</div> <div class="three">上划线</div> <div class="four">删除线</div> </div>
例如 B 站这里的导航链接, 就是使用这个属性去的掉的下划线. [可以 F12 观察]
文本缩进
控制段落的 首行 缩进 (其他行不影响)
text-indent: [值];
- 单位可以使用
px或者em. - 使用
em作为单位更好. 1 个em就是当前元素的文字大小. - 缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了)
<style> .text-indent .one { text-indent: 2em; } .text-indent .two { text-indent: -2em; } </style> <div class="text-indent"> <div class="one">正常缩进</div> <div class="two">反向缩进</div> </div>
行高
行高指的是上下文本行之间的基线距离.
HTML 中展示文字涉及到这几个基准线:
- 顶线
- 中线
- 基线 (相当于英语四线格的倒数第二条线)
- 底线
内容区：底线和顶线包裹的区域，即下图深灰色背景区域
基线之间的距离 = 顶线间距离 = 底线间距离 = 中线间距离
line-height: [值];
注意1：行高 = 上边距 + 下边距 + 字体大小
上下边距是相等的, 此处字体大小是 16px, 行高 40px, 上下边距就分别是 12px
<style> .line-height .one { line-height: 40px; font-size: 16px; } </style> <div class="line-height"> <div> 上一行 </div> <div class="one"> 中间行 </div> <div> 下一行 </div> </div>
注意2: 行高也可以取 normal 等值.
这个取决于浏览器的实现. chrome 上 normal 为 21 px
注意3：行高等与元素高度, 就可以实现文字居中对齐.
<style> .line-height .two { height: 100px; line-height: 100px; } </style> <div class="line-height"> <div class="two"> 文本垂直居中 </div> </div>
以上就是关于【前端基础篇】CSS基础速通万字介绍（上篇）的内容啦，各位大佬有什么问题欢迎在评论区指正，您的支持是我创作的最大动力！❤️
