Question

在我的Angular项目中，我正在尝试应用一些基本的CSS，但无论我尝试什么，它都无法正常工作。

我知道CSS文件正在被正确引用，所以这不是问题。

以下是确切的代码：

css文件

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}
h1 {
    color: blue;
}
.card {
    height: 100px;
    width: 100px;
    background-color: #0099ec;
}

主html文件

<html ng-app="Gameplay_01">
<head>
    <link href="public/stylesheets/style.css" type="text/css" />
    <script src="bower_components/angular/angular.js"></script>
    <script>
        var gameModule = angular.module('Gameplay_01', []);
        gameModule.controller('cardsController', cardsController);

        function cardsController($scope){
            $scope.cards = [
                {
                    "id": 1,
                    "suit": "hearts",
                    "number": 4,

                },
                {
                    "id": 1,
                    "suit": "spades",
                    "number": 10,
                },
                {
                    "id": 3,
                    "suit": "clubs",
                    "number": 12,
                }
            ];
        }

    </script>
</head>
<body>
<h1>The Gameboard</h1>
<div ng-controller="cardsController">
    <div id="cards" ng-repeat="card in cards">
        <div class="card">
            <p>{{card.suit}} </p>
        </div>
    </div>
</div>
</body>
</html>

Answer 1

您的链接代码中缺少rel="stylesheet"。

<link href="public/stylesheets/style.css" type="text/css" />

应该是

<link rel="stylesheet" href="public/stylesheets/style.css" type="text/css" />

我的Angular项目中没有应用CSS

1 个答案: