CSS的属性-文本属性

2023-12-16 14:42:27

font-style（字体样式风格）

属性值：
normal：设置字体样式为正体。默认值。 
italic：设置字体样式为斜体。这是选择字体库中的斜体字。
oblique：设置字体样式为斜体。人为的使文字倾斜，而不是去使用字体库的斜体字。

font-weight（字体粗细）

属性值：
normal：设置字体为正常字体。相当于数字值400
bold：设置字体为粗体。相当于数字值700。
bolder：设置字体为比父级元素字体更粗的字体。
lighter：设置字体为比父级元素字体更细的字体。
number：用数字表示字体粗细。从小到大，越来约粗，取值范围：100、200、300、400、500、600、700、800、900。
注意：
font-weight的常用值有两个normal和bold，其他的值在浏览器中的支持并不好。

font-size（字体大小）

font-size的值有很多，有xx-small、x-small、small、medium、large、x-large、xx-large、smaller和larger；
也可以设置值为具体的数值加上对应的计算单位来表示字体的大小：
1.字体单位有像素（ px ），如：100px
2.字符（ em，默认1em等于16px，2em等于32px，根据不同浏览器的默认字体大小而决定 ）
3.百分比（ % ）
4.磅[点]（ pt ）。
字体不指定大小时，主流浏览器默认是15像素到16像素。旧版本的谷歌浏览器，字体最小只能设置成12像素，新版已经修复。

font-family（字体族）

font-family可以指定元素使用的字体系列或字体族。
当我们使用font-family指定字体族的时候，可以指定多种字体,作为候补。指定多个字体的时候，需要使用逗号隔开。
如果css中没有声明当前内容使用的字体族的时候，默认：
	中文：  宋体 [ win7以后默认是 微软雅黑 ]
	英文：  Arial

color（字体颜色）

可以使用color来表示字体的颜色，颜色值最常用的有三种形式，英文单词，十六进制，RGB十进制。
更高级的有 RGBA、HSL、HSLA，不过低版本的浏览器并不支持。
 <style>
        .c1{
            color: red;
        }
        .c1{
            color: #369;
        }
        .c1{
            color: RGB(0,0,255);
        }
</style>
另外要注意，使用十六进制表示颜色值的时候，如果字符的格式类似于“AAAAAA”的这种，六个字符一样的；
又或者是“AABBCC”，这种，一二，三四，五六 位置上的数字一样的，我们可以使用简写来表达，如：#369

text-align（文本对齐方式）

text-align属性可以设置文本内容的水平对齐方式。
属性值常用的有：
left:左对齐
center:居中对齐
right:右对齐
justify:实现两端对齐文本效果

line-height（字体行高）

字体行高即字体最底端与字体内部顶端之间的距离。值可以是normal、px、number、%。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c2{
            /*div宽度 */
            width: 500px;
            /*div高度*/
            height: 100px;
            /*div背景颜色*/
            background-color: lightskyblue;
            /*按宽度居中显示*/
            text-align: center;
            /*行高，如果要按照高度的居中显示则和高度一样*/
            line-height: 30px;
        }
    </style>
</head>
<body>
<div class="c2">hello</div>
</body>
</html>

vertical-align：设置元素的垂直对其方式（图标和文本的对齐方式）

例如：，y显示在图片的下面了，图片没有按照y的底线对齐，按照基线对齐的，这时需要设置图片按照底线对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            /*默认是按照baseline对齐,对齐的是基线,bottom按照底线对齐*/
            /*vertical-align: baseline;*/
            /*vertical-align: bottom;*/
            /*也可以按照像素对齐（可在浏览器中定位后调整图片像素）*/
            vertical-align: -1px;
        }
    </style>
</head>
<body>
<img src="https://img1.baidu.com/it/u=1942785284,3981334212&fm=15&fmt=auto" alt=""><span>yuan</span>
</body>
</html>

text-decoration

使用text-decoration可以设置文本内容的装饰线条，正常的文本是没有线条的，常用的值有none，underline，overline，line-through四种。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
            /*去掉线条*/
            text-decoration: none;
        }

        span{
            /*添加上线条*/
            text-decoration: underline;
        }
    </style>
</head>
<body>
<!--默认有下面有线条-->
<a href="">click</a>
<!--默认下面没有线条-->
<span>click</span>
</body>
</html>

码农公寓

相关文章