关于CSS的部分指导和黑标笔版式的疑问
评分: +79+x

这里是关于CSS部分的指导和如何制作自定义黑标笔版式的一些小技巧,很多人都觉得改CSS和制作自己的版式很难。其实并不难,只需要知道每一个属性的名称和改法就可以了。那么在开始改之前你需要知道这些。

CSS是什么?它能用在哪里?

→点此返回目录←
CSS是网站的重要组成部分之一,HTML为框架,而它是填充框架的东西。文章中也可以经常看到。例如这个这个。实际上我们无论到哪都能看到CSS,眼前的特效其实也就是CSS的一部分。在站内我们称它为版式,在一些已经无法靠文笔上升的文中也可以使用来加强读者的观感。
→点此返回目录←

关于色码

→点此返回目录←
色码分类有很多种,我们一般都会给它们命名。如:#000,这种的话叫16进制色码。rgb(252,252,252),这种叫rgb值。rgba(252,252,252,0),这种我们将其称之为rgba值。
上面所说的rgb和rgba好像也就多了个字而已有什么区别吗?它们当然有区别,r其实是red的缩写,g是green的缩写,b是blue的缩写。也就是所谓的三原色,世界也由这三种颜色混合而成。a是什么?a其实是英文alpha的缩写,你可以理解成为混合度或者说透明度,一般用小数来表示如:rgba(252,252,252,0.5)、rgba(252,252,252,.5),它们所表示的其实都一样,只不过是换了一种写法仅此而已。
如果觉得色码不好用其实可以使用颜色名,如:black、blue、yellow、lightyellow,这些都是颜色名,也就是颜色的英文。一般都可以百度得到,需要具体了解可以百度一下。
→点此返回目录←

一些关于CSS的语法介绍和用法

→点此返回目录←

[[module css]]

/*↑写上[[module css]]代表你正在引用这一部分的代码↓*/
.XXXX {/*←↑↓→我们把一个个像这样的叫选择器,像这个的话,就是选择所有class="XXXX"的元素*/
/*←↑↓→这里面放上一个个的属性*/
}
/*还有这种结构的↓*/
#XXXX { /*←选择ID为XXXX的元素*/
/*←↑↓→这里面放上一个个的属性*/
}
/*↓*/
:link { /*←选择所有元素中没访问(点击)过的链接*/
/*←↑↓→这里面放上一个个的属性*/
}
/*↓*/
:visited { /*←选择所有元素中访问(点击)过的链接*/
/*←↑↓→这里面放上一个个的属性*/
}
/*↓*/
:active { /*←选择所有元素中活动的链接*/
/*←↑↓→这里面放上一个个的属性*/
}
/*↓*/
:hover { /*←鼠标放置于元素上面时会如何*/
/*←↑↓→这里面放上一个个的属性*/
}
/*↓*/
:focus { /*←选择获取焦点的元素*/
/*←↑↓→这里面放上一个个的属性*/
}
/*↓*/
:before { /*←在每个所选元素之前插入内容*/
/*←↑↓→这里面放上一个个的属性*/
}
/*↓*/
:after { /*←在每个所选元素之后插入内容*/
/*←↑↓→这里面放上一个个的属性*/
}
/*↓*/
:root { /*←根部的选择器在黑标笔中会用到*/
/*←↑↓→这里面放上一个个的属性*/
}

/*↓↓↓例如:↓↓↓*/

#header h1 a{/*←我们来翻译下即可知道,版头大字及链接,以及选择为id为header的选择器。*/
line-height: 0px;/*←线性高度,用于控制网页的层叠结构*/
color: #eee;/*←这是16进制色码,属性名是color则代表字体的颜色*/
font-family: BauhausLTDemi, Simhei, Arial, sans-serif;/*←这是字体选择,每一个字体都有自己的名字Arial和BauhausLTDemi都是自带的字体*/
font-size: 180%;/*←这里是字体大小的设置,可以把180%换为large或者是1800px*/
text-shadow: 3px 3px 5px #000;/*←文字的阴影设计,扩散四周颜色为黑色*/
letter-spacing: 0.9px;/*←文字间的距离*/
}
.mobile-top-bar {/*←选择所有class="mobile-top-bar"的元素*/
display: none;/*←显示为无*/
position: absolute;/*←定位方式为相对*/
left: 0px;/*←左侧距离*/
bottom: 0px;/*←底部距离*/
z-index: 0;/*←Z函数*/
}
#side-bar a:visited {/*←选择所有id为side-block中已经访问过的链接元素*/
color: #b01;/*←链接的字体颜色为红色*/
}

