path: root/files/zh-tw/learn/css/first_steps/getting_started/index.html

---
title: CSS 入門
slug: Learn/CSS/First_steps/Getting_started
tags:
  - CSS
  - 元素
  - 初學者
  - 學習
  - 狀態
  - 範例
  - 語法
  - 課程
  - 選擇器
translation_of: Learn/CSS/First_steps/Getting_started
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</div>

<p class="summary">在這個主題中，我們將 CSS 套用到一個簡單的 HTML 文件上，在過程中學習這個語言一些實際的東西。</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">先備知識：</th>
   <td>基本的電腦概念、能夠<a href="https://developer.mozilla.org/zh-TW/Learn/Getting_started_with_the_web/Installing_basic_software">安裝基本軟體</a>，基本<a href="https://developer.mozilla.org/zh-TW/Learn/Getting_started_with_the_web/Dealing_with_files">與各種檔案打交道</a>的能力，以及 HTML 的基礎（由<a href="https://wiki.developer.mozilla.org/zh-TW/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>學到）。</td>
  </tr>
  <tr>
   <th scope="row">學習目標：</th>
   <td>了解將 CSS 文件與 HTML 檔案連接的基本知識，並且能夠使用 CSS 對文字作簡單的格式變化。</td>
  </tr>
 </tbody>
</table>

<h2 id="由某個_HTML_開始">由某個 HTML 開始</h2>

<p>我們的起點是一個 HTML 文件。如果您想要在自己的電腦上操作，可以把下面的程式碼複製下來。在您電腦上的目錄中，用 <code>index.html</code> 為檔名儲存</p>

<p>。</p>

<pre class="brush: html notranslate">&lt;!doctype html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Getting started with CSS&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;

    &lt;h1&gt;I am a level one heading&lt;/h1&gt;

    &lt;p&gt;This is a paragraph of text. In the text is a &lt;span&gt;span element&lt;/span&gt;
and also a &lt;a href="http://example.com"&gt;link&lt;/a&gt;.&lt;/p&gt;

    &lt;p&gt;This is the second paragraph. It contains an &lt;em&gt;emphasized&lt;/em&gt; element.&lt;/p&gt;

    &lt;ul&gt;
        &lt;li&gt;Item one&lt;/li&gt;
        &lt;li&gt;Item two&lt;/li&gt;
        &lt;li&gt;Item &lt;em&gt;three&lt;/em&gt;&lt;/li&gt;
    &lt;/ul&gt;

&lt;/body&gt;

&lt;/html&gt;</pre>

<div class="blockIndicator note">
<p><strong>注意：</strong>如果您用來閱讀這篇文章的環境沒辦法簡單地建立檔案，也別擔心。底下會提供線上程式編輯器讓你就在這個頁面中撰寫範例程式。</p>
</div>

<h2 id="為我們的文件加入CSS">為我們的文件加入CSS</h2>

<p>首先，告訴HTML文件我們有些CSS規則要加入是第一個步驟。你可能會碰到三種不同的方式可以將CSS檔案應用進HTML文件之中，不過我們現在先將焦點放在最常見且最實用的方式：將CSS從文件的前頭連接進去。</p>

<p>先建立一個檔案，將它存在與你HTML文件同一個目錄之中並命名為<code>styles.css</code> 。<code>.css</code> 外掛會辨識它為一個CSS檔案。</p>

<p>To link <code>styles.css</code> to <code>index.html</code> add the following line somewhere inside the {{htmlelement("head")}} of the HTML document:</p>

<pre class="brush: html notranslate">&lt;link rel="stylesheet" href="styles.css"&gt;</pre>

<p>This {{htmlelement("link")}} element tells the browser that we have a stylesheet, using the <code>rel</code> attribute, and the location of that stylesheet as the value of the <code>href</code> attribute. You can test that the CSS works by adding a rule to <code>styles.css</code>. Using your code editor add the following to your CSS file:</p>

<pre class="brush: css notranslate">h1 {
  color: red;
}</pre>

<p>Save your HTML and CSS files and reload the page in a web browser. The level one heading at the top of the document should now be red. If that happens, congratulations — you have successfully applied some CSS to an HTML document. If that doesn't happen, carefully check that you've typed everything correctly.</p>

<p>You can continue to work in <code>styles.css</code> locally, or you can use our interactive editor below to continue with this tutorial. The interactive editor acts as if the CSS in the first panel is linked to the HTML document, just as we have with our document above.</p>

<h2 id="Styling_HTML_elements">Styling HTML elements</h2>

<p>By making our heading red we have already demonstrated that we can target and style an HTML element. We do this by targeting an <em>element selector</em> — this is a selector that directly matches an HTML element name. To target all paragraphs in the document you would use the selector <code>p</code>. To turn all paragraphs green you would use:</p>

<pre class="brush: css notranslate">p {
  color: green;
}</pre>

