首页 > 其他分享 >v6_css文本属性

v6_css文本属性

时间:2022-12-29 15:04:14浏览次数:44  
标签:family text height 残奥会 v6 line font 文本属性 css

  • 字体大小 font-size:px 浏览器默认16 设计图常用12
  • 字体 font-family:可同时设定多个字体,逗号分隔,直到识别匹配字体
  • 颜色color:3种可表示:颜色英文 16进制写法 rgb(0,0,255)调比例
  • 加粗 font-weight
  • 倾斜font-style​
  • 文本水平对齐 text-align:多行文本也适用,center多行全居中显示 justify两端对齐
  • 行高 line-height /*对单行,将文字高度等于行高,文字自行垂直方向上居中对多行,文字高度缩小,等于行距缩小,调整显示在div内*/​
  • 首行缩进 text-indent:可用px 缩进两个字符2em [em是相对单位,对此时字体大小乘2]
  • 字间距 letter-spacing:英文用word-spacing 间距可负数
  • 文本修饰 text-decoration:上划线oevrline 下划线underline 删除线line-through 没有划线none
  • 检索大小写,英文字母修饰 text-transform:每个首字母大写capitalize 全部大小写 uppercase / lowercase none
  • 文字简写 font:是font-style font-weight font-size/line-height font-family的简写;font itatic 800 30px/80px "宋体";顺序不可改变且必须同时指定font-size和family属性时才起作用

**以上属性点,以下例子均有体现
<style>
.p1{
font-size: 18px;
color: slateblue;
}
.p2{
font-family: 宋体;
}
h1{
font-weight: 400;
font-style: italic;
text-align: left;
}
.box1{
text-align: center;
width: 500px;
background:rosybrown
}
.box2{
text-align: justify;
width:500px;
background: lemonchiffon;
height: 120px;
line-height: 24px;

}
.box3{
width: 500px;
background: lightgray;
height: 80px; /*整个div高度*/
line-height: 80px;
text-align: center;
text-decoration: none;
}
.box4{
width: 450px;
background: floralwhite;
}
#p4{
letter-spacing: 0px;
text-indent: 2em;
}
#p5{
text-transform: lowercase; /*单词首字母都大写*/
font:italic bold 20px/1em 宋体; /*斜体 加粗 大小/行高与字同高 字体*/
}
</style>
</head>
<body>
<p class="p1">dfcgvhbj nkfcgvjhbk-jnfcknjmbwlk,nm. </p>
<p class="p2">dfcgvhbj nkfcgvjhbk-jnfcknjmbwlk,nm. </p>
<p>默认dfcgvhbj nkfcgvjhbk-jnfcknjmbwlk,nm. </p>
<h1>世界你好</h1>
<div class="box1">都好的</div>
<div class="box2">
冬残奥会比赛项目知识科普随着北京2022年冬奥会的关注度持续
升温冬残奥会的脚步也逐渐近了虽然冬残奥会项目较为精简但依然
精彩纷呈让我们一起来了解一下本次北京冬残奥会的6项运动项目吧~
比赛场地国家体育馆国家体育馆。
</div>
<div class="box3">奥运会</div>
<div class="box4">
<p id="p4">
第13届冬季残疾人奥林匹克运动会即2022年北京冬季残奥会。温冬
残奥会的脚步也逐渐近了虽然冬残奥会项目较为精简但依然精彩纷呈
让我们一起来了解一下。
</p>
<p id="p5">
北京冬季残奥会设7大项,81小项。北京将承办所有冰上项目,即残奥
冰球,残奥冰壶。We are family everyone。
</p>
</div>


标签:family,text,height,残奥会,v6,line,font,文本属性,css
From: https://blog.51cto.com/u_14124898/5977597

相关文章

  • Mit xv6 (一)
    操作系统是软工之母,正如游戏是文学和计算机科学的完美结合,所谓艺术,不也只是fineart吗文学、科学,不应设置边界Mitxv6Mitxv6必须在Linux操作系统上安装。文中提供了x......
  • CSS的skewX()函数二维倾斜实现平行四边形按钮和梯形按钮组
    CSS的skewX()函数二维倾斜实现平行四边形按钮和梯形按钮组https://blog.csdn.net/DDD4V/article/details/122417369......
  • CSS
    1.概念:SascadingStyleSheets层叠样式表  层叠:多个样式可以作用在同一个html的元素上,同时生效2.好处:  1.功能强大  2.将内容展示和样式控制分离    *降低......
  • 04-前端技术_CSS与CSS3美化页面
    目录​​二,CSS与CSS3美化页面​​​​1,CSS简介​​​​1.1 什么是CSS?​​​​1.2 样式层叠次序​​​​2,CSS基础语法​​​​2.1介绍​​​​2.2注释​​​​3,CSS使用......
  • Web前端期末大作业--马尔代夫旅游网页设计(HTML+CSS+JavaScript+)实现
    目录​​前言介绍:​​​​网站首页:​​​​关于马尔代夫:​​​​酒店信息介绍:​​​​最新优惠政策:​​​​旅游须知模块:​​​​关于我们模块:​​​​主要源码结构:​​​......
  • CSS-修改video样式代码
    /*video::-webkit-media-controls-fullscreen-button{display:none;//更改是否显示全屏按钮}*//*video::-webkit-media-controls-play-button{display:none;}//......
  • Biniware Run V6.1.0 快速启动工具中文版使用说明
    前言BiniwareRun是一款便携式Windows桌面工具,可让您从一个地方快速访问自己喜欢的网站地址,文件和文件夹。只需从桌面拖放任何网站地址,文件或文件夹内的彩色圆圈内,您就可......
  • MIT 6.828 Homework: biggers files for xv6
    任务概述在这个作业中,需要增加xv6系统允许的文件大小。当前的xv6文件大小被限制为140扇区(sectors),因为xv6的索引节点(innode)包含了12个“直接的”块(bl......
  • WebUI自动化必备技能-HTML和css知识详解
    每天进步一点点,关注我们哦,每天分享测试技术文章本文章出自【码同学软件测试】码同学公众号:自动化软件测试,领取资料可加:magetest码同学抖音号:小码哥聊软件测试 学习w......
  • css3动画序列,属性,热点图,步长,大熊案例
    9.css3动画的基本是使用<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale......