美化边框和文本

Posted 2022-12-31 muxi95

美化文本：

font-size：字体大小，常用em、px、%、rem作单位，预设值small、large、medium，可继承，

font-weight：加粗字体，属性为bold，加粗字体，（100-900之间的数值也可以）或者设置700（与bold效果相同），400是正常情况，100-900之间取整，可继承；

font-style：italic 倾斜字体，可继承；

letter-spacing调整字间距，单位px或者em都可以，可继承；

text-indent首行缩进，一般是在p标签上面使用，span标签使用margin-left：2em可实现效果；

text-decoration，给文字设置下划线，默认是没有线条，overline（文字顶部），underline（文字底部），line-through（文字中部，效果和del元素一样），只有先设置了下划线位置之后，才能设置下划线的颜色，样式等等。

修饰首字母：伪元素选择器，【：：first-letter】，可以选择元素中的第一个文字；

可以运用的属性：font 属性color 属性、background 属性、margin 属性、padding 属性、border 属性、text-decoration、vertical-align (仅当 ‘float‘ 为 ‘none‘ 时)、text-transform、line-height、float、clear

（2）修饰首行：伪元素选择器，【：：first-line】，可以选中元素中的第一行文字；

（3）修饰选中文字：伪元素选择器，【：：select】可选中被用户框选的文字；

（4）字体类型：分为衬线字体和非衬线字体

         font-family，设置字体类型，为了避免全部都失效的情况，通常将最后一个值设置为"sans-serif"或"serif"。

向浏览器引入字体：@font-facefont-family：“名字”；src：url（字体地址）。

 

美化边框：

圆角边框：【border-radius】设一个值是正圆，两个值是椭圆。