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

相关内容

热门资讯

上合示范区加速推动智能制造 产... 来源:中国新闻网 中新网青岛11月21日电(王禹)从定制化智能家居的柔性生产线到工业互联网平台的全链...
原创 美... 大家好,我是闻叔!近期,美国在台海问题上保持罕见的沉默,却在稀土谈判上设定了仅11天的“最后期限”,...
官宣!银行系公募巨头,新总经理... 原总经理离任3个月后,工银瑞信基金新总经理人选敲定。 11月21日,工银瑞信基金公告显示,杨帆出任工...
科创信息股价跌幅2.32%,此... 雷达财经雷助吧出品 文|林宜采 编|深海 11月21日,科创信息股价报收于13.48元/股,跌幅2....
凌源钢铁股份有限公司 关于全资... 股票代码:600231 转债代码:110070 股票简称:凌钢股份 转债简称:凌钢转债 编号:临20...
原创 波... 一、巨头沦陷:病症藏不住了 大家好,我是老陈瞰世界。 说句实在话,不管是国外的行业大佬,还是国内的...
哈空调(600202.SH):... 格隆汇11月21日丨哈空调(600202.SH)公布,为进一步优化公司资源配置与资产结构,降低管理运...
原创 百... 自俄乌冲突爆发以来,欧洲的能源问题就成了一个持续的麻烦,至今依然没有得到解决。欧盟当时急于对俄罗斯实...
港股六连跌,上市公司回购却出现... 来源:财报御龙官 风险提示:本文所有内容与观点,均基于对财经新闻的解读,旨在提供信息参考与市场动态分...
高质量发展与消费升级-2025... 11月21日,由《经济观察报》主办、北京希肯国际文化集团联合主办的“2025美好生活新消费高峰论坛”...
原创 3... 陈伟杰的人生曾是励志范本。10 多岁外出闯荡,2010 年创立杰盛集团,凭借敢拼敢干的劲头,将企业打...
容大感光:林海望累计质押股份数... 每经AI快讯,容大感光11月21日晚间发布公告称,其中林海望持有公司股份约4411万股,杨遇春持有公...
手握“童颜针”却陷亏损泥潭,东... 手握市场大热“童颜针”的东方妍美,港股上市路遇阻。11月19日,新京报贝壳财经记者从港交所官网获悉,...
屈臣氏,拟在香港、英国两地上市... 来源:瑞恩资本RyanbenCapital 华尔街日报引述消息报道,长和(0001.HK)计划让旗...
中国为什么没有人工智能泡沫论? 人工智能最近几年大热,成为一个影响世界经济的热点,也在很大程度上面会影响人类未来。经过几年的发展,到...
指数的繁荣,才是股市的繁荣 文 | 阑夕 刚刚结束不久的AI炒股比赛,我愿称之为年度最佳的一次整活。 结果我们都看到了,全球六...
美股惊魂一周,纳指创4月来最大... AI泡沫破裂的担忧、经济放缓的预期以及获利回吐的压力正在市场上交织碰撞,导致本周美股出现数月来最剧烈...
“一县一业、一域一品” 激活县... 来源:经济参考网 11月21日,新华社国家高端智库发布《新时代县域经济学——中国县域现代化的理论与实...
莲花控股宣布180.75万股限... 雷达财经 文|杨洋 编|李亦辉 11月21日,莲花控股(证券代码:600186)发布了关于2023年...
惠创联盟直播间李总股票课程经销... 如果你正苦于不知如何着手挽回损失,或者担心自己处理不好,可以添加锐明法律微信随时在线,电话同步:19...