CSS的一些常見樣式(一) 字體，文本，邊框，顏色，display，以及繼承和一些單位

一，邊框border：

• border有四個屬性基本值：分別對應一個盒子的四條邊，分別是上右下左，如圖：

一般能夠書寫爲以下：

• border還有三個其它經常使用屬性，分別是border-width（粗度），border-style（樣式），border-color（顏色），下面介紹他們的用法和經常使用值： 1.border-width：邊框粗度，一般使用Npx的固定單位來直接代表，例如：border-width:1px;

2. border-style：邊框樣式，設定邊框的樣子，經常使用的有三個值：solid（默認實線），dotted（點線），dashed（虛線）

3. border-color：邊框顏色，默認是黑色，其它經常使用的值還有：red，yellow等，此外還能夠用十六進制和rgb顏色表示方法來進行表示 4.縮寫，它們三個樣式與border的四個基本值能夠縮寫爲： border:1px dotted red;

• 圓角border-radius：邊框半徑，表示邊框的角的半徑，能夠構造圓角，以下圖就是一個圓角邊框：

border-radius有四個值，按照順序分別對應上圖的左上，右上，右下，左下，它們能夠寫爲： border-radius:30px 30px 30px 30px 也能夠簡寫爲： border-radius:30px

二，字體font

• 字體font有四個經常使用屬性，分別是font-size（大小），font-family（字體），font-weight（粗度），line-height（行高）
• font-size：字體大小，字體大小的單位有幾個，它們的寫法分別是：

1.px：font-size:12px; 2.em：font-size:1em; 3.rem：font-size:1rem; 4.百分比：font-size:200%; 5.vw：font-size:1vw;

• font-family：字體，字體是指字的形狀樣式，在CSS中，font-family有三種寫法（用微軟雅黑字體爲例）： 1.英文寫法： font-family: "Microsoft YaHei" 2.中文寫法： font-family: "微軟雅黑" 3.Unicode寫法： font-family: /5FAE/8F6F/96C5/9ED1 要記住下面幾點： 1.英文寫法中若是有空格以及採用中文寫法的話要加引號； 2.儘可能採用Unicode碼字體，由於若是直接寫中文字體的狀況下編碼方式和解碼方式有可能不匹配，從而致使亂碼； 3.字體的Unicode碼能夠在開發者工具的console裏用escape('字體中文')得到，以下圖： 可是要注意的是，裏面的%u要轉換爲/

• font-weight：字體粗度，經常使用值是bold，表示粗體，以下圖對比：

• line-height：行高，指的是行與行之間的空間，經常使用單位是px，em，rem，百分比。

• 瀏覽器默認字體和最小字體 1.一般來講，瀏覽器默認字體是16px，最小字體是12px，由於當字體小於12px時，人眼的認知功能就難以發揮做用 2.若是我想設置更小的字體呢？好比設置9px的字體，該怎麼辦？ 方法： 可用使用以下樣式：

效果：

三，文本text

• 文本text是指文本在盒模型中的格式表現形式，經常使用的有：text-align（對齊方式），text-indent（縮進），text-decoration（a連接顯示方式），word-spacing（設置單詞間距），letter-spacing（設置字符間距）， text-overflow（規定當文本溢出包含元素時發生的事情）

• text-align：對齊方式，經常使用的有四個值：left默認左對齊，right右對齊，center居中，justify兩邊對齊 1.前面三個對好比下圖：

2.justify兩邊對齊適用於多行文字，他會使該段文字的左右兩邊自動對齊，字間距有可能發生變化，以下圖；

• text-indent：首行縮進，經常使用單位是px，em，rem，百分比，用上圖文字延時以下：

• word-spacing與letter-spacing：一個是單詞或中文字間距，第二個是字符間距，對好比下圖：

• text-overflow：規定當文本溢出包含元素時發生的事情，例如當文本過長時，能夠設置溢出文本爲'...'

• 如何設置溢出文本爲'...' 以下圖文本：

設置不折行，且溢出文本爲‘...’

• 如何設置行內元素在塊級元素里居中 用 text-align，代碼以下：

四，display樣式（改變元素的級），行內元素和塊級元素詳見個人這篇文章

• display樣式有三個經常使用的值：inline（行內），block（塊級），inline-block（行內塊級）
• inline：設置元素爲行內元素
• block：設置元素爲塊級元素
• inline-block：設置元素爲行內塊級元素
• 關於display的其它值有：table，table-cell，table-row，list-item，none，inherit

五，隱藏和透明

• 透明（指的是元素不能被看見，可是位置依然被佔據） 1.opacity:0~1：透明度，做用於總體，用得比較少； 2.visibility:hidden：元素可見度，表示該元素透明，位置依然佔據； 3.background-color:rgba(0,0,0,0~1)：表示背景色的透明度，a的值爲0時徹底透明；
• 隱藏（指元素總體消失，而且不佔據位置） 1.display:none：表示設置該元素消失，不佔據位置也看不見；

六，顏色color的寫法

• 單詞：red，blue，yellow等；
• 十六進制：#000，#fff，#060606等；
• rgb形式：rgb(255,255,255)；
• rgba形式：rgba(0,0,0,0.5)，裏面的a表明的是透明度，範圍是0~1，數值越大越不透明；

七，單位

• px：像素，固定單位；
• em：相對單位，相對於父元素，例如1em就是相等於父元素的px大小；
• rem：相對單位，相對於根元素，例如1rem就是相等於根元素的px大小；
• vw：相對單位，相對於屏幕大小，1vw就是屏幕的1%大小；

八，css樣式的繼承

• 什麼是css樣式繼承 繼承就是子元素繼承了父元素的CSS樣式的屬性
• 經常使用的會被繼承的樣式有哪些？ 1.字體：family，size，weight，line-height 2.文本：letter-spacing，word-spacing，text-align, text-indent 3.列表：list-style-type 4.顏色：color，ps：a標籤不能繼承父元素的字體顏色，緣由是a標籤本身有默認字體顏色，會覆蓋掉繼承自父元素的字體顏色；
• 什麼屬性不能被繼承 1.display 2.float 3.padding和margin 4.背景相關，好比顏色圖片等