翻譯不完整。請協助 翻譯此英文文件

串接樣式表 (Cascading Stylesheets;CSS) 可用以塑造網站的特殊風格。例如這段文字要用一般的黑色,或是改用紅色標明重點?某段重要內容應該置於畫面的何處?想用什麼背景圖片及顏色裝飾你的網站?〈CSS 基本概念〉帶你入門。

CSS到底是蝦咪?

跟HTML一樣, CSS 既非標準程式語言,也不是標記語言, 而是一種風格頁面語言 (style sheet language) , 能讓你套用不同的頁面呈現風格 (style) 在 HTML 文件中的元素 (element) 上。例如, 當想要將 HTML 頁面上所有段落元素 (paragraph elements) 裡的文字, 全部轉換成紅色,你會在CSS裡寫:

p {
  color: red;
}

試看看在你的編輯器上建立新的檔案style.css並貼上這三行CSS程式碼,並且存在你的styles directory。

但是我們仍然需要將CSS套用在你的HTML文件上,否則CSS的style將不會在你的瀏覽器上顯現HTML的檔案時產生效果。(如果你還未跟上我們的專案,請閱讀Dealing with files 和 HTML basics先找出你想要什麼 )

  1. Open your index.html file and paste the following line somewhere in the head, that is, between the <head> and </head> tags:
    <link href="styles/style.css" rel="stylesheet" type="text/css">
  2. Save index.html and load it in your browser. You should see something like this:

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.如果你的段落文字現在變成紅色, 恭喜, 你已經成功撰寫你的第一份 CSS!

解析CSS ruleset

Let's look at the above CSS in a bit more detail:

The whole structure is called a rule set (but often "rule" for short). Note also the names of the individual parts:

Selector
在這則rule set最前頭為HTML element的名字.我們選擇這個 element(s)應用上CSS的style風格 (在這個範例中,就是 p elements).若要渲染style風格在不同的element, 只要更改selector就行了.
Declaration
一個單一rule color: red; 指定妳想要的 element's properties 來呈現 style.
Properties
可以給予HTML element 你所想要的style的一種方式 . (在這範例中, color 是 p elements的一種Property.) 在CSS中, 你可以選擇哪些屬性用來影響 rule.
Property value
property value就是位於Property右邊,在冒號(:)之後 .從眾多的可能樣式選出一個給予property (範例中就是從眾多的 color 樣式中選出 red).

Note : 其餘語法重要的部分:

  • 每一個 rule set (除了selector以外) 都必須被大括號({})給包住.
  • Within each declaration, you must use a colon (:) to separate the property from its values.
  • Within each rule set, you must use a semicolon (;) to separate each declaration from the next one.

So to modify multiple property values at once, you just need to write them separated by semicolons, like this:

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

選擇多個elements

你可以選擇數種elements並同時用在同一個rule set上. 可以用逗號(,)包含住數個selector,例如:

p,li,h1 {
  color: red;
}

selector的不同類型

There are many different types of selector. Above, we only looked at element selectors, which select all elements of a given type in the given HTML documents. But we can make more specific selections than that. Here are some of the more common types of selector:

