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

相关内容

热门资讯

银行“激战”消费贷 【导读】银行“激战”消费贷:布局分化、不良率普涨和中小银行破局之道 中国基金报记者 张玲 二季度刚开...
重磅!广州黄埔已暂缓房票转让 广州市黄埔区房票。 近日,网传广州黄埔房票转名暂停。4月9日,南方网、粤学习记者向广州市黄埔区城中村...
宏利新能源股票A:2025年利... AI基金宏利新能源股票A(012126)披露2025年年报,2025年基金利润9356.57万元,加...
马斯克被调查! 一场真正的权力游戏。 2026年4月6日,OpenAI给加州和特拉华州总检察长写了封信。信不长,但分...
一则消息刺激比特币大涨7%!8... 在经历长时间低迷后,比特币市场情绪正在出现明显转向。期权市场数据显示,投资者正加码押注比特币将升向8...
昆明冶金研究院申请脱铅药剂FT... 国家知识产权局信息显示,昆明冶金研究院有限公司申请一项名为“一种脱铅药剂FT236及其制备方法与应用...
证券业私募资管规模逼近6万亿元 中国证券投资基金业协会发布的最新数据显示,截至2026年2月末,券商私募资管产品规模达5.95万亿元...
原创 吴... 长沙晚报掌上长沙4月11日讯(全媒体记者 凌晴)10日,省委常委、市委书记吴桂英会见泰国正大集团资深...
原创 5... 美债被疯狂抛售,日债跌的惨不忍睹,可唯独稳定的像棵屹立不倒的青松,甚至有微微升值的迹象。那么,为何三...
“聚焦新质出海,合规共赢未来”... 4月10日,“聚焦新质出海,合规共赢未来”经贸交流活动暨南南国际贸易促进中心入驻广州国际会客厅仪式在...
永顺泰涨0.66%,成交额1.... 来源:新浪证券-红岸工作室 4月10日,永顺泰涨0.66%,成交额1.48亿元,换手率2.16%,总...
原创 今... 今天汽柴油价格变化将于4月21日24时进行调价!截至2026年4月11日,今天,农历二月二十四,星期...
居然之家召开2026新零售品牌... 4月10日,居然之家2026年新零售品牌生态大会在北京居然大厦顺利召开。本次大会共计近30家新零售品...
卖抗生素的公司干新能源,一季度... 文|新10亿商业参考 单季度净利润暴涨32倍,从连续四年亏损到一朝扭亏为盈,甚至还能倒赚一笔——这...
为什么有钱人也不买GUCCI了... 曾经一只酒神包便能掀起排队热潮的GUCCI(古驰),如今似乎正通过关店、降价来重新找回市场。 3月底...
葛卫东家族持仓曝光合计超190... 葛卫东家族持仓曝光:合计超190亿现身九家上市公司股东名单 近日,随着2022年财报的陆续披露,知名...
证监会:完善融资并购制度,提升... 人民网北京4月10日电 (记者王震)据证监会网站消息,4月10日,经国务院同意,中国证监会发布《关于...
北向资金一季度持股情况公布 1... 人民财讯4月11日电,2026年一季度北向资金持股情况如期公布。根据万得数据,总体来看,与去年四季度...
无锡“搭台”,接轨“中国商星” 商业航天作为航天新业态,是建设航天强国的重要力量,也是新质生产力的典型代表。 4月10日,中国商星及...
顺丰控股:受春节错期影响1月数... 来源:问董秘 投资者提问: 年关之前一般是顺丰业务的黄金季,但今年首月,顺丰量、收整体承压,顺丰今年...