(一)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,这样可以让文本显示不那么拥挤!