[[/module]]

→点此返回目录←

CSS的部分属性介绍

→点此返回目录←
background:;/*←背景*/
color:;/*←颜色,一般都是用于指定选择器的字体颜色*/
border:;/*←边框,用于决定选择器的边框效果*/
background-clip:;/*←决定背景剪切效果,换个易懂的词,遮罩或者说蒙版图层*/
background-size:;/*←用于决定图片的大小*/
font-family:;/*←所用字体,这里只需要写字体的名称即可*/
font-size:;/*←字体的大小*/
z-index:;/*←Z函数决定执行层叠顺序*/
background-image:;/*←这里决定背景的图片*/
border-image:;/*←图片边框,也可以用于制作渐变边框*/
height:;/*←高度*/
width:;/*←宽度*/
max-weight:;/*←最大宽度*/
max-height:;/*←最大高度*/
display:;/*←显示*/
opacity:;/*←透明度*/
/**/←这个是一般CSS内的注解
margin:;/*←外边距*/
padding:;/*←内填充*/
position:;/*←定位*/
float:;/*←浮动*/
border-bottom:;/*←下边框*/
border-top:;/*←上边框*/
border-left:;/*←左边框*/
border-right:;/*←右边框*/
border-radius:;/*←边框圆角*/
text-align:;/*←文字位置*/
text-decoration:;/*←文字下划线*/
text-shadow:;/*←文字阴影*/
box-shadow:;/*←边框阴影*/
background-color:;/*←背景颜色*/
—var:;/*←变量*/
content:;/*←输入内容*/

/*↑↑↑↑↑只要掌握这些内容就能做出版式来,当然要教的不止这点,如果我想到其他需要用上的会来补充*/

/*↓↓这里是语法以及修改说明↓↓*/

/*↓↓边框部分↓↓*/

border:solid 1px #000;/*←solid是一种边框样式表示实线边框,1px是边框的粗细可以进行调整,#000是边框的颜色代表黑色*/
border:double 1px rgb(0,0,0);/*←double代表双边框,1px是粗细,而rgb(0,0,0)是rgb值其实也是代表着黑色*/
border:dashed 1px rgb(0,0,0,1);/*←dashed代表虚线边框,1px是粗细,而rgba(0,0,0,1)是rgba值其实也是代表着黑色*/
border:dotted 1px black;/*←dotted代表点线边框,1px是粗细,black就是黑色啦。*/
border:groove 3px gray;/*←groove代表3D沟槽边框,一般效果取决于边框的颜色*/
border:ridge 3px gray;/*←groove代表3D脊边框,一般效果取决于边框的颜色*/
border:inset 3px gray;/*←inset代表3D嵌入式边框,一般效果取决于边框的颜色*/
border:outset 3px gray;/*←inset代表3D突出式边框,一般效果取决于边框的颜色*/

/*↓↓盒形阴影↓↓*/

↓↓在CSS3中一般通过box-shadow来进行修改边框的阴影。↓↓

box-shadow:10px 10px 10px gray;/*←最左边的10px是阴影的范围,中间的10px是阴影的扩散程度,最右边的10px是阴影的模糊度,gray是阴影的颜色*/

/*↓↓圆角↓↓*/

↓↓在CSS3中一般通过border-radius来进行修改边框的圆角。↓↓

border-radius:25px;/*←25px为边框的圆角程度可以根据数值修改。*/

/*↓↓图片边框以及渐变边框↓↓*/

