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年前买了2700... 花105万元买黄金 持有5年 现在能赚多少钱? 2月13日 记者从武商MALL·世贸获悉 有顾客于近...
新股消息 | 琻捷电子港股IP... 来源:智通财经网 2月14日,中国证监会国际合作司发布《关于琻捷电子科技(江苏)股份有限公司境外发行...
广东唯一!深圳入选首批“电影+... 深圳商报·读创客户端首席记者 刘琼 深圳迎来“电影+”消费新机遇!2月12日,国家电影局、商务部联合...
新点软件:累计回购约183万股 每经AI快讯,新点软件2月13日晚间发布公告称,截至本公告披露日,公司已完成本次回购。公司通过上海证...
AI太火了,除夕夜也不打烊!八... 【导读】除夕夜开讲AI,卖方分析师春节八天路演排满 中国基金报记者 孙越 随着马年春节进入倒计时,卖...
NVMe-oF 存储区域网络系... 全球领先的市场报告出版商环洋市场咨询(Global Info Research)最新发布【2026年...
一次算力政策研讨实录:算力调度... 算力调度的复杂度远超水电的调度,全国算力调度“一张网”的建设,是通过政府搭台、标准引领、市场运作的综...
容光投资创始合伙人卢安平:坚守... 时序更替,春归华夏,马年新春的钟声即将敲响。结合我过去20多年在资本市场中的感悟与理解,和读者朋友们...
开年三家券商齐接债券业务罚单,... 财联社2月14日讯(记者 高艳云)债市严监管持续加码,春节前最后一个交易日对券商债券业务违规集中“亮...
北京国管丨市级政府投资基金已投... 2月13日,由北京国管管理的北京市人工智能产业投资基金、北京信息产业发展投资基金共同投资的北京海致科...
镜观中国·新华社国内新闻照片一... 新华社照片,北京,2026年2月14日 这是2月13日拍摄的渤中26-6油田开发项目(二期)导管架安...
群核科技港股上市获证监会备案,... 来源:澎湃新闻 “杭州六小龙”中的群核科技港股IPO迎来新进展,获中国证监会备案,拟冲刺“全球空间智...
【环球财经】IEA下调2026... 转自:新华财经 新华财经布鲁塞尔2月13日电(记者黄晓兰)国际能源署(IEA)12日发布石油市场报告...
格鲁吉亚国家银行获准进入中国银... 格鲁吉亚国家银行2月12日宣布,该行已获准进入全球规模最大、最重要的金融市场之一——中国银行间债券市...
原创 委... 在当今的国际能源市场,委内瑞拉的石油资源成了一个极其尴尬的香饽饽。美国通过军事手段成功地控制了委内瑞...
原创 美... 在1月底路透社等媒体发布消息称美国将逐步取消稀土价格下限后,美国能源部表示“消息不属实”,与该消息相...
前字节高管创业教育类出海项目,... 文|富充 编辑|苏建勋 2024年11月,李可佳、吴俊东、张栖铭决定一起创业,做一款“帮助用户终身学...
成立四年之际,泉果基金迎来新一... 来源:新浪基金 泉果基金在迈入发展第四年之际迎来新一任总经理。 2月14日,泉果基金发布的公告显示,...
原创 美... 关税加征,美国先行。这几年,美国在贸易上动作频频,尤其是针对中国的商品,一层又一层地加征关税。回想2...
楚雄滇中有色金属有限责任公司企... 2026年2月13日,楚雄滇中有色金属有限责任公司企业科协正式挂牌成立,这是企业深化科技创新、凝聚科...