CSS的固定格式:
文字相關(guān)屬性:
![]()
1.規(guī)定文字樣式的屬性
格式：font-style: italic;
取值：
normal ： 正常的， 默認(rèn)就是正常的
italic :? 傾斜的
快捷鍵：
fs font-style: italic;
fsn font-style: normal;
2.規(guī)定文字粗細(xì)的屬性
格式： font-weight: bold;
單詞取值:
bold 加粗
bolder? 比加粗還要粗
lighter 細(xì)線， 默認(rèn)就是細(xì)線
數(shù)字取值：
100-900之間整百的數(shù)字
快捷鍵
fw font-weight:;
fwb font-weight: bold;
fwbr? font-weight: bolder;
3.規(guī)定文字大小的屬性
格式：font-size: 30px;
單位：px（像素 pixel）
注意點： 通過font-size設(shè)置大小一定要帶單位， 也就是一定要寫px
快捷鍵
fz font-size:;
fz30 font-size: 30px;
4.規(guī)定文字字體的屬性
格式：font-family:"楷體";
注意點：
1.如果取值是中文， 需要用雙引號或者單引號括起來
2.設(shè)置的字體必須是用戶電腦里面已經(jīng)安裝的字體
快捷鍵
ff font-family:;
文字屬性的縮寫:
文本屬性
1.文本裝飾的屬性
格式:text-decoration: underline;
取值:
underline 下劃線
line-through 刪除線
overline 上劃線
none 什么都沒有, 最常見的用途就是用于去掉超鏈接的下劃線
快捷鍵:
td? text-decoration: none;
tdu text-decoration: underline;
tdl text-decoration: line-through;
tdo text-decoration: overline;
2.文本水平對齊的屬性
格式: text-align: right;
取值:
left 左
right 右
center 中
快捷鍵
ta text-align: left;
tar text-align: right;
tac text-align: center;
3.文本縮進(jìn)的屬性
格式: text-indent: 2em;
取值:
2em, 其中em是單位, 一個em代表縮進(jìn)一個文字的寬度
快捷鍵
ti text-indent:;
ti2e text-indent: 2em;
顏色屬性:
標(biāo)簽選擇器：作用: 根據(jù)指定的標(biāo)簽名稱, 在當(dāng)前界面中找到所有該名稱的標(biāo)簽, 然后設(shè)置屬性
id選擇器：作用: 根據(jù)指定的id名稱找到對應(yīng)的標(biāo)簽, 然后設(shè)置屬性
類選擇器：作用: 根據(jù)指定的類名稱找到對應(yīng)的標(biāo)簽, 然后設(shè)置屬性
id選擇器和class選擇器：id相當(dāng)于人的身份證不可以重復(fù)、class相當(dāng)于人的名稱可以重復(fù)
后代選擇器：作用: 找到指定標(biāo)簽的所有特定的后代標(biāo)簽, 設(shè)置屬性
子元素選擇器：作用: 找到指定標(biāo)簽中所有特定的直接子元素, 然后設(shè)置屬性
交集選擇器：作用: 給所有選擇器選中的標(biāo)簽中, 相交的那部分標(biāo)簽設(shè)置屬性
并集選擇器：作用: 給所有選擇器選中的標(biāo)簽設(shè)置屬性
兄弟選擇器：作用: 給指定選擇器后面緊跟的那個選擇器選中的標(biāo)簽設(shè)置屬性
序選擇器：CSS3中新增的選擇器最具代表性的就是序選擇器
屬性選擇器：作用: 根據(jù)指定的屬性名稱找到對應(yīng)的標(biāo)簽, 然后設(shè)置屬性
CSS三大特性之繼承性：作用: 給父元素設(shè)置一些屬性, 子元素也可以使用, 這個我們就稱之為繼承性
CSS三大特性之層疊性：層疊性就是CSS處理沖突的一種能力
CSS三大特性之優(yōu)先級：作用:當(dāng)多個選擇器選中同一個標(biāo)簽, 并且給同一個標(biāo)簽設(shè)置相同的屬性時, 如何層疊就由優(yōu)先級來確定
優(yōu)先級之important：作用: 用于提升某個直接選中標(biāo)簽的選擇器中的某個屬性的優(yōu)先級的, 可以將被指定的屬性的優(yōu)先級提升為最高
優(yōu)先級之權(quán)重問題：作用: 當(dāng)多個選擇器混合在一起使用時, 我們可以通過計算權(quán)重來判斷誰的優(yōu)先級最高
div和span標(biāo)簽
1.什么是div?作用: 一般用于配合css完成網(wǎng)頁的基本布局
2.什么是span?作用: 一般用于配合css修改網(wǎng)頁中的一些局部信息
CSS元素的顯示模式在HTML中HTML將所有的標(biāo)簽分為兩類, 分別是容器級和文本級
在CSS中CSS也將所有的標(biāo)簽分為兩類, 分別是塊級元素和行內(nèi)元素
背景顏色：在CSS中有一個background-color:屬性, 就是專門用來設(shè)置標(biāo)簽的背景顏色的
背景圖片：在CSS中有一個叫做background-image: url();的屬性, 就是專門用于設(shè)置背景圖片的
背景平鋪屬性：在CSS中有一個background-repeat屬性, 就是專門用于控制背景圖片的平鋪方式的
取值:
repeat 默認(rèn), 在水平和垂直都需要平鋪
no-repeat 在水平和垂直都不需要平鋪
repeat-x 只在水平方向平鋪
repeat-y 只在垂直方向平鋪
背景定位屬性:在CSS中有一個叫做background-position:屬性, 就是專門用于控制背景圖片的位置
背景縮寫:background: 背景顏色 背景圖片 平鋪方式 關(guān)聯(lián)方式 定位方式
CSS精靈圖:
1.什么是CSS精靈圖
CSS精靈圖是一種圖像合成技術(shù)
2.CSS精靈圖作用
可以減少請求的次數(shù), 以及可以降低服務(wù)器處理壓力
3.如何使用CSS精靈圖
CSS的精靈圖需要配合背景圖片和背景定位來使用
邊框?qū)傩裕哼吙蚓褪黔h(huán)繞在標(biāo)簽寬度和高度周圍的線條
邊框?qū)傩缘母袷剑?/p>
連寫(同時設(shè)置四條邊的邊框)
border: 邊框的寬度 邊框的樣式 邊框的顏色;
非連寫
border-width: 上 右 下 左;
border-style: 上 右 下 左;
border-color: 上 右 下 左;
非連寫(方向+要素)
border-left-width: 20px;
border-left-style: double;
border-left-color: pink;
內(nèi)邊距屬性：邊框和內(nèi)容之間的距離就是內(nèi)邊距
格式：
1非連寫
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
2連寫
padding: 上 右 下 左;
外邊距屬性：標(biāo)簽和標(biāo)簽之間的距離就是外邊距
格式
1.非連寫
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;
2.連寫
margin: 上 右 下 左;
CSS盒子模型：CSS盒子模型僅僅是一個形象的比喻, HTML中所有的標(biāo)簽都是盒子
盒子模型寬度和高度
盒子box-sizing屬性：CSS3中新增了一個box-sizing屬性, 這個屬性可以保證我們給盒子新增padding和border之后, 盒子元素的寬度和高度不變
盒子居中和內(nèi)容居中：margin:0 auto;作用：讓盒子自己水平居中
清空默認(rèn)邊距：在企業(yè)開發(fā)中為了更好的控制盒子的寬高和計算盒子的寬高等等, 所以在企業(yè)開發(fā)中, 編寫代碼之前第一件事情就是清空默認(rèn)的邊距
企業(yè)開發(fā)中可以從這個網(wǎng)址中拷貝
http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css
在CSS中所有的行都有自己的行高
浮動元素的脫標(biāo)：脫離標(biāo)準(zhǔn)流當(dāng)某一個元素浮動之后, 那么這個元素看上去就像被從標(biāo)準(zhǔn)流中刪除了一樣, 這個就是浮動元素的脫標(biāo)
浮動元素脫標(biāo)之后會有什么影響?
如果前面一個元素浮動了, 而后面一個元素沒有浮動 , 那么這個時候前面一個元就會蓋住后面一個元素
浮動元素排序規(guī)則：
1.1相同方向上的浮動元素, 先浮動的元素會顯示在前面, 后浮動的元素會顯示在后面
1.2不同方向上的浮動元素, 左浮動會找左浮動, 右浮動會找右浮動
1.3浮動元素浮動之后的位置, 由浮動元素浮動之前在標(biāo)準(zhǔn)流中的位置來確定
浮動元素高度問題：
1.在標(biāo)準(zhǔn)流中內(nèi)容的高度可以撐起父元素的高度
2.在浮動流中浮動的元素是不可以撐起父元素的高度的
清除浮動方式：
清除浮動的第一種方式：給前面一個父元素設(shè)置高度
清除浮動的第二種方式：給后面的盒子添加clear屬性：clear屬性取值:
清除浮動的第五種方式：overflow: hidden;作用
1.1可以將超出標(biāo)簽范圍的內(nèi)容裁剪掉
1.2清除浮動
1.3可以通過overflow: hidden;讓里面的盒子設(shè)置margin-top之后, 外面的盒子不被頂下來
內(nèi)墻法：
1.在第一個盒子中所有子元素最后添加一個額外的塊級元素
2.給這個額外添加的塊級元素設(shè)置clear: both;屬性
偽元素選擇器：偽元素選擇器作用就是給指定標(biāo)簽的內(nèi)容前面添加一個子元素或者給指定標(biāo)簽的內(nèi)容后面添加一個子元素
定位流：相對定位就是相對于自己以前在標(biāo)準(zhǔn)流中的位置來移動
1.定位流分類、1.1相對定位、1.2絕對定位、1.3固定定位、1.4靜態(tài)定位
定位流-絕對定位：絕對定位就是相對于body來定位
絕對定位-參考點默認(rèn)情況下所有的絕對定位的元素, 無論有沒有祖先元素, 都會以body作為參考點
絕對定位-子絕父相：子元素用絕對定位, 父元素用相對定位
定位流-固定定位:固定定位和前面學(xué)習(xí)的背景關(guān)聯(lián)方式很像, 背景定位可以讓背景圖片不隨著滾動條的滾動而滾動, 而固定定位可以讓某個盒子不隨著滾動條的滾動而滾動
定位流-z-index屬性:默認(rèn)情況下所有的元素都有一個默認(rèn)的z-index屬性, 取值是0.z-index屬性的作用是專門用于控制定位流元素的覆蓋關(guān)系的
