CSS文本样式(详解)

CSS文本样式

  • 文本颜色
  • 文本缩进
  • 文本对齐
  • 文本行高
  • 文本装饰

文本颜色

属性:color
作用:设置文本颜色
属性值:

颜色表示方式 表示含义 属性值
颜色名称 预定义的颜色名 red、green、blue…
RGB表示法 红绿蓝三原色,每项取值范围:0~255 rgb(0,0,0)、rgb(255,255,255)
RGBa表示法 红绿蓝三原色+a表示透明度,取值范围是0~1 rgba(255,255,255,0.5)、rgba(255,0,0,0.3)
十六进制表示法 以#开头,将数转换成十六进制表示 #000000、#ff0000、#e92322,简写:#000、#f00

代码测试:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        div{
            color: skyblue;	//英文定义
        }
        p{
            color: rgb(255 ,193, 203);	//RGB定义
        }
        span{
            color: #7FFFD4FF;	//十六进制
        }
    style>
head>
<body>
<span>将进酒span>
<div>人生得意须尽欢div>
<p>莫使金樽空对月p>
body>
html>

效果如下:
CSS文本样式(详解)_第1张图片

文本缩进

属性名:text-indent
作用:设置首行文本的缩进
语法:
text-indent:数字+px
text-indent:数字+em(1em代表一个字)
代码测试

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        div{
            text-indent: 2em;
        }
    style>
head>
<body>
<p>将进酒p>
<div>人生得意须尽欢div>
<p>莫使金樽空对月p>
body>
html>

效果如下
CSS文本样式(详解)_第2张图片

文本对齐

属性名:text-align

作用:用于设置文本的水平对齐方式

取值:

属性值 效果
left 文本左对齐
center 文本居中对齐
right 文本右对齐
justify 文本两端对齐

代码测试:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .a1{
            background-color: pink;
            text-align: center;
        }
        .a2{
            background-color: orange;
            text-align: left;
        }
        .a3{
            background-color: red;
            text-align: right;
        }
        .a4{
            background-color: #00d2d3;
            text-align: justify;
        }
    style>
head>
<body>
<p class="a1">文本水平居中对齐p>

<p class="a2">文本左对齐p>

<p class="a3">文本右对齐p>

<div class="a4">文本两端对齐,文本两端对齐,文本两端对齐div>

body>
html>

效果如下:
CSS文本样式(详解)_第3张图片

文本行高

属性名:line-height

作用:控制文本行与行之间的距离

取值:

描述
normal 默认。设置合理的行间距。
number 设置数字,此数字会与当前的字体尺寸相乘来设置行间距。
length 设置固定的行间距。
% 基于当前字体尺寸的百分比行间距。

代码测试:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
    .a1{
        background-color: pink;
        line-height: 36px;
    }
    .a2{
        background-color: #00d2d3;
        line-height: 360%;
    }
    style>
head>
<body>
<div>
    Java是一门面向对象的编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承、指针等概念,
    因此Java语言具有功能强大和简单易用两个特征。
    Java语言作为静态面向对象编程语言的代表,极好地实现了面向对象理论,允许程序员以优雅的思维方式进行复杂的编程。
div>
<div class="a1">
    Java是一门面向对象的编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承、指针等概念,
    因此Java语言具有功能强大和简单易用两个特征。
    Java语言作为静态面向对象编程语言的代表,极好地实现了面向对象理论,允许程序员以优雅的思维方式进行复杂的编程。
div>

<p>p>
<div>
    Java具有简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点。
    Java可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序等
    20世纪90年代,硬件领域出现了单片式计算机系统,这种价格低廉的系统一出现就立即引起了自动控制领域人员的注意,
    因为使用它可以大幅度提升消费类电子产品(如电视机顶盒、面包烤箱、移动电话等)的智能化程度。
div>
<div class="a2">Java具有简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点。
    Java可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序等
    20世纪90年代,硬件领域出现了单片式计算机系统,这种价格低廉的系统一出现就立即引起了自动控制领域人员的注意,
    因为使用它可以大幅度提升消费类电子产品(如电视机顶盒、面包烤箱、移动电话等)的智能化程度。
div>
body>
html>

效果如下:
CSS文本样式(详解)_第4张图片

文本装饰

属性名:text-decoration

作用:设置文本的装饰

取值:

属性值 效果
underline 下划线
line-through 删除线
overline 上划线
none 无装饰线

代码测试

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
    .a1{
        background-color: pink;
        text-decoration:underline ;
    }
    .a2{
        background-color: #00d2d3;
        text-decoration: line-through;
    }
    .a3{
        background-color: orange;
        text-decoration: overline;
    }
    .a4{
        background-color: fuchsia;
        text-decoration: none;
    }
    style>
head>
<body>
<p class="a1">下划线效果p>

<p class="a2">删除线效果p>

<p class="a3">上划线效果p>

<p class="a4">无装饰线p>
body>
html>

效果如下:
在这里插入图片描述
⭐最后⭐

欢迎点赞 收藏 ⭐留言评论 私信必回哟
博主将持续更新学习记录收获,友友们有任何问题可以在评论区留言

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