整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
關(guān)注本頭條號，每天堅(jiān)持更新原創(chuàng)干貨技術(shù)文章。
如需學(xué)習(xí)視頻，請?jiān)谖⑿潘阉鞴娞?strong>“智傳網(wǎng)優(yōu)”直接開始自助視頻學(xué)習(xí)
本教程將從編程的角度向您介紹如何在Linux命令行中將制表符(Tab)轉(zhuǎn)換為空格。
關(guān)于在編程中使用Tab和空格的爭論從未停止過。
雖然您可能喜歡一直使用Tab，但您的編碼指南可能建議使用空格。
但是，如果您已經(jīng)在程序的各個(gè)地方使用了制表符，并且需要將這些制表符轉(zhuǎn)換為空格，以便審閱人員允許您的代碼，那么請往下看。
在本教程中，我將向您展示如何在Linux命令行中將Tab符號轉(zhuǎn)換為空格符號。
在Linux命令行中將制表符(tab)轉(zhuǎn)換為空格
我使用這個(gè)示例文本文件，這是一個(gè)簡單的c++程序，用于檢查奇數(shù)和偶數(shù)。這是文件的內(nèi)容:
#include <iostream>
using namespace std;
int main() {
int n;
cout << "Enter a number: ";
cin >> n;
if (n%2 == 0) {
cout<<n<< "is an even Number";
}
else
cout<<n<< "is an odd Number";
return 0;
}在Linux命令行中將制表符(Tab)轉(zhuǎn)換為空格
檢查文本文件是否有tab符有幾種方法可以做到這一點(diǎn)。我發(fā)現(xiàn)最簡單的方法是使用cat命令。您可以使用帶有-T選項(xiàng)的cat命令，并將所有選項(xiàng)卡顯示為^I(標(biāo)準(zhǔn)輸出) 。
cat -T tab_file您可以看到文件中制表符(tab)的位置。
#include
using namespace std;
int main(){
^Iint n;
^Icout << “Enter a number:^I“;
^Icin >> n;
^I
^Iif (n%2 == 0) {
^I^Icout<<n<< “is an even Number”;
^I}
^Ielse
^I^Icout<<n<< “is an odd Number”;
^Ireturn 0;
}如果您對一個(gè)文件使用expand命令，它會(huì)將所有tab轉(zhuǎn)換成一個(gè)包含8個(gè)空格的塊，并在屏幕上顯示輸出。
expand tab_file但那不是很方便，你幾乎看不到這里的變化。更好的方法是將輸出結(jié)果保存到另一個(gè)文件中。
expand tab_file > space_file現(xiàn)在，如果使用cat命令查看文件，就不會(huì)再找到制表符tab。
正如我在前一節(jié)中提到的，默認(rèn)情況下，一個(gè)制表符等于8個(gè)空格。如果你的代碼有這么大的縮進(jìn)，那就太奇怪了。
好在您可以使用-t選項(xiàng)更改默認(rèn)空間大小。
expand -t N tab_file例如，如果你必須把每個(gè)tab符變成2個(gè)空格，你可以像這樣使用expand命令:
expand -t2 tab_file > space_file通常在程序中，您只需要轉(zhuǎn)換最前面的制表符，即行首的制表符。
expand也提供了這個(gè)選項(xiàng)。如果您只想將最前面的制表符轉(zhuǎn)換為空格，請使用-i選項(xiàng)。
如果我們繼續(xù)前面的例子，請執(zhí)行以下命令:
expand -t2 -i tab_file > space_file只將最前面的制表符轉(zhuǎn)換為空格
在上面的所有示例中，您已經(jīng)將轉(zhuǎn)換后的文件保存到一個(gè)新文件中。但是，如果您的目標(biāo)是通過將制表符轉(zhuǎn)換為現(xiàn)有代碼文件的空格來清理代碼，那么您可能希望將輸出保存在源文件本身中。
為此，可以使用sponge命令。在將標(biāo)準(zhǔn)輸入寫入輸出之前，用sponge(海綿)“吸收”整個(gè)輸入。當(dāng)您試圖更改和保存相同的文件時(shí)，這是非常有用的。
現(xiàn)在，sponge命令可能在您的系統(tǒng)上不可用。您必須安裝moreutils包。
在基于Ubuntu/Debian的發(fā)行版上，你可以使用以下命令來安裝moreutils包：
sudo apt install moreutils安裝后，便可使用它了:
expand -t2 -i tab_file | sponge tab_file到目前為止，您所學(xué)的都適用于單個(gè)文件。但是如果你有一個(gè)項(xiàng)目，它有幾個(gè)程序文件，你想把所有的制表符tab都轉(zhuǎn)換成空格，你就需要更好的技術(shù)。
到目前為止，我們所學(xué)到的知識可以與強(qiáng)大的find和exec命令相結(jié)合。
find . -name '*.cpp' -type f -exec bash -c 'expand -t 4 ">find . -name '*.cpp' -type f -exec bash -c 'expand -t 4 "$0" | sponge "$0"' {} \;<" | sponge ">find . -name '*.cpp' -type f -exec bash -c 'expand -t 4 "$0" | sponge "$0"' {} \;<"' {} \;上面的命令查找所有以擴(kuò)展名cpp結(jié)尾的文件，將這些文件傳遞給expand命令，而expand命令在sponge命令的幫助下將輸出寫入源文件。
您可能認(rèn)為此時(shí)使用sed命令會(huì)更容易一些，但這完全取決于您的愛好和選擇。
通過本文，你應(yīng)該學(xué)習(xí)到如何通過命令行工具把制表符tab轉(zhuǎn)換為空格了吧？還可以結(jié)合find等命令實(shí)現(xiàn)批量自動(dòng)轉(zhuǎn)換。
本文已同步至博客站，尊重原創(chuàng)，轉(zhuǎn)載時(shí)請?jiān)谡闹懈綆б韵骆溄樱篽ttps://www.linuxrumen.com/cyml/1683.html
、Html的基本結(jié)構(gòu)：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title></title>
</head>
<body>
網(wǎng)頁的文本、圖片等信息；
</body>
</html>
二、Head部分：用于表示網(wǎng)頁的元數(shù)據(jù)即描述網(wǎng)頁的基本信息
其常用標(biāo)簽及屬性有：
1、title標(biāo)簽：瀏覽器標(biāo)簽頁顯示的標(biāo)題
2、meta標(biāo)簽：其常用屬性
①charset:設(shè)置文檔的字符集編碼格式。HTML5中設(shè)置字符集編碼：<meta charset="UTF-8">
常見的字符集編碼格式：
a.GB-2312:國標(biāo)碼，簡體中文
b.GBK：擴(kuò)展的國標(biāo)碼
c.UTF-8：萬國碼 Unicode 常用
②http-equiv屬性:將我們的信息寫給瀏覽器看，讓瀏覽器按照這里面的要求執(zhí)行，可選屬性值：Content-Type(文檔類型) refresh(網(wǎng)頁定時(shí)刷新) set-cookie(設(shè)置瀏覽器cookie緩存) 需要配合content屬性使用。（http-equiv屬性只是表明需要設(shè)置哪一部分，具體的設(shè)置內(nèi)容，放到content屬性中）
③name屬性：使用方法同“http-equiv”。將我們的信息寫給搜索引擎看
常用且需要掌握的屬性值：author（作者） keywords（網(wǎng)頁關(guān)鍵字） description（網(wǎng)頁描述） 這兩個(gè)屬性設(shè)置，網(wǎng)頁必不可少。
3、link標(biāo)簽：鏈接網(wǎng)頁圖標(biāo)（title前的小logo），其常用屬性有：
①rel屬性：聲明鏈接文件的類型，此處選icon
②type屬性：可以省略
③href屬性：表示圖片的路徑地址
三、body部分：網(wǎng)頁的文本、圖片等信息
標(biāo)簽的分類：
塊級標(biāo)簽：顯示為塊，前后隔一行（自動(dòng)換行）
行級標(biāo)簽：按行從左往右逐一顯示。
1、 常見的塊級標(biāo)簽：
①<h1></h1>......<h6><h6>：標(biāo)題標(biāo)簽，自動(dòng)加粗，h1最大，h6最小。
②<hr/>：水平線標(biāo)簽，添加一條水平線。
③<p></p>:段落標(biāo)簽，
④<br/>:換行標(biāo)簽，
⑤<blockquote/></blockquote>:引用標(biāo)簽，cite屬性，表明引用的來源，一般引用網(wǎng)址
瀏覽器默認(rèn)首行縮進(jìn)。
⑥<pre></pre>:預(yù)格式標(biāo)簽，用于重載代碼。瀏覽器默認(rèn)顯示樣式：1、顯示為等寬字體。 2、代碼中的換行、
空格等元素能在瀏覽器中顯示。
【補(bǔ)充】html 文件中空格的表示：
2、 基于布局的塊級標(biāo)簽
列表：無序列表、有序列表、定義列表
①有序列表：<ol></ol> 列表項(xiàng)：<li></li>
②無序列表：<ul></ul> 列表項(xiàng)：<li></li>
③定義列表（實(shí)現(xiàn)圖文混排）:<dl></dl>
列表標(biāo)題：<dt>一般只有一項(xiàng)</dt>
列表描述項(xiàng)：<dd>可以有很多項(xiàng)</dd>
3、組合標(biāo)簽：<figure></figure>用于顯示圖片及圖片標(biāo)題
他有兩個(gè)子標(biāo)簽：<img />圖片
<figcaption></figcaption>圖片的標(biāo)題
例如：<figure>
<img src="img/EZ.jpg" height="20%" width="20%" alt="探險(xiǎn)家"/>
<figcaption>探險(xiǎn)家 伊澤瑞爾</figcaption>
</figure>
4、分區(qū)標(biāo)簽：<div></div>
5、常見的行級標(biāo)簽
<1>span（文本）:無實(shí)際意義，用于包裹某部分文字，修改特定樣式，例如：
這是<span style="color: red;font-size: 36px;">span</span>中的文字
img（圖片）：其常用屬性：①src:表示引用圖片的地址。
路徑地址的寫法：相對路徑：以當(dāng)前文件為最準(zhǔn)，去尋找圖片地址
a、與文件處于同一層的圖片，直接寫圖片名
b、圖片在當(dāng)前文件下一層：文件名/圖片名
c、圖片在當(dāng)前文件上一層：../圖片名
絕對路徑:file:///盤符：/文件夾/圖片名，但 是嚴(yán)禁使用
圖片網(wǎng)址：網(wǎng)絡(luò)上的圖片鏈接，但是一般不用
②height和width：圖片的高度和寬度?？梢杂肅SS樣式代替
③title：圖片標(biāo)。當(dāng)鼠標(biāo)指上之后顯示的文字
④alt:當(dāng)圖片無法顯示的時(shí)候，顯示的文字
<2>em（傾斜強(qiáng)調(diào)）
<3>strong（加粗強(qiáng)調(diào)）
<4>b（加粗）
<5>i（傾斜）
Strong、em、b、i的區(qū)別
1、Strong、em都表示強(qiáng)調(diào)，Strong為粗體，em為斜體，而Strong的強(qiáng)調(diào) 程度逗比em高
2、Strong和b都能加粗，em和i都能傾斜，，但是Strong和em多了一層強(qiáng)調(diào)的語義 。H5要求標(biāo)簽盡可能實(shí)現(xiàn)語義化。
<6>q（短引用）
<7>small/big（縮小/放大字體）：small和big分別是縮小和擴(kuò)大字體，都可以多層嵌套直至上限或下限
<8>a（超鏈接）
1、href:超鏈接的路徑，可以是網(wǎng)絡(luò)鏈接，也可以是本地文件。
2、target:跳轉(zhuǎn)頁面打開的位置。_self自身頁面，_blank新頁面。
3、title:鼠標(biāo)指在超鏈接上顯示的名稱。
4、Rel（被鏈接是當(dāng)前的前/后一篇）:指定被鏈接文檔與當(dāng)前文檔的關(guān)系,搜索引擎 會(huì)利用該屬性 獲取更多的有關(guān)鏈接的信息：
rel="prev"被鏈接文檔是當(dāng)前文檔的前一篇文 檔，
rel="next"被鏈接文檔是當(dāng)前文檔的后一篇文檔,
rel="icon"被鏈接文檔是當(dāng)前文檔的圖標(biāo)
rel="stylesheet"被鏈接文檔是當(dāng)前文檔的樣式表
5、Rev（當(dāng)前是被鏈接的前/后一篇）
錨鏈接：
①本頁面錨鏈接:a、設(shè)置錨點(diǎn)：<a name="top"></a>
b、跳轉(zhuǎn)錨點(diǎn)：#name名
①頁面間錨鏈接:a、在即將跳轉(zhuǎn)頁面的指定位置設(shè)置錨點(diǎn)
b、跳轉(zhuǎn)錨點(diǎn)：頁面地址.html#name名
<a href="02_常見的塊級標(biāo)簽.html#Hbuilder">頁面間錨鏈接</a><br/>
功能性鏈接： mailto用于給指定郵箱發(fā)送郵件
file：///e:/aaa.png打開本地文件
tencent://message/?uin=1315618220 給指定QQ發(fā)送息
<9>s標(biāo)簽，有誤文本：刪除線
<s>這是S標(biāo)簽中的文字</s><br />
<10>cite標(biāo)簽：瀏覽器顯示為傾斜，常用于書、畫作、作品的引用
<cite>這是cite中的文本</cite><br />
<11>code:計(jì)算機(jī)代碼，不保留代碼格式
<pre>
<code></code>
</pre>
<12>bdo:表示文本方向，屬性：dir="ltr"表示從左往右，dir="rtl"表示從右往左
<bdo dir="rtl">1234567</bdo><br />
kbd:表示需要用戶用鍵盤輸入的內(nèi)容，瀏覽器顯示為等寬字體
請輸入“<kbd>Esc</kbd>”推遲系統(tǒng)<br />
<13>sup:上標(biāo)文本，sub:下標(biāo)文本
x<sub>6</sub><br />
? ? 空格
? ? 空格 <br />
<14>u:下劃線
<u>這是下劃線</u><br />
mark:高亮或標(biāo)記文本，瀏覽器顯示為黃色背景
<mark>mark</mark><br />
6、表格：表格的行：tr，每行中的列：td，表格的表頭：th
表格的常用屬性：
表格行列屬性：[tr和td的屬性]：
1、width/heigh：單元格的寬高
2、bgcolor:單元格的背景顏色
3、align:left center right 單元格中的文字水平對齊方式
4、valign:top center bottom 單元格中的文字垂直對其方式
5、nowrap:單元格中文字不換行
【注意】當(dāng)表格屬性與行列屬性沖突時(shí)，行列屬性優(yōu)先級高
7、表單（form）
【兩個(gè)重要屬性】：action-表單提交的服務(wù)器地址 method-表單提交數(shù)據(jù)的方法（get/post）
get/post區(qū)別:
1>get使用URL傳參：http://服務(wù)器地址?name1=value1&name2=value2
（?表示傳遞參數(shù)，?后面采用name=value的形式傳遞，多個(gè)參數(shù)之間用&連接） ① URL傳參不安全，所有信息可在地址欄看到，并且別人可以很容易u(yù)rl注入，來 攻擊自己的數(shù)據(jù)庫。
② URL傳參數(shù)據(jù)量有限，只能傳遞少量數(shù)據(jù)。
2>post:使用http請求傳遞數(shù)據(jù)。URL地址看不到數(shù)據(jù)信息，安全且傳遞信息量沒有限制
綜上所述：大部分使用post傳參，但是get傳參比Post快
【input標(biāo)簽及屬性】
①type：input輸入框的類型，可選值有：
②name：input輸入框的別名，必填，因?yàn)閭鲄⒌臅r(shí)候采用name=value的形式傳遞。
③value：input輸入框的默認(rèn)值
④placeholder:提示內(nèi)容，當(dāng)輸入框有value時(shí)，提示內(nèi)容消失。
【input特殊屬性值】
① checked="checked"默認(rèn)選中
② disabled="disabled"設(shè)置控制不能使用，按鈕上不能點(diǎn)擊，輸入框上不能修改，而且如果
輸入框時(shí)disabled，則輸入框信息不傳遞到后臺(tái)
③hidden=“hidden”隱藏。等同于<input type="hidden" name="username"value="1234" />
等同于配合disabled或根據(jù)其他需要，使用隱藏域傳遞信息.
【input-type屬性詳解】
①text：文本輸入框
②password：密碼輸入框，內(nèi)容不對外顯示
③radio：單選按鈕
checkbox:復(fù)選按鈕
a、單選按鈕，name和value屬性需同時(shí)存在，提交時(shí)，提交的是value中的屬性值
例如：<input type="radio" name="sex" value="男"/>提交顯示為"sex=男"
b、radio憑借name屬性區(qū)分是否為同一組，name相同為同組，且只能選擇一個(gè)
c、checked="checked"默認(rèn)選中，（radio只可以選一個(gè)，checkbox可以選多個(gè)）
④submit：提交按鈕，提交表單數(shù)據(jù)
⑤reset：重置按鈕，重置為默認(rèn)狀態(tài)
⑥file：文件上傳按鈕
⑦image：圖片提交按鈕，功能同submit，可以提交數(shù)據(jù)
⑧button：普通按鈕，沒什么軟用
⑨其他常用屬性值：見下圖
【select標(biāo)簽】下拉選擇標(biāo)簽
寫法：
<select name="=city">
<option>青島</option>
<option>煙臺(tái)</option>
<option>北京</option>
<option>紐約</option>
<option>羅馬</option>
</select>
常用屬性
①name屬性：寫在select里，所有選項(xiàng)只有一個(gè)name
②multiple屬性：multiple="multiple"設(shè)置select為多選，一般不用
③option常用屬性：value=""屬性，當(dāng)option沒有value屬性時(shí)，往后臺(tái)傳遞的是<option></option>中間的文字，
當(dāng)有value屬性時(shí)，傳遞的是value的屬性值。
title=""屬性,鼠標(biāo)之上后現(xiàn)實(shí)的文字
select="select"默認(rèn)屬性值
④optgroup屬性： 用于option屬性分組，用lable屬性表示分組名。
<optgroup label="中國">
<option>青島</option>
<option>煙臺(tái)</option>
<option>北京</option>
</optgroup>
【textarea】:文本域，其常用屬性 ：
①設(shè)置寬度高度 style="width: 150px;height: 200px;
②readonly="readonly"：只讀模式，不允許修改編輯
③style="resize: none;"設(shè)置為寬度高度不允許修改
④style="overflow:;"設(shè)置文字超出區(qū)域時(shí)，如何處置，常用屬性值有：
hidden 超出區(qū)域的文字，隱藏?zé)o法顯示
scroll 無論文字多少，均顯示滾動(dòng)
auto 自動(dòng)，根據(jù)文字多少自動(dòng)決定是否會(huì)顯示為滾動(dòng)條
【fieldset 、legend】表單的邊框與標(biāo)題
<fieldset> //邊框
<legend> //標(biāo)題
</legend>
</fieldset>
如果想讓標(biāo)題嵌入到邊框中，需將標(biāo)題標(biāo)簽寫到邊框標(biāo)簽里面
一個(gè)表單可以有多組標(biāo)題加邊框組合
【h5智能表單】
1、H5新增input的form屬性，用于指定特form表單的id，實(shí)現(xiàn)input無需放在form標(biāo)簽之中，即可通過表單進(jìn)行提交
<form id=foo>
……
</form>
<input type="text" name="" form="foo">
2、 input元素的新增屬性：
Autocomplete：自動(dòng)完成功能，記錄用戶之前輸入的內(nèi)容，并在用戶下次輸入時(shí)提示用戶輸入
》》》屬性值：on/off
》》》可以再form表單使用，對整個(gè)表單的所有控件進(jìn)行自動(dòng)完成的開關(guān)也可以在input上使用，
對特定輸入框進(jìn)行修改
》》》絕大部分瀏覽器默認(rèn)開啟
Autofocus：自動(dòng)獲得焦點(diǎn)，autofocus="autofocus"只能獲得一個(gè)焦點(diǎn)
Form：所屬表單，通過id確認(rèn)屬于哪個(gè)表單
Required：必填,required="required",設(shè)置必填，否則停止提交
Pattern：使用正則表達(dá)式驗(yàn)證input的模式
Placeholder：提示，當(dāng)有value時(shí)取消提示。
SS常用屬性：
字體屬性：(font)
大小 font-size: x-large;(特大) xx-small;(極小) 一般中文用不到，只要用數(shù)值就可以，單位：PX、PD
樣式 font-style: oblique;(偏斜體) italic;(斜體) normal;(正常)
行高 line-height: normal;(正常) 單位：PX、PD、EM
粗細(xì) font-weight: bold;(粗體) lighter;(細(xì)體) normal;(正常)
變體 font-variant: small-caps;(小型大寫字母) normal;(正常)
大小寫 text-transform: capitalize;(首字母大寫) uppercase;(大寫) lowercase;(小寫) none;(無)
修飾 text-decoration: underline;(下劃線) overline;(上劃線) line-through;(刪除線) blink;(閃爍)
常用字體： (font-family)
"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana
背景屬性： (background)
色彩background-color: #FFFFFF;
圖片background-image: url();
重復(fù)background-repeat: no-repeat;
滾動(dòng)background-attachment: fixed;(固定) scroll;(滾動(dòng))
位置background-position: left(水平) top(垂直);
簡寫方法 background:#000 url(..) repeat fixed left top;
區(qū)塊屬性： (Block)
字間距l(xiāng)etter-spacing: normal; 數(shù)值
對劉text-align: justify;(兩端對齊) left;(左對齊) right;(右對齊) center;(居中)
縮進(jìn)text-indent: 數(shù)值px;
垂直對齊vertical-align: baseline;(基線) sub;(下標(biāo)) super;(下標(biāo)) top; text-top; middle; bottom; text-bottom;
詞間距word-spacing: normal; 數(shù)值
空格white-space: pre;(保留) nowrap;(不換行)
顯示display:block;(塊) inline;(內(nèi)嵌) list-item;(列表項(xiàng)) run-in;(追加部分) compact;(緊湊) marker;(標(biāo)記) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格標(biāo)題)
方框?qū)傩?/strong>： (Box)
width:; height:; float:; clear:both; margin:; padding:; 順序：上右下左
邊框?qū)傩?/strong>： (Border)
border-style: dotted;(點(diǎn)線) dashed;(虛線) solid; double;(雙線) groove;(槽線) ridge;(脊?fàn)? inset;(凹陷) outset;
border-width:; 邊框?qū)挾?/p>
border-color:#;
簡寫方法border：width style color;
列表屬性： (List-style)
類型list-style-type: disc;(圓點(diǎn)) circle;(圓圈) square;(方塊) decimal;(數(shù)字) lower-roman;(小羅碼數(shù)字) upper-roman; lower-alpha; upper-alpha;
位置list-style-position: outside;(外) inside;
圖像list-style-image: url(..);
定位屬性： (Position)
Position: absolute; relative; static;
visibility: inherit; visible; hidden;
overflow: visible; hidden; scroll; auto;
clip: rect(12px,auto,12px,auto) (裁切)
css屬性代碼大全
一 CSS文字屬性：
color : #999999; /*文字顏色*/
font-family : 宋體,sans-serif; /*文字字體*/
font-size : 9pt; /*文字大小*/
font-style:itelic; /*文字斜體*/
font-variant:small-caps; /*小字體*/
letter-spacing : 1pt; /*字間距離*/
line-height : 200%; /*設(shè)置行高*/
font-weight:bold; /*文字粗體*/
vertical-align:sub; /*下標(biāo)字*/
vertical-align:super; /*上標(biāo)字*/
text-decoration:line-through; /*加刪除線*/
text-decoration: overline; /*加頂線*/
text-decoration:underline; /*加下劃線*/
text-decoration:none; /*刪除鏈接下劃線*/
text-transform : capitalize; /*首字大寫*/
text-transform : uppercase; /*英文大寫*/
text-transform : lowercase; /*英文小寫*/
text-align:right; /*文字右對齊*/
text-align:left; /*文字左對齊*/
text-align:center; /*文字居中對齊*/
text-align:justify; /*文字分散對齊*/
vertical-align屬性
vertical-align:top; /*垂直向上對齊*/
vertical-align:bottom; /*垂直向下對齊*/
vertical-align:middle; /*垂直居中對齊*/
vertical-align:text-top; /*文字垂直向上對齊*/
vertical-align:text-bottom; /*文字垂直向下對齊*/
二、CSS邊框空白
padding-top:10px; /*上邊框留空白*/
padding-right:10px; /*右邊框留空白*/
padding-bottom:10px; /*下邊框留空白*/
padding-left:10px; /*左邊框留空白
三、CSS符號屬性：
list-style-type:none; /*不編號*/
list-style-type:decimal; /*阿拉伯?dāng)?shù)字*/
list-style-type:lower-roman; /*小寫羅馬數(shù)字*/
list-style-type:upper-roman; /*大寫羅馬數(shù)字*/
list-style-type:lower-alpha; /*小寫英文字母*/
list-style-type:upper-alpha; /*大寫英文字母*/
list-style-type:disc; /*實(shí)心圓形符號*/
list-style-type:circle; /*空心圓形符號*/
list-style-type:square; /*實(shí)心方形符號*/
list-style-image:url(/dot.gif); /*圖片式符號*/
list-style-position: outside; /*凸排*/
list-style-position:inside; /*縮進(jìn)*/
四、CSS背景樣式：
background-color:#F5E2EC; /*背景顏色*/
background:transparent; /*透視背景*/
background-image : url(/image/bg.gif); /*背景圖片*/
background-attachment : fixed; /*浮水印固定背景*/
background-repeat : repeat; /*重復(fù)排列-網(wǎng)頁默認(rèn)*/
background-repeat : no-repeat; /*不重復(fù)排列*/
background-repeat : repeat-x; /*在x軸重復(fù)排列*/
background-repeat : repeat-y; /*在y軸重復(fù)排列*/
指定背景位置
background-position : 90% 90%; /*背景圖片x與y軸的位置*/
background-position : top; /*向上對齊*/
background-position : buttom; /*向下對齊*/
background-position : left; /*向左對齊*/
background-position : right; /*向右對齊*/
background-position : center; /*居中對齊*/
五、CSS連接屬性：
a /*所有超鏈接*/
a:link /*超鏈接文字格式*/
a:visited /*瀏覽過的鏈接文字格式*/
a:active /*按下鏈接的格式*/
a:hover /*鼠標(biāo)轉(zhuǎn)到鏈接*/
鼠標(biāo)光標(biāo)樣式：
鏈接手指 CURSOR: hand
十字體 cursor:crosshair
箭頭朝下 cursor:s-resize
十字箭頭 cursor:move
箭頭朝右 cursor:move
加一問號 cursor:help
箭頭朝左 cursor:w-resize
箭頭朝上 cursor:n-resize
箭頭朝右上 cursor:ne-resize
箭頭朝左上 cursor:nw-resize
文字I型 cursor:text
箭頭斜右下 cursor:se-resize
箭頭斜左下 cursor:sw-resize
漏斗 cursor:wait
光標(biāo)圖案(IE6) p {cursor:url("光標(biāo)文件名.cur"),text;}
六、CSS框線一覽表：
border-top : 1px solid #6699cc; /*上框線*/
border-bottom : 1px solid #6699cc; /*下框線*/
border-left : 1px solid #6699cc; /*左框線*/
border-right : 1px solid #6699cc; /*右框線*/
以上是建議書寫方式,但也可以使用常規(guī)的方式 如下:
border-top-color : #369 /*設(shè)置上框線top顏色*/
border-top-width :1px /*設(shè)置上框線top寬度*/
border-top-style : solid/*設(shè)置上框線top樣式*/
其他框線樣式
solid /*實(shí)線框*/
dotted /*虛線框*/
double /*雙線框*/
groove /*立體內(nèi)凸框*/
ridge /*立體浮雕框*/
inset /*凹框*/
outset /*凸框*/
七、CSS表單運(yùn)用：
文字方塊
按鈕
復(fù)選框
選擇鈕
多行文字方塊
下拉式菜單 選項(xiàng)1選項(xiàng)2
八、CSS邊界樣式：
margin-top:10px; /*上邊界*/
margin-right:10px; /*右邊界值*/
margin-bottom:10px; /*下邊界值*/
margin-left:10px; /*左邊界值*/
CSS 屬性： 字體樣式(Font Style)
序號 中文說明 標(biāo)記語法
1 字體樣式 {font:font-style font-variant font-weight font-size font-family}
2 字體類型 {font-family:"字體1","字體2","字體3",...}
3 字體大小 {font-size:數(shù)值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}
4 字體風(fēng)格 {font-style:inherit|italic|normal|oblique}
5 字體粗細(xì) {font-weight:100-900|bold|bolder|lighter|normal;}
6 字體顏色 {color:數(shù)值;}
7 陰影顏色 {text-shadow:16位色值}
8 字體行高 {line-height:數(shù)值|inherit|normal;}
9 字 間 距 {letter-spacing:數(shù)值|inherit|normal}
10 單詞間距 {word-spacing:數(shù)值|inherit|normal}
11 字體變形 {font-variant:inherit|normal|small-cps }
12 英文轉(zhuǎn)換 {text-transform:inherit|none|capitalize|uppercase|lowercase}
13 字體變形 {font-size-adjust:inherit|none}
14 字體 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}
文本樣式(Text Style)
序號 中文說明 標(biāo)記語法
1 行 間 距 {line-height:數(shù)值|inherit|normal;}
2 文本修飾 {text-decoration:inherit|none|underline|overline|line-through|blink}
3 段首空格 {text-indent:數(shù)值|inherit}
4 水平對齊 {text-align:left|right|center|justify}
5 垂直對齊 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}
6 書寫方式 {writing-mode:lr-tb|tb-rl}
背景樣式
序號 中文說明 標(biāo)記語法
1 背景顏色 {background-color:數(shù)值}
2 背景圖片 {background-image: url(URL)|none}
3 背景重復(fù) {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
4 背景固定 {background-attachment:fixed|scroll}
5 背景定位 {background-position:數(shù)值|top|bottom|left|right|center}
6 背影樣式 {background:背景顏色|背景圖象|背景重復(fù)|背景附件|背景位置}
框架樣式(Box Style)
序號 中文說明 標(biāo)記語法
1 邊界留白 {margin:margin-top margin-right margin-bottom margin-left}
2 補(bǔ) 白 {padding:padding-top padding-right padding-bottom padding-left}
3 邊框?qū)挾?{border-width:border-top-width border-right-width border-bottom-width border-left-width}
寬度值： thin|medium|thick|數(shù)值
4 邊框顏色 {border-color:數(shù)值 數(shù)值 數(shù)值 數(shù)值} 數(shù)值：分別代表top、right、bottom、left顏色值
5 邊框風(fēng)格 {border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}
6 邊 框 {border:border-width border-style color}
上 邊 框 {border-top:border-top-width border-style color}
右 邊 框 {border-right:border-right-width border-style color}
下 邊 框 {border-bottom:border-bottom-width border-style color}
左 邊 框 {border-left:border-left-width border-style color}
7 寬 度 {width:長度|百分比| auto}
8 高 度 {height:數(shù)值|auto}
9 漂 浮 {float:left|right|none}
10 清 除 {clear:none|left|right|both}
分類列表
序號 中文說明 標(biāo)記語法
1 控制顯示 {display:none|block|inline|list-item}
2 控制空白 {white-space:normal|pre|nowarp}
3 符號列表 {list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}
4 圖形列表 {list-style-image:URL}
5 位置列表 {list-style-position:inside|outside}
6 目錄列表 {list-style:目錄樣式類型|目錄樣式位置|url}
7 鼠標(biāo)形狀 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
