顏色">字體與顏色

font-family:微軟雅黑;/*字體名稱（類型）：微軟雅黑，黑體，楷體，宋體*/

font-size: 20px;/*字體大小*/

font-weight: 600;/*字體加粗*/

font-style: italic;/*字體樣式*/

背景屬性

background: #00FF00 url(bgimage.gif) no-repeat fixed top;/*這是融合在一起的寫法*/


background-color: red;/*背景顏色*/

background-image:url('圖片路徑');/*背景圖片*/

background-repeat:no-repeat;/*背景圖片是否允許重復(fù)no-repeat repeat*/

background-attachment:fixed;/*規(guī)定背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)*/

background-origin:content-box;/*規(guī)定背景圖片的定位區(qū)域。*/

/*background-position:50% 50%;*/

/*background-position:800px 300px;*/

background-position:right center;/*規(guī)定背景圖像的位置*/

background: inherit;/*規(guī)定應(yīng)該從父元素繼承 background 屬性的設(shè)置。*/

文本字體屬性

.text{
color:rebeccapurple;/*字體顏色*/

direction: ltr;/*字體方向從右向左*/
/*rtl 從左向右*/

line-height: 5px;/*設(shè)置行高*/

letter-spacing:2px;/*設(shè)置字符間的間距，注意是字符，或者是字母*/

text-align:center;/*設(shè)置文本的對(duì)齊方式*/

text-decoration:overline;/*字體的修飾，如下劃線underline，上劃線overline，
刪除線line-through，也可以設(shè)置為none，無修飾*/

text-indent:2em;/*首行縮進(jìn)2個(gè)字，還有其他px的單位，%也可以*/

text-shadow: rosybrown;/*文本陰影*/

text-transform: lowercase;/*屬性控制文本的大小寫 */
/*capitalize 文本中的每個(gè)單詞以大寫字母開頭。*/
/*uppercase定義僅有大寫字母。*/
/*inherit規(guī)定應(yīng)該從父元素繼承 text-transform 屬性的值。*/

white-space: nowrap;/*屬性設(shè)置如何處理元素內(nèi)的空白 */
/*nowrap文本不會(huì)換行，文本會(huì)在在同一行上繼續(xù)，直到遇到 <br> 標(biāo)簽為止。*/
/*pre空白會(huì)被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標(biāo)簽。*/
/*pre-wrap保留空白符序列，但是正常地進(jìn)行換行。*/

word-spacing:2px;/*屬性增加或減少單詞間的空白,注意這是單詞*/
}

如果你已經(jīng)看到了這里，那你應(yīng)該也能繼續(xù)往下面看，碼字不易，點(diǎn)個(gè)關(guān)注吧。我的微信公眾號(hào)：全棧學(xué)習(xí)筆記

看到這里你的心情可能是這樣的

但是不要擔(dān)心，如果你覺得很難懂的話，可以私聊我，我給你講懂！

內(nèi)外邊距

內(nèi)邊距

/*內(nèi)邊距*/
.padding{
padding: 2px;/*盒子模型的外邊距，上左下右 各向內(nèi)縮進(jìn)2px*/


padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;

/*以上四句等于下面一句  上右下左的順序 值是不一定相等的*/
padding: 2px 2px 2px 2px;

}

外邊距

/*外邊距*/
.margin{
margin: 2px;/*盒子模型的外邊距，和padding的區(qū)別就是，margin是向外擴(kuò)展的，padding是向內(nèi)擴(kuò)展的*/

margin-top: 2px;
margin-right: 3px;
margin-bottom: 4px;
margin-left: 6px;
/*上面四句和下面一句也是等效的*/
margin:2px 3px 4px 6px;
}

如果你是新手的話可能對(duì)盒子模型，外邊距內(nèi)邊距都不熟悉，這一部分內(nèi)容在學(xué)的時(shí)候相對(duì)來說比較吃力！如果有問題可以私聊或者留言評(píng)論給我，我?guī)湍憬鉀Q哦！

鼠標(biāo)光標(biāo)屬性

這一部分用的比較少，了解一點(diǎn)就行

/*鼠標(biāo)樣式屬性*/
.cursor{
cursor: pointer;/*光標(biāo)呈現(xiàn)為指示鏈接的指針（一只手）*/
/*help此光標(biāo)指示可用的幫助（通常是一個(gè)問號(hào)或一個(gè)氣球）
  text此光標(biāo)指示文本。
  wait此光標(biāo)指示程序正忙（通常是一只表或沙漏
  default默認(rèn)光標(biāo)（通常是一個(gè)箭頭）
  auto默認(rèn)。瀏覽器設(shè)置的光標(biāo)。
*/
}

列表樣式

