css文本操作基础知识教程_操作小白攻略

1.文本对齐方式(水平方向) text-align这个属性能控制标签内文本的对齐方式,还能控制子元素中行内元素和行内块级元素的对齐方式(水平方向)它有三个值:left:左对齐(默认)center:居中对齐right:右对齐
div的文本子元素span<div

css文本操作基础知识教程

1.文本对齐方式(水平方向) text-align

这个属性能控制标签内文本的对齐方式,还能控制子元素中行内元素和行内块级元素的对齐方式(水平方向)

css文本操作基础知识教程_操作小白攻略

它有三个值:

<!DOCTYPE html>
<html>
    
    <body>
        <div>
            div的文本
            <psan>子元素span</psan>
        </div>
        <div>
            div的文本
            <psan>子元素span</psan>
        </div>
    </body>
</html>

css文本操作基础知识教程_操作小白攻略

这个属性会被子元素继承

2.文本缩进 text-indent

用于定义块级元素中第一个内容行的缩进,默认为0

这个属性对于标签内的文本和行内元素,行内块级元素都有效

<!DOCTYPE html>
<html>
    
    <body>
        <div>默认文本</div>
        <div>缩进50px的文本</div>
        <div>
            <span>默认的子元素span</span>
        </div>
        <div>
            <span>缩进50px的子元素span</span>
        </div>
    </body>
</html>

css文本操作基础知识教程_操作小白攻略
这个属性会被他的子元素继承(如果子元素是行内块级元素,会缩进2次)

<div>
       <div>子元素div的文本</div>
</div>
<div>
        <span>子元素(行内块级元素)的文本</span>
</div>

css文本操作基础知识教程_操作小白攻略

3.文本修饰 text-decoration

这个属性可能的值为:

<div>默认无修饰</div>
<div>underline 下划线</div>
<div>overline 上划线</div>
<div>line-through 删除线</div>
<div>blink</div>

css文本操作基础知识教程_操作小白攻略

4.字符间距和字间距 letter-spacing/word-spacing

letter-spacing控制的是单个字符件的间距(包括汉字),而word-spacing控制的是单词的间距(对汉字无效)

<div>this is a good day(默认)</div>
<div>this is a good day</div>
<div>你好世界</div>
<div>this is a good day</div>
<div>你好世界</div>

css文本操作基础知识教程_操作小白攻略

5.文本方向 direction

direction 有2个值:

但是这个属性并不指的是文本方向,只是有些时候它类似于text-align

<div>你好世界(默认)</div>
<div>direction:rtl</div>
<div>text-align: right</div>

css文本操作基础知识教程_操作小白攻略

严格的说它控制的是子元素间的排列顺序(当然这些子元素不能是块级元素)

<!DOCTYPE html>
<html>
    
    <body>
        <div>你好世界(默认)</div>
        <div>
            <span>1</span>
            <span>2</span>
            <span>3</span>
        </div>
        <div>
            <span>1</span>
            <span>2</span>
            <span>3</span>
        </div>
    </body>
</html>

css文本操作基础知识教程_操作小白攻略

6.控制文本的大小写 text-transform 属性

text-transform 属性有4个值:

<div>hello world</div>
<div>hello world</div>
<div>hello world</div>
<div>hello world</div>

css文本操作基础知识教程_操作小白攻略

7.处理空白和文本换行 white-space

white-space控制空白字符的显示,同时还能控制是否自动换行

white-space有以下几个值:

海计划公众号
(0)
上一篇 2020/03/26 23:28
下一篇 2020/03/26 23:28

