CSSスタイルが正しく設定されていません

私はフラスコのアプリを持っています。私は見栄えを向上させようとしていますが、色が予想通りに表示されません。なぜ色が正しく出てこないのか。（私はIEとChromeでそれを見てきましたが、それは同じです）。CSSスタイルが正しく設定されていません

フォルダ構造は、（そこに他のHTMLファイルがありますが、彼らは問題を再作成するために重要ではありません）です：

main/site_tables.py 
main/templates/view.html 
main/static/style.css

Pythonコード（site_tables.py）です。

#Import various necessary packages 
from flask import render_template, Flask, request 
import pandas 
from pandas.tseries.holiday import USFederalHolidayCalendar 
import datetime 
import urllib2 
import os.path 

#Start App from Flask 
app = Flask(__name__) 

#Set IP Address and Port for outputting web address 
out_IP_address = "0.0.0.0" 
out_port = 5000 

#Set location for original files being read in and edit file locations 
#Kept seperate for audit reasons 
origLoc = "C:/Orig" 
editLoc = "C:/Edit" 

#Set name of files prefix 
fileName = "Rand_Calls" 

#Define holidays for long period of time 
cal = USFederalHolidayCalendar() 
holidays = cal.holidays(start='2017-01-01', end='2030-12-31').to_pydatetime() 

#Set first empty link - tables 
@app.route("/tables/") 
#Set dynamically populated links tables/date where date is formatted YYYYMMDD 
@app.route("/tables/<date>",methods=['GET', 'POST']) 
def j_show_html(date): 
    #date provided by webaddress for example: date = "20170214" 
    #Format date to datetime 
    date2 = datetime.datetime.strptime(date,"%Y%m%d") 
    if request.method == "GET": 
     #If date hasn't occured; display why missing 
     if date2 > datetime.datetime.today() - datetime.timedelta(days=2): 
      return render_template('future.html', 
      labels = urllib2.unquote(date.encode('ascii','ignore'))) 
     #If date was a holiday; display why missing 
     elif date2 in holidays: 
      return render_template('holiday.html', 
      labels = urllib2.unquote(date.encode('ascii','ignore'))) 
     #If date was a weekend; display why missing 
     elif date2.weekday() in (5,6): 
      return render_template('weekend.html', 
      labels = urllib2.unquote(date.encode('ascii','ignore'))) 
     #Load report; if not edited before then from original location 
     else: 
      if os.path.isfile(editLoc+"/"+fileName+"_"+date+"_"+date+".xlsx"): 
       report = pandas.read_excel(editLoc+"/"+fileName+"_"+date+"_"+date+".xlsx") 
      else: 
       report = pandas.read_excel(origLoc+"/"+fileName+"_"+date+"_"+date+".xlsx") 
      return render_template('view.html', 
      tables=[report.to_html(index=False)], 
#   titles = ['na'], 
      labels = urllib2.unquote(date.encode('ascii','ignore'))) 

#Call the app 
if __name__ == "__main__": 
    app.run(host=out_IP_address,port=out_port,debug=True)

HTMLファイル（view.html）は次のとおりです。

<!-- Jinja2 code for table page creation --> 
<!doctype html> 
<title>{{labels}}</title> 
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}"> 
<div class=page contenteditable=""> 
    <h1>QA_Report_{{labels}}</h1> 
    {% for table in tables %} 
    {{ table|safe }} 
    {% endfor %} 
</div>

CSSファイルされる（style.cssには）次のとおりです。

body   { font-family: sans-serif;} 
a, h1, h2  { color: #d03027; } /*Color = Specific Red */ 
h1, h2   { margin: 0; } 
h1    { border-bottom: 2px solid #ceccd0; } /*Color - Light Grey*/ 
h2    { font-size: 1.2em; } 

table.dataframe, .dataframe th, .dataframe td 
{ 
    border: none; 
    border-bottom: 1px solid #ceccd0; /*Color = Light Grey*/ 
    border-collapse: collapse; 
    text-align:left; 
    padding: 10px; 
    margin-bottom: 40px; 
    font-size: 0.9em; 
} 

tr:nth-child(odd)  { background-color:#ffffff; } /*Color = White   */ 
tr:nth-child(even) { background-color:#004977; color:#ffffff; } /*Color = Specific Blue */ 
tr:hover   { background-color:#d03027; } /*Color = Specific Red */

出典

2017-02-21 JJFord3

どのような外観になっていますか？ –

同じですが、CSSで指定された色は異なる視覚的外観になるはずです。私は、CSSが色がどのようなものであるべきかを示すためにCSSにコメントしました。 – JJFord3

は、問題を考え出しました。

ウェブページがキャッシュされていました。私はブラウザの履歴をクリアし、変更が行われました。（Ctrl + Shift + Rでページをリロードすると、新しい変更も反映されます）。

これは、同じ問題に遭遇している人に役立つ場合の回答として投稿します。

出典

2017-02-21 19:50:58 JJFord3

style.cssがロードされていない可能性もあります。将来的には、プロジェクトの構造と各ファイルの場所を投稿した場合に役立ちます。さらに、コードスニペットでファイルの名前を指定した方が簡単になります。 – swbandit

ありがとうございます。行の色が交互になっているので、何かが読み込まれていることがわかりましたが、私はあなたの意見を見て、質問を更新しました。 – JJFord3

CSSスタイルが正しく設定されていません

答えて

関連する問題