CSS學習（一）

最後更新：2017-07-18 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：bsp 聲明方向外邊距使用 nsf 背景映像調整 family

學習的資源 http://www.runoob.com/

概念樣式表的插入方法

（1）外部樣式表(External style sheet)

<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>

（2）內部樣式表(Internal style sheet)

<head><style>hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}</style></head>

（3）內聯樣式(Inline style)

<p style="color:sienna;margin-left:20px">這是一個段落。</p>

多重樣式優先順序

內聯樣式）Inline style > （內部樣式）Internal style sheet >（外部樣式）External style sheet > 瀏覽器預設樣式

選取器的優先順序

下列是一份優先順序逐級增加的選取器列表：

通用選取器（*）
元素(類型)選取器
類別選取器
屬性選取器
偽類
識別碼選取器
內聯樣式

CSS 背景屬性

Property	描述
background	簡寫屬性，作用是將背景屬性設定在一個聲明中。
background-attachment	背景映像是否固定或者隨著頁面的其餘部分滾動。
background-color	設定元素的背景顏色。
background-image	把映像設定為背景。
background-position	設定背景映像的起始位置。
background-repeat	設定背景映像是否及如何重複。

文本文本的對齊

文本排列屬性是用來設定文本的水平對齊。

文本可置中或對齊到左或右,左右對齊.

當text-align設定為"justify"，每一行被展開為寬度相等，左，右外邊距是對齊（如雜誌和報紙）。

文本縮排

文本縮排屬性是用來指定文本的第一行的縮排。

p {text-indent:50px;}

所有CSS文字屬性。

屬性	描述
color	設定文本顏色
direction	設定文本方向。
letter-spacing	設定字元間距
line-height	設定行高
text-align	對齊元素中的文本
text-decoration	向文本添加修飾
text-indent	縮排元素中文本的首行
text-shadow	設定文本陰影
text-transform	控制元素中的字母
unicode-bidi	設定或返迴文本是否被重寫
vertical-align	設定元素的垂直對齊
white-space	設定元素中空白的處理方式
word-spacing	設定字間距

字型用em來設定字型大小

為了避免Internet Explorer 中無法調整文本的問題，許多開發人員使用 em 單位代替像素。

em的尺寸單位由W3C建議。

1em和當前字型大小相等。在瀏覽器中預設的文字大小是16px。

因此，1em的預設大小是16px。可以通過下面這個公式將像素轉換為em：px/16=em

h1 {font-size:2.5em;} /* 40px/16=2.5em */h2 {font-size:1.875em;} /* 30px/16=1.875em */p {font-size:0.875em;} /* 14px/16=0.875em */

所有CSS字型屬性

Property	描述
font	在一個聲明中設定所有的字型屬性
font-family	指定文本的字型系列
font-size	指定文本的字型大小
font-style	指定文本的字型樣式
font-variant	以小型大寫字型或者正常字型顯示文本。
font-weight	指定字型的粗細。

CSS學習（一）

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More