CSS设置字体类型、大小、颜色、空白字符、阴影效果、溢出文本

鳄鱼君

发表文章数:642

热门标签

,

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » CSS » CSS设置字体类型、大小、颜色、空白字符、阴影效果、溢出文本

CSS设置字体类型

CSS提供了字体类型的属性来设置字体的样式,使用font-family属性可以对字体的样式进行设置。通常有一下几种属性值:

  • serif;衬线字体。
  • "隶书";
  • serif,"隶书","Times New Roman";设置多种字体

英文字体由多个单词组成,需要使用双引号括起来;如果是汉语字体也需要使用双引号括起来,多种字体按照先后顺序显示。

注意:
各种字体名称之间必须使用英文状态下的逗号隔开。
中文字体需要加英文状态下的引号,英文字体一般不需要加引号。
当需要设置英文字体时,英文字体名必须位于中文字体名之前

CSS设置字体大小

CSS使用font-size属性来设置字体大小,属性值可以是绝对单位:in(英寸)、cm(厘米)、mm(毫米)、pt(点)、pc(皮卡)、xx-small、x-small、mediun、larger、x-larger、xx-large等。也可以是相对单位:px(像素)、em(相对父元素字体的大小)、larger和smaller等。根据浏览器的不同,样式也不一样。

相对长度单位 说明
em 相对于当前对象内文本的字体尺寸
px 像素,最常用的,推荐使用
绝对长度单位 说明
in 英寸
cm 厘米
mm 毫米
pt

CSS设置字体颜色

CSS使用color属性来设置字体的颜色,它的属性值可以有一下几类:

  • 英文颜色名称:red、green等。
  • 十六进制:如#FF0000,#FF6600,#29D794等等,在实际书写中十六进制是最常用的定义颜色的方式。
  • RGB代码:如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%),正整数的取值为0~255,前两位表示红色分量,中间两位表示绿色分量,最后两位表示蓝色分量。
  • RGBA:rgba(255,0,0,1); Red Green Blue alpha(色彩空间),在RGB基础上增加了控制alpha透明度的参数,其中这个透明通道值为0~1。
  • HSL:hsl(360,100%,50%); H:hue(色调)。0或360表示红色,120表示绿色,240表示蓝色,也可以取其他数值指定颜色。取值为:0-360 S:Saturation(饱和度) L:Lightness(亮度) S和L取值0-100%。
  • HSLA:hsla(360,100%,50%,1.00); Alpha(透明度),取值0-1之间。

如果使用RGB代码的百分比色值,取值为0时也不能省略百分号,必须写为0%。
如果十六进制的两位数值相同时可简写,如#FF6600可简写为#F60,#FFO000可简写为#F00。

CSS设置空白字符

CSS使用white-space属性来处理网页中空白符,其属性值如下:

  • normal:常规(默认值),文本中的空格、空行无效、满行(到达边界区域)后自动换行。
  • pre:预格式化,按文档的书写格式保留空格、空行原样显示
  • nowrap:空格空行无效,强制文本不能换行,除非遇到换行标记<br/>。内容超出元素的边界也不换行,若超出浏览器页面会自动增加滚动条。

CSS设置文本阴影

使用text-shadow属性可以为页面中的文本添加阴影效果。其基本语法格式如下:

选择器{ text-shadow: h-shadow v-shadow blur color;  }

语法中h-shadow用来设置水平阴影距离,v-shadow用来设置垂直阴影距离,blur用来设置模糊的半径,color用来设置颜色。

h-shadow和v-shadow的值可以为负值,blur只能为正值,数值越大,阴影向外模糊的半径也就越大。

CSS设置溢出文本

CSS使用text-overflow属性标示对象内溢出的文本。其常用的属性值有两个:

  • clip:修剪溢出文本,不显示省略标记“…”。
  • ellipsis:用省略标记“…”标示被修剪文本,省略标记插入的位置是最后一个字符。

如果要实现超出的文本显示…可以参考:

p{
    width:50px;
    white-space:nowrap;   /*强制文本不能换行*/
    overflow:hidden;      /*修剪溢出文本*/
    text-overflow:ellipsis;  /*用省略标记被修剪的文本*/
}
<p>把很长的一块文本中溢出的内容隐藏,出现省略号</p>

具体步骤如下:
1.为包含文本的对象定义宽度。
2.应用“white-space:nowrap;”样式强制文本不能还行。
3.应用“overflow:hidden;”样式隐藏溢出文本。
4.应用“text-overflow:ellipsis;”样式显示省略号。

属性比较简单,自行尝试各种不同的效果!

未经允许不得转载:作者:鳄鱼君, 转载或复制请以 超链接形式 并注明出处 鳄鱼君
原文地址:《CSS设置字体类型、大小、颜色、空白字符、阴影效果、溢出文本》 发布于2020-04-09

分享到:
赞(1) 赏杯咖啡

评论 抢沙发

6 + 3 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册