CSS文字属性

最新推荐文章于 2024-10-02 15:35:50 发布

救救孩子吧8༼⍤༽

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量51

点赞数

分类专栏： html+css学习文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_49553751/article/details/132873315

版权

html+css学习专栏收录该内容

44 篇文章 0 订阅

订阅专栏

字体大小：font-size

属性名：font-size
属性名：文字尺寸，PC端网页最常用的单位px

字体粗细：font-weight

属性名：font-weight
属性值

数字（开发使用）

正常：400

加粗：700

关键字

正常：normal

加粗：bold

字体倾斜:font-style

作用：清除文字默认倾斜效果
属性名：font-style
属性值

正常（不倾斜）：normal

倾斜：italic

行高：line-height

作用：设置多行文本的间距
属性名：line-height
属性值：

数字+px

数字（当前标签font-size属性值的倍数）

行高：上间距+文本高度+下间距（一行文字的最顶端到下一行文字的最顶端）

行高-垂直居中

垂直居中技巧：行高属性值等于盒子的高度属性值

注意事项：只适用于单行文字

文字的字体

属性名：font-family
属性值：字体名
拓展（了解）：

font-family属性值可以书写多个字体名，各个字体名称用逗号隔开，执行顺序是从左向右依次查找

font-family属性最后设置一个字体族民，网页开发建议使用无衬线字体

font-family: 'Hiragino Sans GB','\5b8b\4f53',sans-serif;(京东或者淘宝网站寻找)

font复合属性

使用场景：设置网页文字公共样式
复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开
font:是否倾斜是否加粗字号/行高字体（必须按顺序书写）
注意：字号和字体值必须书写，否则font属性不生效

文本缩进：text-indent

属性名：text-indent
属性值：

数字+px

数字+em(推荐：1em=当前标签的字号大小)

文本对齐：text-align

作用：控制内容水平对齐方式（居中的是内容不是标签）

属性名：text-align

属性值：

left:左对齐（默认）
center:居中对齐（最常用）
right:右对齐

文字修饰线:text-decoration

属性名：text-decoration
属性值：

none:无

underline:下划线

line-through:删除线

overline:上划线

文字颜色：color

属性名：color
属性值：

颜色关键字：颜色英文单词

rgb表示法：rgb(r,g,b),r,g,b表示红绿蓝三原色，取值：0-255

rgba表示法：rgba(r,g,b,a),a表示透明度，取值0-1

十六进制表示法：#RRGGBB,#000000,#ffcc00,简写：#000，#fc0

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 经验：谷歌浏览器文字有默认大小16px */
        p{
            /* font-size属性必须有单位 */
            font-size: 15px;
            /* 颜色  十六进制的写法 */
            /* 可以简写为#00f */
            color:#0000ff ;
        }
        /* 去掉加粗效果 */
        h3{
            font-weight: 400;
            /* 左对齐 */
            text-align: left;
            /* 颜色 */
            color: red;
        }
        h4{
            /* 居中对齐 */
            text-align: center;
            /* 颜色  rgb表示法*/
            color: rgb(0,255,255);

        }
        h5{
            /* 右对齐 */
            text-align: right;
            background-color: azure;
            /* 颜色  rgba表示法 */
            color: rgba(0, 0, 0, 0.1);
        }
        /* 加上加粗效果 */
        .bold{
            font-weight: 700;
        }
        /* 清除倾斜效果 */
        em{
            font-style: normal;
        }
        /* 增加倾斜效果 */
        .em{
            font-style: italic;
        }
        /* 调节上下两行文字的间距 */
        .line-height{
            /* 方法一 */
            /* line-height: 30px; */
            /* 方法二：2:表示当前文字大小的2倍 */
            line-height: 2;
            /* 首行缩进 */
            text-indent: 2em;
        }
        .ro-center{
            height: 100px;
            background-color:blueviolet;
            /* 垂直居中：line-height属性值等于盒子高度 */
            line-height: 100px;
        }
        /* 修改字体 */
        .family{
            font-family: 楷体;
            font-size: 30px;
        }
        .font{
            /* 文字倾斜 文字加粗 字体大小是30px/行高2倍 楷体 */
            font: italic 700 30px/2 楷体;
            /* font: 30px 楷体; */
            /*font属性必须写字号和字体,否则属性不生效  */
            /* font: italic 700 30px/2 ; */
        }
        .img-weizhi{
            text-align: center;
        }
        a{
            /* 无,去掉下划线 */
            text-decoration: none;
        }
        .xiahuaxian{
            /* 添加下划线 */
            text-decoration: underline;
        }
        .delet{
            /* 添加删除线 */
            text-decoration: line-through;
        }
        span{
            /* 添加顶划线 */
            text-decoration: overline;
        }
    </style>
</head>
<body>
    <p>测试字体大小</p>
    <div>默认字体大小</div>
    <h3>h3标签</h3>
    <h4>h4标签</h4>
    <h5>h5标签</h5>
    <div class="bold">这是div标签</div>
    <em>这是em标签</em>
    <div class="em">这是div标签</div>
    <p class="line-height">海绵宝宝原名海绵鲍勃，出生于1986年7月14日，是这部动画的主角，他是由海洋生物学家和
       <br> 动画师海伦·伯格设计，原配音汤姆·肯尼。海绵宝宝生活在太平洋海底一座被称为比基尼海滩的水
      <br> 下城市的一个菠萝屋里，是一个快乐、天真、善良、热爱生活、充满活力、乐于助人的海绵，但有时
     <br> 也因 为好奇和贪玩闯祸。他以一名厨师的身份在蟹堡王工作，他做蟹黄堡非常熟练。海绵宝宝有时的天
    <br> 马行空也让别人很烦恼(特别是他身边的章鱼哥)。婴儿时期就和派大星是好友，从小和派大星一起成长，
   <br> 有爷爷奶奶，父母和亲戚等等的家庭成员。自己也会生病和衰老，感冒时皮肤会变色和喷出很多气泡。</p>
   <div class="ro-center">垂直居中</div>
   <div class="family">调节字体</div>
   <div class="font">font复合属性</div>
   <div class="img-weizhi">
     <img src="./imgs/dog.gif" alt="">
   </div>
   <a href="#">a标签,删除下划线</a>
   <p class="xiahuaxian">p标签,添加下划线</p>
   <div class="delet">div标签,添加删除线</div>
   <span>span标签,添加顶划线</span>

</body>
</html>