CSS中常用的10个文本样式属性

一个页面中,文本样式,是必不可少的,当然css也给我们准备了很多很多很多的文本样式,以下列举了10个常用的文本样式属性及常用的属性值,掌握了,也基本满足使用了

1: text-transform 可以用来设置文本的大小写

        可选值:

                none 默认值,该怎么显示就怎么显示,不做任何处理

                capitalize [ˈkæpɪtəlaɪz] 单词的首字母大写,通过空格来识别单词

                uppercase [ˈʌpəˌkeɪs] 所有的字母都大写

                lowercase ['ləuə,keis] 所有的字母都小写

2: text-decoration [dɛkə'reɪʃ(ə)n] 可以用来设置文本的修饰

        可选值:

                none:默认值,不添加任何修饰,正常显示

                underline 为文本添加下划线

                overline 为文本添加上划线

                line-through 为文本添加删除线

        超链接会默认添加下划线,也就是超链接的text-decoration的默认值是underline

如果需要去除超链接的下划线则需要将该样式设置为none

3: letter-spacing可以指定字符间距

4: word-spacing可以设置单词之间的距离

        实际上就是设置词与词之间空格的大小

5: text-align用于设置文本的对齐方式

        可选值:

                left 默认值,文本靠左对齐

                right , 文本靠右对齐

                center , 文本居中对齐

                justify , 两端对齐

        - 通过调整文本之间的空格的大小,来达到一个两端对齐的目的,也可以让图片水平居中

6: text-indent 设置首行缩进

        -指定一个正值时,会自动向右侧缩进指定的像素

        -指定一个负值,则会向左移动指定的像素,

                通过这种方式可以将一些不想显示的文字隐藏起来

                这个值一般都会使用em作为单位

7: white-space: ; 设置网页如何处理空白

        可选值:

                normal 正常

                nowrap 不换行

                per 保留空白

8: text-overflow 文本溢出包含元素时发生的事情。

        可选值:

                clip 修剪文本。

                ellipsis [i'lipsis] 显示省略符号来代表被修剪的文本。

下面代码有演示省略号的固定写法

9: text-shadow: h-shadow  v-shadow  blur  color;

        参数1:必需。水平阴影的位置。允许负值。

        参数2: 必需。垂直阴影的位置。允许负值。

        参数3: 可选。模糊的距离。

        参数4:可选。阴影的颜色 一般用rgba

10:vertical-align 设置元素垂直对齐的方式

        可选值:

                baseline 默认值 基线对齐

                top 顶部对齐

                bottom 底部对齐

                middle 居中对齐

         应用:

                1:图文垂直对齐方式

                2:图片三像素的问题

                        父元素如果不设置高,由图片撑开,此时图片的底部就会有三像素的空白

                                解决方式一:vertical-align属性值不为默认值

                                解决方式二:给图片转成块元素

                                解决方式三:给父元素设置font-size为0

注意 vertical-align 只对行内元素、行内块元素和表格单元格元素生效:不能用它垂直对齐块级元素。

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title></title><style type="text/css">.p1 {text-transform: uppercase;}.p2 {text-decoration: none;}a {text-decoration: none;}.p3 {/*3: letter-spacing可以指定字符间距 *//* letter-spacing: 30px; */word-spacing: 120px;}.p4 {text-align:center;/* text-transform: uppercase; */}.p5 {font-size: 20px;text-indent: 2em;}/* 省略号的固定写法*/.box2 {width: 300px;white-space: nowrap;/* 裁剪多余 */overflow: hidden; /* 多余部分设置省略号 */text-overflow: ellipsis; }span {font-size: 30px;}.img1 {width: 400px;vertical-align:bottom;}.img2{vertical-align: middle;}.box{border: 1px solid red;width: 300px;/* font-size: 0; */}.box>img{/* vertical-align:baseline; */display: block;}h1 {text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);</style></head><body><img src="./img1.jpeg" alt="" class="img1" /><span>下雨回家收衣服了,hxjjsd</span><hr /><div class="box"><img src="./img1.jpeg" alt="" style="width: 300px;"/><img src="./img1.jpeg" alt="" style="width: 300px;"/></div><p class="p5">六也掉年反法耐的以耐要韩沫,人两也的心为次弟为心上司洪善有想,币无将持说在屯了如一老洪已人,不俭是失家是单,一衣在马挟会负,陈骨派逃向高关动要太导韩气我入,回今台国降变呼蒲使他生,奔未韩法的春其如不少因,骨是气评不杀话拆氏郭他司到,当劫会惊藏,联沫褒娟才。</p><h1 class="p4">我是一个h1</h1><p class="p4">好又反之韩勇未你生介九杂,希禀揽韩有到找,韩样人唯因这落尘匹说人绪平仍德仆,揽那俭生搏杨身才人让视生五留心哉在报人,他皇吴我之德害使方来同仆秦落持家词,圣力乐化是助沫此中来一实流太以太,哉于马孔为那使他妄也耐帮通书,是兄之永谢派的,胜光君第,答她老,李持。</p><p class="p4">e had been four years on the Wall. The first time he had been sent beyond, all the old stories had come rushing back, and his bowels had turned to water. He had laughed about it afterward. Hewas a veteran of a hundred rangings by now, and the endless dark wilderness that the southron called the haunted forest had no more terrors for him.</p><p class="p3">普德弟上而,而宋子孔足来魂要笔游我入帅或感清商绛李,了一拢自慧考人的秦血考派用是承,满由釜找夭乐风惜等了之不王,畴艳者司皇尝台入国是重说人,妙场关了活百绝是,才是之无斯笔土的杨千娟姑在亡高不不,了为人道在皮以到降为是公下一魂反不,化则月,谭德兴褒皇有彷慨。</p><p class="p3">ings by now, and the endless dark wilderness that the southron called the haunted forest had no more terrors for him.</p><a href="#">我是超链接</a><p class="p2">gings by now, and the endless dark wilderness that the southron called the haunted forest had no more terrors for him.</p><p class="p1">ve we?” “Will saw them,” Gared said. “If he says they are dead, that’s proof enough for me.</p><div class="box2">法今厅法,中五的制以,杨道作说才气欲知为死支是保,斯过何,尝位他畴清反流当定予人夫秦么至程了,天韩说名可太若欲,没己别哥天病九着罪得是对圣况诗善洪策开,主责是天守活罪他水,九和沉,一不其皇样卅给气脱乡,价了是家下在得说特航大得搏,可给锐得,挟一词不百怎之。</div></body>
</html>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python-docx 深入word源码 自定义字符间距

代码和实现效果 from docx import Document from docx.oxml import OxmlElement from docx.oxml.ns import qn from docx.shared import Pt# 调整pt设置字间距 def SetParagraphCharSpaceByPt(run, pt1):通过修改word源码方式, 添加w:spacing标签直接通过调整pt来设置字符间距…

Blender学习--制作带骨骼动画的机器人

1. 首先创建一个机器人模型 时间关系&#xff0c;这部分步骤有时间补充 2. 然后为机器人创建一副骨架 时间关系&#xff0c;这部分步骤有时间补充 3.骨骼绑定 切换到物体模式&#xff0c;选中机器人头部&#xff0c;Shift选中骨骼&#xff0c;切换到姿态模式&#xff0c;&am…

SpringBoot集成系列--xxlJob

文章目录 一、搭建调度中心xxl-job-admin1、下载项目2、调整项目参数3、执行初始化数据库SQL4、启动项目5、访问 二、集成步骤1、添加xxl-job的依赖2、添加xxl-job的依赖3、配置执行器4、创建执行器5、开发任务1&#xff09;方式1&#xff1a;BEAN模式&#xff08;方法形式&…

RocketMQ源码

RocketMQ的核心三流程 启动流程 RocketMQ服务端由两部分组成NameServer和Broker&#xff0c;NameServer是服务的注册中心&#xff0c;Broker会把自己的地址注册到NameServer&#xff0c;生产者和消费者启动的时候会先从NameServer获取Broker的地址&#xff0c;再去从Broker发…

【自动驾驶】2023年度盘点:智能汽车、自动驾驶、车联网必读书

2023年&#xff0c;智能驾驶和新能源汽车行业仍然有着肉眼可见的新进展。自动驾驶技术继续尝试从辅助驾驶向自动驾驶的过渡&#xff0c;更重要的是相关技术成本的下降。根据《全球电动汽车展望2023》等行业报告&#xff0c;预计2023年平均成本将降至100美元/千瓦时以下&#xf…

知识笔记(四十八)———mysql的优缺点

MySQL作为一个广泛应用的关系型数据库管理系统&#xff0c;具有以下优点和缺点&#xff1a; 优点&#xff1a; 开源和免费&#xff1a;MySQL是开源软件&#xff0c;用户可以免费获取和使用它。这使得MySQL成为个人开发者和小型组织的理想选择。 良好的性能&#xff1a;MySQL经…

成都工业学院Web技术基础(WEB)实验八:BOM、DOM基本操作

写在前面 1、基于2022级计算机大类实验指导书 2、代码仅提供参考&#xff0c;前端变化比较大&#xff0c;按照要求&#xff0c;只能做到像&#xff0c;不能做到一模一样 3、图片和文字仅为示例&#xff0c;需要自行替换 4、如果代码不满足你的要求&#xff0c;请寻求其他的…

【开源】基于Vue.js的就医保险管理系统

文末获取源码&#xff0c;项目编号&#xff1a; S 085 。 \color{red}{文末获取源码&#xff0c;项目编号&#xff1a;S085。} 文末获取源码&#xff0c;项目编号&#xff1a;S085。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 科室档案模块2.2 医生档案模块2.3 预…

最好的猫罐头品牌有哪些?精选的5款口碑好的猫罐头推荐!

对于一个刚入门的养猫小白来说&#xff0c;面对市面上琳琅满目的猫罐头选择确实让人头大。我们总想选到营养价值高的罐头&#xff0c;但又怕猫咪不喜欢吃&#xff0c;也担心选到不安全的产品。 最好的猫罐头品牌有哪些&#xff1f;根据我开宠物店7年的经验&#xff0c;今天我将…

Java基础——static关键字

对象只有在new的时候才会分配空间&#xff0c;有时候我们希望不管是否产生了对象或无论产生了多少对象的情况下&#xff0c;某些特定的数据在内存空间里只有一份&#xff0c;就可以static修饰成员&#xff0c;也称静态成员或类成员。 static可修饰属性、方法、代码块、内部类。…

python一点通:参数列表里面有星号 * 什么意思?

在Python类或函数参数列表中&#xff0c;我们有时会看到星号*&#xff0c;它是什么意思呢&#xff1f; 什么是仅限关键字参数&#xff1f; Python 3中引入的仅限关键字参数是指必须通过其名称来指定的函数或方法参数。它们避免了由于存在多个参数而引起的混淆&#xff0c;增强…

「哈士奇赠书活动 - 46期」-『技术人修炼之道:从程序员到百万高管的72项技能(第2版)』

⭐️ 赠书 - 《技术人修炼之道&#xff08;第2版&#xff09;》 ⭐️ 内容简介 本书旨在帮助计算机IT技术人员提升职场核心技能、架构思维、团队管理能力、商业认知&#xff0c;让每一位普通的技术从业者&#xff0c;修炼成为"技术职场超级个体”&#xff0c;通过全面升级…

IntelliJ IDEA无公网远程连接Windows本地Mysql数据库提高开发效率

&#x1f525;博客主页&#xff1a; 小羊失眠啦. &#x1f3a5;系列专栏&#xff1a;《C语言》 《数据结构》 《Linux》《Cpolar》 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;…

windows启动出现 zookeeper此处不应有java

可能是Java 路径出了问题&#xff0c;这个programFiles直接有空格&#xff0c;没错就有空格&#xff0c;笔者一开始以为这么点算什么空格&#xff0c;需要把这个对应的Java文件到别的英文路径下&#xff0c;并且修改环境变量。就可以启动的。 还可以启动方式有很多种&#xff0…

2.2 模型基础

建模流程 作业 这次搞了10天左右终于把作业做完了。 先是去学习了下如何建模->然后将模型导入Substance Painter里绘制贴图->最后导入到unity中&#xff08;虽然最后效果很差&#xff09;&#xff0c;但是回过头来看整个过程学习到了次时代美术的工作流&#xff0c;思考…

658. 找到 K 个最接近的元素

658. 找到 K 个最接近的元素 Java代码&#xff1a;滑窗 class Solution {public List<Integer> findClosestElements(int[] arr, int k, int x) {List<Integer> list new ArrayList<>();for (int i 0; i < arr.length; i) {arr[i] arr[i] - x;}for(i…

【打卡】牛客网:BM63 跳台阶

自己写的 class Solution { public:/*** 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff0c;直接返回方法规定的值即可** * param number int整型 * return int整型*/int jumpFloor(int number) {// write code hereif(number 1)return 1;if(number 2)r…

简单实现Spring容器(二) 封装BeanDefinition对象放入Map

阶段2: // 1.编写自己的Spring容器,实现扫描包,得到bean的class对象.2.扫描将 bean 信息封装到 BeanDefinition对象,并放入到Map.思路: 1.将 bean 信息封装到 BeanDefinition对象中,再将其放入到BeanDefinitionMap集合中,集合的结构大概是 key[beanName]–value[beanDefintion…

MySQL行锁范围分析(行锁、间隙锁、临键锁)

MySQL 中锁的概念 排它锁&#xff08;Exclusive Lock&#xff09; X 锁&#xff0c;也称为写锁&#xff0c;若事务T对对象A加上X锁&#xff0c;则只允许T读取和修改A&#xff0c;其他任何事物都不能再对A 加任何锁&#xff0c;直到T释放A上的锁。 SELECT…FOR UPDATE 对读取的…

风控之Android设备指纹技术

标识性参数——Android ID、IMEI、OAID非标识性参数 非标识性参数——手机运营商 1 设备指纹 简单来讲&#xff0c;设备指纹是指用于标识出该设备的设备特征。可以是单一设备特征&#xff0c;也可以是多种设备特征的组合&#xff0c;以方便风控系统对设备的唯一性进行识别。…