0
点赞
收藏
分享

微信扫一扫

CSS基础(2)——CSS的常见属性样式

我是芄兰 2022-04-03 阅读 58
前端css

字体样式

  • 字体大小:font-size: 数字 + px (谷歌浏览器默认16px)
  • 字体粗细:font-weight: (①关键字(多使用):normal正常  bold加粗 ②纯数字:100~900整百数, 400正常  700加粗)

注意: ①不是所有字体都提供了九种粗细,部分取值在页面中是没有变化的

         ②实际开发中,要么使用关键字,要么使用400和700来设置字体粗细

  • 字体样式:font-style: (normal正常  italic倾斜)
  • 字体系列:font-family: (可写多种字体,字体由多个单词组成时,用'' "包裹,中间以,隔开,最后以字体系列结束,不需要" "包裹)

注意: ①windows默认微软雅黑,macOS默认苹方

         ②从前往后识别字体,如果电脑中未安装该字体,则会显示下一个字体,假如都不支持,则会显示系统默认字体

         ③实际开发中,尽量使用系统常见自带字体,懂得都懂

         ④常见字体系列:sans-serif: 无衬线字体 (粗细均匀无装饰可用于大部分网页)

                                      serif: 衬线字体(粗细不均有笔锋可用于报刊书籍)

                                      monospace: 等宽字体(宽度相等可用于程序代码的编写)

  • 字体font相关属性连写形式

font:style weight size family;

小Tipswsf(稍微舒服)

注意:①只能省略前两个属性,后两个不能省略(如果省略了取值,相当于设置了默认值)

           ②单独样式必须要写在连写的后面,否则单独样式不生效,这其实是一个样式的层叠问题,很简单,如果给同一个标签设置了相同的属性,此时样式会层叠(覆盖),写在最下面的会生效


文本样式

  • 文本缩进:text-indent:  数字 + px 或者 数字 + em(推荐:1em=当前标签中font-size的大小
  • 文本水平对齐方式:text-align:(left左对齐  right右对齐  center居中)

注意:如果需要让文本水平居中,text-align属性给文本所在标签(文本的父元素)设置

  • 文本修饰:text-decoration:(none无装饰线(常用) underline下划线(常用) line-through删除线(不常用) overline上划线(几乎不用)) 

注意:开发中会使用text-decoration: none; 去清除a标签默认的下划线

  • 行高:line-height: 数字 + px 或者 倍数(当前标签font-size的倍数)

注意:①让单行文本垂直居中可以设置line-height:文字父元素的高度

·         ②网页精准布局时,会设置line-height:1,可以取消上下间距

          ③行高和font连写属性存在覆盖问题,line-height和size是等价的,故需要防止发生覆盖

举报

相关推荐

0 条评论