css文字編輯

weixin_34185560發表於2018-09-09
CSS

長度單位

1.畫素px：畫素是我們在網頁中使用得最多的一個單位，一個畫素就相當於螢幕中的一個小點，我們的螢幕實際上就是由這些畫素點構成的，但是這些畫素點是不能直接看見的，不同顯示器一個畫素的大小也不相同。顯示效果越好、越清晰，畫素就越小，反之畫素越大。

  1. 百分比%： 也可以將單位設定為一個百分比的形式，這樣瀏覽器將會根據其父元素的樣式來計算該值，使用百分比的好處是，當父元素的屬性值發生變化時，子元素也會按照比例發生改變， 在我們建立一個自適應的頁面時，經常使用百分比作為單位。
  2. em：em和百分比類似，它是相對於當前元素的字型大小來計算的，1em = 1font-size，使用em時，當字型大小發生改變時，em也會隨之改變， 當設定字型相關的樣式時，經常會使用em。

顏色單位：

  1. 在CSS可以直接使用顏色的單詞來表示不同的顏色
  • 紅色：red
  • 藍色：blue
  • 綠色：green
  1. 使用RGB值來表示不同的顏色：通過Red Green Blue三元色，通過這三種顏色的不同的濃度，來表示出不同的顏色
    ·* rgb(紅色的濃度,綠色的濃度,藍色的濃度): 顏色的濃度需要一個0-255之間的值255表示最大，0表示沒有。

  • 濃度也可以採用一個百分數來設定，需要一個0% - 100%之間的數字，使用百分數最終也會轉換為0-255之間的數（0%表示0，100%表示255）

  • 使用十六進位制的rgb值來表示顏色，原理和上邊RGB原理一樣，只不過使用十六進位制數來代替，使用三組兩位的十六進位制陣列來表示一個顏色，每組表示一個顏色

第一組表示紅色的濃度，範圍00-ff
第二組表示綠色的濃度，範圍00-ff
第三組表示藍色的濃度，範圍00-ff
00表示沒有，相當於rgb中的0；ff表示最大，相當於rgb中255
語法：#紅色綠色藍色
紅色：#ff0000,像這種兩位兩位重複的顏色，可以簡寫。比如：#ff0000 可以寫成 #f00， #aabbcc可以寫成：#abc

.box1{
background-color: rgb(161,187,215);
 background-color: rgb(100%,50%,50%); 
 background-color: #0000ff; 
background-color: #00f;
background-color: #084098;
} 
<div class="box1"></div>

字型

字型樣式

1. 字型顏色
color: red;

2.字型大小，瀏覽器中一般預設的文字大小都是16px，font-size設定的並不是文字本身的大小，在頁面中，每個文字都是處在一個看不見的框中的，我們設定的font-size實際上是設定格的高度，並不是字型的大小，一般情況下文字都要比這個格要小一些，也有時會比格大，根據字型的不同，顯示效果也不同。
font-size: 30px;

3.字型：當採用某種字型時，如果瀏覽器支援則使用該字型，如果字型不支援，則使用預設字型，該樣式可以同時指定多個字型，多個字型之間使用“,”分開，當採用多個字型時，瀏覽器會優先使用前邊的字型，如果前邊沒有，再嘗試下一個。
font-family: arial, 微軟雅黑;

4.注意：瀏覽器使用的字型預設就是計算機中的字型，如果計算機中有，則使用，如果沒有就不用，在開發中，如果字型太奇怪，用的人太少了，儘量不要使用，有可能使用者的電腦沒有，就不能達到想要的效果。

字型分類

在網頁中將字型分成5大類：
        serif（襯線字型）
        sans-serif（非襯線字型）
        monospace （等寬字型）
        cursive （草書字型）
        fantasy （虛幻字型）
可以將字型設定為這些大的分類，瀏覽器會自動選擇指定的字型，並應用樣式，一般會將字型的大分類，指定為font-family中的最後一個字型。
<p style="font-size: 50px; font-family: serif;">襯線字型：我是一段文字，ABCDEFGabcdefg</p>
    <p style="font-size: 50px; font-family: sans-serif;">非襯線字型：我是一段文字，ABCDEFGabcdefg</p>
    <p style="font-size: 50px; font-family: monospace;">等寬字型：我是一段文字，IHABCDEFGabcdefg</p>
    <p style="font-size: 50px; font-family: cursive;">草書字型：我是一段文字，ABCDEFGabcdefg</p>
    <p style="font-size: 50px; font-family: fantasy;">虛幻字型：我是一段文字，ABCDEFGabcdefg</p>

字型的其他樣式

1. font-style可以用來設定文字的斜體
- 可選值：
        normal 預設值，文字正常顯示
        italic 文字會以斜體顯示
        oblique 文字會以傾斜的效果顯示
- 大部分瀏覽器都不會對傾斜和斜體做區分，也就是說我們設定italic和oblique效果是一樣的， 一般我們只會使用italic

2. font-weight可以用來設定文字的加粗效果
- 可選值：
                normal 預設值，文字正常顯示
        bold 文字加粗顯示，該樣式也可以指定100-900之間的9個值，但是由於使用者的計算機往往沒有這麼多級別的字型，所以200有可能比100粗，但也有可能是一樣的。
font-weight: bold;

3.  font-variant可以用來設定小型大寫字母
- 可選值：
        normal 預設值，文字正常顯示
        small-caps 文字以小型大寫字母顯示小型大寫字母：將所有的字母都以大寫形式顯示，但是小寫字母的小型大寫，要比大寫字母小一些。
font-variant: small-caps;

4. ，使用font設定字型樣式時，斜體 加粗 小大字母，沒有順序要求，甚至可寫可不寫，如果不寫則使用預設值。但是要求文字的大小和字型必須寫，而且字型必須是最後一個樣式，大小必須是倒數第二個樣式。實際上使用簡寫屬性也會有一個比較好的效能。不同的值之間使用空格隔開。
font: bold italic small-caps 60px "微軟雅黑";

行間距

  • 在CSS中並沒有直接提供設定行間距的方式，我們只能通過設定行高來間接的設定，行高越大行間距越大，使用line-height來設定行高。行高類似於我們上學用的單線本，單線本是一行一行的，線與線之間的距離就是行高。網頁中的文字實際上也是寫在一個看不見的線中的，而文字會預設在行高中垂直居中顯示。
    行間距 = 行高 - 字型大小
通過設定line-height可以間接的設定行高
可以接收的值：
            1.直接接收一個大小
            2.可以指定一個百分數，則會相對於字型去計算行高
            3.可以直接傳一個數值，則行高會設定字型大小相應的倍數
                        line-height: 200px;
            font-size: 20px;
.box{
    width: 200px;
    height: 200px;
    background-color: #bfa;
對於單行文字來說，可以將行高設定為和父元素的高度一致，這樣可以是單行文字在父元素中垂直居中
    line-height: 200px;
        }
}
在字型大小後可以新增/行高，來指定行高，該值是可選的，如果不指定則會使用預設值:
font: 30px "微軟雅黑";

文字樣式

  • text-transform可以用來設定文字的大小寫

可選值：

none 預設值，該怎麼顯示就怎麼顯示，不做任何處理
capitalize 單詞的首字母大寫，通過空格來識別單詞
uppercase 所有的字母都大寫
lowercase 所有的字母都小寫
例：text-transform: lowercase;

  • text-decoration可以用來設定文字的修飾

可選值：

none：預設值，不新增任何修飾，正常顯示
underline 為文字新增下劃線
overline 為文字新增上劃線
line-through 為文字新增刪除線
例：text-decoration: line-through;

  • 超連結會預設新增下劃線，也就是超連結的text-decoration的預設值是underline，如果需要去除超連結的下劃線則需要將該樣式設定為none
    例：text-decoration: none;

  • letter-spacing可以指定字元間距

letter-spacing: 10px;

  • word-spacing可以設定單詞之間的距離，實際上就是設定詞與詞之間空格的大小*/

word-spacing: 100px;

  • text-align用於設定文字的對齊方式

可選值：

left 預設值，文字靠左對齊
right 文字靠右對齊
center 文字居中對齊
justify 兩端對齊( 通過調整文字之間的空格的大小，來達到一個兩端對齊的目的。)
text-align: justify;

  • text-indent用來設定首行縮排，這個值一般都會使用em作為單位。當給它指定一個正值時，會自動向右側縮排指定的畫素，為它指定一個負值，則會向左移動指定的畫素。通過這種方式可以將一些不想顯示的文字隱藏起來。
    text-indent: -99999px;

相關文章