CSS常用字体属性:background-origin和background-clip介绍说明

(一)常用的字体属性:

      font-weight: 属性值100-900  400等于正常 700等于bold ,数值越大,越粗

      font-size:字体大小,单位可以为px或者%

      font-family:字体族 比如说:微软雅黑

      font-style:字体的样式 italic斜体 normal正常

立即学习“前端免费学习笔记(深入)”;

      font-variant:small-caps 将字母转化为小一号的大小字母

      注意:所有属性也可以通过font一个属性写,例如:

              font:italic bold 75%/1.8 ‘Microsoft Yahei’,sans-serif,写的顺序:font-style font-variant font-weight font-size line-height font-famiyl,多个样式有空格分开,必须按照这个顺序写,font-size和line-height中间必须用/分开

(二)字体的颜色:color:属性值可以写颜色英文,例如:red 

          或者rgb(0-255,0-255,0-255);

          或者rgba(0-255,0-255,0-255,0-1);0表示透明,1表示不透明

      opacity:0-1;也表示透明。和rgba()的区别,该属性会作用于后代标签,而rgba()不会

(三)行距、对齐

          line-height (行高) :a.像素单位,比如48px b.不带px 正常行高的倍数 c.百分数 同b(调整控件中文字垂直方向垂直居中的方式,控件的height=控件的line-height)

      font-weight0 (对齐):块级元素中文字的水平对齐方式font-weight1 center font-weight2

      font-weight3 (字符间距): 字与字之间的距离

      font-weight4 (文本修饰 ):下划线underline font-weight5线line-through 上划线overline none(可以去掉font-weight6的下划线)

      font-weight7:控制超出范围文本的显示方式,auto根据文字多少自动显示滚动条,scroll始终显示滚动条,hidden超出范围文本隐藏,也可以通过font-weight8、font-weight9设置水平和垂直方向

      font-size0:设置多余文字的显示方式,font-size1裁减掉,ellipsis省略号,(重点,让每行多余的文字显示省略号,a.white-spacing:nowrap b.overflow:hiddern text-overflow:ellipsis)

      font-size2:(4个属性值:水平阴影距离 垂直阴影距离 模糊距离 阴影颜色)文本的阴影,前面2个属性值不能省。水平阴影距离越大,阴影右移。垂直阴影距离越大,阴影下移。阴影模糊距离,数值越大,阴影越来越模糊,默认为0,不模糊。阴影颜色,可以选,默认为黑色

      font-size3:首行缩进,可以用像素值调整缩进大小

      text-stroke:描边的粗细,描边的颜色

      font-size4:nowarp 设置中文行末不断行显示(中文默认自动换行,英文不会自动换行,根据空格会自动换行)

      font-size5:浏览器默认在空格处断行,当一个单词长度超出范围时,会不断行显示,break-all允许在单词内换行

(五)背景样式:

          font-size6 (缩写形式)

          font-size7(背景色 )

          font-size8(背景图 ):url(font-size9的地址),背景图和背景色同时存在,背景图会覆盖背景色

          font-family0(背景图重复方式 ): no-repeat(不平铺) repeat-x(水平平铺) repeat-y(垂直平铺) repeat平铺(默认)

          font-family1(位置坐标、偏移量 2个属性值:水平和垂直):指定位置:left/center/right ,可以写像素或者百分比,只写一个属性值,默认写的是水平方向,另外一个方向默认垂直居中(注意:当使用像素时候,图片的左上角往各个方向移动的实际距离, 当使用百分比的时候,建议不使用负数,代表去掉图片后剩余空白距离的分布比例,例如:background-positon:30% 水平方向去掉图片后,剩余的区域3:7分)

          font-family2/center/font-family3 当只写一个属性值的时候 另外一个默认居中

          font-family4 :border-box (从边框外缘开始显示)font-family5-box(从边框内缘开始显示) content-box(从文字内容开始显示,不在显示区的背景图或背景色会被裁切不显示)

          font-family6:定位的起点 border-box(从边框外缘开始) padding-box(从边框内缘) content-box(从文字内容区开始)

          font-family7:背景图片大小 一般2个属性:宽度 高度,当只有一个属性值的时候,默认为宽度,高度等比缩放

          宽高的写法:a.直接写像素 b.写百分比(父容器宽高的百分比)

