css属性小结之文本

css属性小结之文本

(1)用text-decoration设置文本修饰线

要对文本增加一些装饰性的效果,可以使用元素的text-decoration属性,该属性的值有:underline、 overline、line-through 、none;分别对应:下划线、上划线、删除线和去除装饰。

演示效果

(a).设置文本下划线:

" text-decoration:underline">使用text-decoration设置文本下划线演示效果

对应效果:
在这里插入图片描述

(b).设置文本上划线:

" text-decoration:overline">使用text-decoration设置文本上划线演示效果

对应效果:
css属性小结之文本_第1张图片

©.设置文本删除线:

" text-decoration:line-through">使用text-decoration设置删除线演示效果

对应效果:
在这里插入图片描述

(d).取消文本装饰:

"#" style=" text-decoration:none">取消文本装饰演示效果

对应效果:
css属性小结之文本_第2张图片

注:演示为使用“text-decoration:none”去除了超链接的默认下划线;字体颜色仍然为默认蓝色,若修改此字体颜色则需使用 " color "属性;详细说明见另一篇博客:css属性之字体

(2)text-align 设置文本对齐方式(水平)

text-align属性用来设置文本在水平方向*的对齐方式,属性的值分别为:“left”,“center”,“right”,“justify”


<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">
   <title>css属性之文本演示title>
   <style type="text/css">
       body {
      
          border: 1px solid orange;
           width: 400px;
       }
       #text1 {
      
           text-align: center;
       }

       #text2 {
      
           text-align: left;
       }

       #text3 {
      
           text-align: right;
       }

       #text4 {
      
           width: 100px;
           text-align: justify;
       }
   style>
head>
<body>
<div id="text1">文本居中对齐 div>
<div id="text2">文本左对齐(默认效果) div>
<div id="text3">文本右对齐 div>
<div id="text4">There are moments in life when you miss someone so much that you just want div>
<div id="text4">当 text-align 属性设置为 "justify" 后,将拉伸每一行,以使每一行具有相等的宽度(中文无效果)div>
body>

html>

css属性小结之文本_第3张图片

(3)text-indent 属性设置段落首行缩进

text-indent 属性用于指定段落第一行的缩进**,属性的数值单位一般使用px或em,em 表示字体的高度**,对中文来说,文字的宽度和高度相同,即首行缩进两个字符:


<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">
    <title>css属性之文本演示title>
    <style type="text/css">
        body {
      
           border: 1px solid orange;
            width: 400px;
        }

        #text1 {
      
           text-indent: 2em;
        }

        #text2 {
      
           text-indent: 18px;
        }
        
    style>
head>

<body>
    <p> text-indent: 2em效果演示:p>
    <div id="text1">      
        人之初,性本善。性相近,习相远。
        苟不教,性乃迁。教之道,贵以专。
        昔孟母,择邻处。子不学,断机杼。
        窦燕山,有义方。教五子,名俱扬。
        养不教,父之过。教不严,师之惰。
        子不学,非所宜。幼不学,老何为。
        玉不琢,不成器。人不学,不知义。
        为人子,方少时。亲师友,习礼仪。
        香九龄,能温席。孝于亲,所当执。div>
        <hr>
        <p> text-indent: 18px 效果演示:p>
        <div id="text2">
            人之初,性本善。性相近,习相远。
            苟不教,性乃迁。教之道,贵以专。
            昔孟母,择邻处。子不学,断机杼。
            窦燕山,有义方。教五子,名俱扬。
            养不教,父之过。教不严,师之惰。
            子不学,非所宜。幼不学,老何为。
            玉不琢,不成器。人不学,不知义。
            为人子,方少时。亲师友,习礼仪。
            香九龄,能温席。孝于亲,所当执。div>
body>

html>

css属性小结之文本_第4张图片

(4)line-height属性设置文本行高

line-height属性用来指定文本行与行之间的间距,即设置文本的行高,属性的值一般有两种方式:px或倍数。注:倍数是当前文本的font-size为基准放缩。

html




    
    
    
    css属性之文本演示
    



    
    
line-height: 2;效果演示:
人之初,性本善。性相近,习相远。 苟不教,性乃迁。教之道,贵以专。 昔孟母,择邻处。子不学,断机杼。 窦燕山,有义方。教五子,名俱扬。 养不教,父之过。教不严,师之惰。 子不学,非所宜。幼不学,老何为。 玉不琢,不成器。人不学,不知义。 为人子,方少时。亲师友,习礼仪。 香九龄,能温席。孝于亲,所当执。

line-height: 18px 效果演示:
人之初,性本善。性相近,习相远。 苟不教,性乃迁。教之道,贵以专。 昔孟母,择邻处。子不学,断机杼。 窦燕山,有义方。教五子,名俱扬。 养不教,父之过。教不严,师之惰。 子不学,非所宜。幼不学,老何为。 玉不琢,不成器。人不学,不知义。 为人子,方少时。亲师友,习礼仪。 香九龄,能温席。孝于亲,所当执。

css属性小结之文本_第5张图片

你可能感兴趣的:(前端学习,css)