border-image:url(图片的链接);/*←这是图片边框的修改方法*/
border-image:linear-gradient(45deg,#000,#fff,gray);/*←关于渐变边框,45deg为渐变旋转角度,#000和#fff以及gray为混合渐变所使用的颜色,至少需要两个色码才可以进行渐变,linear-gradient是线性渐变的意思。*/
border-image:radial-gradient(#000,#fff,gray);/*←关于渐变边框,45deg为渐变旋转角度,#000和#fff以及gray为混合渐变所使用的颜色,至少需要两个色码才可以进行渐变,radial-gradient是径向渐变的意思。在渐变中不一定需要设定角度,不设定角度的情况下颜色会从上到下进行填充。*/

/*↓↓背景部分↓↓*/

background:url(图片的链接);/*←在url处的括号内输入图链可以加入图片背景*/
background-image:url(图片的链接);/*←在url处的括号内输入图链可以加入图片背景,当然这种格式也可以*/
background-color:#000;/*←在定义背景颜色处输入色码或者是rgb和rgba值*/
background-image:linear-gradient(45deg,#000,gray,#fff);/*←在背景属性内输入线性渐变或者径向渐变并进行定义创造出渐变背景*/
background-size:20%;/*←在背景大小进行百分比调试或者用像素(px)以及覆盖(cover)来调试*/
background-clip:text;/*←此处可输入裁剪的元素,如:text、box*/

/*↓↓字色↓↓*/

color:#fff;/*←这里可以修改颜色,在color这个属性值内输入色码或者rgb、rgba值可以决定字色*/
color:rgb(252,252,252);/*←像这样*/
color:rgba(252,252,252,1);/*←还有这样*/

/*↓↓显示部分↓↓*/

display:none;/*←这个的话是不显示,none表示无,inline表示存在,inline-block表示块状显示*/
display:inline;/*←存在*/
display:inline-block;/*←块状显示*/

/*↓↓透明度↓↓*/

opacity:0;/*←0表示完全透明1表示完全不透明,透明和不显示是两种不一样的情况,在完全透明的情况依然能被选中,而不显示则代表完全无法选中,除非元素显示*/
opacity:.5;/*←也可以使用小数来进行表示,透明度一般在0~1之间*/

/*一般定位的属性值都有五个,static(默认)、fixed(固定定位,也就是你滑动也不会改变位置,始终固定于一个位置)、relative(相对定位,相对其他元素的定位是正常的)、absolute(绝对定位,依靠最近的元素进行定位)、sticky(粘性定位,基于用户滚动时的位置来定位)、*/
position:flixed;/*←固定定位*/
position:relative;/*←相对定位*/
position:absolute;/*←绝对定位*/
position:sticky;/*←粘性定位*/
position:static;/*←默认*/

/*↓↓浮动↓↓*/

/*关于浮动的属性值有五个,left(浮动于左侧)、right(浮动于右侧)、bottom(浮动于底部)、top(浮动于顶端)、clear(禁止浮动)、*/
float:left;/*←浮动于左侧*/
float:right;/*←浮动于右侧*/
float:top;/*←浮动于顶端*/
float:botto;/*←浮动于底部*/
float:clear;/*←禁止浮动*/

/*↓↓填充(内边距)元素↓↓*/

/*填充单边的属性值padding-top:100px;(浮顶部填充100px)、padding-bottom:100px;(底部填充100px)、padding-left:100px;(左侧填充100px)、padding-right:100px;(浮右侧填充100px)、padding:100px 100px;(填充的简写)、*/
一个padding属性可以有四个值
padding:25px 24px 23px 22px;/*←上下左右都有填充值,上填充25px,右填充24px,下填充23px,左填充22px*/
padding:25px 24px 23px;/*←上填充25px,左右填充24px,下填充23px*/
padding:25px 24px;/*←上下填充25px,左右填充24px*/
padding:25px;/*←全部都填充25px*/

/*↓↓大小(尺寸)↓↓*/

width:25px;/*←宽度为25px*/
height:25px;/*←高度为25px*/
max-width:25px;/*←最大宽度为25px*/
max-height:25px;/*←最大高度为25px*/
min-width:25px;/*←最小宽度为25px*/
min-height:25px;/*←最小高度为25px*/
line-height:25px;/*←行高为25px*/

/*↓↓字体↓↓*/

font-size:25px;/*←用于决定字体的大小,目前为25px*/
font-family:Times New Roman", Times, serif;/*←字体种类,当字体不兼容时会引用下一种,一般字体名称超过1个字的都需要加上引号,如:font-family:"微软雅黑";*/
font-style:normal;/*←字体的样式,目前的为默认,也就是正常的字体共分为三种,normal(正常)、italic(斜体)、oblique(倾斜文字和斜体有很高的相似性)*/
font-weight:2px;/*←用于决定字体的粗细,目前粗细为2px*/

/*↓↓外边距↓↓*/

margin:25px;/*←决定外边距的大小目前声明是上下左右为25px*/
margin-top:30px;/*←上边距,目前为30px*/
margin-bottom:35px;/*←下边距,目前为35px*/
margin-left:2px;/*←左边距,目前为2px*/
margin-right:10px;/*←右边距,目前为10px*/

/*↓↓层叠函数↓↓*/

z-index:1;/*←数值决定执行层叠数*/
→点此返回目录←

CSS的属性的使用

→点此返回目录←

在阅读以下内容之前请确保认真的读过→CSS的部分属性介绍←以及→一些关于CSS的语法介绍和用法←

↑↑↑如果没有认真的看完或者是觉得没看懂,可以点击锚点返回去看。↑↑↑

一般的改法都是点电脑键盘的F12来查看要改的元素然后搬下来改,例如:
#header h1 a { /*这是一块版头大字的部分*/
}
将板块搬下来后我们可以对它进行修改和自定义。
#header h1 a {
color:你的色码、颜色名或者rgb和rgba值。然后别忘了加上;
border:这里写上边框类型,粗细以及颜色。然后加上;
position:这里写定位的方式,再加上;
display:这里写上显示方式,如果不想让它显示可以写none;
background:这里写上背景的颜色或者是url(图片的网址);
background-clip:背景的切割方式;
}
#header h1 a:hover { /*也可以对它进行选择器上的修改,这里我修改的是有鼠标置于其上时的情况*/
color:#000;
border:solid #000 1px;
position:static;
display:none;
background:url(www.xxxxxx.com);
background-clip:text;
}
→点此返回目录←