/*列表屬性*/
.list{
list-style: circle;
list-style:square inside url('/test/1.png');
list-style-type: disc;/*設(shè)置列表項(xiàng)標(biāo)記的類型*/
/*disc默認(rèn)。標(biāo)記是實(shí)心圓。
circle標(biāo)記是空心圓。
square標(biāo)記是實(shí)心方塊。
decimal標(biāo)記是數(shù)字。*/
list-style-image: url();/*屬性使用圖像來替換列表項(xiàng)的標(biāo)記*/
list-style-position: inside;/*屬性設(shè)置在何處放置列表項(xiàng)標(biāo)記*/
}

定位屬性

定位屬性一般來說用得比較多，希望你能看懂下面的代碼

相對(duì)定位

.position{
position: relative;
left: 2px;
top: 2px;
}

代碼中的意思是相對(duì)定位，相對(duì)定位就是說，相對(duì)于我本身元素的位置，再對(duì)這個(gè)元素進(jìn)行移動(dòng)。所以以上代碼的意思就是相對(duì)于這個(gè)元素原來所在的位置，再向右移動(dòng)2px，向下移動(dòng)2px，要注意這一點(diǎn)，代碼中寫的left，top 都是正值，也就是向相反的方向移動(dòng)。而不思向左移動(dòng)2px,向上移動(dòng)2px.

絕對(duì)定位

.positionA{
position: absolute;
left: 20px;
right: 20px;
}

以上為絕對(duì)定位，絕對(duì)定位是相對(duì)于整個(gè)頁面來說的，不管元素本身所在的位置。頁面上的最左上角代表(0,0)坐標(biāo)，絕對(duì)定位的起始位置也是這里。所以上面這段代碼實(shí)現(xiàn)的就是距離左邊20px,距離上邊20px，這樣理解可能比上面我說的以相反的方向移動(dòng)要簡(jiǎn)單很多吧。

浮動(dòng)和清除浮動(dòng)

css里面浮動(dòng)用的還是挺多的，要好好學(xué)哦！不會(huì)的關(guān)注我的公眾號(hào)，我會(huì)教你的哦！公眾號(hào):全棧學(xué)習(xí)筆記
碼字太難了！給個(gè)關(guān)注吧！

說實(shí)話，浮動(dòng)這一塊講著就很麻煩了，這里只介紹一下，后面出一期上面說的盒子模型的時(shí)候?qū)ｉT講一下浮動(dòng)，不然講著可能會(huì)有一點(diǎn)抽象，你也覺得不好懂！下期我盡量講的詳細(xì)一點(diǎn)。
圖文并茂，哈哈，這一期基本上都是代碼文字?jǐn)⑹?。作為一個(gè)知識(shí)的存儲(chǔ)。往下面看！

浮動(dòng)

/*浮動(dòng)*/
.float{
float: right;
}

這句話的意思是將這個(gè)塊（暫時(shí)稱為一個(gè)塊吧）浮動(dòng)到右邊，或是移動(dòng)。浮動(dòng)涉及的東西挺多的，有時(shí)候能用浮動(dòng)，有時(shí)候用浮動(dòng)比較麻煩！

清除浮動(dòng)

1.第一種方式

/*清除浮動(dòng)*/
.float{
float: right;
clear: both;
}

2.第二種方式

父容器使用overflow：auto。

3.第三種方式

父容器使用偽類after和zoom。

偽類選擇器還沒講過，爭(zhēng)取這兩天寫一份詳細(xì)的選擇器文章。

滾動(dòng)條

滾動(dòng)條設(shè)置

/*滾動(dòng)條*/
.overflow{

overflow:scroll;/*屬性規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情。*/

  /*
  visible默認(rèn)值。內(nèi)容不會(huì)被修剪，內(nèi)容溢出容器。
hidden內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見的,不會(huì)出現(xiàn)滾動(dòng)條。
scroll內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條。
auto如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條。
inherit規(guī)定應(yīng)該從父元素繼承 overflow 屬性的值。
  */
overflow-y: hidden;/*設(shè)置豎直的滾動(dòng)條*/
overflow-x: scroll;/*設(shè)置橫向的滾動(dòng)條*/
}

樣式顯示和隱藏

樣式隱藏分為占位隱藏以及非占位隱藏

非占位隱藏

.display-z{
/*隱藏*/
display: none;
/*以塊級(jí)元素顯示，寬高不可忽略*/
display: block;
/*此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符*/
display: inline; 

}

所謂非占位隱藏就是說，使用這個(gè)屬性后，這個(gè)元素是不會(huì)被渲染，也就不會(huì)被看到。

占位隱藏

/*占位隱藏*/
.visibility{
/*隱藏*/
visibility: hidden;
/*顯示*/
visibility: visible;
}

而占位隱藏的意思就是，雖然這個(gè)元素我們看不到，但是他其實(shí)已經(jīng)被渲染出來了，只是被隱藏了，就像科幻片里面的隱身一樣。

好了，這期的教程就到這里了！里面有一些重要很實(shí)用的東西沒有具體的說，等css基礎(chǔ)教程更新完成，就會(huì)出一些實(shí)用教程！希望大家支持哦！