正文
css文件上传样式,html5 上传文件
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
在网页中使用css的几种方式
（1）使用Embed（嵌入样式单）排版样式：
即将CSS代码直接插入每个页面的HTML的head区，就象上一节看到的。使用style.../style标签。例如：
style type="text/css"
!--
h2 { font-family: "宋体"; font-size: 12pt; font-style: italic; color: #FF0033; background-color: #FFCCCC}
h1 { font-family: "Arial"; font-size: 12pt; color: #66FF66}
--
/style
（2）使用“link（外部样式单）排版样式”：
即你可以将多个页面的排版风格都用一个样式单文件控制。这个外部的样式单文件（一个扩展名是css的文本文件）将设定你所有网页的规则。如果你改变样式单文件中的某行，所有页面风格用这个css文件定义的页面都会随之改变。如果你的站点文件非常多，则这项功能就非常方便了。
在HEAD区内使用LINK标签（注意：不再是style标签了）：
HTML
HEAD
LINK REL=stylesheet HREF="http：//yoursute.com/my.css"; TYPE="text/css"
/HEAD
body
h2你好！朋友，欢迎光临Java2000的教学区。/h2
h1Hello，everybody，welcome in java2000 !/h1
/body
/html
★☆★说明：css文件的路径用绝对路径http：//...)表示或者用相对路径(例如：../csscode/my.css)表示都可以。
然后再单独生成一个css文件，叫做my.css (随便起名)。文件内容如下：
h2 { font-family: "宋体"; font-size: 12pt; font-style: italic; color: #FF0033; background-color: #FFCCCC}
h1 { font-family: "Arial"; font-size: 12pt; color: #66FF66}
只要将这个CSS文件上传到服务器指定的目录即可。
（3）使用"inline（行内样式单）排版样式"：
inline样式单采用HTML标签的“style”属性，它的特点是“定义某一个标签的式样单风格”，只对所定义的标签起作用，并非对整个页面起作用。例如：
p style="font-size: 14pt ; color: #99ff99 ; font-family: 宋体"层叠式样单/p
看到的效果：
层叠式样单
使用行内样式单，你必须为每行指定样式规则，否则下一行时浏览器将使用页面的缺省设置。 但是：有时候这种方式却非常有效。
（4）使用“import(输入的外部式样单)”--适用于IE浏览器。
html
head
style type="text/css"
!--
@import url(my.css);
--
/style
/head
body
h3输入的外部式样单/h3
/body
/html
相关问答
Q1: 网站用户注册登录模板css样式上传到那个文件夹？
这个要看引用文件的路径了。
比如在用户登录html中，引用的reg.css和login.css标签如下：
（1）link href='reg.css' type='text/css' rel='stylesheet' /
（2）link href='css/login.css' type='text/css' rel='stylesheet' /
reg.css的路径前没有什么文件夹，说明reg.css的路径是与html文件存放在同一个文件夹下的，而login.css 前面多了'css/'，这说明，login.css是存放在与html同一文件夹中的一个css文件夹中,举例说明如下：
A文件夹中有：（1）html登录注册.html （2）reg.css（3）css文件夹【即是B文件夹】
而B文件夹中：（1）login.css
而UserAjax.rar是一个压缩文件吧？解压后，看你把文件放哪了，就在script标签中的src中设置好路径就行了，跟上面link标签中的href属性一样。
Q2: css样式 上传到空间为什么不显示。
有几种可能:
目标页面调用路径是否正确(就是是否正确加载到你的css文件);
原来目标页面你的css设置顺序(有可能重名样式,被后来的覆盖掉);
字体问题,确认你使用的字体样式定义,该字体是否在本地正确安装;
Q3: css样式用FTP上传不起作用
不起作用的可能性：
第一种可能，网站系统有缓存，后台或者手动清除缓存看下。
第二种可能，css文件引入时候有误，请检查。
第三种可能，css写的有误。
排查错误
打开相应网页，查看源代码，看时候能打开相应的css文件，查看css文件，是否是上传的css文件。
火狐的”firebug“或则谷歌浏览器的”检查元素“，调试css，直到达到预想的效果。
Q4: 怎样用纯HTML和CSS更改默认的上传文件按钮样式
我们的目标是创造一个简洁，用纯CSS实现的，在所有浏览器里的样子和布局是一样的上传文件按钮。我们可以这样：
步骤1.创建一个简单的HTML标记
Upload
第2步：CSS：
有点棘手了
.fileUpload
{
position:
relative;
overflow:
hidden;
margin:
10px;
}
.fileUpload
input.upload
{
position:
absolute;
top:
0;
right:
0;
margin:
0;
padding:
0;
font-size:
20px;
cursor:
pointer;
opacity:
0;
filter:
alpha(opacity=0);
}
为简单起见，我使用应用了BootstrapCSS样式的按钮
(div.file-upload)。
演示：
上传按钮，显示选中的文件
不幸的是纯CSS的做不到这一点。但是，如果你真的想显示所选文件，下面的JavaScript代码片段可以帮助你。
JavaScript：
document.getElementById("uploadBtn").onchange
=
function
()
{
document.getElementById("uploadFile").value
=
this.value;
};
DOM:
Upload
Q5: cnblogs怎么加css样式
0 获取权限
首先，在自定一个博客样式之前，我们需要进入博客园自定义博客模板的页面，向博客园管理团队申请页面运行js的权限。【博客园】-【设置】-【博客设置】，点击页面上的js权限申请，然后填写申请的理由，耐心等几分钟，再刷新一下，页面就会显示支持js代码 。
1 美化文章标题
在【博客设置】页面中的【页面定制css代码】框中输入下面的css代码即可完成文章标题的美化的。
#cnblogs_post_body{
color: black;
font: 0.875em/1.5em "微软雅黑" , "PTSans" , "Arial" ,sans-serif;
font-size: 15px;}#cnblogs_post_body h1 {
background: #333366;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
color: #FFFFFF;
font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
font-size: 23px;
font-weight: bold;
height: 25px;
line-height: 25px;
margin: 18px 0 !important;
padding: 8px 0 5px 5px;
text-shadow: 2px 2px 3px #222222;}#cnblogs_post_body h2 {
background: #006699;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
color: #FFFFFF;
font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
font-size: 20px;
font-weight: bold;
height: 25px;
line-height: 25px;
margin: 18px 0 !important;
padding: 8px 0 5px 5px;
text-shadow: 2px 2px 3px #222222;}#cnblogs_post_body h3 {
background: #2B6695;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
color: #FFFFFF;
font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
font-size: 18px;
font-weight: bold;
height: 25px;
line-height: 25px;
margin: 18px 0 !important;
padding: 8px 0 5px 5px;
text-shadow: 2px 2px 3px #222222;}#cnblogs_post_body h4{
background: #2B6600;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
color: #FFFFFF;
font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
font-size: 16px;
font-weight: bold;
height: 24px;
line-height: 23px;
margin: 12px 0 !important;
padding: 5px 0 5px 10px;
text-shadow: 2px 2px 3px #222222;}
要注意的是，下面的 【禁止模板默认css】这个复选框不要勾选，因为我们仅仅只自定义了文章标题，其他的标签要靠默认的样式才行。上面的这段定义文章标题样式的代码是从这位数据之巅大牛的博客页面中趴下来的。点击【保存】，然后刷新一下博客文章页面，文章的标题就进行美化了，效果如下。
2 完美显示Latex的数学公式
默认的博客文章对Latex的数学公式是无法显示，想要在文章添加一些数学公式，都是采用截图的方式，比较麻烦。但是在网上找到一个解析Latex公式的利器MathJax，只需要在博客页面中添加MathJax.js就能完美的解析Latex格式的数学公式。
在博客设置页面中的【页首Html代码】框中输入如下js代码。
script type="text/x-mathjax-config"
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});/scriptscript type="text/javascript"
src=""/script
点击【保存】，再刷新一下页面，如果页面中包含Latex语法公式，那么就能够进行显示。如，在文章有如下的内容，其中含有Latex语法公式。
在页面中显示的效果如下：
3 增添目录索引和末尾固定信息
增添目录索引和末尾的固定信息（如何声明版权）需要自定js和css样式，并且还要添加一个公共的bootstrap.js文件，地址为：。其中增添目录的索引的mystyle.js、 末尾固定信息的脚本mycnblogs.js 和一个样式文件mystyle.css，都已经从数据之巅这里趴下来了，对文件中的部分代码进行修改，以便可以达到我的要求，下面列举文件中的修改地方。
mycnblogs.js
$(document).ready(function(){
$("div id='toTop'style='zoom:0;'/div").appendTo($("body")).bind("click", function(){
$("body,html").animate({ scrollTop: 0 }, 150);
});
$('#cnblogs_post_body pre').find('code').parent().css({'border':'dashed 1px #aaa','border-left':'solid 2px #6CE26C'});
!--修改的地方--
$("#cnblogs_post_body").append('br /hr /pre感谢您的阅读，如果您觉得阅读本文对您有帮助，请点一下“b推荐/b”按钮。本文欢迎各位转载，但是转载文章之后b必须在文章页面中给出作者和原文连接/b。/pre');});
这里只修改了我文章末尾需要添加的固定信息。
mystyle.js
var u = $(this),
v = u[0];var title=u.text();var text=u.text();u.attr('id', 'autoid-' + l + '-' + m + '-' + n)
if (v.localName === 'h2') {
l++;
m = 0;
if(text.length30) text=text.substr(0,30)+"...";
j += 'lia href="#' + u.attr('id') + '" title="' + title + '"' + text + '/aspan class="sideCatalog-dot"/span/li';} else if (v.localName === 'h3') {
m++;
n = 0;
if(q){
if(text.length28) text=text.substr(0,28)+"...";
j += 'li class="h2Offset"a href="#' + u.attr('id') + '" title="' + title + '"' + text + '/aspan class="sideCatalog-dot"/span/li';
}}else if (v.localName === 'h4') {
n++;
if(r){
j += 'li class="h3Offset"a href="#' + u.attr('id') + '" title="' + title + '"' + u.text() + '/a/li';
}}
在这个文件中，我只需要提取h2,h3,h4这三个标题作为目录就行了，因为我写文章一般没有设置h1标签，个人觉得它的字体太大了。
把相应的js和css文件趴下来进行修改，然后上传，随便上传到哪 ，只要能够被访问就行了。我直接上传到博客园的文件空间中，上传之后，在博客设置页面中的【页脚Html代码】框中输入如下js代码。
script src=""/scriptlink href="" rel="stylesheet"script type="text/javascript" src=""/scriptscript type="text/javascript" src=""/script
点击【保存】，页面的效果如下。