<p>You can target multiple selectors at once, by separating the selectors with a comma. If I want all paragraphs and all list items to be green my rule looks like this:</p>

<pre class="brush: css notranslate">p, li {
    color: green;
}</pre>

<p>Try this out in the interactive editor below (edit the code boxes), or in your local CSS document.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} </p>

<h2 id="Changing_the_default_behavior_of_elements">Changing the default behavior of elements</h2>

<p>When we look at a well-marked up HTML document, even something as simple as our example, we can see how the browser is making the HTML readable by adding some default styling. Headings are large and bold and our list has bullets. This happens because browsers have internal stylesheets containing default styles, which they apply to all pages by default; without them all of the text would run together in a clump and we would have to style everything from scratch. All modern browsers display HTML content by default in pretty much the same way.</p>

<p>However, you will often want something other than the choice the browser has made. This can be done by simply choosing the HTML element that you want to change, and using a CSS rule to change the way it looks.  A good example is our <code>&lt;ul&gt;</code>, an unordered list. It has list bullets, and if I decide I don't want those bullets I can remove them like so:</p>

<pre class="brush: css notranslate">li {
  list-style-type: none;
}</pre>

<p>Try adding this to your CSS now.</p>

<p>The <code>list-style-type</code> property is a good property to look at on MDN to see which values are supported. Take a look at the page for <code><a href="/en-US/docs/Web/CSS/list-style-type">list-style-type</a></code> and you will find an interactive example at the top of the page to try some different values in, then all allowable values are detailed further down the page.</p>

<p>Looking at that page you will discover that in addition to removing the list bullets you can change them — try changing them to square bullets by using a value of <code>square</code>.</p>

<h2 id="Adding_a_class">Adding a class</h2>

<p>So far we have styled elements based on their HTML element names. This works as long as you want all of the elements of that type in your document to look the same. Most of the time that isn't the case and so you will need to find a way to select a subset of the elements without changing the others. The most common way to do this is to add a class to your HTML element and target that class.</p>

<p>In your HTML document, add a <a href="/en-US/docs/Web/HTML/Global_attributes/class">class attribute</a> to the second list item. Your list will now look like this:</p>

<pre class="brush: html; highlight[3] notranslate">&lt;ul&gt;
  &lt;li&gt;Item one&lt;/li&gt;
  &lt;li class="special"&gt;Item two&lt;/li&gt;
  &lt;li&gt;Item &lt;em&gt;three&lt;/em&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>

<p>In your CSS you can target the class of <code>special</code> by creating a selector that starts with a full stop character. Add the following to your CSS file:</p>

<pre class="brush: css notranslate">.special {
  color: orange;
  font-weight: bold;
}</pre>

<p>Save and refresh to see what the result is.</p>

<p>You can apply the class of <code>special</code> to any element on your page that you want to have the same look as this list item. For example, you might want the <code>&lt;span&gt;</code> in the paragraph to also be orange and bold. Try adding a <code>class</code> of <code>special</code> to it, then reload your page and see what happens.</p>

<p>Sometimes you will see rules with a selector that lists the HTML element selector along with the class:</p>

<pre class="brush: css notranslate">li.special {
  color: orange;
  font-weight: bold;
}</pre>

<p>This syntax means "target any <code>li</code> element that has a class of special". If you were to do this then you would no longer be able to apply the class to a <code>&lt;span&gt;</code> or another element by simply adding the class to it; you would have to add that element to the list of selectors:</p>

<pre class="brush: css notranslate">li.special,
span.special {
  color: orange;
  font-weight: bold;
}</pre>

<p>As you can imagine, some classes might be applied to many elements and you don't want to have to keep editing your CSS every time something new needs to take on that style. Therefore it is sometimes best to bypass the element and simply refer to the class, unless you know that you want to create some special rules for one element alone, and perhaps want to make sure they are not applied to other things.</p>

<h2 id="Styling_things_based_on_their_location_in_a_document">Styling things based on their location in a document</h2>

<p>There are times when you will want something to look different based on where it is in the document. There are a number of selectors that can help you here, but for now we will look at just a couple. In our document are two <code>&lt;em&gt;</code> elements — one inside a paragraph and the other inside a list item. To select only an <code>&lt;em&gt;</code> that is nested inside an <code>&lt;li&gt;</code> element I can use a selector called the <strong>descendant combinator</strong>, which simply takes the form of a space between two other selectors.</p>

<p>Add the following rule to your stylesheet.</p>

<pre class="brush: css notranslate">li em {
  color: rebeccapurple;
}</pre>

<p>This selector will select any <code>&lt;em&gt;</code> element that is inside (a descendant of) an <code>&lt;li&gt;</code>. So in your example document, you should find that the <code>&lt;em&gt;</code> in the third list item is now purple, but the one inside the paragraph is unchanged.</p>