以上就是CSS常用字体属性:background-origin和background-clip介绍说明的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1608003.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月23日 21:19:57
下一篇 2025年12月20日 17:42:01

相关推荐

  • CSS中的伪类与伪元素及二者间的区别说明

    这篇文章主要介绍了详解css中的伪类与伪元素及二者间的区别,实际上css3中规范了一种简单粗暴的方法,即伪类前用一个冒号表示,而伪元素前用两个冒号表示,这样就不容易混淆了,需要的朋友可以参考下 CSS伪类的概念及作用CSS伪类(Pseudoclasses)是选择符的螺栓,用来指定一个或者与其相关的选…

    2025年12月23日 好文分享
    000
  • 使用CSS实现文字环绕图片效果

    这篇文章主要为大家详细介绍了css文字环绕图片遇到的问题及解决方法,感兴趣的小伙伴们可以参考一下 CSS实现文字环绕图片效果 文字环绕图片,在Word里只要click一下右键,调一下属性就可以了。但在HTML文档里就没有直接属性了。因此我们可以借助CSS来实现这一效果。 我们先设定float的参数,…

    2025年12月23日 好文分享
    000
  • 利用CSS中linear制作复杂的边框效果实例分析

    这篇文章主要介绍了利用css中linear制作复杂的边框效果实例分析的相关资料,利用linear-gradient属性制作绚丽的边框效果 网上看到一种利用linear-gradient属性制作绚丽边框效果的方法。首先给出代码,大家可以在自己的电脑中查看效果: .box { margin: 80px …

    2025年12月23日
    000
  • 分析CSS样式表、继承、层叠和属性的值

    这篇文章分析CSS样式表、继承、层叠和属性的值  构造样式表并添加注释 1. css里有控制基本格式的属性(如font-size和color等),有控制布局的属性(如position和float等),还有决定访问者打印时在哪里换页的打印控制元素。除此之外还有其他很多的属性。2. 样式表中包含定义网页…

    好文分享 2025年12月23日
    000
  • CSS盒子模型介绍

    什么是css盒子模型?css盒子模型是为了让我们充分理解p+css模型的定位功能,盒子模型在学习p+css布局方式中必须要学习的一个模型 一、什么是CSS? CSS(Cascading Style Sheet):层叠样式表是将网页的内容与样式进行分离的一种语言,也就是在aspx或html中设计网页的…

    2025年12月23日
    000
  • 必看的CSS小知识

    下面小编就为大家带来一篇必看的css小知识。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员都使用过。如果你并不是一个特别有经 验的程序员,我相信你未必知道color属性除了…

    2025年12月23日 好文分享
    000
  • CSS教程之div垂直居中的多种方法

    这篇文章主要为大家详细介绍了css教程之p垂直居中的多种方法,还包括多行文本垂直居中的方法,感兴趣的小伙伴们可以参考一下 在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我…

    好文分享 2025年12月23日
    000
  • CSS超出文本指定宽度用省略号代替和文本不换行分析

    这篇文章主要介绍了css超出文本指定宽度用省略号代替和文本不换行的相关资料,小编觉的实用性非常,特此分享到本站平台,供大家参考 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加 */ width:31em;/* 何问起 hovertr…

    好文分享 2025年12月23日
    000
  • CSS等高布局的6种方式介绍

    下面小编就为大家带来一篇css等高布局的6种方式介绍。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 前面的话 等高布局是指子元素在父元素中高度相等的布局方式。等高布局的实现包括伪等高和真等高,伪等高只是看上去等高而已,真等高是实实在在的等高。本文将介绍边框模拟、负mar…

    2025年12月23日 好文分享
    000
  • css实现背景透明和文字不透明方法

    这篇文章介绍css实现背景透明和文字不透明方法 实现透明的css方法通常有以下3种方式,以下是不透明度都为80%的写法 css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8 css3的rgba(red, green, blue, alpha),alpha的取值从 0 到…

    2025年12月23日 好文分享
    000
  • 分析CSS常见兼容性问题的总结

    浏览器的兼容性问题,通常是因为不同的浏览器对同一段代码有不同的解析,造成页面显示不统一的情况。 这里谈到的浏览器,主要指IE6/IE7/IE… FireFox Chrome Opera Safari 等。 但更多的兼容还是考虑IE6/IE7/FF之间的斗争 先来谈谈CSS Hack 我们…

    2025年12月23日 好文分享
    000
  • CSS比较常用的翻转特效

    第一个:360度翻转特效 * { margin:0; padding:0;}.aa { width: 220px; height: 220px; margin: 0 auto; background: no-repeat url(“images/author.jpg”) left top; -web…

    好文分享 2025年12月23日
    000
  • 详解css background-attachment属性进阶

    这篇文章详解css background-attachment属性进阶 前提是定义了background-image属性,然后用background-attachment来指明背景图的位置是固定于视口的,还是随着包含块移动的。可简单理解为定义背景图片随滚动轴的移动方式。  取值: scroll:默认…

    2025年12月23日 好文分享
    000
  • 必看的css布局小技巧分享

    下面小编就为大家带来一篇必看的css布局小技巧分享。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 1.max-width: 当页面左右宽度缩小时,为了避免出现左右滚动条的糟糕体验,就可以用到max-width啦!页面比宽度小时,会自动缩小哦~ max-width : 5…

    好文分享 2025年12月23日
    000
  • 实例讲解使用CSS保持页面内容宽高比方法

    这篇文章实例讲解使用css保持页面内容宽高比方法,作者举了伪元素和vw单元等不同方法下的例子,需要的朋友可以参考下 需求描述:移动端实现横跨页面半圆。(类似问题,实现4×4的正方形网格) 简化问题,我们可以理解为实现一个高度和宽度比为1:2的块。 需要解决问题:        1,高度和宽…

    2025年12月23日 好文分享
    000
  • 将页脚固定在页面底部的CSS实战教程

    这篇文章主要介绍了将页脚固定在页面底部的css实战,其中注意一下css清理浮动的问题,需要的朋友可以参考下 页脚的位置问题 网页的页脚(footer),也就是通常用来放置帮助链接及版权信息的地方。页脚自然是应该位于页面底部的,但依照一般的做法,如果位于页脚之前的网页内容比较少,或者说使用了一个垂直分…

    2025年12月23日
    000
  • 详解CSS元素居中布局的简单方法

    这篇文章主要介绍了详解css元素居中布局的简单方法,文中介绍了内嵌元素和块元素以及行内块三种情况,需要的朋友可以参考下 首先我们需要知道元素都有哪些种类?     内嵌元素(display:inline;)如a,span,b,i 【一个不可定制的盒子】     [默认同行可以继续跟同类型标签]   …

    2025年12月23日
    000
  • 分享CSS优先级的详细分析

    在讲css优先级之前,我们得要了解什么是css,css是用来做什么的。 首先,我们对CSS作一个简单的说明:CSS是层叠样式表(Cascading Style Sheets)的简称。 它的规范代表了互联网历史上一个独特的发展阶段。现在对于从事网页制作的朋友来说,应该很少没有听说过CSS了,因为在讲c…

    2025年12月23日 好文分享
    000
  • 关于CSS知识点的集锦

    这篇文章介绍关于css知识点的集锦 CreateTime–2016年9月29日09:43:10Author:Marydon1.背景色线性渐变 background-color:linear-gradient(100deg,#FFF,#111);/*由黑色向白色渐变 deg表示度数*/ U…

    好文分享 2025年12月23日
    000
  • CSS文本超出指定宽度后隐藏并显示为省略号的实现示例代码

    下面小编就为大家带来css文本超出指定宽度后隐藏并显示为省略号的实现示例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ width:25em; …

    2025年12月23日
    000

发表回复

登录后才能评论
关注微信