css樣式的原則是這樣的，如果有多個(gè)元素（大于等于2個(gè)），并且需要設(shè)置有相同的樣式，則可以把他們的class屬性設(shè)置成一樣的，統(tǒng)一進(jìn)行設(shè)置，如果多個(gè)元素（大于等2），每個(gè)元素之間都沒有共同的樣式，則可以針對每個(gè)元素設(shè)置唯一的id屬性，對這個(gè)唯一的id屬性進(jìn)行設(shè)置，就可以顯示不同的效果，樓主這樣的情況，可以選擇對兩個(gè)元素設(shè)置id屬性，通過不同的id顯示不同的樣式效果，但是兩個(gè)文本框如果有共同的屬性也是可以設(shè)置class屬性的，這個(gè)是不沖突的，如果回答的解決了您的問題，請采納。
創(chuàng)新互聯(lián)公司專注于昭化網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供昭化營銷型網(wǎng)站建設(shè)，昭化網(wǎng)站制作、昭化網(wǎng)頁設(shè)計(jì)、昭化網(wǎng)站官網(wǎng)定制、小程序制作服務(wù)，打造昭化網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供昭化網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
1、創(chuàng)建使用css樣式表有三種，分別是外部樣式表，內(nèi)部樣式表和內(nèi)聯(lián)樣式。下面通過一個(gè)小demo演示它們的用法，首先新建一個(gè)html文件，放入3個(gè)button按鈕，給前兩個(gè)按鈕分別設(shè)置class屬性為btn1和btn2：
2、接著準(zhǔn)備一個(gè)css文件，命名為demo.css，在文件內(nèi)寫入按鈕A的樣式，保存css文件：
3、回到剛才的html文件，在style標(biāo)簽中用link標(biāo)簽引入上一步創(chuàng)建的css文件，這就是外聯(lián)樣式的用法，總結(jié)就是創(chuàng)建好的css文件內(nèi)寫好樣式，然后在html文件中用link標(biāo)簽引入即可，這也是大部分網(wǎng)站使用的方法，因?yàn)槠湟敕奖?，管理起來也比較方便：
4、接著是內(nèi)部樣式表的使用，這里直接在head標(biāo)簽里創(chuàng)建style標(biāo)簽，在里面加入btn2的樣式。對于內(nèi)部樣式表簡單的html文件，內(nèi)部樣式是很方便的，但是結(jié)構(gòu)復(fù)雜的html文件使用它就會讓文件顯得很混亂：
5、最后是內(nèi)聯(lián)樣式的使用，直接在第三個(gè)標(biāo)簽內(nèi)使用style屬性加入樣式就可以了：
6、最后保存html文件，打開瀏覽器可以看到三個(gè)按鈕的樣式都出現(xiàn)了。以上就是css樣式表的制作方法：
CSS即層疊樣式表（Cascading Style Sheets），是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言。
CSS樣式主要包含以下三種類型：
1、行內(nèi)樣式（內(nèi)嵌樣式）：結(jié)構(gòu)的內(nèi)部，即寫在標(biāo)簽內(nèi)的樣式；寫在標(biāo)簽的開始部分內(nèi)部，style屬性當(dāng)中。
例：標(biāo)記 style="樣式的屬性名1：樣式的屬性值1；屬性名2：屬性值2；......"/標(biāo)記
2、內(nèi)部樣式（內(nèi)聯(lián)樣式）：寫在HTML頁面內(nèi)部，存放于head標(biāo)記當(dāng)中，樣式寫在style標(biāo)記內(nèi)。
例：style選擇器 {屬性名：屬性值；屬性名：屬性值；......}/style
3、外部樣式（外聯(lián)樣式）：寫在css文件內(nèi)。
例：link type="text/css" rel="stylesheet" href="css/main.css" /
擴(kuò)展資料：
使用CSS樣式的優(yōu)點(diǎn)：
CSS有助于實(shí)現(xiàn)負(fù)責(zé)任的Web設(shè)計(jì)。CSS對開發(fā)者構(gòu)建Web站點(diǎn)的影響很大，并且這種影響可能是無止境的。將網(wǎng)頁的大部分甚至是全部的表示信息從HTML或XML文件中移出，并將它們保留在一個(gè)樣式表中有諸多優(yōu)點(diǎn)，如降低文件大小、節(jié)省網(wǎng)絡(luò)帶寬以及易于維護(hù)等。
此外，站點(diǎn)的表現(xiàn)信息和核心內(nèi)容相分離，使得站點(diǎn)的設(shè)計(jì)人員能夠在短暫的時(shí)間內(nèi)對整個(gè)網(wǎng)站進(jìn)行各種各樣的修改。
CSS簡化了網(wǎng)頁的格式代碼，外部的樣式表還會被瀏覽器保存在緩存里，加快了下載顯示的速度，也減少了需要上傳的代碼數(shù)量（因?yàn)橹貜?fù)設(shè)置的格式將被只保存一次）。
只要修改保存著網(wǎng)站格式的CSS樣式表文件就可以改變整個(gè)站點(diǎn)的風(fēng)格特色，在修改頁面數(shù)量龐大的站點(diǎn)時(shí)，顯得格外有用。這就避免了一個(gè)個(gè)網(wǎng)頁的修改，大大減少了工作量。
參考資料來源：百度百科-CSS
如何清除圖片下方出現(xiàn)幾像素的空白間隙？
方法1：
方法2：
除了top值，還可以設(shè)置為text-top | middle | bottom | text-bottom
甚至特定的length和percentage值都可以
方法3：
如何讓文本垂直對齊文本輸入框？
如何讓單行文本在容器內(nèi)垂直居中？
如何讓超鏈接訪問后和訪問前的顏色不同且訪問后仍保留hover和active效果？
按L-V-H-A的順序設(shè)置超鏈接樣式即可，可速記為LoVe（喜歡）HAte（討厭）
為什么Standard mode下IE無法設(shè)置滾動(dòng)條的顏色？
將原來設(shè)置在body上的滾動(dòng)條顏色樣式定義到html標(biāo)簽選擇符上即可
如何使文本溢出邊界不換行強(qiáng)制在一行內(nèi)顯示？
設(shè)置容器的寬度和white-space為nowrap即可，其效果類似nobr標(biāo)簽
如何使文本溢出邊界顯示為省略號？
方法（此方法Firefox5.0尚不支持）：
如何使連續(xù)的長字符串自動(dòng)換行？
word-wrap的break-word值允許單詞內(nèi)換行
如何清除浮動(dòng)？
方法1：
方法2：
方法3：
如何定義鼠標(biāo)指針的光標(biāo)形狀為手型并兼容所有瀏覽器？
若將cursor設(shè)置為hand，將只有IE和Opera支持，且hand為非標(biāo)準(zhǔn)屬性值
如何讓已知高度的容器在頁面中水平垂直居中？
Know More：已知高度的容器如何在頁面中水平垂直居中
如何讓未知尺寸的圖片在已知寬高的容器內(nèi)水平垂直居中？
如何設(shè)置span的寬度和高度（即如何設(shè)置內(nèi)聯(lián)元素的寬高）？
如何給一個(gè)元素定義多個(gè)不同的css規(guī)則？
如何讓某個(gè)元素充滿整個(gè)頁面？
如何讓某個(gè)元素距離窗口上右下左4邊各10像素？
如何去掉超鏈接的虛線框？
IE7及更早瀏覽器由于不支持outline屬性，需要通過js的blur()方法來實(shí)現(xiàn)，如a onfocus="this.blur();"...
如何容器透明，內(nèi)容不透明？
原理是容器層與內(nèi)容層并級，容器層設(shè)置透明度，內(nèi)容層通過負(fù)margin或者position絕對定位等方式覆蓋到容器層上
方法2：
高級瀏覽器直接使用rgba顏色值實(shí)現(xiàn)；IE瀏覽器在定義容器透明的同時(shí)，讓子節(jié)點(diǎn)相對定位，也可達(dá)到效果
如何讓整個(gè)頁面水平居中？
定義body的text-align值為center將使得IE5.5也能實(shí)現(xiàn)居中
為什么容器的背景色沒顯示出來？為什么容器無法自適應(yīng)內(nèi)容高度？
通常出現(xiàn)這樣的情況都是由于沒有清除浮動(dòng)而引起的
如何做1像素細(xì)邊框的table？
方法1：
方法2：
IE7及更早瀏覽器不支持border-spacing屬性，但是可以通過table的標(biāo)簽屬性cellspacing來替代。
如何使頁面文本行距始終保持為n倍字體大小的基調(diào)？
注意，不要給n加單位
標(biāo)準(zhǔn)模式Standard mode和怪異模式Quirks mode下的盒模型區(qū)別？
標(biāo)準(zhǔn)模式下：Element width = width + padding + border
怪異模式下：Element width = width
以圖換字的幾種方法及優(yōu)劣分析
思路1：使用text-indent的負(fù)值，將內(nèi)容移出容器
該方法優(yōu)點(diǎn)在于結(jié)構(gòu)簡潔，不理想的地方：
1.由于使用場景不同，負(fù)縮進(jìn)的值可能會不一樣，不易抽象成公用樣式；
2.當(dāng)該元素為鏈接時(shí)，在非IE下虛線框?qū)⒆兊貌煌暾?/p>
3.如果該元素被定義為內(nèi)聯(lián)級或者內(nèi)聯(lián)塊級，不同瀏覽器下會有較多的差異
思路2：使用display:none或visibility:hidden將內(nèi)容隱藏；
該方法優(yōu)點(diǎn)在于兼容性強(qiáng)并且容易抽象成公用樣式，缺點(diǎn)在于結(jié)構(gòu)較復(fù)雜
思路3：使用padding或者line-height將內(nèi)容擠出容器之外；
該方法優(yōu)點(diǎn)在于結(jié)構(gòu)簡潔，缺點(diǎn)在于：
1.由于使用場景不同，padding或line-height的值可能會不一樣，不易抽象成公用樣式；
2.要兼容IE5.5及更早瀏覽器還得hack
思路4：使用超小字體和文本全透明法；
該方法結(jié)構(gòu)簡單易用，推薦使用
為什么2個(gè)相鄰div的margin只有1個(gè)生效？
本例中box1的底部margin為10px，box2的頂部margin為20px，但表現(xiàn)在頁面上2者之間的間隔為20px，而不是預(yù)想中的10+20px=30px，結(jié)果是選擇2者之間最大的那個(gè)margin，我們把這種機(jī)制稱之為“外邊距合并”；外邊距合并不僅僅出現(xiàn)在相鄰的元素間，父子間同樣會出現(xiàn)。
簡單列舉幾點(diǎn)注意事項(xiàng):
外邊距合并只出現(xiàn)在塊級元素上；
浮動(dòng)元素不會和相鄰的元素產(chǎn)生外邊距合并；
絕對定位元素不會和相鄰的元素產(chǎn)生外邊距合并；
內(nèi)聯(lián)塊級元素間不會產(chǎn)生外邊距合并；
根元素間不會不會產(chǎn)生外邊距合并（如html與body間）；
設(shè)置了屬性overflow且值不為visible的塊級元素不會與它的子元素發(fā)生外邊距合并；
如何在文本框中禁用中文輸入法？
ime-mode為非標(biāo)準(zhǔn)屬性，寫該文檔時(shí)只有IE和Firefox支持
如何解決列表中l(wèi)ist-style-image不能精準(zhǔn)定位的問題？
不使用list-style-image來定義列表項(xiàng)目標(biāo)記符號，而用background-image來代替，
并通過background-position來進(jìn)行定位
如何解決偽對象:before和:after在input標(biāo)簽上的怪異表現(xiàn)的問題？
現(xiàn)象：
在編寫本條目時(shí)，除了Opera，在所有瀏覽器下input標(biāo)簽使用偽對象:before和:after都沒有效果，即使Opera的表現(xiàn)也同樣令人詫異。大家可以試玩一下。瀏覽器版本：IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51
除了Firefox，在所有瀏覽器下偽對象:before和:after無法定義過渡和動(dòng)畫效果。
如果這個(gè)過渡或動(dòng)畫效果是必須，可以考慮使用真實(shí)對象。
重慶分公司
重慶分公司