Selector name What does it select Example
Element selector (sometimes called a tag or type selector) 指定所有HTML element(s)中特定type的element(s). p
Selects <p>
ID 控制器 指定在頁面上特定ID的element (on a given HTML page, you're only allowed one element per ID). #my-id
控制 <p id="my-id"> or <a id="my-id">
Class 控制器 指定在頁面上特定class的element(s) (multiple class instances can appear on a page). .my-class
控制 <p class="my-class"> and <a class="my-class">
Attribute 控制器 指定在頁面上特定attribute的element(s) . img[src]
控制 <img src="myimage.png"> but not <img>
Pseudo class 控制器 The specified element(s), but only when in the specified state, e.g. being hovered over.

a:hover
控制 <a>, 但只有在滑鼠游標停留在連結上時.

There are many more selectors to explore, and you can find a more detailed list in our Selectors guide.

Fonts and text

現在我們已經瀏覽過一些CCS的基礎,接下來我們開始增加更多的規則(rules)和資訊到我們的style.css檔案使得我們的範例看起來更棒.讓我們範例中的字型和文字看起來更好.

  1. First of all, go back and find the output from Google Fonts that you stored somewhere safe. Add the <link ... > element somewhere inside your index.html's head (again, anywhere between the <head> and </head> tags). It'll look something like this:
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  2. Next, delete the existing rule you have in your style.css file. It was a good test, but red text doesn't actually look very good.
  3. Add the following lines in its place, replacing the placeholder line with the actual font-family line you got from Google Fonts. (font-family just means the font(s) you want to use for your text.) This rule first sets a global base font and font size for the whole page (since <html> is the parent element of the whole page, and all elements inside it inherit the same font-size and font-family):
    html {
      font-size: 10px; /* px means 'pixels': the base font size is now 10 pixels high  */
      font-family: placeholder: this should be the rest of the output you got from Google fonts
    }

    Note: I've added in a comment to explain what "px" means. Anything in a CSS document between /* and */ is a CSS comment, which the browser ignores when it renders the code. This is a place for you to write helpful notes on what you are doing.

  4. Now we'll set font sizes for text-containing elements inside the HTML body (<h1>, <li>, and <p>). We'll also center the text of our heading and set some line height and letter spacing on the body content to make it a bit more readable:
    h1 {
      font-size: 60px;
      text-align: center;
    }
    
    p, li {
      font-size: 16px;    
      line-height: 2;
      letter-spacing: 1px;
    }

You can adjust these px values to whatever you like to get your design looking how you want, but in general your design should look like this:

a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered

Boxes, boxes, it's all about boxes

One thing you'll notice about writing CSS is that a lot of it is about boxes — setting their size, color, position, etc. Most of the HTML elements on your page can be thought of as boxes sitting on top of each other.

a big stack of boxes or crates sat on top of one another

Not surprisingly, CSS layout is based principally on the box model. Each of the blocks taking up space on your page has properties like this:

  • padding, the space just around the content (e.g., around paragraph text)
  • border, the solid line that sits just outside the padding
  • margin, the space around the outside of the element

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

In this section we also use:

  • width (of an element)
  • background-color, the color behind an element's content and padding
  • color, the color of an element's content (usually text)
  • text-shadow: sets a drop shadow on the text inside an element
  • display: sets the display mode of an element (don't worry about this yet)

So, let's get started and add some more CSS to our page! Keep adding these new rules to the bottom of the page, and don't be afraid to experiment with changing values to see how it turns out.

Changing the page color

html {
  background-color: #00539F;
}

This rule sets a background color for the whole page. Change the color code above to whatever color you chose when planning your site.

Sorting the body out

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

Now for the body element. There are quite a few declarations here, so let's go through them all one by one:

  • width: 600px; — this forces the body to always be 600 pixels wide.
  • margin: 0 auto; — When you set two values on a property like margin or padding, the first value affects the element's top and bottom side (make it 0 in this case), and the second value the left and right side (here, auto is a special value that divides the available horizontal space evenly between left and right). You can also use one, three, or four values, as documented here.
  • background-color: #FF9500; — as before, this sets the element's background color. I used a sort of reddish orange for the body as opposed to dark blue for the html element. Go ahead and experiment. Feel free to use white or whatever you like.
  • padding: 0 20px 20px 20px; — we have four values set on the padding, to make a bit of space around our content. This time we are setting no padding on the top of the body, and 20 pixels on the left, bottom and right. The values set top, right, bottom, left, in that order.
  • border: 5px solid black; — this simply sets a 5 pixel wide solid black border on all sides of the body.

Positioning and styling our main page title

h1 {
  margin: 0;
  padding: 20px 0;    
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}

You may have noticed there's a horrible gap at the top of the body. That happens because browsers apply some default styling to the <h1> element (among others), even when you haven't applied any CSS at all! That might sound like a bad idea, but we want even an unstyled webpage to have basic readability. To get rid of the gap we overrode the default styling by setting margin: 0;.

Next up, we've set the heading's top and bottom padding to 20 pixels, and made the heading text the same color as the html background color.

One rather interesting property we've used here is text-shadow, which applies a text shadow to the text content of the element. Its four values are as follows:

  • The first pixel value sets the horizontal offset of the shadow from the text — how far it moves across: a negative value should move it to the left.
  • The second pixel value sets the vertical offset of the shadow from the text — how far it moves down, in this example; a negative value should move it up.
  • The third pixel value sets the blur radius of the shadow — a bigger value will mean a more blurry shadow.
  • The fourth value sets the base colour of the shadow.

Again, try experimenting with different values to see what you can come up with.

Centering the image

img {
  display: block;
  margin: 0 auto;
}

Finally, we'll center the image to make it look better. We could use the margin: 0 auto trick again as we did earlier for the body, but we also need to do something else. The body element is block level, meaning it takes up space on the page and can have margin and other spacing values applied to it. Images, on the other hand, are inline elements, meaning they can't. So to apply margins to the image, we have to give the image block-level behavior using display: block;.

Note: Don't worry if you don't yet understand display: block; and the block-level/inline distinction. You will as you study CSS in more depth. You can find out more about the different available display values at our display reference page.

Conclusion

If you have followed all the instructions in this article, you should end up with a page that looks something like this (you can also view our version here):

a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.

If you get stuck, you can always compare your work with our finished example code on Github.

Here, we have only really scratched the surface of CSS. To find out more, go to our CSS Learning topic.

文件標籤與貢獻者

 此頁面的貢獻者: montagne3653, freddy50806, YuCheng, ffturtle
 最近更新: montagne3653,