【CSS从入门到入土系列】—— 文本属性专题

Bow.贾斯汀

已于 2022-02-18 17:13:45 修改

阅读量62

点赞数

分类专栏： HTML与CSS 文章标签： css html 前端

于 2022-02-07 19:39:09 首次发布

本文链接：https://blog.csdn.net/qq_61323055/article/details/122813363

版权

HTML与CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

W3C建议，如果能使用CSS样式来代替HTML标签就不要使用HTML标签

(1)字体大小

font-size

默认大小为16px,最小为12px

(2)样式设置

font-family

样式参考：字体大全

(3)颜色设置

color

rgb(number1,number2,number3) 或六位十六进制表示法 #nnnnnn
number的范围为0~255，包含端点的值
n的范围为0到9、a到f
具体的属性值都可以通过吸管工具获取到

（4）粗细设置：

font-weight

bold 加粗 normal 正常 lighter 细体

(5)字体倾斜

font-style

italic 斜体字 oblique 倾斜的文字

(6)首行缩进

text-indent

(7)文本修饰线

text-decoration

underline 下划线 overline上划线
line-through 删除线 none 无线条
(多个属性值用空格分开)

对应在HTML中的标签

加粗：b/strong 标签
-> 倾斜：i/em 标签
ins/u 下划线标签
del/strike 删除线标签

对于为什么要设置无线条呢？难道直接不添加这个属性不是更好嘛？
默认超链接都含有下划线，可以通过设置无线条来去掉下划线。

a{
	text-decoration:none;
}

(8)行高

line-height

npx n为具体的像素值
可以通过设置行高为父元素的高度，来完成单行文本的垂直居中。

(9)文本的水平对齐方式与图片的水平对齐方式

text-align

left 左 right 右 center 水平居中 justify 两端对齐
当设置图片在容器中的位置时，这些属性要设置给包含图片的容器

(10)垂直对齐方式

vertical-align

默认情况下为基线对齐 baseneline【也就是文字在图片的右下部】
top 上 bottom下 middle居中
这个主要是针对图片周围存在文本而言的。
这个属性添加到img的标签中。

应用情况：当为一个容器设置宽度而不设置高度时，容器的高度会因内部元素的高度而撑开，但是默认情况下容器会比这个内部元素的总高度多3~6px，为解决这个问题，可以通过设置垂直对齐方式来去掉这多余的像素。
应用于图片。

(11)字间距与词间距

letter-spacing:value [字间距]
word-spacing：value [词间距]

(12)简写font属性

font: bold italic 12px/1.5em "宋体"  【加粗、倾斜、字号/字高 字体】

简写font属性时，字体和字号是必备的。

源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .first{
            /*字体大小、字体类型、字体颜色*/
            font-size:20px;
            font-family:"KaiTi";
            color:rgb(125,125,125);
        }
        img{
            /*图片与文本的对齐方式*/
            vertical-align:top;
        }
        .second{
            /*字体粗细、字体倾斜、字体颜色*/
            font-weight:bold;
            font-style:italic;
            /*设置容器大小颜色与文本行高*/
            height:30px;
            width:120px;
            text-align: left;
            line-height:30px;
            background-color:#34f125;
        }
        .third{
            /*文本修饰线、首行缩进*/
            /*overline 上划线 underline 下划线 through-line 删除线*/
            text-decoration:underline;
            text-indent: 2em;
        }
        a{
            /*去除超链接的下划线*/
            text-decoration:none;
        }
        .box1{
            letter-spacing:10px;
        }
        .box2{
            word-spacing:10px;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <p>
        <div class = "first">
            <p>
                <img src="https://img0.baidu.com/it/u=377406813,1403767327&fm=253&fmt=auto&app=138&f=JPEG?w=954&h=500" alt="图片加载失败" tittle = "垂直测试">第一段测试文本
            </p>
        </div>
        <div class = "second">
            <p>
                第二段测试文本
            </p>
        </div>
        <div class = "third">
            <p>
                第三段测试文本 
                <br>
                <a href="#">用来测试的超链接</a>
                <p>之所以没去除此处超链接的下划线的原因：
                因为对于元素选择器的权值（1）小于类选择器的权值（10）。
                对于同一个属性在多个标签中涉及，以最权值最大的选择器为准。
                </p>
            </p>
        </div>
        <a href="#">去掉下划线的超链接</a>
        <div class = "box1">
            大河之水天上来!
        </div>
        <div class = "box2">
            Tomorrow have more lucky!
        </div>
    </p>
</body>
</html>