css3系列 2.css中常見的樣式屬性和值 繼續上一篇文章的繼續瞭解css的基礎知識，關註我微信公眾號：全棧學習筆記 css中常見的樣式屬性和值 1. 字體與顏色 1. 背景屬性 2. 文本屬性 1. 邊框屬性 1. 內外邊距 1. 滑鼠游標屬性 1. 列表樣式 1. 定位屬性 1. 浮動和清除浮 ...
css3系列-2.css中常見的樣式屬性和值
繼續上一篇文章的繼續瞭解css的基礎知識，關註我微信公眾號：全棧學習筆記
css中常見的樣式屬性和值
- 字體與顏色
- 背景屬性
- 文本屬性
- 邊框屬性
- 內外邊距
- 滑鼠游標屬性
- 列表樣式
- 定位屬性
- 浮動和清除浮動
- 滾動條
- 樣式顯示和隱藏
字體與顏色
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;/*背景圖片是否允許重覆no-repeat repeat*/
background-attachment:fixed;/*規定背景圖像是否固定或者隨著頁面的其餘部分滾動*/
background-origin:content-box;/*規定背景圖片的定位區域。*/
/*background-position:50% 50%;*/
/*background-position:800px 300px;*/
background-position:right center;/*規定背景圖像的位置*/
background: inherit;/*規定應該從父元素繼承 background 屬性的設置。*/
文本字體屬性
.text{
color:rebeccapurple;/*字體顏色*/
direction: ltr;/*字體方向從右向左*/
/*rtl 從左向右*/
line-height: 5px;/*設置行高*/
letter-spacing:2px;/*設置字元間的間距，註意是字元，或者是字母*/
text-align:center;/*設置文本的對齊方式*/
text-decoration:overline;/*字體的修飾，如下劃線underline，上劃線overline，
刪除線line-through，也可以設置為none，無修飾*/
text-indent:2em;/*首行縮進2個字，還有其他px的單位，%也可以*/
text-shadow: rosybrown;/*文本陰影*/
text-transform: lowercase;/*屬性控制文本的大小寫 */
/*capitalize 文本中的每個單詞以大寫字母開頭。*/
/*uppercase 定義僅有大寫字母。*/
/*inherit 規定應該從父元素繼承 text-transform 屬性的值。*/
white-space: nowrap;/*屬性設置如何處理元素內的空白 */
/*nowrap 文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標簽為止。*/
/*pre 空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標簽。*/
/*pre-wrap 保留空白符序列，但是正常地進行換行。*/
word-spacing:2px;/*屬性增加或減少單詞間的空白,註意這是單詞*/
}
如果你已經看到了這裡，那你應該也能繼續往下麵看，碼字不易，點個關註吧。我的微信公眾號：全棧學習筆記
邊框屬性
邊框屬性比較重要
.border{
border: 2px solid red;/*設置邊框樣式 寬度為2px 可見 紅色 也可以分開寫*/
border-width: 2px;
border-color: red;
border-style: solid;/*分開寫的border屬性*/
/*也可以這樣設置*/
border-style:dotted solid double dashed;
/*上邊框是點狀 右邊框是實線 下邊框是雙線 左邊框是虛線*/
/*
none 無邊框。
hidden 與 "none" 相同。不過應用於表時除外，對於表，hidden 用於解決邊框衝突。
dotted 點狀邊框。
dashed 虛線。。
solid 實線。
double 雙線。
inherit 規定應該從父元素繼承邊框樣式。
*/
border-radius: 5px;/*設置邊框弧的大小，值越大，弧度越大*/
/*也可以對border的某一個邊進行設置屬性*/
border-top: 2px solid red;
}
看到這裡你的心情可能是這樣的
但是不要擔心，如果你覺得很難懂的話，可以私聊我，我給你講懂！
內外邊距
內邊距
/*內邊距*/
.padding{
padding: 2px;/*盒子模型的外邊距，上左下右 各向內縮進2px*/
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;
/*以上四句等於下麵一句 上右下左的順序 值是不一定相等的*/
padding: 2px 2px 2px 2px;
}
外邊距
/*外邊距*/
.margin{
margin: 2px;/*盒子模型的外邊距，和padding的區別就是，margin是向外擴展的，padding是向內擴展的*/
margin-top: 2px;
margin-right: 3px;
margin-bottom: 4px;
margin-left: 6px;
/*上面四句和下麵一句也是等效的*/
margin:2px 3px 4px 6px;
}
如果你是新手的話可能對盒子模型，外邊距內邊距都不熟悉，這一部分內容在學的時候相對來說比較吃力！如果有問題可以私聊或者留言評論給我，我幫你解決哦！
滑鼠游標屬性
這一部分用的比較少，瞭解一點就行
/*滑鼠樣式屬性*/
.cursor{
cursor: pointer;/*游標呈現為指示鏈接的指針（一隻手）*/
/*help 此游標指示可用的幫助（通常是一個問號或一個氣球）
text 此游標指示文本。
wait 此游標指示程式正忙（通常是一隻表或沙漏
default 預設游標（通常是一個箭頭）
auto 預設。瀏覽器設置的游標。
*/
}
列表樣式
/*列表屬性*/
.list{
list-style: circle;
list-style:square inside url('/test/1.png');
list-style-type: disc;/*設置列表項標記的類型*/
/*disc 預設。標記是實心圓。
circle 標記是空心圓。
square 標記是實心方塊。
decimal 標記是數字。*/
list-style-image: url();/*屬性使用圖像來替換列表項的標記*/
list-style-position: inside;/*屬性設置在何處放置列表項標記*/
}
定位屬性
定位屬性一般來說用得比較多，希望你能看懂下麵的代碼
相對定位
.position{
position: relative;
left: 2px;
top: 2px;
}
代碼中的意思是相對定位，相對定位就是說，相對於我本身元素的位置，再對這個元素進行移動。所以以上代碼的意思就是相對於這個元素原來所在的位置，再向右移動2px，向下移動2px，要註意這一點，代碼中寫的left，top 都是正值，也就是向相反的方向移動。而不思向左移動2px,向上移動2px.
絕對定位
.positionA{
position: absolute;
left: 20px;
right: 20px;
}
以上為絕對定位，絕對定位是相對於整個頁面來說的，不管元素本身所在的位置。頁面上的最左上角代表(0,0)坐標，絕對定位的起始位置也是這裡。所以上面這段代碼實現的就是距離左邊20px,距離上邊20px，這樣理解可能比上面我說的以相反的方向移動要簡單很多吧。
浮動和清除浮動
css裡面浮動用的還是挺多的，要好好學哦！不會的關註我的公眾號，我會教你的哦！公眾號:全棧學習筆記
碼字太難了！給個關註吧！
說實話，浮動這一塊講著就很麻煩了，這裡只介紹一下，後面出一期上面說的盒子模型的時候專門講一下浮動，不然講著可能會有一點抽象，你也覺得不好懂！下期我儘量講的詳細一點。
圖文並茂，哈哈，這一期基本上都是代碼文字敘述。作為一個知識的存儲。往下麵看！
浮動
/*浮動*/
.float{
float: right;
}
這句話的意思是將這個塊（暫時稱為一個塊吧）浮動到右邊，或是移動。浮動涉及的東西挺多的，有時候能用浮動，有時候用浮動比較麻煩！
清除浮動
1.第一種方式
/*清除浮動*/
.float{
float: right;
clear: both;
}
2.第二種方式
父容器使用overflow：auto。
3.第三種方式
父容器使用偽類after和zoom。
偽類選擇器還沒講過，爭取這兩天寫一份詳細的選擇器文章。
滾動條
滾動條設置
/*滾動條*/
.overflow{
overflow:scroll;/*屬性規定當內容溢出元素框時發生的事情。*/
/*
visible 預設值。內容不會被修剪，內容溢出容器。
hidden 內容會被修剪，並且其餘內容是不可見的,不會出現滾動條。
scroll 內容會被修剪，但是瀏覽器會顯示滾動條。
auto 如果內容被修剪，則瀏覽器會顯示滾動條。
inherit 規定應該從父元素繼承 overflow 屬性的值。
*/
overflow-y: hidden;/*設置豎直的滾動條*/
overflow-x: scroll;/*設置橫向的滾動條*/
}
樣式顯示和隱藏
樣式隱藏分為占位隱藏以及非占位隱藏
非占位隱藏
.display-z{
/*隱藏*/
display: none;
/*以塊級元素顯示，寬高不可忽略*/
display: block;
/*此元素會被顯示為內聯元素，元素前後沒有換行符*/
display: inline;
}
所謂非占位隱藏就是說，使用這個屬性後，這個元素是不會被渲染，也就不會被看到。
占位隱藏
/*占位隱藏*/
.visibility{
/*隱藏*/
visibility: hidden;
/*顯示*/
visibility: visible;
}
而占位隱藏的意思就是，雖然這個元素我們看不到，但是他其實已經被渲染出來了，只是被隱藏了，就像科幻片裡面的隱身一樣。
好了，這期的教程就到這裡了！裡面有一些重要很實用的東西沒有具體的說，等css基礎教程更新完成，就會出一些實用教程！希望大家支持哦！