黑标笔遇见的常见问题

→点此返回目录←
关于如何自定义黑标笔Sekai_sSekai_s写了一篇帖文,这部分内容将基于原文进行描述。
下面将对一部分疑问进行解释↓

为什么我改了属性并没有出现反应?

这种问题大概是因为你没有保存或者说你保存了,但是你的手机或者电脑浏览器并不兼容你修改的属性。

为什么我改了根部选择器的东西再改一部分其他的选择器,手机端的页面会炸开来?

大概因为你手机页面的元素定位被新加入的属性所打乱了,一般删掉出现错误的那一块即可。

为什么我的手机加载黑标笔版式时黑标笔无法加载出来?

大概是因为网络或者cookie数据的问题,cookie数据是你的浏览器缓存数据,清除数据重新进入即可。如果清了数据还是无法进入,那请尝试换个浏览器,这是浏览器的兼容问题。

为什么黑标笔加载速度会慢?

想要提升加载速度一般就要减少其中的一些不必要物品,例如不必要的图片以及一些不必要的外网字库,加载这些会让进入网页的速度变慢。

我该怎么才能完全做出一套属于自己风格的黑标笔版式?

这个问题很难解释,首先要做到完全自定义黑标笔版式就需要学会很多的CSS代码,如果这点做不到那就只能改个配色。

为什么这里没有出一个黑标笔的教程?

不知道如何才能把黑标笔说到0基础也能完全自定义化,这点也是我的不足。所以才会把Sekai_sSekai_s的帖子放在上面。
→点此返回目录←

那么学会这些你能做些什么呢?

→点此返回目录←
做一份自定义黑标笔版式、一份自定义sigma9版式,等等,你不满足于这些。
让我想想还能做什么?啊有了,还能让你的沙盒变得更卡。
→点此返回目录←

看完这些内容了我该怎么去做“坏事”?

→点此返回目录←

很简单,大概你的电脑然后点击F12这个按键,或者说用鼠标右键点审查元素,然后找到你想改的修改。改完之后把它复制下来然后粘贴到这个里面↓↓↓↓↓↓↓↓↓↓↓↓↓,切记:即使是F12改的东西也会有极限,可能会出现兼容性问题。

[[module css]]

你的CSS

[[/module]]

例如:↓

[[module css]]

#XXXX {

color:#000;

}

[[/module]]

如果是黑标笔的话:↓

[[module css]]

:root {

—var-:252,252,252;

}

#XXXX {

color:#000;

}

[[/module]]

→点此返回目录←

那么做完版式之后,想将版式发布该怎么做呢?

→点此返回目录←

在主页的新页面中创建一个新页面,并按下页面底部的标签按钮输入“原创”“版式”。↓

用以下格式来表达你的代码。↓

[[code type="css"]]

你的代码

[[/code]]

例如:↓

[[code type="css"]]

.XXXX {

color:#000;

}

[[/code]]

并在页面内引用你的版式↓

[[module CSS]]

@import url("http://scp-wiki-cn.wikidot.com/后缀/code/1");

[[/module]]

或者这么引用↓

[[include :scp-wiki-cn:component:版式网址后缀]]

→点此返回目录←

最后的最后

