文字美化学习总结

Posted 2022-07-31 caoxiangwang

总结

一、            美化文本

1. 1.      字体大小【font-size】：

a)        含义：字符框的高度

b)       可继承

c)        默认值：medium

d)       取值：预设值：medium：中等字号；larger：大字号；smaller：小字号

数值：px【常用】：绝对字体大小

em【常用】：相对于父元素的字体大小，若没有父元素，则使用基准字号；基准字号：浏览器设置的默认字体大小，通常为16px，可更改

%：原理同em，例如200%，相当于2em，50%，相当于.5em

rem：相对于基准字号

1. 2.     加粗字体【font-weight】：将【font-weight】设置为【bold】，以加粗文字，该属性可继承
2. 3.     倾斜字体【font-style】：将【font-style】设置为【italic】，以倾斜文字，该属性可继承
3. 4.     字间距【letter-spacing】：设置【letter-spacing】的值为px或em，可控制文字间的间隙，该属性可继承
4. 5.     首行缩进【text-indent】：可实现第一个文字向后缩进
5. 6.     给文字划线【text-decoration】：设置【text-decoration】属性，可以给文字划线。
6. 7.     下划线 text-decoration：underline
7. 8.     删除线 text-decoration：line-through
8. 9.     上划线 text-decoration：overline
9. 10.  线颜色 text-decoration-color

第二部分

1. 1.     修饰首字母【伪元素选择器  ::first-letter】：【::first-line】可选中元素中的第一行文字
2. 2.     修饰选中文字【伪元素选择器 ::selection】：【::selection】可选中被用户框选的文字
3. 3.     字体类型：

a)     概念：衬线字体和非衬线字体

b)    修改字体类型【font-family】

c)     使用【@font-face指令】加载web字体

d)    使用图标字体

二、            美化边框

圆角边框【border-radius】

Border-radius:50px 0 40px 0( 左上 右上 右下 左下)。

Border-radius：50%（上下左右角为50%，在正方形情况下城圆形）

三、         美化背景

1. 1.     【background-image】设置背景图片
2. 2.      使用【background-repeat】设置图片重复方式

a)        repeat：【默认值】从左到右从上到下重复

b)       no-repeat：不重复

c)        repeat-x：仅在x轴方向上重复

d)       repeat-y：仅在y轴方向上重复

1. 3.        使用【background-position】设置图片在边框盒中的位置

预设值：left、right、top、bottom、center

1. 4.        使用【background-size】设置背景图尺寸
2. 5.        使用【background-attachment】固定背景图：scroll：【默认值】背景图跟随元素移动；fixed：背景图固定。
3. 6.        使用速写属性【background】统一设置：background：背景图 位置 / 尺寸 重复方式 固定方式 背景颜色
4. 7.      背景渐变

线性渐变：linear-gradinet

重复渐变：repeating- linear-gradinet

圆形渐变：radial-gradient（circle，red，green）；

四、             透明度和鼠标样式

透明度【opacity】和alpha通道

   透明度Opacity   取值0-1之间。  0为完全透明。

鼠标样式：cursor:pointer;鼠标变小手   auto ：标准光标   

 default ：标准      pointer, hand ：手形光标      wait ：等待光标         text ：I形光    vertical-text ：水平I形光标     no-drop ：不可拖动光标

not-allowed ：无效光标      help ：帮助光标     all-scroll ：三角方向标

move ：移动标     crosshair ：十字标

阴影

文字阴影【text-shadow】

text-shadow：2px 2px 4px rgba（0,0,0,.5）

第一个参数：2px表示阴影部分的位置向x轴方向（横坐标）的偏移量为2px。

第二个参数：2px表示阴影部分的位置向y轴方向（纵坐标）的偏移量为2px。

 

第三个参数：4px表示阴影部分的模糊半径，该数值越大，阴影越模糊。

第四个参数：rgba（0,0,0,.5）表示阴影的颜色。

盒子阴影【box-shadow】

Box-shadow：4px 5px 6px rgba（0,0,0,.5）

四个参数分别表示x轴偏移量，y轴偏移量，模糊半径，阴影颜色。

Box-shadow：inset 0px 0px 10px 5px rgba（0,0,0,.5）

加入inset关键字，可将阴影的扩散方向由外变为内