您可能感兴趣的内容

  • 前端常用框架优缺点总结菜鸟指南_框架菜鸟教程网

    JQueryJQuery是一个优秀的javascript框架 JQuery宗旨是Write Less Do More JQuery是轻量级的js库特点轻量级的Javascript框架丰富的DOM选择器链式表达式支持事件、样式、动画支持Ajax操作跨浏览器兼容插件扩展开发(丰富的第三方插件)可扩展性强(提供扩展接口)优点实现脚本与页面分离最少的代码做最多的事情

    2020/03/20
  • MySQL逻辑架构简介菜鸟指南_架构使用指南

    最近在看《高性能MySQL》一书,并做了笔记,整理成博客,分享出来:一、逻辑结构简介Mysql服务器逻辑架构图,图来自《高性能MySQL》一书:第一层结构主要处理客户端与mysql服务端的连接、授权认证、安全等;第二层是Mysql服务端的核心,功能包括查询解析、分析、优化、缓存等,存储过程、触发器、视图等都在这一层实现;第三层的存储引擎主要负责数据存储和提取

    2020/03/26
  • Vue 的数据响应式(Vue2 及 Vue3)小白常识_vue3小白攻略

    什么是数据响应式从一开始使用 Vue 时,对于之前的 jq 开发而言,一个很大的区别就是基本不用手动操作 dom,data 中声明的数据状态改变后会自动重新渲染相关的 dom。换句话说就是 Vue 自己知道哪个数据状态发生了变化及哪里有用到这个数据需要随之修改。因此实现数据响应式有两个重点问题:如何知道数据发生了变化?如何知道数据变化后哪里需要修改?对于第一

    2020/03/22
  • smallpdf新手入门_PDF格式的在线转换工具

    smallpdf新手入门 官方网址:https://smallpdf.com/ 简介描述:PDF格式的在线转换工具 Smallpdf是专门解决PDF格式的在线工具,提供一站式轻PD…

    2020/03/06
  • Metro UI入门基础基于平板界面设计CSS库是一种界面展示技术

    Metro UI教程视频 官方网址:https://metroui.org.ua/ GitHub:https://github.com/olton/Metro-UI-CSS 简介描…

    2020/03/06
  • node.js如何删除注册表?小白知识_node小白基础

    注册表是windows操作系统中的一个核心数据库,其中存放着各种参数,直接控制着windows的启动、硬件驱动程序的装载以及一些windows应用程序的运行,从而在整个系统中起着核心作用。这些作用包括了软、硬件的相关配置和状态信息,比如注册表中保存有应用程序和资源管理器外壳的初始条件、首选项和卸载数据等,联网计算机的整个系统的设置和各种许可,文件扩展名与应用

    2020/03/24
  • css中mm单位是什么?基础指南_单位入门指南

    mm代表毫米(Millimeter),又称公厘(或公釐),是长度单位和降雨量单位。1mm相当于1m的一千分之一(此即为毫的字义).10毫米相当于1厘米,100毫米相当于1分米,1000毫米相当于1米。在CSS中,mm(毫米)代表一个绝对长度单位,1in = 2.54cm = 25.4 mm = 72pt = 6pc。在CSS中,度量单位分为两种:相对单位:p

    2020/03/20
  • JS DOM元素使用帮助_dom小白知识

    DOM 文档对象模型js有如下功能JavaScript 能够改变页面中的所有 HTML 元素JavaScript 能够改变页面中的所有 HTML 属性JavaScript 能够改变页面中的所有 CSS 样式JavaScript 能够对页面中的所有事件做出反应(JS只能操作行内样式,不能操作内嵌样式和外部样式)如何查找HTML元素1:通过ID查找元素,如果找到

    2020/03/26
  • ngxin常用配置–nginx之proxy指南教程pass代理后端https请求完全解析_ngxin小白基础

    前提条件nginx源码或nginx plus源码一个代理服务器或一个代理服务器组SSL证书和私钥获取SSL服务器证书你可以从一个可信任证书颁发机构(CA)购买一个服务器证书,或者你可以使用openssl库创建一个内部CA签名,并且给自己颁发证书。这个服务器端证书和私钥需要部署在后端的每一个服务器上。你还需要在后端服务器上配置好所有的来源SSL连接都需要客户端

    2020/04/03
  • 纯CSS3实现各种表情动画小白指南_动画基础知识入门

    CSS3非常强大,我们可以利用CSS3相关特性绘制很多平面图形,并且可以制作很多简单的动画。今天要分享的是一款用纯CSS3实现的可爱表情动画,一共有7组表情动画。效果如下: 代码如下:

    body {text-align: cen

    2020/04/03
  • timer.jquery基础指南_jQuery计时器插件

    timer.jquery基础指南 官方网址:https://jquerytimer.com GitHub:https://github.com/walmik/timer.jquer…

    2020/03/11
  • Vue组件的三种调用方式使用教程_Vue使用攻略

    之前在写fj-service-system的时候,遇到了一些问题。那就是我有些组件,比如Dialog、Message这样的组件,是引入三方组件库,比如element-ui这样的,还是自己实现一个?虽然它们有按需引入的功能,但是整体风格和我的整个系统不搭。于是就可以考虑自己手动实现这些简单的组件了。通常我们看Vue的一些文章的时候,我们能看到的通常是讲Vue单

    2020/04/05
  • 自学编程的朋友,我想给你们这 5 个建议基础入门_编程基础指南

    很多人都想转行互联网,不管是出于兴趣、行业前景还是薪资的考虑,想要转行互联网的人们必须要面对一个问题,那就是如何自学编程,更确切的说,是如何0基础学编程。其实我基本上也是0基础自学编程的,大学的时候学的电信专业,对于编程语言只懂得一点皮毛,那些内容,相信大部分人看一些网上的教程也可以掌握了。作为过来人,想给大家一些建议,不管你是学生想要自学,还是跨界转行,亦

    2020/03/30
  • JavaScript 私有成员入门攻略_小白帮助

    Class field declarations for JavaScript(JavaScript 类的字段声明)目前已经进入了 stage-3,其中包含一项 OOP 开发者都很关注的内容:Private fields。JavaScript 一直没有私有成员并不是没有原因,所以这一提议给 JavaScript 带来了新的挑战。但同时,JavaScript

    2020/03/30
  • OrgChart使用帮助一款简单实用的组织结构图表jQuery插件

    OrgChart使用攻略 官方网址:https://github.com/dabeng/OrgChart GitHub:https://github.com/dabeng/OrgC…

    2020/03/06
  • css怎么选择父元素下的某个元素?菜鸟教程网_选择器入门百科

    css可以通过一些选择器来实现选择父元素下某个元素的效果。选择器有::first-child p:first-child(first第一个 child子元素)(找第一个子元素为p):last-child p:last-child(last倒数 child子元素)(找倒数第一个子元素为p):first-of-type p:first-of-type(first

    2020/03/20