diff options
author | 林正祥 <noreg0379718@gmail.com> | 2021-05-06 08:15:28 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-05-06 08:15:28 +0800 |
commit | 3aa29b00f256a5fc69b559a63d007b8970e35ffa (patch) | |
tree | 2c7576ce667a941d583ca6b7f287b2fef68e80a0 /files | |
parent | 77b093438adbc327c0f4dda848940fb1094f5411 (diff) | |
download | translated-content-3aa29b00f256a5fc69b559a63d007b8970e35ffa.tar.gz translated-content-3aa29b00f256a5fc69b559a63d007b8970e35ffa.tar.bz2 translated-content-3aa29b00f256a5fc69b559a63d007b8970e35ffa.zip |
Update /learn/tools_and_testing/client-side_javascript_frameworks, zh-TW (#755)
* 使用樣式點綴我們的 Angular 應用程式 翻譯完畢
* 更新用詞與語句通順,並修改標點符號問題
更新用詞與語句通順,並修改標點符號問題
* 修正語句
Diffstat (limited to 'files')
2 files changed, 16 insertions, 19 deletions
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: <div>{{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")}}</div> -<p>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.</p> +<p>現在,我們已經建立了基本的應用程式結構,並加入了內容,接著我們就要來對應用程式進行樣式的調整,透過本篇文章來學習如何使用樣式點綴我們的 Angular 應用程式。</p> <table class="learn-box standard-table"> <tbody> <tr> <th scope="row">預備知識:</th> - <td>Familiarity with the core <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> languages, knowledge of the <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">terminal/command line</a>. + <td>熟悉 <a href="/zh-TW/docs/Learn/HTML">HTML</a>、<a href="/zh-TW/docs/Learn/CSS">CSS</a> 以及 <a href="/zh-TW/docs/Learn/JavaScript">JavaScript</a> 的核心,了解 <a href="/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">終端機/命令列(terminal/command line)</a>相關知識。 </td> </tr> <tr> <th scope="row">學習目標:</th> - <td>To learn how to style an Angular app.</td> + <td>學習如何使用樣式點綴 Angular 應用程式。</td> </tr> </tbody> </table> -<h2 id="adding_some_style_to_angular">Adding some style to Angular</h2> +<h2 id="adding_some_style_to_angular">增加樣式到 Angular 中</h2> -<p>The Angular CLI generates two types of style files:</p> +<p>Angular CLI 會產生兩種類型的樣式檔:</p> <ul> - <li>Component styles: The Angular CLI gives each component its own file for styles. -The styles in this file apply only to its component.</li> - <li><code>styles.css</code>: In the <code>src</code> directory, the styles in this file apply to your entire application unless you specify styles at the component level.</li> + <li>元件樣式:Angular CLI 提供了元件各自的樣式檔案。這些樣式檔只會套用在其所屬的元件。</li> + <li><code>styles.css</code>:在 <code>src</code> 目錄底下,除非你在元件層級指定樣式,否則這個檔案的樣式會套用到整個應用程式。</li> </ul> -<p>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.</p> +<p>根據您是否使用 CSS 預處理器,CSS 檔案的副檔名也會有所變化,Angular 支援純 CSS、SCSS、Sass、Less、以及 Stylus。</p> -<p>In <code>src/styles.css</code>, paste the following styles:</p> +<p>在 <code>src/styles.css</code> 中,貼上以下樣式:</p> <pre class="brush: css">body { font-family: Helvetica, Arial, sans-serif; @@ -108,10 +106,9 @@ Angular supports plain CSS, SCSS, Sass, Less, and Stylus.</p> background-color: #212020; }</pre> -<p>The CSS in <code>src/styles.css</code> 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 <code>AppComponent</code>.</p> +<p>在 <code>src/styles.css</code> 中的 CSS 會應用在整個應用程式,但是這些樣式不會影響到頁面上所有內容。下一步將要新增專門讓 <code>AppComponent</code> 套用的樣式。</p> -<p>In <code>app.component.css</code>, add the following styles:</p> +<p>在 <code>app.component.css</code> 中,增加以下樣式:</p> <pre class="brush: css">body { color: #4d4d4d; @@ -170,11 +167,11 @@ ul { list-style: none; }</pre> -<p>The last step is to revisit your browser and look at how the styling has updated. Things now make a bit more sense.</p> +<p>最後,回到瀏覽器看看樣式更新之後的效果,現在看來比較有美感了。</p> -<h2 id="summary">Summary</h2> +<h2 id="summary">結語</h2> -<p>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.</p> +<p>我們對 Angular 樣式的簡介也告一個段落了,接下來讓我們開始幫應用程式加上功能吧。在下一篇文章中,我們將建立一個適用於待辦事項的元件,並使其成為可以讓您標示完成、編輯以及刪除待辦事項。</p> <div>{{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")}}</div> 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 <dd>在本文中,我們將會探索 Angular 所提供的功能、安裝必備工具、建立範例應用程式,並進一步瞭解 Angular 的基本架構。</dd> <dt><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning">2. 開始開發我們的 Angular 待辦事項應用程式</a></dt> <dd>此刻,我們已準備好使用 Angular 來創建我們的待辦事項應用程式。完成後的應用程式將具有顯示待辦項目列表,並包含編輯、刪除與新增項目等功能。在本篇中,您將學到應用程式的結構,以及建立一個可顯示待辦項目的基礎列表。</dd> - <dt><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling">3. 樣式化我們的 Angular 應用程式</a></dt> - <dd>現在,我們已經建立了基本的應用程式結構,並加入了內容,接著我們就要來對應用程式進行樣式的調整,透過本篇文章來學習 Angular 如何處理應用程式的樣式。</dd> + <dt><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling">3. 使用樣式點綴我們的 Angular 應用程式</a></dt> + <dd>現在,我們已經建立了基本的應用程式結構,並加入了內容,接著我們就要來對應用程式進行樣式的調整,透過本篇文章來學習如何使用樣式點綴我們的 Angular 應用程式。</dd> <dt><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component">4. 建立一個項目元件</a></dt> <dd>元件為您提供了一種組織應用程式的方式。本篇文章將引導您建立一個元件,來處理待辦列表中的各個待辦項目,並增加標示完成、編輯以及刪除的功能。在本篇也將介紹 Angular 事件模型</dd> <dt><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering">5. 過濾待辦事項</a></dt> |