css 語法格式

　　css中文意思「層疊樣式表」，用於控制網頁樣式。

①.啓用外部樣式表：

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

②.使用html內部樣式表：

<style type="text/css">
     /* 頁面初始化 */
     html, body, h1, h2, h3, p, ul, ol, li, a {
         padding:0;
         border:0;
         margin:0;
     }
</style>

③.內聯樣式表

<h style="margin-top:33px;" >內聯樣式表演示</h>

目錄： 1.屬性  2.選擇器 3.僞類

1.屬性

---

1.1.字體

　　斜體字

p{
  font-style:italic;
}

1.2.字體顏色

body {
  color:red;
}
h1 {
  color:#00ff00;
}

1.3.背景

span.highlight　{
  background-color:yellow;
}

1.4.間距

 　　字符間距

h1 {
  letter-spacing: -0.5em;
}
h4 {
  letter-spacing: 20px;
}

　　行間距

p {
  line-height: 200%;
}

p{
  line-height: 10px;
}

p {
  line-height: 0.5;
}

　　單詞間距

p {
　　word-spacing: 10px;
}

1.5.佈局

　　用來對齊文本，居中對齊。

h1 {
　　text-align: center;
}

　　段落首行縮進

p {
  text-indent:50px;
}

p {
  text-indent:2em;
}

1.6.邊框樣式

　　點邊框

p {
border-style: dotted;
}

　　雙線框

p {
border-style: double;
}

　　實心框

p {
border-style: solid;
}

　　爲邊框添加顏色

p {
border-style: solid;
border-color: #77eeff;
}

1.7.格式控制

　　強制字母大小寫，所有大寫、所有小寫、駝峯模式：

p {
  text-transform: uppercase;
}

p {
  text-transform: lowercase;
}

p {
  text-transform: capitalize;
}

　　帶刪除線、下劃線：

p {
  text-decoration: line-through;
}

p {
  text-decoration: underline;
}

1.8.列表

　　用圖像做爲列表框標記

ul {
list-style-p_w_picpath: url('monkey.gif');
}

更多列表內容

2.選擇器

---

2.1.通用選擇器

* {
padding:0;
border:0;
margin:0;
}

2.2.元素選擇器

h1 {
color:blue;
}

2.3.類選擇器

<p class="sayhello">
    Hello everyone.
</p>

.sayhello {
text-align: center;
}

2.4.id選擇器

<p id="sayhello">Hello everyone.</p>

#sayhello {
color:green;
}

2.5.嵌套選擇器

　　形如，a標籤中的span中的div標籤：（空格間隔）

a span div{
background-color: pink;
}

2.6.組合選擇器

　　形如，a標籤、span標籤、div標籤都應用相同的樣式：

a,span,div{
background-color: pink;
}

3.僞類

---

3.1.超連接

　　爲超連接添加顏色（默認、訪問過、鼠標滑過、激活；下邊四個有順序）

a:link {
  color: #FF0001;
}
a:visited {
  color: #00FF02;
}
a:hover {
  color: #FF00F3;
}
a:active {
  color: #0000F4;
}

　　更炫的超連接效果（字體變色、字體變大、出現背景色、出現下劃線）

a.one:link {color: #ff0000}
a.one:visited {color: #0000ff}
a.one:hover {color: #ffcc00}

a.two:link {color: #ff0000}
a.two:visited {color: #0000ff}
a.two:hover {font-size: 150%}

a.three:link {color: #ff0000}
a.three:visited {color: #0000ff}
a.three:hover {background: #66ff66}

a.five:link {color: #ff0000; text-decoration: none}
a.five:visited {color: #0000ff; text-decoration: none}
a.five:hover {text-decoration: underline}

3.2.與類、元素選擇協同

<a class="hi" href="index.html">And</a>

a.hi : visited {color: #03AAEE}