前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >4.文本样式-CSS基础

4.文本样式-CSS基础

作者头像
见贤思齊
发布2020-10-28 15:05:46
1.3K0
发布2020-10-28 15:05:46
举报
文章被收录于专栏:初见Linux

在前端开发中,对于外观控制一般用CSS来实现的,而不是用标签来实现,这更加符合结构和样式分离的原则,提高可读性和可维护性

一、文本样式

字体样式:注重个体,针对的是文字本身效果文本样式:注重整体,针对的是整个段落的排版效果。 在CSS中,使用font和text两个前缀来区分这两类样式。

1.常用的文本样式属性

属性

说明

text-indent

首行缩进

text-align

水平对齐

text-decoration

文本修饰

text-transform

大小写

line-height

行高

letter-spacing、word-spacing

字母间距、词间距

二、text-indent(首行缩进)

p元素首行不会缩进,因此在HTML中需要使用4个&nbsp来实现首行缩进2个字符的空格,但这样使得代码冗余。

1.语法格式

代码语言:javascript
复制
<style type="text/css">
    选择器{
        text-indent:像素值;
    }
</style>
(1)说明

上面语法中属性值选用的是像素值,其实还可以使用其它CSS单位,如:%、em、rem。详见01-CSS基础-CSS进阶.md

(2)小技巧

中文段落首行需缩进2个字符,要实现这个效果text-indent值应是font-size值的2倍

三、text-align(水平对齐)

CSS中,可以使用text-align属性来控制文本在水平方向上的对齐方式

1.语法格式

代码语言:javascript
复制
<style type="text/css">
    选择器{
        text-align:取值; 
    }
</style>
(1)属性值

属性值

说明

left

左对齐(默认值)

center

居中对齐

right

右对齐

① 实际开发

在实际开发中,只会用到center这一个,其它的几乎用不上。

(2)对图片有效

text-align属性不仅对文本有效,对图片(img)同样有效。

四、text-decoration(文本修饰)

CSS中,可以使用text-decoration属性来定义文本的修饰效果(下划线、中划线、顶划线)

1.语法格式

代码语言:javascript
复制
<style type="text/css">
    选择器{
        text-decoration:取值; 
    }
</style>
(1)属性值

属性值

说明

none

去除所有的划线效果(默认值)

underline

下划线

line-through

中划线

overline

顶划线

① 实际开发

HTML中,我们可以使用s元素实现中划线,使用u元素实现下划线。但在实际开发中,我们是通过CSS中的text-align属性来实现的。 这是因为,在前端开发中,对于外观控制一般用CSS来实现的,而不是用标签来实现,这更加符合结构和样式分离的原则,提高可读性和可维护性

2.超链接的下划线

在之前HTML学习中,我们知道超链接a元素默认样式有下划线。

(1)实际开发

在实际开发中,超链接的默认下划线是要去掉的使用text-decoration:none;去除a元素的下划线,在开发中会被大量使用

① text-decoration:none;(去掉下划线)
代码语言:javascript
复制
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>文本样式</title>
        <style type="text/css">
            a{
                text-decoration: none;  /*文本修饰:去掉所有的划线效果*/
            }
        </style>
    </head>
    <body>
        <a href="https://www.jianshu.com/">简书</a>
    </body>
</html>

文本修饰-去掉下划线.png

3.三种划线的用途

(1)下划线

用于强调文章中的重点。

(2)上划线

常出现在电商网站中,用于促销。

(3)顶划线

不常用,了解即可。

五、text-transform(大小写)

CSS中,可以使用text-transform属性来将文本进行大小写转换text-transform属性是针对英文而言,因为中文不存在大小写之分。

1.语法格式

代码语言:javascript
复制
<style type="text/css">
    选择器{
        text-transform:取值; 
    }
</style>
(1)属性值

属性值

说明

none

无转换(默认值)

uppercase

转换为大写

lowercase

转换为小写

capitalize

只将每个英文单词首字母转换为大写

六、line-height(行高)

CSS中,可以使用line-height属性来控制每行文本的高度

注意:

行高和行间距是两个不同的东西,千万不要弄混淆了,行高指一行的高度;行间距指两行文本之间的距离

1.语法格式

代码语言:javascript
复制
<style type="text/css">
  选择器{
        line-height:像素值; 
    }
