不备案的网站很慢,网站制作怎样容易,企业推广是什么意思,网站建站华为云CSS3 动画相关属性实例大全#xff08;四)
#xff08;font、height、left、letter-spacing、line-height 属性#xff09; 本文目录#xff1a;
一、font 属性#xff08;所有字体属性#xff09;
1.1、font-size属性#xff08;指定字体的大小#xff09;
1.2、f…CSS3 动画相关属性实例大全四)
font、height、left、letter-spacing、line-height 属性 本文目录
一、font 属性所有字体属性
1.1、font-size属性指定字体的大小
1.2、font-size-adjust 属性调整字体大小
1.3、font-stretch属性定义字体外观
1.4、font-weight属性指定字体的粗细程度
二、height属性元素的高度
三、left属性元素的左外边距边界与其包含块左边界之间的偏移
四、letter-spacing属性字符间距的大小
五、line-height 属性设置多行元素的空间量 一、font 属性所有字体属性
font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写或将元素的字体设置为系统字体
style
#animation40 {border: 1px solid black;width: 150px;height: 150px;-webkit-animation: animation40a 2s infinite; animation: animation40a 2s infinite;
}-webkit-keyframes animation40a{ 50% {font: 25px bold; }}
keyframes animation40a{ 50% {font: 25px bold; }}
/style
div idanimation40pfont 属性是所有字体属性的简写/p
/div 改变 font 属性font: 25px bold 值 Font 特性描述font-style规定字体样式。font-variant 规定字体异体font-weight规定字体粗细。font-size/line-height规定字体尺寸和行高。font-family规定字体系列。caption 定义被标题控件比如按钮、下拉列表等使用的字体。icon定义被图标标记使用的字体。menu定义被下拉列表使用的字体。message-box定义被对话框使用的字体。small-caption caption 字体的小型版本。status-bar定义被窗口状态栏使用的字体。 1.1、font-size属性指定字体的大小
font-size CSS 属性指定字体的大小。 因为该属性的值会被用于计算 em 和 ex 长度单位定义该值可能改变其他元素的大小
font-size属性指定字体的大小absolute-size绝对大小值 font-size: xx-small; font-size: x-small; font-size: small; font-size: medium; font-size: large; font-size: x-large; font-size: xx-large; relative-size相对大小值 font-size: larger; font-size: smaller; length长度值 font-size: 12px; font-size: 0.8em; percentage百分比值 font-size: 80%; font-size:250%font-size:200% font-size: inherit; JavaScript 语法object.style.fontSizelarger
style
#animation41 {border: 1px solid black;width: 200px;height: 100px;font-size: xx-small;color: purple;-webkit-animation: animation41a 2s infinite; animation: animation41a 2s infinite;}
-webkit-keyframes animation41a{ 50% {font-size: 40px;}}
keyframes animation41a{ 50% {font-size: 40px; }}
/style
div idanimation41p逆境清醒/p
/div 改变 font-size 属性从 font-size: xx-small; 到 font-size: 40px; 1.2、font-size-adjust 属性调整字体大小 font-size-adjust属性通过指定font-size-adjust属性浏览器将调整字体大小无论字体系列 让您更好的控制字体大小当第一个选择的字体不可用时浏览器使用第二个指定的字体。 这可能会导致改变字体大小。为了防止这种情况使用的font-size-adjust属性。 所有字体都能有aspect值这是小写字母X和大写字母X的大小差异。 当浏览器知道aspect值为第一选择的字体时浏览器可以找出什么样的font-size使用第二选择字体显示文字。 目前支持的浏览器数量不足暂不举例 font-size-adjust CSS 属性定义字体大小应取决于小写字母而不是大写字母。在字体较小时字体的可读性主要由小写字母的大小决定通过此选项即可进行调整。 1.3、font-stretch属性定义字体外观
Chrome浏览器font-stretch 属性为字体定义一个正常或经过伸缩变形的字体外观这个属性并不会通过伸展/缩小而改变字体的几何外形 如font-feature-settings和font-variant属性 它仅仅意味着当有多种字体可供选择时会为字体选择最适合的大小。normal指定默认字体semi-condensed, condensed, extra-condensed, ultra-condensed小于默认字体其中 ultra-condensed 是缩的最小的字体semi-expanded, expanded, extra-expanded, ultra-expanded大于默认字体的值
stylefont-face {src: url(fonts/LeagueMonoVariable.ttf);font-family:LeagueMonoVariable;font-style: normal;font-stretch: 1% 500%; /* Required by Chrome */
}.container { font: 1.5rem LeagueMonoVariable, sans-serif;}.condensed { font-stretch: 50%;}.normal { font-stretch: 100%;}.expanded { font-stretch: 200%;}style
div classcontainerp classcondensedLeagueMonoVariable/pp classnormalLeagueMonoVariable/pp classexpandedLeagueMonoVariable/p
/div 1.4、font-weight属性指定字体的粗细程度
font-weight CSS 属性指定了字体的粗细程度。
一些字体只提供 normal 和 bold 两种值。
normal 默认值。定义标准的字符。bold 定义粗体字符。bolder定义更粗的字符。lighter定义更细的字符。100~900定义由细到粗的字符。400 等同于 normal而 700 等同于 bold。inherit 规定应该从父元素继承字体的粗细。JavaScript 语法object.style.fontWeight900
style#animation44 {border: 1px solid black;width: 200px;height: 200px;font-weight: lighter;color: purple;font-size: 40px;-webkit-animation: animation44a 2s infinite;animation: animation44a 2s infinite;}
-webkit-keyframes animation44a{ 50% {font-weight: bolder;}}
keyframes animation44a{ 50% {font-weight: bolder; }}
/style
div idanimation44 styletext-align:center;p逆境清醒/p
/div 改变 font-weight属性从 font-weight: lighter;到 font-weight: bolder; 二、height属性元素的高度
height CSS 属性指定了一个元素的高度。
默认情况下这个属性决定的是内容区 content area的高度
但是如果将 box-sizing 设置为 border-box ,
这个属性决定的将是边框区域border area的高度。 style#animation45 {width: 150px;height: 50px;background: #CCCCFF;border: 1px solid #000000;-webkit-animation: animation45a 2s infinite;animation: animation45a 2s infinite;}-webkit-keyframes animation45a{ 50% {height: 200px;} }keyframes animation45a{ 50% {height: 200px;} }/style div idanimation45 styletext-align:center;p逆境清醒/p/div 改变 height属性从height: 50px;到 height: 200px; 三、left属性元素的左外边距边界与其包含块左边界之间的偏移
left属性定义了
定位元素的左外边距边界与其包含块左边界之间的偏移
非定位元素设置此属性无效。
left的效果取决于元素的position属性
当position设置为absolute或fixed时left属性指定了定位元素左外边距边界与其包含块左边界之间的偏移。当position设置为relative时left属性指定了元素的左边界离开其正常位置的偏移。当position设置为sticky时如果元素在 viewport 里面left属性的效果和 position 为relative等同如果元素在 viewport 外面left属性的效果和 position 为fixed等同。当position设置为static时left属性无效。当left和right 同时指定时元素的位置会被重复指定。当容器是从左到右时left的值会被优先设定当容器是从右到左时right的值会被优先设定。 style#animation46 {top:80px;width: 100px;height:50px;margin: auto;border: 2px solid #111111;background-color:lightblue;color:black;-webkit-animation: animation46a 1s infinite; animation: animation46a 1s infinite;}-webkit-keyframes animation46a{ 50% {left: 620px;} }keyframes animation46a{ 50% {left: 620px;} }/style
div idanimation46逆境清醒/div left属性定义了
定位元素的左外边距边界与其包含块左边界之间的偏移
非定位元素设置此属性无效。 四、letter-spacing属性字符间距的大小
letter-spacing 属性
增加或减少字符间的空白
表现效果为字符间距的大小
属性值意义normal默认。规定字符间没有额外的空间。length 定义字符间的固定空间允许使用负值。inherit规定应该从父元素继承 letter-spacing 属性的值。 style#animation47 {width: 200px;height: 300px;border: 1px solid black;background-color: lightblue;color: black;letter-spacing: normal;-webkit-animation: animation47a 1s infinite;animation: animation47a 1s infinite;}-webkit-keyframes animation47a {50% {letter-spacing: 20px; }}keyframes animation47a {50% { letter-spacing: 20px; }}/style div idanimation47p当 你 孤 单 无 助 地 面 对 强 敌 时谁 会 是 那 个 信 得 过 的 战 友逆 境 清 醒 送 你 一 只 守 护 兔。/p/div etter-spacing 属性
增加或减少字符间的空白表现效果为字符间距的大小
改变 letter-spacing 属性从 letter-spacing: normal;到 letter-spacing: 20px; 五、line-height 属性设置多行元素的空间量
line-height CSS 属性用于设置多行元素的空间量如多行文本的间距。 对于块级元素它指定元素行盒line boxes的最小高度。 对于非替代的 inline 元素它用于计算行盒line box的高度。 style#animation48 {width: 200px;height: 250px;border: 1px solid black;background-color: lightblue;color: black;line-height: normal;-webkit-animation: animation48a 1s infinite;animation: animation48a 1s infinite;}-webkit-keyframes animation48a {50% {line-height: 50px; } }keyframes animation48a {50% {line-height: 50px; } }/style
div idanimation48p当 你 孤 单 无 助 地 面 对 强 敌 时谁 会 是 那 个 信 得 过 的 战 友逆 境 清 醒 送 你 一 只 守 护 兔。/p/div 改变 line-height 属性从 line-height: normal;到 line-height: 50px; 未完待续》》》
1、CSS3 动画相关属性实例大全一)keyframes background属性border 属性2、CSS3 动画相关属性实例大全二)bottom 、box-shadow、clip、color 、column-count、column-gap、column-rule、column-rule-color、column-rule-width、column-width 属性3、CSS3 动画相关属性实例大全三)columns、filter、flex、flex-basis 、flex-grow、flex-shrink属性4、CSS3 动画相关属性实例大全四)font、height、left、letter-spacing、line-height 属性 推荐阅读CSS 规则(At-rules)详解系列索引目录 给照片换底色pythonopencv猫十二分类基于大模型的虚拟数字人__虚拟主播实例 计算机视觉__基本图像操作显示、读取、保存直方图颜色直方图、灰度直方图直方图均衡化调节图像亮度、对比度 语音识别实战python代码(一 人工智能基础篇 计算机视觉基础__图像特征 matplotlib 自带绘图样式效果展示速查28种全 Three.js实例详解___旋转的精灵女孩(附完整代码和资源)一 立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦 Python 3D可视化一 让你的作品更出色——词云Word Cloud的制作方法基于pythonWordCloudstylecloud) python Format()函数的用法___实例详解一(全例多___各种格式化替换format对齐打印 用代码写出浪漫__合集python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心 python爱心源代码集锦18款 Python中Print()函数的用法___实例详解(全例多 Python函数方法实例详解全集(更新中...) 《 Python List 列表全实例详解系列一》__系列总目录、列表概念 用代码过中秋python海龟月饼你要不要尝一口 python练习题目录 草莓熊python turtle绘图风车版附源代码 草莓熊python turtle绘图代码玫瑰花版附源代码 草莓熊python绘图春节版圣诞倒数雪花版附源代码 巴斯光年python turtle绘图__附源代码 皮卡丘python turtle海龟绘图电力球版附源代码 Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程超详细 色彩颜色对照表一(16进制、RGB、CMYK、HSV、中英文名) 2024年6月多家权威机构____编程语言排行榜__薪酬状况 手机屏幕坏了____怎么把里面的资料导出18种方法 【CSDN云IDE】个人使用体验和建议含超详细操作教程python、webGL方向) 查看jdk安装路径在windows上实现多个java jdk的共存解决办法安装java19后终端乱码的解决 vue3 项目搭建教程基于create-vueviteVite Vue 2023年春节祝福第二弹——送你一只守护兔让它温暖每一个你【html5 css3】画会动的小兔子炫酷充电字体特 别具一格原创唯美浪漫情人节表白专辑(复制就可用)html5,css3,svg)表白爱心代码(4套) SVG实例详解系列一(svg概述、位图和矢量图区别图解、SVG应用实例 【程序人生】卡塔尔世界杯元素python海龟绘图附源代码世界杯主题前端特效5个附源码HTMLCSSsvg绘制精美彩色闪灯圣诞树HTMLCSSJs实时新年时间倒数倒计时(附源代码) 2023春节祝福系列第一弹上放飞祈福孔明灯祝福大家身体健康附完整源代码及资源免费下载 tomcat11、tomcat10 安装配置Windows环境详细图文 Tomcat端口配置详细 Tomcat 启动闪退问题解决集八大类详细
