CSS基础学习--6 CSS Text(文本)

一、文本颜色

color:red;

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定:

  • 十六进制值 - 如: #FF0000
  • 一个RGB值 - 如: RGB(255,0,0)
  • 颜色的名称 - 如: red
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

二、文本的对齐方式 text-align

文本排列属性是用来设置文本的水平对齐方式。

文本可居中或对齐到左或右,两端对齐.

当text-align设置为"justify",每一行被展开为宽度相等,左,右外边距是对齐。

比对:图2是设置justify属性值的

 代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS基础学习</title>
		<style>
			h1 {
				text-align: center;
			}

			p.date {
				text-align: right;
			}

			p.main {
				text-align: justify;
			}
		</style>
	</head>

	<body>
		<h1>CSS text-align 实例</h1>
		<p class="date">2015 年 3 月 14 号</p>
		<p class="main">
			“当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,我突然意识到:如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下,我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。”
		</p>
		<p><b>注意:</b> 重置浏览器窗口大小查看 &quot;justify&quot; 是如何工作的。</p>
	</body>

</html>

 属性:

描述
left把文本排列到左边。默认值:由浏览器决定。
right把文本排列到右边。
center把文本排列到中间。
justify实现两端对齐文本效果。
inherit规定应该从父元素继承 text-align 属性的值。

三、文本修饰 

text-decoration 属性用来设置或删除文本的装饰。

从设计的角度看 text-decoration属性主要是用来删除链接的下划线:

a {text-decoration:none;}

属性:

描述
none默认。定义标准的文本。
underline定义文本下的一条线。
overline定义文本上的一条线。
line-through定义穿过文本下的一条线。
blink定义闪烁的文本。
inherit规定应该从父元素继承 text-decoration 属性的值。

四、文本转换 text-transform 

文本转换属性是用来指定在一个文本中的大写和小写字母。

可用于所有字句变成大写或小写字母,或每个单词的首字母大写。

代码:

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

属性:

描述
none默认。定义带有小写字母和大写字母的标准的文本。
capitalize文本中的每个单词以大写字母开头。
uppercase定义仅有大写字母。
lowercase定义无大写字母,仅有小写字母。
inherit规定应该从父元素继承 text-transform 属性的值。

五、文本缩进 text-indent

文本缩进属性是用来指定文本的第一行的缩进

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS基础学习</title>
		<style>
			p {
				text-indent: 50px;
			}
		</style>
	</head>

	<body>

		<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind
			ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in
			this world haven't had the advantages that you've had.'</p>

	</body>

</html>

效果图:

属性:

描述
length定义固定的缩进。默认值:0。
%定义基于父元素宽度的百分比的缩进。
inherit规定应该从父元素继承 text-indent 属性的值。

即:可以设置像素(50px)、百分比(2%)、继承父元素 text-indent 属性的值。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/27693.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

无敌!我用【C语言】手搓出了一个体系完整的【员工管理系统】还能玩游戏听音乐?(超详细,附完整源码)

博主简介&#xff1a;Hello大家好呀&#xff0c;我是陈童学&#xff0c;一个与你一样正在慢慢前行的人。 博主主页&#xff1a;陈童学哦 所属专栏&#xff1a;C语言程序设计实验项目 如果本文对你有所帮助的话&#xff0c;还希望可以点赞&#x1f44d;收藏&#x1f4c2;支持一下…

【云原生 | 53】Docker三剑客之Docker Compose应用案例一:Web负载均衡

&#x1f341;博主简介&#xff1a; &#x1f3c5;云计算领域优质创作者 &#x1f3c5;2022年CSDN新星计划python赛道第一名 &#x1f3c5;2022年CSDN原力计划优质作者 &#x1f3c5;阿里云ACE认证高级工程师 &#x1f3c5;阿里云开发者社区专…

React Hook入门小案例 在函数式组件中使用state响应式数据

Hook是react 16.8 新增的特性 是希望在不编写 class的情况下 去操作state和其他react特性 Hook的话 就不建议大家使用class的形式了 当然也可以用 这个他只是不推荐 我们还是先创建一个普通的react项目 我们之前写一个react组件可以这样写 import React from "react&qu…

Java ~ Reference ~ ReferenceQueue【总结】

前言 文章 相关系列&#xff1a;《Java ~ Reference【目录】》&#xff08;持续更新&#xff09;相关系列&#xff1a;《Java ~ Reference ~ ReferenceQueue【源码】》&#xff08;学习过程/多有漏误/仅作参考/不再更新&#xff09;相关系列&#xff1a;《Java ~ Reference ~ …

【前端 - CSS】第 9 课 - CSS 初体验

欢迎来到博主 Apeiron 的博客&#xff0c;祝您旅程愉快 &#xff01; 时止则止&#xff0c;时行则行。动静不失其时&#xff0c;其道光明。 目录 1、CSS 定义 2、基础选择器 3、文字控制属性 4、示例代码 5、总结 1、CSS 定义 层叠样式表&#xff08;Cascading Style …

前端vue地图定位并测算当前定位离目标位置距离

前端vue地图定位并测算当前定位离目标位置距离, 下载完整代码请访问uni-app插件市场地址: https://ext.dcloud.net.cn/plugin?id12974 效果图如下: # #### 使用方法 使用方法 <!-- // 腾讯地图key注册地址&#xff08;针对H5端&#xff0c;manifest.json中web配置&…

触发器和事件自动化的讲解

