0013 认识css 文本的属性操作 a 标签属性

目录

0013 文本的属性操作

1.文本的属性 字体的倾斜，变粗，字体大小，字体家族，
2、文本字体颜色使用英文单词，16进制，rgb ，rgba 进行调节透明度。

1、字体的倾斜，变粗，字体大小，字体家族

1、字体样式

字体的倾斜，变粗，字体大小，字体家族
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .c1 {
        /*默认值*/
        font-style: normal;
        /*字库中的斜体*/
        /*font-style: italic;*/
        /*认为使字体倾斜*/
        /*font-style: oblique;*/
    }
  </style>
</head>
<body>
<div class="c1">字体倾斜</div>
</body>
</html>

2、字体粗细

  <style>
    .c1 {

        font-weight: 600;
    }
  </style>
</head>
<body>
<div class="c1">字体粗细</div>
</body>
</html>


normal 默认值
bold    粗体 值一般700

bolder   比父级标签更粗
lighter 比父级标签更细

3、字体大小

 font-size: 30px;
 
 使用像素值 px

4、字体族

 font-family: 新宋体;

2、文本字体颜色

  .c1 {
        /*color: yellow;*/  使用英文单词
        /*color: #41ff60;*/  ，16进制，
        /*color: RGB(125,144,44);*/   rgb 
        color: rgba(125,144,55,0.5); rgba 进行调节透明度。
        /*透明度设置的比例0.5*/
    }
    
rgb()

3、文本水平对齐 text-align

2.文本内容 显示  未占满一行的有center居中 右对齐和左对齐
              
.c1 {
 
        /*text-align: left;*/  默认向左对齐
        /*text-align: center;*/  中间对齐
        text-align: right;       向右对齐
    }
    

 多行文本  justify两端对齐，展示友好。

image-20230302230405489

4、宽高属性 背景属性

1、块级标签的特性

3.文本的宽高特性
块级标签有宽高的属性
内联标签没有宽高的属性， 


块级标签默认宽高时，宽高随着内容变化而变化， 
块级标签设置宽高时，内容将被限制在标签内。

1、行高属性

设置 块级标签的宽和高
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .c1 {
        /*标签的背景色的*/
        background-color: rebeccapurple;
        /*宽的长度*/
        width: 200px;
        /*高的长度*/
        height: 50px;

    }
  </style>
</head>
<body>

<div class="c1">宽  高</div>
</body>
</html>

image-20230302235152878

1.文本的行高属性 ，
文字的font_size 高度，                         影响的字体的高度
文字所占的文本框的高度line—height,文字和文本框之间上下有半行距。
                影响的文本框的大小，实际就是半行距的大小，半行距默认把文字放到文本中间的，所以文本框的高度等于 模型的高度，那么文本就可以垂直模型中间 

文本内容可以理解为顶线，中线，基线，和底线。

image-20230302232404492

需求：

把文本居中，并且垂直居中

div标签内的文本在div中设置水平居中center，垂直居中的话要和div标签的高度一致。

文字的高度没有变化，只是把上下的半行距变长了。

image-20230302234842047

文本属性操作 图片和文本对齐属性

文本和图片之间的对齐规则在同一行的情况下，vertical-align可以设置bottom，图片以文本的底线对齐，默认是基线对齐。
vertical-align: bottom; 对准的的底线
image-20230304175944382 
vertical-align: 可以在 手动调整文本的上下。
image-20230304180344692

文本属性操作 装饰属性 添加下划线

去除a标签显示的下划线 text-decoration 设置none 下滑线就消失了，underlin就是下划线的标识
text-decoration   在A标签下默认是underline 
                  赋值 none 取消下划线
image-20230304181118143
posted @ 2023-03-03 18:09  mmszxc  阅读(206)  评论(0)    收藏  举报