如何在AngularJS中为组件的主元素设计样式

在这篇文章中，我们将看到如何在AngularJS中对组件的主机元素进行样式设计，同时通过实例了解基本的实现方法。这项任务可以通过实现元素的ng-style指令来完成。CSS属性有助于组件的样式设计。

方法：主机组件的造型使用CSS属性，可以随时改变、修改和更新。这些CSS属性列举如下。

color: 用于设置字体颜色。
background-color: 用于设置背景颜色。
字体大小：用于设置字体的大小。
padding（填充）：用来设置文本周围的空间。

语法:

<element ng-style="property"></element>

例子1：这个例子使用了ng-style指令。这里使用了字体颜色和背景颜色的CSS属性。

<!DOCTYPE html>
<html>
  
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>
  
<body ng-app="gfg" 
      ng-controller="gfgctrl">
    <h1 style="text-align: center;
               color:green">
        GeeksforGeeks
    </h1>
    <h2 ng-style="ele">GFG</h2>
    <h2 ng-style="ele">Portal</h2>
    <script>
        var app = angular.module("gfg", []);
        app.controller("gfgctrl", function( $scope) {$ scope.ele = {
                "color": "white",
                "background-color": "green",
            }
        });
    </script>
</body>
</html>

输出:

如何在AngularJS中为组件的主元素设计样式？

例子2：这个例子显示了基于字体大小、字体颜色和背景颜色的组件的样式。

<!DOCTYPE html>
<html>
  
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>
  
<body ng-app="gfg" ng-controller="gfgctrl">
    <h1 style="text-align: center;
               color:green">
        GeeksforGeeks
    </h1>
    <h2 ng-style="ele">GFG</h2>
    <h2 ng-style="ele1">Portal</h2>
    
    <script>
        var app = angular.module("gfg", []);
        app.controller("gfgctrl", function( $scope) {$ scope.ele = {
                "color": "white",
                "background-color": "green",
                "font-size": "120px",
            }
            $scope.ele1 = {
                "color": "white",
                "background-color": "green",
                "font-size": "20px",
            }
        });
    </script>
</body>
  
</html>

输出:

如何在AngularJS中为组件的主元素设计样式？