1.css灞炴€х殑缁ф壙

CSS涓湁浜涘睘鎬ф槸鍙户鎵跨殑锛屼綍涓哄睘鎬х殑缁ф壙锛?/p>

• 涓€涓厓绱犲鏋滄病鏈夎缃煇浜涘睘鎬х殑鍊硷紝灏变細璺熼殢锛堢户鎵匡級鐖跺厓绱犵殑灞炴€у€笺€傚綋鐒讹紝涓€涓厓绱犲鏋滄湁璁剧疆鑷繁鐨勫睘鎬у€硷紝灏变細浣跨敤鑷繁鐨勩€?/li>
• 姣斿color銆乫ont-size绛夊睘鎬ф槸鍙互缁ф壙鐨勶紝鎬庢牱鏌ョ湅鏌愪簺灞炴€ф槸缁ф壙鐖跺厓绱犵殑锛岃繕鏄嚜宸辫缃殑鍛紵锛堝彲閫氳繃娴忚鍣ㄨ皟璇曞伐鍏锋煡鐪嬶級

绀轰緥浠ｇ爜濡備笅锛氱粰鐖剁骇div璁剧疆瀛椾綋鏍峰紡锛?/p>

.box {
  color: red;
  font-size: 16px;
}
<div class="box">
  <span>鎴戞槸span鍏冪礌</span>
</div>

娴忚鍣ㄨ繍琛岀粨鏋滐細span鍏冪礌鍐呭瀛椾綋棰滆壊鍙樻垚绾㈣壊銆佸ぇ灏忓彉鎴?6px锛屽苟涓旀爣璇嗘牱寮忔槸缁ф壙浜?code>div.box锛?/p>

• 閭ｄ箞鍝簺鏍峰紡鍙互缁ф壙鍝簺鏍峰紡涓嶈兘缁ф壙锛屽叿浣撳睘鎬ф槸鍚﹁兘缁ф壙锛屽彲浠ユ煡闃?a href="https://www.w3.org/" target="_blank">W3C瀹樼綉鎴栬€?a href="https://developer.mozilla.org/zh-CN/" target="_blank">MDN銆?/li>

浠DN涓轰緥锛氳緭鍏ラ渶瑕佹煡鎵剧殑灞炴€э紙color鏄彲浠ョ户鎵跨殑銆亀idth鏄笉鑳界户鎵跨殑锛?/p>

• 涓嶈兘缁ф壙鐨勫睘鎬у彲浠ヤ娇鐢?code>inherit灞炴€у€煎己鍒剁户鎵裤€?/li>

娉ㄦ剰锛歝ss灞炴€х户鎵跨殑鏄绠楀€硷紝骞朵笉鏄紪鍐欏睘鎬ф椂鐨勬寚瀹氬€硷紙涔熷氨鏄瓧闈㈠€硷級銆?/p>

绀轰緥浠ｇ爜锛?/p>

.box1 {
  width: 1000px;
  height: 150px;
  background-color: #f00;
}
.box2 {
  width: 50%; /* 500px */
  height: 100px;
  background-color: #00f;
}
.box3 {
  width: inherit; /* 500px */
  height: 50px;
  background-color: #0f0;
}
 
<div class="box1">
  <div class="box2">
    <div class="box3"></div>
  </div>
</div>

杩愯缁撴灉锛?code>div.box3鏄洿鎺ョ户鎵?code>div.box2璁＄畻鍚庣殑500px锛?/p>

2.css灞炴€х殑灞傚彔

