Stylesheet not displaying within div id tab?

问题

This is the code on my webpage, I'm trying to make my stylesheet that says "Hello!" display on TAB1, but it isn't displaying. What changes need to be made to display my stylesheet from Pastebin in TAB1? I was able to do this in the past but now I'm unsure what I'm doing wrong here.

MY WEBPAGE IS VERY LIMITED with characters, so I MUST use Pastebin to put all of my writing into my page, since I only have another 2000-2200 characters left that I can use, which is definitely only enough for coding, not putting walls of text on each tab I'll be making, as well.

<style>

    body{
    color:#000000;
    font-size:13px;
    font-family:Ebrima;
    background-image: url() !important;
    background-color:#FFFFFF !important;
    background-position:bottom-center !important;
    background-repeat:repeat !important;}

    h1{
    margin:0px 0px 0px;
    font-size: 10px;
    color:#FF0000;
    font-family:Ebrima;
    letter-spacing:0px;
    font-weight:normal;
    text-shadow: 0px 0px 2px #880000;}

    b, strong { font-family: Ebrima; font-size: 12px;line-height: 10px; font-weight: bold;
    color: #FF5555;}

    i, em {color:#FF0000; font-family: Ebrima; font-size:12px;}

    #navi{
    display: inline;
    padding:40px;
    color:#444444;
    text-transform: uppercase;
    margin: 12px 10px;
    font-size: 15px;
    font-family:Garamond;
    background: #;
    transition: all .2s;
    -o-transition: all .2s;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;}

    #navi:hover{
    color:#FF0000;
    cursor:hand;
    cursor:pointer;
    opacity: .80;
    font-size:14px;
    font-family:Garamond;
    filter:alpha(opacity=80);
    transition: all .2s;
    -o-transition: all .2s;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;}

    #A{
    left:0px;
    width: 100%;
    top:15px;
    padding: 0px;
    text-align: center;
    position: fixed;
    height: 0px;
    background:url('http://i.imgur.com/TebRLUr.png');}

    #B{margin-top:150px;}

    #C{
    position:fixed;
    bottom:0px;
    left:20px;
    width:99%;
    height:70%;
    background-color:#;
    color:#ffffff;
    padding:0px;
    overflow:auto;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px; }

    ::-webkit-scrollbar {width: 6px; height: 4px; background: #; }
    ::-webkit-scrollbar-thumb { background-color: #222222; border: 1px solid #000000;-webkit-border-radius: 1ex; }


    #navi a{
    text-decoration:none;
    color:#666;}

    #navi a:hover{
    text-decoration:none;
    color:#666;}

    </style>



    <div id="A">
    <div id="B">
    <span id="navi" onclick="document.getElementById('start').innerHTML=document.getElementById('a').innerHTML;">TAB1</span>
    </div>
    </div>





    <div id="C">
    <div id="start">

<font color="#FF0000">This is the opening page!</font>

    </div>

    <div id="a" style="display:none;">

<font color="#FF0000">This is TAB1!</font>

<br>

<link rel="stylesheet" type="text/css" href="http://pastebin.com/raw.php?i=faJtrCxF">

<br>

<font color="#FF0000">The stylesheet will not display inside of this tab. Why?</font>


    </div>
</style>

回答1:

The problem is the same as in your other question Pastebin will not generate a valid CSS file, but a text file.

Think of it in this way. Your website interprets your styles from a file with an extension of .css
If this file is not .css but something else, it won't work.

Pastebin will not export your code as .css even if what is inside it is valid CSS code. The reason for this is that the service they provide is not hosting, but a way of sharing code snippets, that is why they only export what you create there as text files.

What you want to do is not possible with Pastebin.

Is there a special reason for having the css hosted somewhere else? it is generally not a good idea, unless you want to use a CDN service.

PD: Don't use the <font> tag, this has been deprecated. Use instead a combination of <p>, <span>, <h#> and add classes to them when you need specific styles.

回答2:

#navi:after{
   content:"Hello";
}

Will work, as you mentioned.

来源：https://stackoverflow.com/questions/32689676/stylesheet-not-displaying-within-div-id-tab

标签

html

css

stylesheet