From 3aa29b00f256a5fc69b559a63d007b8970e35ffa Mon Sep 17 00:00:00 2001 From: 林正祥 Date: Thu, 6 May 2021 08:15:28 +0800 Subject: Update /learn/tools_and_testing/client-side_javascript_frameworks, zh-TW (#755) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 使用樣式點綴我們的 Angular 應用程式 翻譯完畢 * 更新用詞與語句通順，並修改標點符號問題 更新用詞與語句通順，並修改標點符號問題 * 修正語句 --- .../angular_styling/index.html | 31 ++++++++++------------ .../client-side_javascript_frameworks/index.html | 4 +-- 2 files changed, 16 insertions(+), 19 deletions(-) (limited to 'files/zh-tw/learn/tools_and_testing') diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_styling/index.html b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_styling/index.html index 368585dea7..6568b57367 100644 --- a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_styling/index.html +++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_styling/index.html @@ -20,36 +20,34 @@ tags:
{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
-

Now that we've got our basic application structure set up and started displaying something useful, let's switch gears and spend an article looking at how Angular handles styling of applications.

+

現在，我們已經建立了基本的應用程式結構，並加入了內容，接著我們就要來對應用程式進行樣式的調整，透過本篇文章來學習如何使用樣式點綴我們的 Angular 應用程式。

- - +
預備知識：Familiarity with the core HTML, CSS, and JavaScript languages, knowledge of the terminal/command line. + 熟悉 HTML、CSS 以及 JavaScript 的核心，了解 終端機/命令列（terminal/command line）相關知識。
學習目標：To learn how to style an Angular app.學習如何使用樣式點綴 Angular 應用程式。
-

Adding some style to Angular

+

增加樣式到 Angular 中

-

The Angular CLI generates two types of style files:

+

Angular CLI 會產生兩種類型的樣式檔：

-

Depending on whether you are using a CSS preprocessor, the extension on your CSS files can vary. -Angular supports plain CSS, SCSS, Sass, Less, and Stylus.

+

根據您是否使用 CSS 預處理器，CSS 檔案的副檔名也會有所變化，Angular 支援純 CSS、SCSS、Sass、Less、以及 Stylus。

-

In src/styles.css, paste the following styles:

+

在 src/styles.css 中，貼上以下樣式：

body {
   font-family: Helvetica, Arial, sans-serif;
@@ -108,10 +106,9 @@ Angular supports plain CSS, SCSS, Sass, Less, and Stylus.

   background-color: #212020;
 }
-

The CSS in src/styles.css apply to the entire application, however, these styles don't effect everything on the page. -The next step is to add styles that apply specifically to the AppComponent.

+

在 src/styles.css 中的 CSS 會應用在整個應用程式，但是這些樣式不會影響到頁面上所有內容。下一步將要新增專門讓 AppComponent 套用的樣式。

-

In app.component.css, add the following styles:

+

在 app.component.css 中，增加以下樣式：

body {
   color: #4d4d4d;
@@ -170,11 +167,11 @@ ul {
     list-style: none;
 }
-

The last step is to revisit your browser and look at how the styling has updated. Things now make a bit more sense.

+

最後，回到瀏覽器看看樣式更新之後的效果，現在看來比較有美感了。

-

Summary

+

結語

-

Now that our brief tour of styling in Angular is done with, let's return to creating our app functionality. In the next article we will create a proper component for to-do items, and make it so that you can check, edit, and delete to-do items.

+

我們對 Angular 樣式的簡介也告一個段落了，接下來讓我們開始幫應用程式加上功能吧。在下一篇文章中，我們將建立一個適用於待辦事項的元件，並使其成為可以讓您標示完成、編輯以及刪除待辦事項。

{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/index.html b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/index.html index d46c742e2b..1a1d8221f5 100644 --- a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/index.html +++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/index.html @@ -154,8 +154,8 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks
在本文中，我們將會探索 Angular 所提供的功能、安裝必備工具、建立範例應用程式，並進一步瞭解 Angular 的基本架構。
2. 開始開發我們的 Angular 待辦事項應用程式
此刻，我們已準備好使用 Angular 來創建我們的待辦事項應用程式。完成後的應用程式將具有顯示待辦項目列表，並包含編輯、刪除與新增項目等功能。在本篇中，您將學到應用程式的結構，以及建立一個可顯示待辦項目的基礎列表。
-
3. 樣式化我們的 Angular 應用程式
-
現在，我們已經建立了基本的應用程式結構，並加入了內容，接著我們就要來對應用程式進行樣式的調整，透過本篇文章來學習 Angular 如何處理應用程式的樣式。
+
3. 使用樣式點綴我們的 Angular 應用程式
+
現在，我們已經建立了基本的應用程式結構，並加入了內容，接著我們就要來對應用程式進行樣式的調整，透過本篇文章來學習如何使用樣式點綴我們的 Angular 應用程式。
4. 建立一個項目元件
元件為您提供了一種組織應用程式的方式。本篇文章將引導您建立一個元件，來處理待辦列表中的各個待辦項目，並增加標示完成、編輯以及刪除的功能。在本篇也將介紹 Angular 事件模型
5. 過濾待辦事項
-- cgit v1.2.3-54-g00ecf