→点此返回目录←
恭喜你看完了这一篇指导,同时也感谢你看完这一大篇难看懂的玩意。如果你有更多的想法或者意见可以联系Whlie rock does not match any existing user name,也祝愿你能做出属于自己的黑标笔版式或者是sigma9版式,玩的愉快。
→点此返回目录←

困难内容(慎入!)

→点此返回目录←

!以下内容对新手极不友好,如有不适请返回目录!

/*↓↓过渡↓↓*/

/*↓transition的意思为过渡,同时也是四个量的缩写,分别是:transition-property:;(←需过渡属性)、transition-duration:;(←过渡时间长短)、transition-delay:;(←时间长短)、transition-timing-function:;(←所运行函数)、*/

transition:color 2s;/*←一般都用这种简写方式用transition来定义过渡,旁边用秒数或者小数来表达过渡时间,目前需要过渡的元素是字色,过渡时间为2秒*/
transition:all 2s;/*←如果想每个属性都过渡则输入all*/
transition-property:all;/*←默认过渡属性为all,需要时则填入所需过渡的属性,不需要或者不需要定义时写none*/
transition-timing-function:linear;/*←过渡运行方式,这里可以填入多种运行方式,通常见到的有:linear(线性,以正常速度运行至结束),ease(默认,以慢速开始,结束则很快),ease-in(慢速入,规定由慢速开始),ease-out(慢速出,规定慢速结束),ease-in-out(缓慢,规定慢速运行慢速结束),cubic-bezier(n,n,n,n)←cubic函数n为定义值一般为0到1之间的数字,如: cubic-bezier(0,0,0.18,1)*/
transition-delay:2s;/*←过渡开始时间*/

/*↓↓动画属性↓↓*/

这一部分非常难但是非常有意思,(搓手)

@keyframes rename { /*←创造一个动画选择器*/
填入属性
}

例如:↓

@keyframes night /*←创造一个动画选择器*/
{
0% {transform:rotateY(72deg); /*←由百分比开始动画进度,目前是由y轴旋转*/
-webkit-transform:rotateY(72deg);}
25% {transform:rotateY(144deg);
-webkit-transform:rotateY(144deg);}
50% {transform:rotateY(216deg);
-webkit-transform:rotateY(216deg);}
75% {transform:rotateY(288deg);
-webkit-transform:rotateY(288deg);}
100% {transform:rotateY(360deg);
-webkit-transform:rotateY(360deg);}
}

↑这部分代码来自SCP-CN-1445

通常语法为:animation: 选择器名称 持续时间 动画完成周期方式 延时 循环次数 反向运动 动画状态;

例如:↓

animation:night 2s linear 1s infinite forwards alternate-reverse running;

night为选择器的名字,2s为持续时间,通常为线性(linear)或者默认(ease)、慢速入(ease-in)、慢速出(ease-in)、缓慢(ease-in-out)。infinite表示永远执行动画循环,如果觉得动画只需执行一次可以把infinite换成1,forward表示应用样式,默认为无(none),也可以返回最初帧(backwards),双向延展(both)。alternate-reverse表示奇数次会反向播放动画,偶数次正向播放动画,也可以输入正常(normal)、反向(reverse)。running表示运行也可以输入暂停(pause),表示这两个词决定动画是否在运行

/*↓↓2D、3D转换↓↓*/

transform:;/*←利用transform来表示转换*/
transform:scale(1.2);/*←这里表示放大1.2倍,通过调整数值决定放大和缩小*/
transform:rotateY(30deg);/*←Y轴旋转30度(deg)*/
transform:rotateX(30deg);/*←X轴旋转30度(deg)*/

/*↑该部分内容与过渡元素和动画元素一同使用效果更佳↑*/

/*↓↓兼容性以及移动端适应性↓↓*/

通常很多浏览器都会有兼容性问题,这种问题是很久以前了(除了IE很多元素直到现在都还不支持,拜托,这么破烂的玩意真的有人用吗?)。

当我们遇到浏览器的对web元素出现兼容性问题时可以在属性前加上前缀,火狐的是-moz-,谷歌的是-webkit-,欧朋的是-o-。

像这样-o-animation:;以及这样-webkit-animation:;,还有这样-moz-animation:;。

↓那么手机端和其他端口对页面元素不适应如何解决?↓

写上@media选择器,并且在内部写上会如何

@media screen and (max-width: 475px) { /*←当屏幕宽度在475px时*/
body {
background:#000;
}
}

通过@media选择器限制其屏幕宽度然后对出现问题的选择器进行修正

→点此返回目录←

除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License