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行高控制行与行之间的距离

相关内容

热门资讯

提振消费,如何增强供需适配性 云南大理白族自治州,游客(左)与摄影师一起挑选照片。 北京朝阳区,一名智能柜补货员在卸货。 以上图...
贝仕达克:预计2025年度净利... 每经AI快讯,贝仕达克1月30日晚间发布业绩预告,预计2025年归属于上市公司股东的净利润860万元...
英媒:随着就业市场降温,美国大... 来源:格隆汇APP 格隆汇1月30日|据英国金融时报,本周,美国的一些大型企业公布了裁员计划,预计将...
终结5连败!德约3-2逆转辛纳... 北京时间1月30日,2026赛季网球大满贯澳大利亚公开赛继续进行,在男单下半区的半决赛中,塞尔维亚天...
去年辽宁非金融企业债务融资达6... 1月30日,人民银行辽宁省分行召开2026年一季度新闻发布会,介绍2025年度辽宁省金融运行主要情况...
“大V带货”遭监管重拳:基金销... 记者 洪小棠 1月29日,证监会证券基金机构监管司发布了新一期《机构监管情况通报》(下称《通报》),...
ST宁科完成组织架构重大调整 ... 来源:新浪财经-鹰眼工作室 【财经网讯】宁夏中科生物科技股份有限公司(证券代码:600165,股票简...
原创 i... 很多人看到苹果这份“史上最强”季度成绩单时,第一反应都是:这销量也太夸张了吧? 尤其是大中华区 ...
Cloudflare入驻B站和... IT之家 1 月 30 日消息,Cloudflare 宣布入驻B站和小红书,认证显示为“Cloudf...
首日涨超160% 智能制造装备... 上证报中国证券网讯(记者 张雪)1月30日,美德乐正式登陆北交所。截至当日收盘,公司股价报109.5...
特朗普提名下一任美联储主席 据新华社消息,美国总统特朗普30日提名美联储前理事凯文·沃什为下任美联储主席,这一提名还需获得参议院...
由盈转亏、业绩下滑超85%!2... 面对每天上千份上市公司公告该看哪些?重大事项公告动辄几十页几百页重点是啥?公告里一堆专业术语不知道算...
原创 华... 金价的上涨和美元的下跌已经让整个依赖美西方货币体系和金融体系获利的人感受到了巨大的威胁。 在美国财政...
康佳集团原董事长周彬、原副总裁... 老牌家电巨头康佳集团(000016)在经历控制权变更与管理层换血的震荡期后,迎来了更为剧烈的“余震”...
安诚财险2025年揽收保费52... (图片来源:视觉中国) 蓝鲸新闻1月30日讯(记者 陈晓娟)日前,安诚财产保险股份有限公司(下称“安...
国际金价、银价,暴跌! 据新华社1月30日消息,国际黄金和白银价格1月29日上演“过山车”行情,双双站上高位后又暴跌,市场剧...
A股115家半导体公司2025... 近期,A股半导体行业上市公司陆续披露半年度业绩预告。据集微网统计,截至2026年1月30日,在已披露...
一图读懂服务消费新政:涉及交通... 红星资本局1月30日消息,为优化和扩大服务供给,聚焦重点领域、潜力领域,加快培育服务消费新增长点,促...
沪农商行:着力于稳健运营、控制... 证券日报网1月30日讯 ,沪农商行在接受调研者提问时表示,投资交易策略方面,公司将基于对2026年宏...
实力“圈粉”全球客:去年上海离... 记者从市税务局获悉,2025年境外旅客在沪办理退税申请单数量同比增长3倍,退税商品销售额和退税额均增...