CSS能够对网页中元素位置的排版进行像素极其精确的控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
查看网页的CSS代码 ,右键选择检查元素,会出现如图所示的界面。我们要修改的便是右边框中的CSS代码。
点击左上角图标 ,可以自主选择你要更改的区域,选择以后会自动弹出代码,方便快捷。
注意,更改右边框中的代码只能查看效果,刷新之后又会恢复原样,要想真的更改需在博客园设置中的页面定制CSS代码框中输入更改的代码段进行更改。
这里将一些重要功能及代码进行简单介绍。
1.字体大小及颜色更改
在你选中的代码段增加这样一行代码便可实现字体大小控制:
1 font-size:50px;
颜色控制直接改 color 就可以,至于后面的颜色你可以自己调试,直到找到满意的颜色:
1 color: #4C9ED9;
颜色代码共6位,可以在 0 到 f 之间任意更改
想要更改,需在 页面定制CSS代码 框中将函数名包括,如:
1 #navList{ 2 font-size:18px;
3 color:#4C9ED9; 4 }
2.页面利用率更改
我们在控制台右边代码框找到 #home 这一项,可以看到里面的 width 后有一个百分比,这便是页面利用率。我比较喜欢饱满一点,所以更改后代码为:
1 #home{ 2 88%; 3 }
可以将此代码直接输入到 页面定制CSS代码 框中。
3.边框大小更改
同样是在 #home 中,可以看到一项 padding ,之后的数字便是对象四边的补丁边距。如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。 如果只提供一个,将用于全部的四条边。 如果提供两个,第一个用于上-下,第二个用于左-右。 如果提供三个,第一个用于上,第二个用于左-右,第三个用于下 。代码实例如下:
1 #home{ 2 padding: 30px 10px ; 3 }
如果只想更改顶部边距大小,即将 padding 改为 padding-top 就可以了。
4.背景颜色或图片
如果只想简单的改一下背景颜色,直接在 #home 中更改 background-color 即可:
1 body{ 2 background-color:#ffffff; 3 }
颜色可以自行调试
当然很多人喜欢用图片来做背景,这样更具个性,这个时候就要用到这段代码了:
1 body{ 2 background-image:url(" XXX ") 3 }
括号中的XXX处应该填入你想要用的图片的 url 地址,该地址必须是你的网页中的地址,否则它无法识别,教你一个简单的方法来获取url地址。
首先,重新打开一个博客园网站,点击上传头像,上传一张你想做背景的图片,在该页面点右键检查元素,可以在控制台找到你上传图片的路径及图片名称,将该地址复制到 XXX 处即可。
最后将上图所示这段代码写到 页面定制CSS代码 框中即可。我的背景代码为:
1 body{ 2 background-image: 3 url("http://upload.cnblogs.com/will-crop-avatar/1329815/1329815-20180203152301218-1285383155.jpg?id=1517642590499404") 4 }
你只能用自己的url,别人的是无法识别的
5.文本框背景透明化
当我们将背景图片设置好之后,会看到文本框遮挡,导致背景图片不美观,这个时候如果将文本框改为透明状就会好看很多,很简单,改透明说到底也是改颜色,改的方式有三种,直接上代码:
1 background-color: 2 rgba(250, 190, 250, 0.8);
1 background-color:rgb(250, 190, 250); 2 opacity:0.8;
1 background: 2 url(path/my_png_bg.png) no-repeat center center scroll;
除了可以改文本框,你还可以改其它任何框的背景,不同的地方代码认可不同,所以三种方法换着尝试即可,这里250,190,250对应粉色,后面的0.8表示不透明度是80%,都可以自己调试从而找到合适的颜色。
6.设置动态页面
我一直想进行动画设计,查了很多资料,说是在 div class = "bgk" 中添加如下代码:
1 -webkit-animation-name: kenburns; /*-animation-name:为@keyframes 动画归定名称,必须与-animation-duration同时使用,否则无动画效果*/ 2 animation-name: kenburns; 3 4 -webkit-animation-duration: 16s; /*定义动画完成一个周期所需时间*/ 5 animation-duration: 16s; 6 7 -webkit-animation-timing-function: linear; /*规定动画从头到尾以相同速度播放,还有其他几个速度值*/ 8 animation-timing-function: linear; 9 10 -webkit-animation-iteration-count: infinite; /*规定动画播放次数,infinite为无限次*/ 11 animation-iteration-count: infinite; 12 13 -webkit-transform: scale(1.2); /*规定动画的缩放特效,scale:规定2D缩放*/ 14 transform: scale(1.2); 15 16 -webkit-filter: blur(10px); /*定义图片的模糊程度,显示为毛玻璃效果*/ 17 filter: blur(10px);
然后绑定子元素选择器:
1 .bgk-image:nth-child(1) { 2 -webkit-animation-name: kenburns-1; /*选择器上的名称*/ 3 animation-name: kenburns-1; 4 z-index: 3; /*动画堆叠顺序,值越大表示越先播放,离用户越近*/ 5 } 6 .bgk-image:nth-child(2) { 7 -webkit-animation-name: kenburns-2; 8 animation-name: kenburns-2; 9 z-index: 2; 10 } 11 /*..........................*/
最后给每一个选择器进行动画设计:
1 @-webkit-keyframes kenburns-1 { 2 0% { 3 opacity: 1; /*规定不透明度*/ 4 -webkit-transform: scale(1.2); 5 transform: scale(1.2); 6 } 7 27.861% { 8 opacity: 0; 9 -webkit-transform: scale(1); 10 transform: scale(1); 11 } 12 80.435% { 13 opacity: 0; 14 -webkit-transform: scale(1.21); 15 transform: scale(1.21); 16 } 17 100% { 18 opacity: 1; 19 } 20 } 21 /*................*/
据说这样可以达到动画效果,而且是在背景有几张图片的前提下实现的,但我找了好久都没有找到 div class = "bgk" 这个样式,可能需要添加新的样式,这个就比较高深了,我还是一个新手,对CSS不是很了解,希望知道的朋友帮我解决一下这个难题。[掩面哭]
7.添加超链接
通过添加超链接,可以让流浪者通过你的博客跳转到你的公众号或者微博等等,这样可以互相拉动发展,岂不是很妙。添加超链接在 HTML代码框首中添加,实例如下,网址1和网址2处填入你要跳转的网址,并把名字添加在后方即可。
1 <table width="500px" cellpadding="2" class="chara1" align="center">
2 <tbody>
3 <tr>
4 <td><a href="网址1" target="_blank">链接名字(点击进入)
5 </a></td>
6 </tr>
7 <tr>
8 <td><a href="网址2" target="_blank">链接名字(点击进入)
9 </a></td>
10 </tr>
11 </tbody></table>
据说CSS还有很多更高级的用法,比如重置自己的CSS样式,选择器,利用CSS记录访客,等等。
我只是一个爱好者,并没有进行基础的学习,纯粹自己捣鼓出的一些东西,以后会找关于CSS的书来读读,文中的失误之处还望前辈指出,让我有所进步,谢谢。