首页 > 编程语言 >如何在Angular应用程序中插入自定义 CSS?这里有答案!

如何在Angular应用程序中插入自定义 CSS?这里有答案!

时间:2023-05-26 10:34:37浏览次数:58  
标签:box 文件 自定义 应用程序 Angular CSS

Kendo UI for Angular是专用于Angular开发的专业级Angular组件,telerik致力于提供纯粹的高性能Angular UI组件,无需任何jQuery依赖关系。

Kendo UI R1 2023正式版下载

Telerik_KendoUI产品技术交流群:726377843    欢迎一起进群讨论

为什么需要在 Angular 应用程序中插入自定义 CSS?
  • 自定义 CSS文件能够使应用程序与现有网站的风格相匹配。
  • 开发多个Angular 应用程序时,使用自定义 CSS便于为所有应用程序创建一致的外观。
  • 自定义 CSS 是将个人风格添加到 Angular 应用程序的好方法。比如,想用特定的配色方案来添加一些自定义字体。

现在我们知道了在 Angular 应用程序中插入自定义 CSS的原因,下面我们一起来学习如何在 Angular 应用程序中插入自定义CSS文件。

步骤1:创建一个简单的 Angular 项目

首先,在命令提示符下使用以下命令安装 Angular

npm install -g @angular/cli

现在让我们使用以下命令创建新项目:

ng new my-app

要使用以下命令运行应用程序:

cd my-app
ng serve --open

完成!您的应用程序应自动在浏览器中打开。

步骤2:应用自定义字体

现在要使用自定义字体,让我们在 src/index.html 文件中添加一些标题和段落:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div class="login-box">
<h2>Login</h2>
<form>
<div class="user-box">
<input type="text" name="" required="">
<label>Username</label>
</div>
<div class="user-box">
<input type="password" name="" required="">
<label>Password</label>
</div>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
Submit
</a>
</form>
</div>
</body>
</html>

输出:

带有自定义字体的应用程序

如您所见,文件中现在没有 CSS,所以让我们通过自定义 CSS 文件将其添加回来。

步骤 3a:将 CSS 文件添加到项目

添加自定义 CSS 的一种方法是将 CSS 文件添加到项目中。

style.css在文件夹中创建一个名为的文件src/assets/css并粘贴以下代码:

{
height: 100%;
}
body {

font-family: sans-serif;
background: linear-gradient(#141e30, #243b55);
}

.login-box {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
padding: 40px;
transform: translate(-50%, -50%);
background: rgba(0,0,0,.5);
box-sizing: border-box;
box-shadow: 0 15px 25px rgba(0,0,0,.6);
border-radius: 10px;
}

.login-box h2 {
margin: 0 0 30px;
padding: 0;
color: #fff;
text-align: center;
}

.login-box .user-box {
position: relative;
}

.login-box .user-box input {
width: 100%;
padding: 10px 0;
font-size: 16px;
color: #fff;
margin-bottom: 30px;
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
}
.login-box .user-box label {
position: absolute;
top:0;
left: 0;
padding: 10px 0;
font-size: 16px;
color: #fff;
pointer-events: none;
transition: .5s;
}
步骤 3b:通过更新全局 CSS 文件在 Angular 应用程序中插入自定义 CSS

在这个方法中,我们将在 assets 文件夹中添加一个 CSS 文件,并将其导入到全局 style.css 文件中。这将使我们能够在我们的项目中使用自定义 CSS 文件。由于我们已经在文件夹中添加了文件,因此我们只需要更新代码即可。

style-css

首先,转到 src 根文件夹中名为 styles.css 的主要 CSS 文件。这个 style.css 文件是一个全局声明的文件。在这里,您将导入所有 CSS 链接,如以下 CSS 代码。

@import './assets/css/styles.css';

如果您有多个 CSS 文件,则必须将它们一一导入。

现在您可以通过再次加载索引页面来检查页面是否正常工作:

login

步骤 3c:通过更新 Angular.json 插入自定义 CSS

在这个方法中,我们将在 angular.json 文件中的样式标签中添加 CSS 文件的路径,如下所示:

css-style-tag

 "styles": [
              "src/styles.css",
              "src/assets/css/styles.css"
            ],

注意:如果应用程序在添加路径后无法运行,请使用 Ctrl + C 关闭应用程序并使用以下命令重新启动 Angular 应用程序。

ng serve –open

提示:如果您想添加自定义 JavaScript,上述所有方法都适用,但请记住在文件的脚本标记中添加 JavaScript 文件的路径angular.json。这将确保您的 JavaScript 文件已加载并可供 Angular 应用程序使用。


了解最新Kendo UI最新资讯,请关注Telerik中文网!

标签:box,文件,自定义,应用程序,Angular,CSS
From: https://www.cnblogs.com/AABBbaby/p/17434020.html

相关文章

  • CSS(一)
     css简介CSS是层叠样式表(CascadingStyleSheets)的简称.有时我们也会称之为CSS样式表或级联样式表。CSS是也是一种标记语言CSS主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。CS......
  • Java自定义注解(Annontation)
    (一)注解简介注解(Annontation),Java5引入的新特性,位于java.lang.annotation包中。提供了一种安全的类似注释的机制,用来将任何的信息或元数据(metadata)与程序元素(类、方法、成员变量等)进行关联。是一种说明、配置、描述性的信息,与具体业务无关,也不会影响正常的业务逻辑。但我们可以用反......
  • CSS中自适应屏幕分辨率
    @media与@mediascreen区别@mediascreen的css在打印设备里是无效的,而@media在打印设备里是有效的,如果css需要用在打印设备里,那么就用@media,否则,就用@mediascreen。@media(max-width:1199){//<=1199的设备}@media(max-width:991px){//<=991的设备}@media(max-width:7......
  • CSS设置元素水平居中、垂直居中方式汇总
    按照水平居中、垂直居中、行内元素、块级元素等条件进行组合获取效果水平居中:行内元素解决方案只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可:.parent{text-align:center;}水平居中:块状元素解决方案.item{/*这里可以设置......
  • 自定义频率类
    自定义频率类classSuperThrottle(BaseThrottle):VISIT_RECORD={}def__init__(self):self.history=Nonedefallow_request(self,request,view):#自己写逻辑,判断是否超频#(1)取出访问者ip#(2)判断当前ip不在访问字典......
  • 多选自定义事件
    <template><view@click="onSelect(item,index)"v-for="(item,index)inlist"> //当选择的等于当前id才显示<imagev-if="selected.indexOf(item)>=0"></image><imagev-else></image></view><......
  • 普加项目管理中间件示例之二:自定义表格列
    自定义表格列示例demo/diyColumns.html上文介绍了标准列,这里介绍一下自定义列。正如标准列是一些预设好的对象,自定义列也是一个对象。支持多种数据类型的列:String、Number、Boolean、Date、Array等支持多种单元格编辑器:TextBox、Spinner、CheckBox、DatePicker、ComboBox、TreeSel......
  • GB28181流媒体平台LiveGBS中如何根据业务需求控制监控视频流的播放权限,实现用户自定义
    随着目前对信息安全的越来越重视,视频监控领域的视频流也需要做各种安全策略。视频监控流流媒体平台输出的直播流需要做权限限制,只允许哪些IP访问、只允许哪些用户访问等等各种权限限制。为了满足不同用户不同场景各种不同的播放权限需求,LiveGBSGB28181流媒体平台提供了可以设置播......
  • 创建及使用一个SqlServer的用户自定义表类型(User-Defined Table Type)
    创建一个用户自定义表类型(User-DefinedTableType)CREATETYPE[dbo].[MyTypeName]ASTABLE( [Field1][nvarchar](50)NOTNULL, [Field2][nvarchar](100)NULL, [Field3][nvarchar](50)NULL, [Field4][nvarchar](20)NULL, [Field5][nvarchar](20)NULL)GO直接......
  • 用css给坤坤增打篮球加一些灵动效果(ikun忠实粉丝
    首先我们拿出珍藏已久的ikun背景图,没有的下载下来,也可以到网上找一个类似的新建ikun.html,把下载下来的ikun.gif和ikun.html放在同一个文件夹下在ikun.html的div里写满ikun,然后加上一些神奇的css。在线预览ikun.html全部代码<!DOCTYPEhtml><htmllang="zh_CN"><head><......