文本与字体
1）阴影：text-shadow
代码：
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>文字阴影</title>
6 <style type="text/css">
7 p {
8 /*文字的宽度，大小设定*/
9 font-family: Times, Verdanna, Geneva, sans-serif;
10 font-weight: bold;
11 font-size: 30px;
12 /*背景颜色设定*/
13 background-color: #C0C0C0;
14 /*文字颜色设定*/
15 color: #40E0D0;
16 /*阴影效果*/
17 /*text-shadow:-5px -5px 3px #00C957,*/
18 /*5px 5px 3px #7FFFD4;*/
19 /*用阴影实现描边*/
20 text-shadow: -1px 0 #D2691E,
21 0 -1px #D2691E,
22 1px 0 #D2691E,
23 0 1px #D2691E;
24 }
25 </style>
26 </head>
27 <body>
28 <p>阴影属性<br />晨落梦公子</p>
29 <!--<br />换行符-->
30 </body>
31 </html>View Code
妙点领悟：可以利用阴影实现发光效果，如设置为text-shadow : 0 0 3px #FFFFFF即可
2）溢出文本处理：text-overflow
格式：text-overflow : clip | ellipsis | ellipsis-word
clip:直接裁剪溢出的文本
常用）
ellipsis-word:省略溢出，结尾是 最后一个字
代码：
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>处理溢出</title>
6 <style type="text/css">
7 li {
8 /*设置链表属性*/
9 list-style: none;
10 line-height: 22px;
11 font-size: 12px;
12 border-bottom: 1px solid #D2691E;
13 width: 220px;
14 /*溢出内容为隐藏*/
15 overflow: hidden;
16 /*强制文本单行显示 */
17 white-space: nowrap;
18 /*设置文本的溢出处理方法 */
19 text-overflow: ellipsis;
20 }
21 </style>
22 </head>
23 <body>
24 <ul>
25 <li>·春节前夕赴江西看望干部群众</li>
26 <li>·向宁夏人民"云拜年"|神曲《四个全面》</li>
27 <li>·马家军兴奋剂独家内幕曝光 王春霞等10人联名举报</li>
28 <li>·朝鲜通报将发射卫星 外媒猜测准备发射远程导弹</li>
29 </ul>
30 </body>
31 </html>View Code
常用方法
1 /*溢出内容为隐藏*/
2 overflow: hidden;
3 /*强制文本单行显示 */
4 white-space: nowrap;
5 /*设置文本的溢出处理方法 */
6 text-overflow: ellipsis;3）对齐文本 word-wrap和word-break
格式：边界换行：word-wrap : nomal | break-word
nomal: break-word:
有必要说明一下：nomal中溢出的是一个连续的词（如：特别长网址）
word-break normal | break-all | keep-all
normal:同上
break-all: keep-all:
代码：
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>边界换行</title>
6 <style type="text/css">
7 p {
8 font-family: Verdanna,Geneva,sans-serif;
9 border 1px solid #40E0D0;
10 padding: 10px;
11 width: 220px;
12 font-size: 12px;
13 /*连续字换行 */
14 /*word-wrap:break-word;*/
15 word-wrap: normal;
16 /*字内换行 */
17 /*word-break: break-all;*/
18 /*word-break: normal;*/
19 /*word-break: keep-all;*/
20 }
21 </style>
22 </head>
23 <body>
24 <p>新华网北京2月2日电，la2日来到江西看望慰问广大干部群众，
25 向全国各族人民致以新春祝福。去年全国人代会，la参加江西团审议，
26 代表们向他发出邀请，这次应约而至，首站就是井冈山。这是la继200
27 6年、2008年后第三次上井冈山。
28 http://news.sina.com.cn/c/nd/2016-02-03/doc-ifxnzanm4038315.shtml.adsafjdshfkdshgkhdskfjdsfhehfkdjfh</p>
29 </body>
30 </html>View Code
4)使用服务器端字体 @font-face 规则
格式：见代码
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>字体调用</title>
6 <style type="text/css">
7 @font-face {
8 font-family: myfont;
9 src: url(字体/雪.ttf) format("truetype");
10 }
11 p {
12 font-family: myfont;
13 font-size: 36px;
14 color: #FF3321;
15 }
16 </style>
17 </head>
18 <body>
19 <p>abc<br />晨落梦公子</p>
20 </body>
21 </html>View Code
考虑到字体兼容问题，设立format来约束
.ttf 对应 truetype
.otf 对应 opentype
.eot 对应 eot
关于字体有：
font-family：设置文本的字体名称。 就是为字体规定个名字。
font-style：设置文本样式。 数值有normal(正常),italic(斜体),oblique(倾斜),inherit(从父元素继承字体样式)。
font-variant :设置文本是否为小型大写字母大小写。 即小写字母均被转换为大写。数值有normal,samll-caps(显示小型的大写字母),inherit。
font-weight：设置文本的粗细。 不再赘述，以前讲过。
font-stretch：设置文本是否横向的拉伸变形。 不多言了，貌似所有浏览器都不支持。
font-size：设置文本字号的大小。 常用百分比表示（这里的百分比是基于父类的）。
5）配色 HSL色彩模式
格式：hsl length | percentage | percentage
length：色调。可取任意值。其值除以360的余数为0表示红色，为240表示蓝色等等。
percentage ：饱和度。范围为0%~100% 数值越大越鲜艳。
percentage ：明亮度。范围同上。数值越大越亮。
代码：
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>配色方案</title>
6 <style type="text/css">
7 .hsl {
8 height: 20px;
9 border: 1px solid #f00;
10 padding: 10px;
11 height: 170px;
12 background-color: hsl(0,0%,50%);
13 color: hsl(0,100%,50%);
14 font-size: 12px;
15 text-align: center;
16 line-height: 25px;
17 width: 320px;
18 }
19 ul {
20 width: 320px;
21 margin: 0;
22 padding: 10px 0;
23 border-top: 1px solid #ccc;
24 }
25 li{
26 float: left;
27 margin: 1px 0 0 1px;
28 width: 50px;
29 height: 15px;
30 list-style: none;
31 font-size: 12px;
32 line-height: 15px;
33 }
34 /*可以对第八个li进行相关设置*/
35 li:nth-child(8){background-color: hsl(0,100%,100%);}
36 li:nth-child(9){background-color: hsl(0,75%,100%);}
37 li:nth-child(10){background-color: hsl(0,50%,100%);}
38 li:nth-child(11){background-color: hsl(0,25%,100%);}
39 li:nth-child(12){background-color: hsl(0,0%,100%);}
40
41 li:nth-child(14){background-color: hsl(0,100%,75%);}
42 li:nth-child(15){background-color: hsl(0,75%,75%);}
43 li:nth-child(16){background-color: hsl(0,50%,75%);}
44 li:nth-child(17){background-color: hsl(0,25%,75%);}
45 li:nth-child(18){background-color: hsl(0,0%,75%);}
46
47 li:nth-child(20){background-color: hsl(0,100%,50%);}
48 li:nth-child(21){background-color: hsl(0,75%,50%);}
49 li:nth-child(22){background-color: hsl(0,50%,50%);}
50 li:nth-child(23){background-color: hsl(0,25%,50%);}
51 li:nth-child(24){background-color: hsl(0,0%,50%);}
52
53 li:nth-child(26){background-color: hsl(0,100%,25%);}
54 li:nth-child(27){background-color: hsl(0,75%,25%);}
55 li:nth-child(28){background-color: hsl(0,50%,25%);}
56 li:nth-child(29){background-color: hsl(0,25%,25%);}
57 li:nth-child(30){background-color: hsl(0,0%,25%);}
58
59 li:nth-child(32){background-color: hsl(0,100%,0%);}
60 li:nth-child(33){background-color: hsl(0,75%,0%);}
61 li:nth-child(34){background-color: hsl(0,50%,0%);}
62 li:nth-child(35){background-color: hsl(0,25%,0%);}
63 li:nth-child(36){background-color: hsl(0,0%,0%);}
64 </style>
65 </head>
66 <body>
67 <div class="hsl">
68 <div>色调：0 红色</div>
69 <div>竖向：亮度：横向：饱和度</div>
70 <ul>
71 <li></li> <li>100%</li> <li>75%</li> <li>50%</li> <li>25%</li> <li>0%</li>
72 <li>100%</li> <li></li> <li></li> <li></li> <li></li> <li></li>
73 <li>75%</li> <li></li> <li></li> <li></li> <li></li> <li></li>
74 <li>50%</li> <li></li> <li></li> <li></li> <li></li> <li></li>
75 <li>25%</li> <li></li> <li></li> <li></li> <li></li> <li></li>
76 <li>0%</li> <li></li> <li></li> <li></li> <li></li> <li></li>
77 </ul>
78 </div>
79 </body>
80 </html>View Code
新学到只是点：随意解释一句吧。li:nth-child(20){background-color: hsl(0,100%,50%);}：为设置 li 的第二十个 背景颜色为hsl色彩模式。
这里注意分号在中括号里面，ps:写多了Java总以为在外面(⊙﹏⊙)b。
另有HSLA RGB RGBA等就是添加了个透明度。
如果只是单纯的调节透明度可以用opacity:0.5。如li:nth-child(1){optacity : 0.5;}。
背景
多重背景 backgroud
可选数值有：
background-image：指定或检索对象的背景图像。
直接 url 连接即可。
background-origin：指定背景的原点位置。
border-box:原点位置从边框开始
padding-box:原点位置从内边距开始
content-box:原点位置从内容开始
详情参考下图。
background-clip：指定背景的显示区域。
参数同上。
background-repeat：设置或检索对象的背景图像是否及如何重复铺排。
不再赘述。
background-size：指定背景图片的大小。
数值有：length percentage cover contain
这里只解释cover 和 contain
cover : 保证覆盖完背景区域，但可能会剪切掉部分图像。
contain： 保证背景图像完全显示出来，但可能会不完全覆盖背景区域。
background-position：设置或检索对象的背景图像位置。
代码：
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>多重背景</title>
6 <style type="text/css">
7 /*这里注意逗号，用逗号隔开 */
8 /*这里的px是用来定位置的 */
9 /*第一种方法 */
10 /*body {*/
11 /*background: url("图片/狗3.jpg") 300px 185px no-repeat,*/
12 /*url("图片/狗4.jpg") 500px 220px no-repeat,*/
13 /*url("图片/狗1.jpg") 300px 220px no-repeat;*/
14 /*}*/
15 /*第二种方法 */
16 /*又有个问题╮(╯▽╰)╭，这里这样写会出现下划线，但也能执行，但总觉的怪怪的，*/
17 /*body {*/
18 /*background-image: url("图片/狗3.jpg"),url("图片/狗4.jpg"),url("图片/狗1.jpg");*/
19 /*background-position: 200px 185px,500px 220px,300px 220px;*/
20 /*background-repeat: no-repeat,no-repeat,no-repeat;*/
21 /*}*/
22 /*这样写就没事，貌似以前就见过这是只要格式为 方法-方法 就会出现下划线(╯﹏╰) */
23 body {
24 background: url("图片/狗3.jpg"),url("图片/狗4.jpg"),url("图片/狗1.jpg")
25 200px 185px,500px 220px,300px 220px
26 no-repeat,no-repeat,no-repeat;
27 }
28 </style>
29 </head>
30 <body>
31
32 </body>
33 </html>多重背景
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>背景的原点位置</title>
6 <style type="text/css">
7 div {
8 /*设置内边框大小 */
9 padding: 50px;
10 /*设置边框颜色 */
11 border: 50px solid rgba(255,153,200,0.6);
12 height: 158px;
13 width: 185px;
14 color: #fff;
15 font-size: 24px;
16 font-weight: bold;
17 text-shadow: 2px 0 1px #f00,-2px 0 1px #f00,0 2px 1px #f00 0 -2px 1px #f00;
18 background: url("图片/狗3.jpg") 0 0 no-repeat;
19 /*原点为边框的开始 */
20 -webkit-background-origin: border-box;
21 -moz-background-origin: border-box;
22 background-origin: border-box;
23 /*原点从内边距开始 */
24 /* -webkit-background-origin: padding-box;
25 -moz-background-origin: padding-box;
26 background-origin: padding-box;*/
27 /*原点从内容开始 */
28 /*-webkit-background-origin: content-box;*/
29 /*-moz-background-origin: content-box;*/
30 /*background-origin: content-box;*/
31 /*指定背景的显示区域*/
32 /*-webkit-background-clip: content-box;*/
33 /*-moz-background-clip: content-box;*/
34 /*-background-clip: content-box;*/
35 /*百分比确定大小 */
36 /*background-size: 50% 50%;*/
37 /*cover和contain确定大小 */
38 /*cover保证覆盖完整个背景区域 contain保证背景图片完全显示 */
39 /*background-size: cover;*/
40 /*background-size: contain;*/
41 }
42 </style>
43 </head>
44 <body>
45 <div>内容从这里开始</div>
46 </body>
47 </html>背景的原点位置
摘自脚本之家
边框
方法为：border-radius
只写一个数值表示每个圆角都是该数值 可以间接为 “口”
写两个数值表示：前一个为 左上和右下 后一个数值为 左下和右上 可以简记为 “X”
写三个数值表示：第一个为 左上 第二个为 右上和左下 第三个为 右下 可以简记为 "斜着的舒心旁"
四个数值表示：是个数值的顺序为：左上 右上 右下 左下。 可以简记为 "]"
记得设置 border 。 要不然就没有了╮(╯▽╰)╭，想想没边框何谈设置边框属性呢O(∩_∩)O哈！。
代码：
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>边框圆角属性</title>
6 <style type="text/css">
7 div {
8 width: 200px;
9 height: 80px;
10 background-color: #ff0000;
11 /*border: 10px solid #FF3321;*/
12 /*下面四个数值可以简单记为到]顺序 */
13 /*border-radius:10px 20px 30px 40px;*/
14 /*另有斜线方法，第一个水平半径，第二个垂直半径*/
15 border-radius: 10px/100px;
16 }
17 </style>
18 </head>
19 <body>
20 <div></div>
21 </body>
22 </html>边框
另外有
border-image：设置边框图像
border-color：设置边框颜色
贴一个多色边框实例
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>多色边框</title>
6 <style type="text/css">
7 div {
8 height: 160px;
9 border-style: solid;
10 border-width: 20px;
11
12 border-color: #40E0D0 #FF3321 #0000FF #FF9912;
13 }
14 </style>
15 </head>
16 <body>
17 <div></div>
18 </body>
19 </html>多色边框
吐槽：好丑！！！好丑！！！好丑！！！ 重要的事情要说三遍！
引用以前学英语时觉得比较吊的一句话 last but not last least，学任何都是循序渐进的的过程，我从未想过一步登天，一蹴而就。看到特别炫的样式，就盲目的去模仿，显然只是生搬硬套，当然这也不是绝对的，你仔细分析代码，并能利用其中一二就挺好的，这就要基于即扎实的基础。基础才是重要的。地基打好，才能擎天。就如上图，边框实在太丑了！当然你也可以加一些特效进去，如阴影。而这就需要你扎实的基本功。曾看到一篇文章，说写程序就好像练功，功法是必要的，但也要举一反三。张无忌练乾坤大挪移快的原因是张无忌早已精通九阳神功，这就如写程序，你把c学好了，学起Java来一定很快，毕竟一些语法是互通的，如for语句就是都有的。
不多说了，道理大家都懂，最后希望我的博文能帮到大家n(*≧▽≦*)n。（博主吃饭去了。。。886）
myGitgub https://github.com/mfx55 希望我的博客能帮到你
