CSS3笔记之基础篇(三)文字与字体

要点一、text-overflow与word-wrap

text-overflow:设置是否使用一个省略标记(...)标示对象内文本的溢出。

word-wrap:设置文本行为,当前行超过指定容器的边界时是否断开转行。

语法如下:

注意:要实现文字溢出时产生省略号的效果,需要把这两个属性联合起来使用,代码如下:

text-overflow:ellipsis; 
overflow:hidden; 
white-space:nowrap; 

要点二、嵌入字体@font-face

@font-face能够加载服务器端的字体文件,让浏览器可以显示用户电脑里没有安装的字体。

语法:

@font-face {font-family : 字体名称;src : 字体文件在服务器上的相对或绝对路径;
}

这样设置之后,就可以像使用普通字体一样在(font-*)中设置字体样式。

比如:

p {font-size :12px;font-family : "My Font";/*必须项,设置@font-face中font-family同样的值*/
}

要点三、文本阴影text-shadow

text-shadow可以用来设置文本的阴影效果。

语法:

text-shadow: X-Offset Y-Offset blur color;

X-Offset:表示阴影的水平偏移距离,其值为正值时阴影向右偏移,反之向左偏移;      

Y-Offset:是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移,反之向上偏移;

Blur:是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0;

Color:是指阴影的颜色,其可以使用rgba色。

比如,我们可以用下面代码实现设置阴影效果。

text-shadow: 0 1px 1px #fff

 

 

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

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

相关文章

XV6操作系统代码阅读心得(二):进程

1. 进程的基本概念 从抽象的意义来说,进程是指一个正在运行的程序的实例,而线程是一个CPU指令执行流的最小单位。进程是操作系统资源分配的最小单位,线程是操作系统中调度的最小单位。从实现的角度上讲,XV6系统中只实现了进程&…

webservices

https://blog.csdn.net/VitaminZH/article/details/81123571

.Net Core 商城微服务项目系列(十二):使用k8s部署商城服务

一、简介 本篇我们将会把商城的服务部署到k8s中,同时变化的还有以下两个地方: 1.不再使用Consul做服务的注册和发现,转而使用k8s-dns来实现。 2.不再使用Ocelot作为业务网关,使用Traefik来实现。 正如上面所讲,服务发现…

HTML、CSS知识点总结,浅显易懂。

一,htmlcss基础 1-1 Html和CSS的关系 学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的: 1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息&#xf…

Thinking in Java 源代码 source code 在IDEA上运行

参考我52的文章:https://www.52pojie.cn/thread-912471-1-1.html 转载于:https://www.cnblogs.com/AI-Cobe/p/10605434.html

CSS知识体系图谱

转自:https://blog.csdn.net/A13330069275/article/details/78448415

python2 pip安装包等出现各种编码错误UnicodeDecodeError: 'ascii'(/或者utf-8) codec can't decode byte 0xd2......

1.问题描述: python2环境,pip安装包时报错UnicodeDecodeError: ascii(/或者utf-8) codec cant decode byte 0xd2... 类似如下情况 2.原因分析 一开始依据网上给出的教程修改python安装路径下的各种文件,添加各种编码,始终无法解决…

mybatis自动生成代码

https://blog.csdn.net/qq_31169429/article/details/89137896

leetcood学习笔记-111-二叉树的最小深度

题目描述: 第一次提交: class Solution(object):def minDepth(self, root):""":type root: TreeNode:rtype: int"""if not root:return 0if root.left and root.right:return min(self.minDepth(root.left)1,self.minDept…

深入浅析HTML5中的article和section的区别

在HTML5中,为了使文档的结构更加清晰明确,追加了几个与页眉、页脚、内容区块等文档结构相关联的结构元素。内容区块是指将HTML页面按逻辑分割后 的单位。例如对于书籍来说,章、节可以称为内容区块;对于博客网站来说,导…

IPV6 简单总结

1. 转帖别人的内容 来源:https://www.2cto.com/net/201112/114937.html 2. 本地用IPV6单播地址 (包括链路本地单播地址 和 站点本地单播地址) 2.1 链路本地单播地址 规定了链路本地和站点本地两种类型的本地使用单播地址。链路本地地址用在单链路上, 而…

源码分析

https://blog.csdn.net/taifei/article/details/73546836

面向对象第一单元总结

一、对面向对象的理解 有位同学给java的面向对象做了一个形象生动的类比,我觉得很有道理,大概按我的理解如下: 结构的形成看图之前,我们要先明白,世界上是先有了实体,才有了一步步抽象至以上的体系结构&…

理解HTML语义化

1、什么是HTML语义化&#xff1f; <基本上都是围绕着几个主要的标签&#xff0c;像标题&#xff08;H1~H6&#xff09;、列表&#xff08;li&#xff09;、强调&#xff08;strong em&#xff09;等等> 根据内容的结构化&#xff08;内容语义化&#xff09;&#xff0c;…

maven上传命令

mvn deploy:deploy-file -DgroupIdcom.oracle -DartifactIdojdbc8 -Dversion12.2.0.1 -Dpackagingjar -DfileC:\Users\Admin\Desktop\ojdbc8.jar -Durlhttp://116.247.107.83:8081/repository/maven-releases/ -DrepositoryIdmy-nexus-releases

cocos2dx 开启控制台

打开 SimulatorWin.cpp 把这句启用&#xff1a; #define SIMULATOR_WITH_CONSOLE_AND_MENU 1 这句本来因为#define隐藏了转载于:https://www.cnblogs.com/mingfuqishi/p/9774301.html

网页编排规则

所谓大纲&#xff0c;简单来说就是文档中各内容区块的结构编排。可以分为显式编排和隐式编排2种方式。 显式编排&#xff1a;明确使用section元素创建文档结构&#xff0c;在每个内容区块内使用标题 隐式编排&#xff1a;不明确使用section等元素&#xff0c;根据页面中所书写的…

基本动态规划题集

观察下面的数字金字塔。写一个程序查找从最高点到底部任意处结束的路径&#xff0c;使路径经过数字的和最大。每一步可以从当前点走到左下方的点也可以到达右下方的点。 在上面的样例中,从13到8到26到15到24的路径产生了最大的和86。 【输入】 第一个行包含R(1≤ R≤1000)&…

springboot项目间接口调用实现:RestTemplate

https://blog.csdn.net/zhanglf02/article/details/89842372

python入门学习的第三天

step 1 时间 Python有两个模块&#xff0c;time和calendar&#xff0c;它们可以用于处理时间和日期 首先 import time 导入时间模块 然后 print time.time() 这个叫时间戳&#xff0c;它是从1970年1月1日午夜到现在时刻的秒数 print time.localtime(time.time()) print time.st…