</style>
(1)示例
① 例1
代码语言:javascript
复制
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>文本样式</title>
        <style type="text/css">
            #p1{
                line-height: 12px;  /*行高*/
            }
            #p2{
                line-height: 18px;  /*行高*/
            }
            #p3{
                line-height: 47px;  /*行高*/
            }
        </style>
    </head>
    <body>
        <h3>蝶恋花·庭院深深深几许</h3>
        <h4>宋·欧阳修</h4>
        
        <p id="p1">庭院深深深几许,杨柳堆烟,帘幕无重数。玉勒雕鞍游冶处,楼高不见章台路。
            雨横风狂三月暮,门掩黄昏,无计留春住。泪眼问花花不语,乱红飞过秋千去。
        </p>
        
        <p id="p2">庭院深深深几许,杨柳堆烟,帘幕无重数。玉勒雕鞍游冶处,楼高不见章台路。
            雨横风狂三月暮,门掩黄昏,无计留春住。泪眼问花花不语,乱红飞过秋千去。
        </p>
        
        <p id="p3">庭院深深深几许,杨柳堆烟,帘幕无重数。玉勒雕鞍游冶处,楼高不见章台路。
            雨横风狂三月暮,门掩黄昏,无计留春住。泪眼问花花不语,乱红飞过秋千去。
        </p>
    </body>
</html>

行高示例1.png

七、letter-spacing、word-spacing(间距)

1.字间距

CSS中,可以使用letter-spacing属性来调整两个字之间的距离

1.语法格式

代码语言:javascript
复制
<style type="text/css">
    选择器{
        letter-spacing:像素值; 
    }
</style>
(1)说明

letter-spacing就是字母间距,或者说每一个汉字之间的距离

(2)示例
代码语言:javascript
复制
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>文本样式</title>
        <style type="text/css">
            #p1{
                letter-spacing: 0px;    /*字间距*/
            }
            #p2{
                letter-spacing: 6px;    /*字间距*/
            }
            #p3{
                letter-spacing: 9px;    /*字间距*/
            }
        </style>
    </head>
    <body>
        
        <p id="p1">
            我对你有何止是执迷不悟,眼泪偶尔会莫名的光顾,所以会忙忙碌碌将爱麻木,可突然会想起了全部。
        </p>
        
        <p id="p2">
            我对你有何止是执迷不悟,眼泪偶尔会莫名的光顾,所以会忙忙碌碌将爱麻木,可突然会想起了全部。
        </p>
        
        <p id="p3">
            我对你有何止是执迷不悟,眼泪偶尔会莫名的光顾,所以会忙忙碌碌将爱麻木,可突然会想起了全部。
        </p>
    </body>
</html>

字间距示例1.png

2.词间距

CSS中,可以使用word-spacing属性来定义两个单词之间的距离

1.语法格式

代码语言:javascript
复制
<style type="text/css">
    选择器{
         word-spacing:像素值; 
    }
</style>
(1)说明

word-spacing就是英文单词之间的距离,所以只针对英文单词而言。

(2)示例
代码语言:javascript
复制
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>文本样式</title>
        <style type="text/css">
            #p1{
                word-spacing: 0px;  /*词间距*/
            }
            #p2{
                word-spacing: 6px;  /*词间距*/
            }
            #p3{
                word-spacing: 9px;  /*词间距*/
            }
        </style>
    </head>
    <body>
        
        <p id="p1">
            If you want to wear a crown, you must bear its weight; if you want to hold a rose, you must bear its wound.
            欲戴王冠,必承其重;欲握玫瑰,必承其伤。
        </p>
        
        <p id="p2">
            If you want to wear a crown, you must bear its weight; if you want to hold a rose, you must bear its wound.
            欲戴王冠,必承其重;欲握玫瑰,必承其伤。
        </p>
        
        <p id="p3">
            If you want to wear a crown, you must bear its weight; if you want to hold a rose, you must bear its wound.
            欲戴王冠,必承其重;欲握玫瑰,必承其伤。
        </p>
    </body>
</html>

词间距示例1.png

3.实际开发

在实际开发中,很少去定义中文网页中的字间距以及词间距。 letter-spacing、word-spacing只会用于英文网页,在平常几乎用不上,了解即可。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、文本样式
    • 1.常用的文本样式属性
    • 二、text-indent(首行缩进)
      • 1.语法格式
        • (1)说明
        • (2)小技巧
    • 三、text-align(水平对齐)
      • 1.语法格式
        • (1)属性值
        • (2)对图片有效
    • 四、text-decoration(文本修饰)
      • 1.语法格式
        • (1)属性值
      • 2.超链接的下划线
        • (1)实际开发
      • 3.三种划线的用途
        • (1)下划线
        • (2)上划线
        • (3)顶划线
    • 五、text-transform(大小写)
      • 1.语法格式
        • (1)属性值
    • 六、line-height(行高)
      • 1.语法格式
        • (1)示例
    • 七、letter-spacing、word-spacing(间距)
      • 1.字间距
        • 1.语法格式
          • (1)说明
          • (2)示例
        • 2.词间距
          • 1.语法格式
            • (1)说明
            • (2)示例
          • 3.实际开发
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档