【学习打卡】第13天 前端零基础入门 页面化妆师CSS

课程名称：前端零基础入门（体系课）

课程章节：第一&&二章 字体样式

主讲老师：(课程中没有显示)

课程内容：

今天学习的内容包括：

• CSS字体和文本样式

• 文字颜色

• 文字大小

• 文字字体

• 文字加粗

• 行高

• 对齐方式

• 文本装饰
  

课程收获：

css文字样式

字体{font-famliy:"字体一","字体二"，sans-serif}

英文字体包含空格或者中文字体时，需要用双引号括起来 多个字体，用英文逗号隔开

设置了多个字体，他会告诉浏览器，去找第一个字体，第一没找到找第二个，都没找到就使用浏览器默认字体

当font-famliy引用嵌套时，外部使用双引号，内部使用单引号

font-family字体属值：具体字体名，字体集（所谓字体集不是单个字体名称，而是一类字体的统称 ）

不同字体集说明了不同字体的装饰效果

字体集

1.serif:衬线字体

2.sans-serif:无衬线字体

3.monospace:等宽字体

4.cursive：草书

5.fantasy（幻想体）      

不同的字体集说明了对不同字体的装饰效果

2.文字大小：font-size

3.文字颜色：color

4.文字粗细：font-weight

5.文字样式：font-style      

将p标签里的文字字体设置为宋体，并将通用字体集sans-serif做为备选字体

style=" font-family:'宋体',sans-serif;"

CSS中设置文字字体使用的属性是font-family。

字体如果是中文，用引号包裹起来；

多个字体设置，字体与字体之间用逗号隔开；

引号嵌套，外面使用双引号，里面使用单引号。    

font-size:文字大小  长度单位

值：绝对单位|相对单位

in,cm,mm,pt,pc

xx-small,x-small,small,medium,large,x-large,xx-large与缩放系数有关

默认是medium大小，就是16px，这种单位不推荐使用

相对单位：px，em，%

px，受显示器分辨率的影响

larger,smaller相对于父元素的文字大小变大和变小

em，相对于父元素的大小

em和%都是针对于父元素进行的大小设置

1.当不设置字体大小时，默认为浏览器默认值

2.浏览器一般默认字体大小16px       

不同浏览器显示效果不同利用绝对单位设置文字大小。不建议使用。而且不受分辨率影响。

相对单位：px像素（手机端一般不用），em（成倍，针对父元素）,%（针对父元素）（受分辨率影响）。

larger与smaller相对父元素字体大小变大变小。

标签内继承的是父元素的计算值 而不是相对值的百分比  

相对单位：

1.px像素 受显示器分辨率的影响，手机端一般不适用px

2.em/%

相对单位：px像素（手机端一般不用），em（成倍，针对父元素）,%（针对父元素）（受分辨率影响）。

em和%都是针对父元素来设置大小

larger与smaller相对父元素字体大小变大变小。

绝对单位：绝对大小，不能随浏览器分辨率或父元素大小的改变而改变      

CSS中设置文字大小使用的属性是font-size。本题中，h2的字体大小设置的值是larger，它的字体会比div大；p标签的字体大小设置的值是1.5em，它的字体大小是其父元素div的1.5倍，是30px；span标签的字体大小设置的值是150%，是它的父元素p标签的1.5倍，那么就是45px 

font属性简写

1. 同时设置font-size和 font-family，属性才起作用

2.书写顺序

用空格隔开，前三个顺序任意,后两者必须按顺序写

font-style   font-variant   font-weight   font-size-line-height   font-family

3.font-size/line-height要写在一起，用“/”隔开   

font属性简写的话，每个属性值之间用空格隔开，书写顺序是：font-style font-variant  font-weight  font-size  font-family，如果font-family的值有多个时，值用逗号分开

今天学习课程共用了86分钟，今天主要学习了CSS为字体、文本提供了大量的样式属性，可以使我们的页面式更加丰富的多彩。今天也是收获满满的一天，希望能够每天学习一点点,一直坚持下，加油!