fighting_使用CSS美化文字
Posted o0孤独夜莺0o
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了fighting_使用CSS美化文字相关的知识，希望对你有一定的参考价值。
CSS3颜色渐变
background-image:linear-gradient(black,blue,green,red);
默认从上到下显示。
示例代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>背景属性的设置</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 div { 9 height:45px; 10 border:2px solid red; 11 } 12 </style> 13 </head> 14 <body> 15 <ul> 16 <li> 17 <h3>颜色渐变（默认从上到下）</h3> 18 <div style="background-image:linear-gradient(black,blue,green,red) ;background-color:gray; height:200px;border:1px solid red;background-repeat:no-repeat;"> 19 20 </div> 21 </li> 22 23 </ul> 24 </body> 25 </html>
background-repeat背景图片平铺
背景填充的方式。
语法：background-repeat：<repeat-style>[,<repeat-style>]
repeat-style可以取的值：repeat-x（北京在横向上平铺）， repeat-y（背景在纵向上平铺），repeat（在横向上和纵向上平铺），no-repeat（背景图像不平铺），round（CSS3背景图片自动缩放直到适应并填充满整个容器），space（背景图像以相同的间距平铺且填充满整个容器或某个方向）。
示例代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>背景属性的设置</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 div { 9 height:45px; 10 border:2px solid red; 11 } 12 </style> 13 </head> 14 <body> 15 <ul> 16 <li> 17 <h3>背景图片默认平铺</h3> 18 <div style="background-image:url(../images/boy1.jpg);background-color:gray; height:260px;border:1px solid red;"> 19 背景图片 20 </div> 21 </li> 22 <li> 23 <h3>背景图片no-repeat不平铺</h3> 24 <div style="background-image:url(../images/boy1.jpg);background-color:gray; height:260px;border:1px solid red;background-repeat:no-repeat;"> 25 背景图片 26 </div> 27 </li> 28 <li> 29 <h3>背景图片repeat-x横向平铺</h3> 30 <div style="background-image:url(../images/boy1.jpg);background-color:gray; height:260px;border:1px solid red;background-repeat:repeat-x;"> 31 背景图片 32 </div> 33 </li> 34 <li> 35 <h3>背景图片repeat-y纵向平铺</h3> 36 <div style="background-image:url(../images/boy1.jpg);background-color:gray; height:260px;border:1px solid red;background-repeat:repeat-y;"> 37 背景图片 38 </div> 39 </li> 40 <li> 41 <h3>背景图片round:将背景图片自动缩放知道适应并填充满整个容器</h3> 42 <div style="background-image:url(../images/boy1.jpg);background-color:gray; height:260px;border:1px solid red;background-repeat:round;"> 43 背景图片 44 </div> 45 </li> 46 <li> 47 <h3>背景图片space:以相同的间距平铺且填充满整个容器或某个方向</h3> 48 <div style="background-image:url(../images/boy1.jpg);background-color:gray; height:260px;border:1px solid red;background-repeat:space;"> 49 背景图片 50 </div> 51 </li> 52 </ul> 53 </body> 54 </html>
backgroun-attachment
背景图像是随对象内容滚动还是固定的。（使用频率：几乎不用）
语法：background-attachment：<attachment>[，<attachment>]*
attchment：fixed（背景图像相对于窗体固定），local（背景图像相对于元素固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容，CSS3），scroll（默认方式，背景图像相对于元素固定，也就是说元素内容滚动时背景图像不会跟着动，因为背景图像总是要跟随元素本身。但会随着元素的祖先元素或窗体一起滚动）
background-position（重点难点）
设置或者检索对象的背景图像位置，必须先指定background-image属性值。
使用频率非常高。
语法：background-position:<position>[,<position>]
position可以取的值有：left | center | right | top | bottom | <percentage> | <length> | 等（查看手册）
background-position该属性提供两个参数值。CSS3中可以提供四个值，每个percentage或length偏移前都必须跟着一个关键字（即left|right|center|bottom|top），偏移量相对关键字位置进行偏移。例如（假设要定义背景图像在容器中右下方，并且距离邮编和底部各20px）：
background:url(test1.jpg) no-repeat right 20px bottom 20px
也可以设置3个参数值，例如：
background:url(test1.jpg) no-repeat left bottom 20px
如果提供两个参数，则第一个用于横坐标，第二个用于纵坐标。
如果只提供一个，则该值用于横坐标，纵坐标默认为50%（即center）。
不适用具体坐标的常见位置如下图所示：（这种应用并不多）
使用坐标，显示图片中的某一位置。（向下为正方向，向上为负方向，向左为负方向，向右为正方向）。
示例代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>背景属性的设置</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 div { 9 height:45px; 10 border:2px solid red; 11 } 12 </style> 13 </head> 14 <body style="background-image:url(../images/boy2.jpg);background-attachment:fixed;background-repeat:no-repeat;"> 15 <ul> 16 <li> 17 <h3>背景图片的位置（原图）</h3> 18 <div style="background-image:url(../images/jd2015img.png);height:200px;background-repeat:no-repeat;padding-left:20px;line-height:20px;"> 19 原图样式 20 </div> 21 </li> 22 <li> 23 <h3>背景图片的位置（难点）</h3> 24 <div style="background-image:url(../images/jd2015img.png);height:20px;background-repeat:no-repeat;padding-left:20px;line-height:20px;"> 25 手机未选中 26 </div> 27 </li> 28 <li> 29 <h3>背景图片的位置（难点）</h3> 30 <div style="background-position:0 -26px;background-image:url(../images/jd2015img.png);height:20px;background-repeat:no-repeat;padding-left:20px;line-height:20px;"> 31 手机选中 32 </div> 33 </li> 34 35 </ul> 36 </body> 37 </html>
background
背景设置的复合属性，可以只通过这一个属性设置背景图片，背景颜色，是否平铺等内容。使用频率非常高。
语法：background：[ background-color ] || [ background-image ] || [ background-repeat ] || [ background-attachment ] || [ background-position ]
顺序方面内有特别的要求。
示例代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>背景属性的设置</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 div { 9 height:45px; 10 border:2px solid red; 11 } 12 </style> 13 </head> 14 <body style="background-image:url(../images/boy2.jpg);background-attachment:fixed;background-repeat:no-repeat;"> 15 <ul> 16 <li> 17 <h3>背景属性的综合属性设置</h3> 18 <div style="background:url(../images/jd2015img.png) 0 -26px no-repeat;padding-left:20px;height:20px;"> 19 手机选中 20 </div> 21 </li> 22 </ul> 23 </body> 24 </html>
list-style-type
列表项样式，主要用在<li>标签，使用频率较低。
也可以通过list-style-image属性指定自己的图片作为列表项样式。
取值的种类较多，查看操作手册即可。
一般都是使用list-style-type:none，即没有列表项图标。
列表属性都具有继承性。
示例代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>列表项样式</title> 6 <meta charset="utf-8" /> 7 </head> 8 <body> 9 <ul> 10 <li> 11 <h3>列表类型的样式</h3> 12 <ul> 13 <li style="list-style-type:square;">第一项（列表项图标为方块）</li> 14 <li style="list-style-type:none;">第二项（没有列表项图标）</li> 15 </ul> 16 </li> 17 <li> 18 <h3>列表类型的样式</h3> 19 <ul> 20 <li style="list-style-type:square;">第一项（列表项图标为方块）</li> 21 <li style="list-style-type:none;">第二项（没有列表项图标）</li> 22 </ul> 23 </li> 24 <li> 25 <h3>列表项都具有继承性</h3> 26 <ul style="list-style-type:none;"> 27 <li>第一项（继承父标签）</li> 28 <li style="list-style-type:square;">第二项（不适用从父标签继承过来的样式）</li> 29 </ul> 30 </li> 31 </ul> 32 </body> 33 </html>
list-style-image
自定义列表项前面的图标。使用频率几乎为0。
list-style
列表项属性的综合设置（可以综合设置上述的列表项属性），使用频率较高。
以上是关于fighting_使用CSS美化文字的主要内容，如果未能解决你的问题，请参考以下文章