触发器和事件自动化 一、触发器 1、触发器的基本概念 触发器是和表相关的一种数据库对象&#xff0c;可以将他看作一种特殊的存储过程&#xff0c;不需要人为调动的存储过程。 关键字&#xff1a;trigger 基本作用&#xff1a;通过对表进行数据的插入、更新或删除等操作来触…

XGBoost的介绍

一、XGBoost的介绍 1.什么是XGBoost&#xff1f; XGBoost&#xff08;eXtreme Gradient Boosting&#xff09;是一种基于梯度提升树的机器学习算法&#xff0c;它在解决分类和回归问题上表现出色。它是由陈天奇在2014年开发的&#xff0c;如今已成为机器学习领域中最流行和强…

那年我头脑发热,选择了自动化,后来我掉入计算机的世界无法自拔

首先&#xff0c;小雅兰是22届高考考生&#xff0c;而且当时填报志愿也没有填报到计算机相关的专业去&#xff0c;小雅兰是自动化专业的学生&#xff0c;是由于一次偶然的机会&#xff0c;了解到了这个行业&#xff0c;对于写代码所带来的成就感&#xff0c;总之&#xff0c;我…

2023春期末考试选择题R2-9AVL树插入调整详解

题目&#xff1a; 将 8, 9, 7, 2, 3, 5, 6, 4 顺序插入一棵初始为空的AVL树。下列句子中哪句是错的&#xff1f; A. 4 和 6 是兄弟 B. 5 是 8 的父结点 C. 7 是根结点 D. 3 和 8 是兄弟 解题要点&#xff1a; 需要对AVL树的4种旋转方式熟悉。 AVL旋转过程&#xff1a; 根据…

人事管理项目-部门数据删除

人事管理项目-部门数据删除 后端实现前端实现 Spring Boot是一个框架&#xff0c;一种全新的编程规范&#xff0c;它的产生简化了框架的使用&#xff0c;所谓简化是指简化了Spring众多框架中所需的大量且烦琐的配置文件&#xff0c;所以Spring Boot是一个服务于框架的框架&…

使用IDEA使用Git:Git使用指北——实际操作篇

Git使用指北——实际操作 &#x1f916;:使用IDEA Git插件实际工作流程 &#x1f4a1; 本文从实际使用的角度出发&#xff0c;以IDEA Git插件为基座讲述了如果使用IDEA的Git插件来解决实际开发中的协作开发问题。本文从 远程仓库中拉取项目&#xff0c;在本地分支进行开发&…

电路模型和电路定律(3)——“电路分析”

小雅兰期末加油冲冲冲&#xff01;&#xff01;&#xff01; 复习之前的内容&#xff1a; 这样的连接方式是不可以的&#xff1a; 两个电压源&#xff0c;电压值不相同&#xff0c;是不能并联的 两个电流源&#xff0c;电流值不相同&#xff0c;是不能串联的 电流源也不能开…

PoseiSwap的趋势性如何体现?

DEX 代表了一种先进的意识形态&#xff0c;相对于 CEX 其更强调无许可、去中心化以及公开透明。然而随着 DeFi 赛道逐渐从 2021 年年底的高峰逐渐转向低谷&#xff0c;DEX 整体的交易量、TVL等数据指标也开始呈现下滑的趋势&#xff0c;DEX 正在面临发展的新瓶颈期。 在这样的背…

漂亮国因一颗气球而疯狂给质量团队带来的启示

最近漂亮国因为我国的一颗漂洋过海的淘气的民用气球而疯狂。这颗气球成功躲过了号称全球最先进的防空系统&#xff0c;跨越大半个漂亮国&#xff0c;直到被一居民拍照无意间发现&#xff0c;漂亮国才反应过来。多次派战斗机拦截无果&#xff0c;在气球降到15km后&#xff0c;F2…

【云原生】Docker容器服务更新与发现之consul

1.consul的相关知识 1.1 什么是注册与发现 服务注册与发现是微服务架构中不可或缺的重要组件。起初服务都是单节点的&#xff0c;不保障高可用性&#xff0c;也不考虑服务的压力承载&#xff0c;服务之间调用单纯的通过接口访问。直到后来出现了多个节点的分布式架构&#xff0…

day8 栈顶的种类与应用

目录 多寄存器访问指令与寻址方式 多寄存器内存访问指令 多寄存器内存访问指令的寻址方式 ​编辑 栈的种类与使用 栈的概念 栈的分类 栈的应用举例 叶子函数的调用过程举例 多寄存器访问指令与寻址方式 多寄存器内存访问指令 MOV R1, #1 MOV R2, #2 MOV R3, #3 MOV R…

PL2303HXA自2012已停产,请联系供货商的解决办法

一、概述 PL2303 是Prolific 公司生产的一种高度集成的接口转换器&#xff0c;可提供一个RS232 全双工异步串行通信装置与USB 功能接口便利连接的解决方案。PL2303具有多个历史版本&#xff0c;早期的版本是PL2303HX, 近年有PL2303HXA、PL2303HXC、PL2303HXD&#xff08;D版本…

详解Java中static的使用及其注意事项

1.可以用来修饰的结构&#xff1a; 主要用来修饰类的内部结构 属性、方法、代码块、内部类 2.static修饰属性&#xff1a;静态变量&#xff08;或类变量&#xff09; ​ 2.1 属性&#xff0c;是否使用static修饰&#xff0c;又分为&#xff1a;静态属性 vs 非静态属性(实例…

Java中方法的重载与重写

文章目录 前言方法重载方法重写 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 方法的重载与重写容易混&#xff0c;所以单独拿出来比较 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 方法重载 在同一个类中&#xff0c;允…