CSS鍏ㄧО (Cascading Style Sheets锛屽眰鍙犳牱寮忚〃锛夛紝瀹冨厑璁稿涓浉鍚屽悕瀛楃殑css灞炴€у眰鍙犲湪鍚屼竴涓厓绱犱笂锛屽眰鍙犳渶鍚庣粨鏋滐紝鍙湁涓€涓猚ss灞炴€т細鐢熸晥銆?/p>

• 娴忚鍣ㄧ殑璋冭瘯宸ュ叿闈炲父娓呮櫚鐨勬樉绀哄摢涓猚ss灞炴€ф渶缁堢敓鏁堛€?/li>

绀轰緥浠ｇ爜锛?/p>

#box { color: red; }
.container { color: green; }
div { color: blue; }
 
<div id="box" class="container">div鍏冪礌鍐呭</div>

娴忚鍣ㄨ繍琛岀粨鏋滐細鏈€缁坕d璁剧疆鐨勫睘鎬х敓鏁堬紱

• 鍏蜂綋鍝釜css灞炴€х敓鏁堬紝娑夊強鍒癱ss灞炴€ф墍澶勭幆澧冪殑浼樺厛绾х殑楂樹綆銆?/li>

3.css灞炴€х殑浼樺厛绾?/h2>

涓轰粈涔堟湁鏃剁紪鍐欑殑css灞炴€ф病鏈変骇鐢熷搴旀晥鏋滐紝寰堝彲鑳芥槸鍥犱负浠ヤ笅鍘熷洜锛?/p>

• 閫夋嫨鍣ㄧ殑浼樺厛绾уお浣庯紱
• 閫夋嫨鍣ㄦ病鏈夐€変腑瀵瑰簲鐨勫厓绱狅紱
• css灞炴€т娇鐢ㄤ笉姝ｇ‘锛?
  • 鍏冪礌涓嶆敮鎸佽css灞炴€э紝姣斿span榛樿涓嶆敮鎸亀idth鍜宧eight锛?/li>
  • 娴忚鍣ㄧ増鏈笉鍏煎锛?/li>
  • 琚悓绫籧ss灞炴€ц鐩栵紝姣斿font瑕嗙洊font-size锛?/li>

锛?锛夎В鍐虫柟妗堬細鍙互鍏呭垎鍒╃敤娴忚鍣ㄧ殑璋冭瘯宸ュ叿杩涜璋冭瘯鍜屾煡閿欙紝涔熷彲鍊熷姪css閫夋嫨鍣ㄧ殑鏉冮噸鍊?/code>鏉ヨВ鍐炽€?/p>

锛?锛変负浜嗘柟渚縞ss灞炴€х殑浼樺厛绾э紝鍙互缁檆ss灞炴€ф墍澶勭殑鐜瀹氫箟涓€涓潈鍊硷紙鏉冮噸锛?/p>

• !important锛?0000锛?/li>
• 鍐呰仈鏍峰紡锛?000锛?/li>
• id閫夋嫨鍣細100锛?/li>
• 绫婚€夋嫨鍣ㄣ€佸睘鎬ч€夋嫨鍣ㄣ€佷吉绫伙細10锛?/li>
• 鍏冪礌閫夋嫨鍣ㄣ€佷吉鍏冪礌锛?锛?/li>
• 閫氶厤绗︼細0锛?/li>

锛?锛夋瘮杈冧紭鍏堢骇鐨勪弗璋ㄦ柟娉曪細

• 浠庢潈鍊兼渶澶х殑寮€濮嬫瘮杈冩瘡涓€绉嶆潈鍊肩殑鏁伴噺澶氬皯锛屾暟閲忓鐨勫垯浼樺厛绾ч珮锛?/li>
• 濡傛灉鏁伴噺鐩稿悓锛屾瘮杈冧笅涓€涓緝灏忕殑鏉冨€硷紝浠ユ绫绘帹锛?/li>
• 濡傛灉鎵€鏈夋潈鍊兼瘮杈冨畬姣曞悗閮藉彂鐜版暟閲忕浉鍚岋紝灏遍噰鍙?ldquo;灏辫繎鍘熷垯”锛?/li>

锛?锛変篃鍙娇鐢ㄤ笅闈㈢殑琛ㄦ牸鏉ヨ　閲忎紭鍏堢骇楂樹綆锛屼娇鐢ㄤ竴涓洓浣嶇殑瀛椾覆琛ㄧず锛屽€间粠宸﹀埌鍙筹紝宸﹂潰鐨勬渶澶э紝涓€绾уぇ浜庝竴绾э紝鏁颁綅涔嬮棿娌℃湁杩涘埗锛岀骇鍒箣闂翠笉鍙秴瓒婏細

閫夋嫨鍣?/th>	閫夋嫨鍣ㄦ潈閲?/th>
缁ф壙銆?	0, 0, 0, 0
鍏冪礌閫夋嫨鍣?/td>	0, 0, 0, 1
绫婚€夋嫨鍣ㄣ€佷吉绫婚€夋嫨鍣?/td>	0, 0, 1, 0
id閫夋嫨鍣?/td>	0, 1, 0, 0
鍐呰仈鏍峰紡	1, 0, 0, 0
!important	∞锛堟棤绌峰ぇ锛?/td>

鍒版杩欑瘒鍏充簬CSS涓夊ぇ鐗规€х户鎵挎€с€佸眰鍙犳€у拰浼樺厛绾ц瑙ｇ殑鏂囩珷灏变粙缁嶅埌杩欎簡銆傚笇鏈涘澶у鐨勫涔犳湁鎵€甯姪锛屼篃甯屾湜澶у澶氬鏀寔鑴氭湰涔嬪銆?/p>