層疊樣式表(Cascading Style Sheets厨剪，縮寫為 CSS）岂傲，是一種 樣式表語言难裆，用來描述 HTML 或 XML（包括如 SVG、MathML镊掖、XHTML 之類的 XML 分支語言）文檔的呈現(xiàn)乃戈。CSS 描述了在屏幕、紙質(zhì)堰乔、音頻等其它媒體上的元素應(yīng)該如何被渲染的問題偏化。
學(xué)習(xí)資源
- 張鑫旭CSS240篇博客
- Google:阮一峰CSS
- Codrops CSS的炫酷效果
- Google:關(guān)鍵詞+MDN
- CSS 2.1 中文spec
CSS的四種引入方式
- 內(nèi)聯(lián) style 屬性（在標(biāo)簽中加入style屬性）
- style標(biāo)簽（一般寫在<head>里面）
<head>
<style>
body{
background-color: grey
}
</style>
</head>
- 用<link>的形式引入css
<link rel="stylesheet" herf="./a.css">
- 一般寫在a.css的第一行脐恩，引入a.css之前引入b.css
@import url (./b.css);
將<li>實現(xiàn)浮動
加一個float屬性
<li style="float: left;">
但是與此同時一定會出現(xiàn)一個bug（下面的內(nèi)容會跑上來）
在<ul>中加入
-
class="clearfix"可以解決這個bug（clearfix寫在CSS里面镐侯，內(nèi)容如下。不要加到float上，要加到他們的爸爸上）
.clearfix::after{
content: '';
display: block;
clear: both;
}
ps: 其中clearfix是屬性值
-
style="list-style: none"可以把列表的小圓點消失 -
margin: 0; padding: 0可以把列表的空白去除
在CSS里面批量添加樣式
.topNavBar>nav>ui{
list-style: none; margin: 0; padding: 0;
}
ps: 1. 必須要完整地滿足topNavBar>nav>ui嚴(yán)格的父子關(guān)系苟翻，多一層都不行
2. topNavBar也是屬性值
3. 添加的是ui下面的樣式
body{
background: black;
}
提到的一個考點
開發(fā)者工具
Styles:展示所有的樣式
Computed:展示計算出來的樣式
頁面上的默認(rèn)字體大小是多少:16px
知識點
-
<div>是塊級(block)元素韵卤，單獨占一行，如果想把多個<div>放在一行崇猫，有兩種方法沈条。
- 每個
<div>加個float屬性，然后父級元素加個clearfix(見上文) - 使用
display: inline-block(最好不要用诅炉，可能會出bug)
-
塊級元素的高度是由它內(nèi)部文檔流元素的總和決定的蜡歹。（不一定相等）
內(nèi)聯(lián)元素的高度跟具體的字體以及與字體相關(guān)的設(shè)計師設(shè)計的參數(shù)有關(guān)>內(nèi)聯(lián)元素的高度（下面的是121px）
同樣的font-size但是<span>卻不同，這是因為上面字體的建議行高就是字體大小的1.4倍涕烧，下面的是1.21倍月而。line-height可以限制<span>的高度。 文檔流:內(nèi)聯(lián)元素從左往右流動议纯；塊級元素從上往下流動父款，每個塊級元素另起一行。如果內(nèi)聯(lián)元素是一個很長的英文瞻凤，這個單詞是不會分開的憨攒，除非你用
word-break。<span>（內(nèi)聯(lián)元素）是不接受設(shè)置寬高的阀参，但是可以加上一個display: inline-block來設(shè)置寬高肝集。更好的方法是給<span>加上padding.