<p>Something else you might like to try is styling a paragraph when it comes directly after a heading at the same hierarchy level in the HTML. To do so place a <code>+</code>  (an <strong>adjacent sibling combinator</strong>) between the selectors.</p>

<p>Try adding this rule to your stylesheet as well:</p>

<pre class="brush: css notranslate">h1 + p {
  font-size: 200%;
}</pre>

<p>The live example below includes the two rules above. Try adding a rule to make a span red, if it is inside a paragraph. You will know if you have it right as the span in the first paragraph will be red, but the one in the first list item will not change color.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}</p>

<div class="blockIndicator note">
<p><strong>Note</strong>: As you can see, CSS gives us several ways to target elements, and we've only scratched the surface so far! We will be taking a proper look at all of these selectors and many more in our <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectors</a> articles later on in the course.</p>
</div>

<h2 id="Styling_things_based_on_state">Styling things based on state</h2>

<p>The final type of styling we shall take a look at in this tutorial is the ability to style things based on their state. A straightforward example of this is when styling links. When we style a link we need to target the <code><a href="/en-US/docs/Web/HTML/Element/a">&lt;a&gt;</a></code> (anchor) element. This has different states depending on whether it is unvisited, visited, being hovered over, focused via the keyboard, or in the process of being clicked (activated). You can use CSS to target these different states — the CSS below styles unvisited links pink and visited links green.</p>

<pre class="brush: css notranslate">a:link {
  color: pink;
}

a:visited {
  color: green;
}</pre>

<p>You can change the way the link looks when the user hovers over it, for example removing the underline, which is achieved by in the next rule:</p>

<pre class="brush: css notranslate">a:hover {
  text-decoration: none;
}</pre>

<p>In the live example below, you can play with different values for the various states of a link. I have added the rules above to it, and now realise that the pink color is quite light and hard to read — why not change that to a better color? Can you make the links bold?</p>

<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} </p>

<p>We have removed the underline on our link on hover. You could remove the underline from all states of a link. It is worth remembering however that in a real site, you want to ensure that visitors know that a link is a link. Leaving the underline in place, can be an important clue for people to realize that some text inside a paragraph can be clicked on — this is the behavior they are used to. As with everything in CSS, there is the potential to make the document less accessible with your changes — we will aim to highlight potential pitfalls in appropriate places.</p>

<div class="blockIndicator note">
<p><strong>Note</strong>: you will often see mention of <a href="/en-US/docs/Learn/Accessibility">accessibility</a> in these lessons and across MDN. When we talk about accessibility we are referring to the requirement for our webpages to be understandable and usable by everyone.</p>

<p>Your visitor may well be on a computer with a mouse or trackpad, or a phone with a touchscreen. Or they might be using a screenreader, which reads out the content of the document, or they may need to use much larger text, or be navigating the site using the keyboard only.</p>

<p>A plain HTML document is generally accessible to everyone — as you start to style that document it is important that you don't make it less accessible.</p>
</div>

<h2 id="Combining_selectors_and_combinators">Combining selectors and combinators</h2>

<p>It is worth noting that you can combine multiple selectors and combinators together. For example:</p>

<pre class="brush: css notranslate">/* selects any &lt;span&gt; that is inside a &lt;p&gt;, which is inside an &lt;article&gt;  */
article p span { ... }

/* selects any &lt;p&gt; that comes directly after a &lt;ul&gt;, which comes directly after an &lt;h1&gt;  */
h1 + ul + p { ... }</pre>

<p>You can combine multiple types together, too. Try adding the following into your code:</p>

<pre class="brush: css notranslate">body h1 + p .special {
  color: yellow;
  background-color: black;
  padding: 5px;
}</pre>

<p>This will style any element with a class of <code>special</code>, which is inside a <code>&lt;p&gt;</code>, which comes just after an <code>&lt;h1&gt;</code>, which is inside a <code>&lt;body&gt;</code>. Phew!</p>

<p>In the original HTML we provided, the only element styled is <code>&lt;span class="special"&gt;</code>.</p>

<p>Don't worry if this seems complicated at the moment — you'll soon start to get the hang of it as you write more CSS.</p>

<h2 id="Wrapping_up">Wrapping up</h2>

<p>In this tutorial, we have taken a look at a number of ways in which you can style a document using CSS. We will be developing this knowledge as we move through the rest of the lessons. However you now already know enough to style text, apply CSS based on different ways of targeting elements in the document, and look up properties and values in the MDN documentation.</p>

<p>In the next lesson we will be taking a look at how CSS is structured.</p>

<p>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</p>

<h2 id="In_this_module">In this module</h2>

<ol>
 <li><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">What is CSS?</a></li>
 <li><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Getting started with CSS</a></li>
 <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">How CSS is structured</a></li>
 <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">How CSS works</a></li>
 <li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Using your new knowledge</a></li>
</ol>