H5C3练习心得 2024.01.04（鼠标悬停缩放效果）--box-shadow，font字体，文本样式

（一）box-shadow

1.作用

为盒子添加阴影

2.属性语法

box-shadow：h-shadow v-shadow blur spread color position

• h-shadow:水平阴影的的位置，允许负值（必填）
• v-shadow：垂直阴影的位置，允许负值（必填）
• blur:模糊的距离（选填）
• spread:阴影的尺寸（选填）
• color：定义阴影的颜色（选填）
• position:定义内外阴影,inset为内阴影，默认为外阴影（选填）

注意：?

• 默认是外阴影但是不能写outset,否则会失效，只有当需要内阴影时写inset。
• 盒子阴影不占空间，不会影响盒子排列。

?（二）font

1.定义

font属性用于设置文字的复合属性 ：文本的正斜、字体粗细、字体大小、字体、字体尺寸。

2.属性

• font-style:用于设置字体风格
• font-weight:用于设置字体粗细
• font-size:用于设置字体的大小
• font-family：用于设置字体

语法：

选择器 { font: font-style font-weight font-size/line-height font-family;}

使用font属性时，必须按照上述属性的顺序书写且必须有font-size和font-family属性，否则font属性不起作用

（1）font-style

设置字体风格

属性值：

• normal:默认值，标准字体样式
• italic:显示斜体样式

（2）font-weight

?设置字体粗细

（3）font-size

设置字体大小

（4）font-family

设置字体

可以同时设置多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体，
如果都没有，则以我们电脑默认的字体为准。

同时罗列多个字体的写法:

选择器{font-family: Arial,“Microsoft Yahei”, “微软雅黑”;}

如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: “Times New Roman”;,尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
?

（三）文本样式

1.文本缩进

文本缩进的属性为text-indent,值为数字加px或者数字加em（常用到需要文本缩进）

2.文本水平对齐

文本水平对齐的属性为text-align，值为left,center,right

3.文本修饰

文本修饰的属性为text-docoration,默认值为none，其他值为underline（文本下划线）、line-through（文本删除线）、overline（文本上划线），在开发中，一般会使用text-decoration:none来清除a标签默认的下划线效果

4.文本行高（important）

调整文本行高的属性为line-height，这样可以让文本显示不那么拥挤！