CSS学习(二):字体属性和文本属性
admin
2024-04-27 16:18:09
0

原文链接(csdn上更新可能较慢):CSS学习(二):字体属性和文本属性

1. 字体属性

CSS font属性用于定义字体系列,大小,粗细和文本样式。

1.1 字体系列

CSS使用 font-family属性定义文本字体系列,一般来说建议使用默认字体。


可以同时定义多个字体,用逗号分隔即可。当定义了多个字体时,浏览器会从第一个字体开始查找,查找至浏览器可以显示的字体为止,显示该字体。一般情况下,字体系列的定义会放在body 标签中,这样页面中的所有文字的字体就得到了统一。

1.2 字体大小

CSS使用 font-size属性定义字体大小。


px 是像素单位,谷歌浏览器默认是16px,可以给body 指定整个页面文字大小。另外,标题标签比较特殊,需要单独指定字体大小。

需要注意的是,定义字体大小时必须要带单位。

1.3 字体粗细

CSS使用 font-weight属性定义字体粗细。


实际开发中常用数字指定文字粗细,也可用英文字符指定。font-weight 的默认值是normal,对应数字大小为400,其他的还有bold(700),bolder,lighter。

注意用数字定义文字粗细时,没有单位。

1.4 文字样式

CSS使用 font-style属性定义字体样式。


默认值为normal ,italic表示斜体。

1.5 字体复合属性写法

可以使用font属性一行代码定义多个字体属性,节约代码。

body {font: font-style font-weight font-size/line-hight font-family;
}

需要严格遵守顺序,font-familyfont-size 必须要有。

例如:


1.6 总结

属性表示注意点
font-size字号单位是px像素,一定要跟上单位。
font-family字体实际工作中按照团队约定来定义字体。
font-weight字体粗细加粗是700或者bold,不加粗是normal或者400,记住数字不要跟单位。
font-style字体样式倾斜是italic,默认是不倾斜normal
font字体连写有顺序,字号和字体必须同时出现。

2. 文本属性

CSS Text属性用于定义文本的外观(颜色),对齐文本,装饰文本,文本缩进,行间距等。

2.1 文本颜色

color属性定义文本颜色。


可以使用预定义颜色值,十六进制和RGB代码设置文本颜色。

2.2 对齐文本

text-align属性设置元素内文本内容的水平对齐方式。


属性值解释
left左对齐(默认值)
right右对齐
center居中对齐

2.3 装饰文本

text-decoration属性规定添加到文本的修饰,可以给文本添加下划线,删除线,上划线等。


属性值描述
none默认。没有装饰线(最常用,可以给a标签去掉下划线)
underline下划线。a标签自带下划线(常用)
overline上划线。(几乎不用)
line-through删除线。(不常用)

2.4 文本缩进

text-indent属性来指定文本的第一行缩进,通常是将段落首行缩进。


文本缩进的单位可以是px,也可以是em。em是一个相对单位,1em就是一个字符所占的大小。当text-indent=20em,则恰好缩进两个字符的大小。

2.5 行间距

line-height属性用来设置行间的距离,可以控制文字行与行之间的距离。


行间距=上间距+文本高度+下间距。当我们指定了文本大小时,文本高度就不会发生变化,这时我们再增大行间距,上下间距就会一起变大。

2.6 总结

属性表示注意点
color文本颜色通常用十六进制
text-align文本对齐可以设定文字水平的对齐方式
text-indent文本缩进通常我们用于段落首行缩进2个字的距离
text-decoration文本修饰添加下划线underline 取消下划线none
line-height行高控制行与行之间的距离

相关内容

热门资讯

5年3.6亿!约基奇明夏有望签... 搜狐体育消息,北京时间8月5日,据ESPN薪资专家Bobby Marks消息,约基奇明夏有望签史上最...
又被自己人告了!美国25州起诉... 特朗普政府的全球新关税政策再次遭到美国国内司法挑战。 据新华社报道,美国25个州3日向美国国际贸易法...
降压新策略:增钾控钠更有效的健... 引子:在一个普通家庭的周末,张奶奶因劳累与咸味食品后的后果而感到心悸,血压像海浪般起伏。她忽然意识到...
洋河梦之蓝M6+两连跌 失守5... 来源:酒业内参 新浪财经“酒价内参”过去24小时收集的数据显示,中国白酒市场主要大单品的终端零售总价...
原创 8... 这两年,网络上特别流行“老登”这词儿,而且能套上这两个字的东西实在是太多了。比如 人可以是老登,干的...
港股异动丨石油股走低 延长石油... 港股石油股普遍下跌,其中,延长石油发盈警大跌近14%,中国石油股份跌3%,中国海洋石油跌2.4%,中...
千问迎战Kimi、DeepSe... 成绩单好看,口碑跟不上跑分? AIX财经(AIXcaijing)原创 作者 | 雷晶 编辑 | 金玙...
上市业绩承压之下,老板电器完成... 出品|中访网 审核|李晓燕 厨电行业告别地产上行红利步入存量博弈周期,老牌龙头企业的战略迭代与管理层...
平仓规则为何需要交易决策更清晰... 在期货交易的完整闭环中,开仓往往被视为进攻的起点,而平仓则是决定最终盈亏落袋的关键环节。许多投资者耗...
收评:放量大反攻!创业板暴涨5... 8月4日,A股全天震荡反弹,整体攻势强劲,创业板领涨两市,市场热点轮动加快,板块分化特征明显。截至收...
厘清融资糊涂账 多地推进贷款综... 过去,不少中小微企业办理经营贷款,往往只看清合同上的名义利率,等到放款前后才发现叠加评估费、担保费、...
老鼠仓后一月董事长、总经理全撤... 一个月内,董事长与总经理双双换人。8月1日诺安基金公告,夏宇接替李强出任董事长;仅三周前,刘翔已从齐...
抓!富二代下海圈钱,一个“萝卜... *此图由AI生成 作者| 史大郎&猫哥 来源| 是史大郎&大猫财经Pro 富二代下海圈钱,下手是真狠...
王思聪卸任万达产投董事,六年内... 王思聪正在从万达系逐步退出,近日又卸任一家万达系公司的董事。 据天眼查工商信息显示,万达产业投资有限...
原创 制... 在阅读文章前,辛苦您点下“关注”,方便讨论和分享。作者定会不负众望,按时按量创作出更优质的内容。 文...
中国电竞从“产品出海”走向“智... 以“竞越山海无界,共创全球新程”为主题的2026全球电竞大会日前在上海举行,会上发布了《2026年1...
外资机构密集调研A股公司 三大行业颇受外资机构青睐。 机构调研数据往往暗藏资金偏好。7月以来,外资机构累计调研117家A股上市...
A股报复性大反攻!三大利好曝光... 今天A股大反攻!一起看看发生了什么事情。 8月4日,A股暴涨,上演普天同庆行情,创业板指强势领涨。截...
原创 “... 7月底,西安、上海等地的魏家凉皮门店被曝涨价:秘制凉皮从11元涨到12元,安格斯牛肉芝士堡从15元涨...
【企业参访】探访字节总部:为什... 走进北京字节跳动 活动背景 节跳动作为国内头部互联网科技企业,从创业成长到多元业务布局,快速发展的背...