CSS字体，文本修饰属性，盒子

7_35Durant

已于 2024-05-05 13:25:57 修改

阅读量742

点赞数 20

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

于 2024-04-30 15:53:16 首次发布

本文链接：https://blog.csdn.net/Kevin7_35Durant/article/details/138337758

版权

HTML+CSS 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

text-decoration（文本修饰线）

color（颜色）

盒子属性

background-color （背景颜色）

width,height（宽度，高度）

字体修饰属性

font-size （字体大小）

作用：设置字体大小属性值可以写数字后面的单位是px(pixel)，可以省略掉单位，也可以直接用关键字

默认文本是16px

   font-size: large;

font-size: 50;

font-weight（字体粗细）

作用：改变字体粗细，属性值为数字，或宏定义

 font-weight:lighter;

font-weight:500;

font-style（字体倾斜）

作用：改变文本的倾斜程度，默认文本是不倾斜的，属性值是关键字

 font-style:italic;

font-family（字体）

作用：换字体格式，例如宋体，楷体，默认字体使微软雅黑

font-family:楷体;

line-height （行高）

行高指的是从一行文字的最高处(最低处)到下一行文字的最高处（最低处）

作用：设置多行文本的间距,属性值可以用数字，数字表示的是当前font-size的属性值倍数，可以加上单位px,这样就是像素点距离，也可以用关键字

<html>
    <head>
        <title>网页标题</title>
        <style>
            .line-height{
              line-height: normal;
            }
        </style>
    </head>
    <body>

       <p class="line-height">生活中那一缕缕阳光作文600字

        　　天有不测风云，人有旦夕祸福。我出生不到6岁的时候，父母离异。这对于我犹如晴天霹雳，感觉自己就像一张秋日飘零的枯叶。
        
        　　父母离异后我就没看见过妈妈，父亲也长年漂泊在外。看着其他小孩倚在父母的怀抱，我好羡慕。夜里醒来躺在冰凉的床上，伤心的眼泪无数次打湿了枕头，那时我觉得我是天底下的最伤心的人。
        
        　　命运还是给了我希望，我伤心未尽，幸福又悄悄降临我的身上。
        
        　　父母离异不到两月，慈祥的姑父母收留了我。他们待我像自己的孩子一样，天气寒冷的时候，为我买新衣服；在我伤心的时候，他们把我呵护在怀里。是他们用慈祥和爱为我苦难的人生搭起了幸福的港湾。
        
        　　在两位老人的关怀下，我顺利地考上初中。手里捧着入学录取通知书的我满心欢喜，可看着劳累的姑父母我又犹豫了，我产生了不想读书的念头。姑父姑母知道后，对我推心置腹的开导，让我明白了读书的重要；并语重心长地宽心我，叫我不要担心。就这样我坐在了初中明亮的教室。
        
        　　初中虽然不收学费，但是生活的费用较高。没有什么手艺，也没什么赚钱的方法的姑父姑母，只能以勤劳来换钱。送几个表弟妹已让姑父姑母吃力了，我上初中无疑加重他们的负担。</p>
     </body>
 </html>

不设置文本之间的间距，会使得文本非常拥挤

  <style>
            .line-height{
              line-height: 3;
            }
        </style>

当我们给文本间距调制为3 ，这样文本就会显得比较美观

文本垂直居中

技巧：使盒子的行高等于高度即可

<html>
    <head>
        <title>网页标题</title>
        <style>
            .line-height{
              height: 200;
              font-size:40px;
              line-height: 200px;
              background-color: red;
            }
        </style>
    </head>
    <body>

       <div class="line-height">hello world</div>
     </body>
 </html>

font（复合属性）

font拥有font-style,font-weight,font-size,line-height,font-family

格式：font:是否倾斜是否加粗字号px/行高字体（必须按顺序书写）

  font:italic  700  40px/3  楷体;

text-indent（文本缩进）

作用：使文本首行缩进

属性值：数字+px , 数字+em(当前字体的大小)

text-indent:2em

text-align（文本对齐方式）

作用：控制内容水平对齐方式

属性值：left（左对齐）默认是左对齐

right （右对齐）

center （居中）

text-align:center

text-decoration（文本修饰线）

作用：给文本加些修饰线条

属性值：underline （下划线）

line-through（删除线）

overline（上划线）

text-decoration:underline

color（颜色）

作用：设置字体颜色，

属性值：属性值可以写颜色的英文，

十六进制来显示

rgb:rgb(red,green,blue)rgb有3个参数，红色，绿色，蓝色，每个参数的范围在0~255，也就是红蓝绿的颜色深度，由浅到深，所以rgb可以表示的颜色有 $256^{3}$ 个颜色

rgba:rgba(red,green,blue,0~1)，rgb的升级版，第四个参数是透明状态，可以用来表现颜色的透明状态

color:red;

 color: #ff000f;

color:rgb(255,0,0);

 color:rgba(255,0,0,0.3);

盒子属性

background-color （背景颜色）

作用：设置元素背景颜色

跟color的操作一模一样

width,height（宽度，高度）

width和height分别表示设置元素的宽度和高度

<html>
    <head>
        <title>网页标题</title>
        <style>
            .box-yellow{
                background-color: rgb(0,47,167);
                height: 100;
                width: 200;
            }
        </style>
    </head>
    <body>

       <div class="box-yellow">man</div>
     </body>
 </html>