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系统中只实现了进程&…

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

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

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安装路径下的各种文件,添加各种编码,始终无法解决…

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…

IPV6 简单总结

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

面向对象第一单元总结

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

理解HTML语义化

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

基本动态规划题集

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

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…

.Net Core应用框架Util介绍(五)

上篇简要介绍了Util在Angular Ts方面的封装情况&#xff0c;本文介绍Angular封装的另一个部分&#xff0c;即Html的封装。 标准组件与业务组件 对于管理后台这样的表单系统&#xff0c;你通常会使用Angular Material或Ng-Zorro这样的UI组件库&#xff0c;它们提供了标准化的U…

Thunar 右键菜单等自定义

Thunar 右键菜单等自定义 可以使用图形界面或者直接编辑配置文件&#xff0c;二者是等价的。 图形界面&#xff1a; 以给“zip&#xff0c;rar&#xff0c;7z”等文件添加“在此位置使用unar解压缩”的右键菜单为例&#xff1a;&#xff08;unar可以很好地处理编码问题&#xf…

学习网站大汇集

一.综合类学习网站&#xff08;中文&#xff09; 1.网易公开课&#xff1a;https://open.163.com/。上面有TED、可汗学院、国内外高校公开课的免费资源。站内内容完全免费&#xff0c;良心推荐。 2.网易云课堂&#xff1a;http://study.163.com/。网易旗下付费学习平台&#…

@Scheduled

Scheduled注解的使用这里不详细说明&#xff0c;直接对8个参数进行讲解。 参数详解 cron 该参数接收一个cron表达式&#xff0c;cron表达式是一个字符串&#xff0c;字符串以5或6个空格隔开&#xff0c;分开共6或7个域&#xff0c;每一个域代表一个含义。 cron表达式语法 […

eclipse2019-03设置代码编辑区背景为图片

一、我的主题设置如下所示 二、找到如下所示或类似的文件夹 三、在该文件夹里的images文件夹里添加图片 四、在CSS目录下的e4-dark_win.css文件中添加如下代码   .MPart StyledText {     background-image: url(./bg.jpg);     background-repeat: no-repeat;  …

idea集成gitlab使用ssh免密登录

网上有很多介绍ssh免密登录的文章&#xff0c;具体步骤如下&#xff1a; 1. 生成SSH Key ssh-keygen -t rsa -C "your_emailexample.com" 默认会在相应路径下&#xff08;/your_home_path&#xff09;生成id_rsa和id_rsa.pub两个文件&#xff0c;此时终端会显示&…

网络(图)(数学)

转载于:https://www.cnblogs.com/fengxunling/p/9781575.html

DES加解密时 Given final block not properly padded 的解决方案

事情的经过是这个样子的。。。。。。 先说说问题是怎么出现的。根据客户需求&#xff0c;需要完成一个一键登录的功能&#xff0c;于是我的项目中就诞生了DesUtil&#xff0c;但是经过几百次测试&#xff0c;发现有一个登录直接报错&#xff01;难道又遇到神坑啦&#xff01;&a…

appium工作原理

Appium原理 面试的时候&#xff0c;被问到appium原理&#xff0c;一点不会&#xff0c;实在尴尬。大家可以直接翻看原作https://blog.csdn.net/jffhy2017/article/details/69220719 appium运行时安装的2个应用&#xff1a;Appium Settings和Unlock。 一、appium加载的过程图解&…

【Linux基础】crontab定时命令详解

周期执行的任务一般由cron这个守护进程来处理[ps -ef|grep cron]。cron读取一个或多个配置文件&#xff0c;这些配置文件中包含了命令行及其调用时间。cron的配置文件称为“crontab”&#xff0c;是“cron table”的简写。 一、cron服务  cron是一个linux下 的定时执行工具&a…