我正在尝试在 github 上托管一个 css 文件，但它不起作用。我该怎么办？ 我要托管的 css 在这里，css 文件路径类似于:
<link href='https://cdn.rawgit.com/username/github.io/gh-pages/mytemplate.css' rel='stylesheet' type='text/css' />
请看一下，这是css文件的内容:
**<style type='text/css'>
/*===================================== CSS Social Icons =====================================*/
.topbar-wrapper {background:#fff;position:relative;z-index:96;overflow:hidden;margin:0 auto;padding:10px;border-bottom: 1px solid rgb(223, 223, 223);}
.top-wrappers {padding:0;position:static;max-width:1050px;margin:0 auto;}
.header2 {margin:0 auto;padding:0}
.top-gridnav {display:block;margin:0 auto;float:left;padding:0;width:100%;background:transparent;border:none;}
.top-gridnav ul {width:100%;padding:0;margin:0;text-align:left;}
.top-gridnav li {list-style-type:none;float:left;padding:0;margin:0;}
.top-gridnav li a {position:relative;font-family: 'Montserrat', sans-serif;font-size:20px;font-weight:400;background-color:transparent;color:#7f939d;display:block;margin:0;padding-left:5px;line-height:100%;transition:color 0.3s;}
.top-gridnav ul li a:active, .top-gridnav ul li.highlight a {line-height:100%;text-decoration:none;}
.top-gridnav ul li a:hover {color:#F7F7F7;text-decoration:none;}
.top-gridnav li.social-ico {float:right;}
.top-gridnav li.social-ico a i{text-align:center;color:#FFFFFF;transition:initial; padding: 6px;}
.top-gridnav li.social-ico a:hover,.top-gridnav li.social-ico a:hover i{color:#F7F7F7;}
.top-gridnav a#pull {display:none;}
.fa-linkedin {background: #007bb6;}
.fa-pinterest {background: #cb2027;}
.fa-google-plus {background: #dd4b39;}
.fa-youtube {background: #e32c26;}
.fa-twitter {background: #00aced;}
.fa-facebook {background: #3b5998;}
.fa fa-github {background: #000;}
/*========================== CSS Breaking News ==========================*/
#breakingnews {margin-right:12px;height:30px;line-height:30px;overflow:hidden;width:40%;float:left;}
#adbreakingnews li a {font-family:inherit;font-weight:400;color:#0000A0;transition:all 0.5s ease-in-out; font-family: 'Roboto', sans-serif;font-size:13px;padding:6px}
#adbreakingnews li a:hover {color:#EE8F04;}
#adbreakingnews {float:left;margin-left:90px;}
#adbreakingnews ul,#adbreakingnews li{list-style:none;margin:0;padding:0}
/*========================== CSS Search Form ==========================*/
#search {position:relative;font-size:14px;font-family: 'Roboto', sans-serif;width:auto;height:100%;margin:0 auto;text-align:center;padding-left: 50px;}
#search-form {float: left;margin:0 auto;background:#F7F6F6 url('http://4.bp.blogspot.com/-tNR4-OGVxss/U8mnN-TwEbI/AAAAAAAAEeU/LhDqJKDl2ZQ/s1600/search.png') 96% 50% no-repeat;border:0 none;height:33px;line-height:13px;width:278px;font-family: 'Roboto', sans-serif;font-size:14px;font-weight:400;color:#737373;padding:0 10px;opacity:0.9;transition:all 0.5s ease 0s;}
#search-form .search-button,#search-form .search-button:hover{transition:all 0.5s ease 0s;height:36px;width:36px;line-height:13px;background:#fff;border:0 none;float:right;cursor:pointer;outline:none;}
#search-form:hover{background:#fff url('http://2.bp.blogspot.com/-rRYRHBpaPKo/U8aAIU6MgdI/AAAAAAAAEZQ/8xL3jXykKQU/s1600/search.png') 90% 50% no-repeat;color:#888;}
#search-form:focus{background:#fff url('http://2.bp.blogspot.com/-rRYRHBpaPKo/U8aAIU6MgdI/AAAAAAAAEZQ/8xL3jXykKQU/s1600/search.png') -10% 50% no-repeat;text-shadow:none!important;outline:none;color:#666;}
#box {display:none}
.search-text {font-size:14px;font-family: 'Roboto', sans-serif;float:right;cursor:pointer;}
.search-text:hover {color:#fff}
/*===================================== CSS Outer Wrapper =====================================*/
.top-header {background:#fff;padding:20px;}
#outer-wrapper {background:#E9EAED;max-width:1100px;overflow:hidden;margin:auto;margin-top: 10px;border: 1px solid rgba(181, 181, 181, 0.44)}
#banner {margin-bottom: 20px; background: #fff; border: 1px solid; border-color: #e5e6e9 #dfe0e4 #d0d1d5; text-align: center; padding: 10px; margin: 15px;}
/*===================================== CSS Post Wrapper =====================================*/
#post-wrapper {background:transparent;color:#444;float:left;width:68%;margin:0 0 10px;padding-left: 15px;}
.post-inner {padding:0;}
.post {background:#fff;margin:0 0 15px;padding:0;border: 1px solid; border-color: #e5e6e9 #dfe0e4 #d0d1d5;}
.post-body {font-family: 'Roboto', sans-serif;line-height:1.6em;color:#444;margin-right:0;font-size:15px;}
.post-body img {max-width:95%;margin:0 auto;height:auto;}
h3.post-title, h2.post-title, h1.post-title {font-family: 'Righteous', cursive;font-size:22px;font-weight:400;margin-bottom:20px}
h3.post-title a, h2.post-title a, h1.post-title a, h2.post-title, h1.post-title {color:#666;}
h3.post-title a:hover, h2.post-title a:hover, h1.post-title a:hover {color:#f56954!important;}
.post-info {background:transparent;margin-top:5px;margin-bottom:5px;color:#fff;font-size:12px;text-align:left;padding:0;box-shadow:none;}
.post-info a {display:inline;background:transparent;color:#828282;padding:4px 6px 4px 6px;transition:all .3s ease-out;}
.post-info a:hover {color:#f56954;}
.author-info, .time-info, .label-info, .comment-info {display:inline;color:#828282;}
.timestamp-link abbr {border-bottom:none;}
span.post-author.vcard {visibility:hidden;width:0;height:0;}
.post-header, .post-footer {line-height:initial;width:0;height:0;}
/*=====================================CSS Recent Comments ==================================*/
ul.ms_recent{list-style:none;margin:0;padding:0;}
.ms_recent li{background:transparent;margin:0 0 6px!important;padding:3px
!important;display:block;clear:both;overflow:hidden;list-style:none; border: 1px solid transparent;
border-radius:9px; max-height: 100px;}
.ms_recent li:hover{background:#fff;border: 1px solid #e9e9e9;}
.ms_recent a {text-decoration:none;}
.avatarImage{padding:3px;background:#fefefe;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{border-radius:100px;width:35px;height:35px}
.ms_recent li span{margin-top:4px;color: #444;display: block;font-size: 12px;line-height: 1.4;}
/*===================================== CSS Popular Posts =====================================*/
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,
.PopularPosts li a img {margin:0;padding:0;list-style:none;border:none;
background:none;outline:none;}
.PopularPosts ul {margin:0;list-style:none;color:#333;}
.PopularPosts ul li img {display:block;margin-right:10px;padding:2px;width:100px;height:85px;float:left;transition:all 0.3s ease-out;border: 1px solid #d6d6d6;margin-left:5px}
.PopularPosts ul li img:hover {opacity: 0.7;-webkit-transform: scale3d(1.05,1.05,1);transform: scale3d(1.05,1.05,1);;}
.PopularPosts ul li {background-color:#fff;margin:2px;padding:0;position:relative;transition:all 0.3s ease-out; border-bottom: 1px solid rgb(239, 239, 239);}
.PopularPosts ul li:first-child {border-top:none;}
.PopularPosts ul li:last-child {border-bottom:none;}
.PopularPosts ul li a:hover {color:#f56954!important;}
.PopularPosts ul li .item-title a, .PopularPosts ul li a {color:#333;text-decoration:none;font-size:12px;font-weight:700;transition:all 0.3s ease-out;}
.PopularPosts ul li .item-title a:hover, .PopularPosts ul li a:hover {color:#2D3E52}
.PopularPosts ul li:before {display:none;list-style:none;}
.PopularPosts ul li:first-child > a:before {content:"hot";font-size:10px;font-weight:400;padding:0 4px;border-radius:2px;color:#fff;background:#f56954;display:inline-block;position:absolute;right:0;top:0;}
.PopularPosts .item-thumbnail {margin:0 0 0 0;}
.PopularPosts .item-snippet {font-size:13px;color:#333;font-weight:400;}
.profile-img{display:inline;opacity:1;margin:0 6px 3px 0;}
.PopularPosts .item-title {padding-bottom:.2em;padding:0 5px;}
/*===================================== CSS Footer Wrapper =====================================*/
#footer-wrapper {text-align:left;overflow:hidden;padding:15px 0 0 0;margin-top:20px;background-color:#E9EAED;}
#footer-wrapper .widget-content a {color:#fff}
#footer-widgetfix .footer-widget {width:30.2%;float:left;margin-left:20px;padding-top:10px;padding-bottom:15px;}
#footer-widgetfix {max-width:1100px;overflow:hidden;margin:0 auto;}
#footer-wrapper h2 {font-family: 'Roboto', sans-serif;font-size:16px;font-weight:700;color:#f9f9f9;padding:10px 0;text-transform:uppercase;display:block;border-bottom: 3px solid #243242;}
#footer-wrapper .widget-content {text-align:left;font-family: 'Roboto', sans-serif;color:#f9f9f9;}
#footer-wrapper .widget-content li {margin-left:-14px;color:#f9f9f9}
#footer-wrapper .widget li {margin:5px 0 0 0;padding:5px 2px 0 0;display:inline-block;}
.footer li a {padding-top:0;padding-right:0;font-size:14px;
font-weight:400;font-family: 'Roboto', sans-serif;color:#f9f9f9;margin:0}
.footer li a:hover {color:#fff;}
#footerfix {overflow:hidden;padding:12px 5px;margin:15px 0 0 0; background-color:#576269;}
.copyleft {float:left;margin:10px;color:#fff;font-size:12px;font-family: 'Roboto', sans-serif;}
#copyright {float:right;color:#fff;font-size:13px;font-family: 'Roboto', sans-serif;margin-right:30px}
.copyleft a,#copyright a {color:#fff;text-decoration:none;}
.copyleft a:hover,#copyright a:hover {color:#a94334;text-decoration:none;}
.quickedit{display:none;visibility:hidden}
#ArchiveList a.post-count-link, #ArchiveList a.post-count-link:link, #ArchiveList a.post-count-link:visited {text-decoration:none;font-size:13px;font-weight:700;font-family: 'Montserrat', sans-serif;}
span.post-count {font-size:11px;font-weight:700;}
.BlogArchive #ArchiveList ul.posts li {font-size:12px;}
#ArchiveList {padding: 10px;}
#ArchiveList select {width: 100%;padding: 15px;margin-bottom: 5px; font-family: 'Montserrat', sans-serif;border: 3px solid rgba(201, 201, 201, 0.52);font-size:13px;}
@media screen and (max-width:1066px) {
#outer-wrapper {margin:0 auto;}
.header-right {float:right;padding:0;overflow:hidden;margin:0;max-width:640px!important;}
.header-right img {display:block;}
.cd-main-header {height:100px}
#header {max-width: 300px;}
#search-form {width:250px;}
#recent1 .recent-box {width:49.2%}
.share-post{display:none;}}
@media screen and (max-width:960px) {
#outer-wrapper {margin:0 auto;border:none;box-shadow:none;}
#header h1,#header p,#header,.header-right,#header .description{top: -31px;width:100%;float:left;text-align:center;}
#header {margin:20px auto;padding:0 30px;}
.header-right img, .header-right iframe{margin:0 auto;max-width:100%;}
#header-wrapper{padding:0 10px;}
.header-wrapper2 {padding:0}
#footer-widgetfix {width:100%;overflow:hidden;}
#footer-widgetfix .footer-widget {width:46%;float:left;margin-left:20px;}
#header-inner {left:0;right:0;}}
@media only screen and (max-width:768px){
#post-wrapper, #sidebar-wrapper,#footer-col1,#footer-col2,#footer-col3 {width:100%;max-width:100%;padding-left:0;}
#header {background:none;}
.post-body img {max-width:90%;}
.post-image {margin:0 10px 0 0;}
.sidebar-inner, .post-inner {padding:15px 0 0px;}
.copyleft,#copyright {float:none;text-align:center;margin:10px auto;}
#recent1 .recent-box{width:49%}
#search-form{float:none;margin-bottom:5px}}
@media only screen and (max-width:640px){
#header h1,#header p,#header,.header-right,#header .description{width:100%;float:left;text-align:center;}
.header-right{float:none;margin:0 auto;text-align:center;}
.header-right img, .header-right iframe{float:none;margin:0 auto;text-align:center;}
#header-wrapper{padding:0;margin:20px 0 0 0;min-height:150px;}
#header {min-width:initial;background:none;margin:20px auto;padding:0 5px;}
#header-inner {top:25%;}
#header .description {font-size:100%;line-height:1.5;margin-left:0}
#footer-widgetfix {width:100%;overflow:hidden;}
#footer-widgetfix .footer-widget {width:92%;float:left;margin-left:20px;}
.pagenav .pages, #breakingnews {display:none;}
#search{padding-left:0}
#label_with_thumbs li {padding:10px}
#recent1 .recent-box {width:49%}
.post-image img {width:200px!important; height:150px!important;}
h2.post-title, h1.post-title {font-size:15px!important;}
.post-info {font-size:8px!important}}
@media only screen and (max-width:480px){
#outer-wrapper {margin:0 auto;}
.header-right{float:none;margin:0 auto;text-align:center;}
.header-right img, .header-right iframe{float:none;margin:0 auto;text-align:center;}
.post {margin:0 0 8px;padding:8px;}
.post-image {margin-bottom:5px}
.post-image img {width:100%!important; height:150px!important;}
h2.post-title a, h1.post-title a, h2.post-title, h1.post-title {font-size:18px;padding:5px;clear:both;}
.comments .comment-block, .comments .comments-content .inline-thread {
padding:10px !important;}
.comment .comment-thread.inline-thread .comment {margin: 0 0 0 0 !important;}
#comments .click-comment{display:none;}
#related_posts {padding:0;}
.post-info {font-size:12px;display:none!important}
#feedContainer li {width:100%;}
.authorLeft{float:none;width:120px;margin:0 auto}
.authorDetails{text-align:center}
.authorDetails h2{float:none}
.authorDetails span{float:none}
.articleAuthor .authorContent p{text-align:center}
.topbar-wrapper, .share-post, #related_posts p {display:none;}
#recent1 .recent-box {width:100%;margin-bottom:10px}
ul#relpost_img_sum li, .pager-right, .pager-left {width:100%}}
@media screen and (max-width:320px){
.header-right{float:none;margin:0 auto;text-align:center;}
.header-right img, .header-right iframe{float:none;margin:0 auto;text-align:center;}
.post {padding:6px;}}
/* Code Box ----------------------------------------------- */
.code { background:pink; background-repeat:no-repeat; border: solid #5C7B90;border-radius:10px;box-shadow:0px 0px 13px #219DFC; border-width: 1px 1px 1px 25px; color: black; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; max-height: 200px; min-height: 16px; overflow: auto; padding: 10px 10px 10px; width: 90%; } .code:hover { background: #F08080; background-repeat:no-repeat; }
#Gadget1{display: none !important;}
pre.source-code { background:pink; background-repeat:no-repeat; border: solid #5C7B90; border-width: 5px 1px 1px 25px; color: black; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; max-height: 200px; min-height: 16px; overflow: auto; padding: 10px 10px 10px; width: 90%; } .code:hover { background: #F08080; background-repeat:no-repeat; }
</style>**
有人可以提供一些信息和实际例子吗？我会很感激
最佳答案
CSS 文件不应包含任何 HTML 标签。删除样式标签 <style type='text/css'> </style>来自文件。
关于css - 加载托管的 css 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41311934/