网页的修饰
總第61篇
上一篇推送了網頁的基本構成，鏈接地址：網頁是怎么構成的？，這篇來講講網頁的修飾，正如字面意思一般，本篇分享的內容是用來修飾網頁的，是讓網頁變得更加好看。本文只是介紹一些基本的CSS，適合入門。
01|什么是CSS：
CSS 指層疊樣式表 (Cascading Style Sheets)
樣式是用來定義如何顯示 HTML 元素
02|CSS怎么用：
CSS怎么用，也就是CSS的語法。CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。
選擇器通常是您需要改變樣式的 HTML 元素。
每條聲明由一個屬性和一個值組成。
屬性（property）是希望設置的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開，聲明組以大括號({})括起來。
為了讓CSS可讀性更強，你可以每行只描述一個屬性:
p {color:red; text-align:center; }CSS注釋以 “/*“ 開始, 以 “*/“ 結束, 比如: /這是個注釋/
03|CSS屬性：
1、背景屬性，即用來設置背景的。
背景顏色設定
<style> body {background-color:yellow; } h1 {background-color:#00ff00; } p {background-color:rgb(255,0,255); } </style>背景圖片設定
<style> body {background-image:url('paper.gif');background-color:#cccccc; } </style>2、尺寸屬性，用來設置元素的高度和寬度。
<style> img.normal {height:auto; } img.big {height:120px; } p.ex {height:100px;width:100px; } </style> </head><body> <img class="normal" src="logocss.gif" width="95" height="84" /><br> <img class="big" src="logocss.gif" width="95" height="84" /> <p class="ex">這個段落的高和寬是 100px.</p>3、字體屬性，用來設置元素的字體顯示方式。
字體樣式（font-style）
<style> p.normal {font-style:normal;}/*瀏覽器正常字體*/ p.italic {font-style:italic;}/*斜體*/ </style> </head><body> <p class="normal">這是一個段落,正常。</p> <p class="italic">這是一個段落,斜體。</p> </body>字體寬度（font-weight）
<style> p.normal {font-weight:normal;}/*正常的字體*/ p.light {font-weight:lighter;}/*稍微細一點的字體*/ p.thick {font-weight:bold;}/*粗細一點的字體*/ p.thicker {font-weight:900;}/*也可以通過傳送具體的數值來設置*/ </style>字體大小（font-size）
<style> h1 {font-size:250%;} h2 {font-size:200%;} p {font-size:100%;} </style>4、文本屬性
文本顏色設置（color），即字體顏色
<style> body {color:red;} h1 {color:#00ff00;} p.ex {color:rgb(0,0,255);}/*p.ex表示元素p的屬性ex,在元素p中可以直接調用*/ </style> <body><h1>這是標題 1</h1> <p>這是一個普通的段落。請注意,本文是紅色的。頁面中定義默認的文本顏色選擇器。</p> <p class="ex">這是一個類為"ex"的段落。這個文本是藍色的。</p> </body>文本的方向設置（direction）
<style> div.ex1 {direction:rtl;} </style> </head> <body><div>一些文本。默認的書寫方向。</div> <div class="ex1">一些文本。 Right-to-left 方向。</div></body>ltr 為默認屬性，文本方向從左到右；rtl ? ?文本方向從右到左。
文本對齊屬性（text-align）
<style> h1 {text-align:center}/*居中對齊*/ h2 {text-align:left}/*左對齊*/ h3 {text-align:right}/*右對齊*/ h4 {text-align:justify}/*分散對齊*/ </style>文本字符間距（letter-spacing）
<style> h1 {letter-spacing:2px;} h2 {letter-spacing:-3px;} </style>字符間距值默認情況為0，即字符之間沒有間隔。也可以為負值，出現重疊的效果。
總結
- 上一篇： 爱普生L313彩色打印相片
- 下一篇： preg_match绕过总结