文章/答案/技术大牛

发布

社区首页 >问答首页 ><h1>样式不起作用，但其他样式会

问<h1>样式不起作用，但其他样式会
EN

Stack Overflow用户

提问于 2017-05-03 00:16:37

回答 1查看 2.8K关注 0票数 0

我正在使用django，我的<p>选择器正在工作，但<h1>没有工作。

我不明白为什么有些css在工作，而另一些则不起作用。

引导是按照什么顺序工作的？

它确实找到了style.css文件我的文本

元素工程

    style.css

font-family: 'Wendy One', sans-serif;
font-family: 'Baloo', cursive;
font-family: 'Libre Baskerville', serif;


h1 {
    color:yellow;
    font-family: "Baloo", cursive;
}

p  {
    color: red;
    font-family: 'Libre Baskerville',sans-serif;
}

index.html

{% extends "base.html" %}


{% block content %}
<h1 class="text-center" >The Wish Fairy Foundation</h1>
<p> this should be the index of wishfairies.</p>
{% endblock %}

base.html

{% load static %}

<!DOCTYPE html>

<html lang="en">




{% block title %}{% endblock %}




<head>
<link href="https://fonts.googleapis.com/css?family=Baloo|Libre+Baskerville|Wendy+One" rel="stylesheet">

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<link rel="stylesheet" href="{% static 'css/style.css' %}">

</head>



{% block header %}


{% endblock %}

<body>

{% block sidebar %}



{% endblock %}


<div class="container">

{% block content %} 

{% endblock %}
</div>

{% block footer %}



{% endblock %}

</div>
</div>
</div>
</body>
</html>

twitter-bootstrap

html

css

django

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-05-03 00:28:07

您的style.css文件无效。font-family行不包含在任何选择器中，因此它们违反了下一个规则(h1)

把字型系列线包起来。我假设您希望将它们封装在单独的元素中，这样它们就不会相互覆盖。

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<style>
.wendy {
  font-family: 'Wendy One', sans-serif;
}

.baloo {
  font-family: 'Baloo', cursive;
}

.libre {
  font-family: 'Libre Baskerville', serif;
}

h1 {
    color:yellow;
    font-family: "Baloo", cursive;
}

p  {
    color: red;
    font-family: 'Libre Baskerville',sans-serif;
}
</style>

<link href="https://fonts.googleapis.com/css?family=Baloo|Libre+Baskerville|Wendy+One" rel="stylesheet">

<h1>h1</h1>
<p>paragraph</p>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43749132

复制

相似问题

问<h1>样式不起作用，但其他样式会
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问<h1>样式不起作用，但其他样式会EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问<h1>样式不起作用，但其他样式会
EN