關于顏色的小知識
顏色是通過對紅、綠和藍光的組合來顯示的。早期的電腦只支持最多 256 種顏色時，但是現在大多數電腦都能顯示數百萬種顏色。
-
顏色名稱
- 優點：方便快捷而且特定顏色比較準確
- 缺點：表示顏色數量有限，英文不好的不容易記住，不支持透明度的表示
-
十六進制方式
- 優點：表示顏色種類多，使用較方便
- 缺點：不支持透明顏色。
-
RGB方式 三原色配色方式
- 優點：表示顏色種類多，使用較方便
- 缺點：不支持透明顏色。
- 每個參數 (red、green 以及 blue) 定義顏色的強度，可以是介于 0 與 255 之間的整數，或者是百分比值（從 0% 到 100%）。
CSS3新增的顏色表示方法
-
RGBA方式三原色配色方式
- 在RGB模式上新增了Alpha透明度。
rgba(255, 0, 0, 0.5) -
HSL模式
- 語法:HSL(H,S,L)，HSL分別表示色調，飽和度，亮度
- H:0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數值來指定顏色。取值為：0 - 360
- S:(飽和度)。取值為：0.0% - 100.0%
- L:(亮度)。取值為：0.0% - 100.0%
hsl(120, 50%, 50%) -
HSLA模式
- HSL模式上新增了Alpha透明度。
hsla(240, 50%, 50%, 0.5)
顏色值查詢方法：
- 百度查詢，很多網站有提供
- 下載相關手冊等需要時查表
- 運用繪圖工具中的拾色器
CSS中常用的字體屬性設置
-
font-size 規定文本的字體尺寸
-
通常使用px,百分比，em來設置字體的大小- em是css中的相對單位，是相對于當前對象內的字體尺寸，若沒有制定文字大小尺寸，則為瀏覽器默認字體大小
#div1{font-size: 50px} #div2{font-size: 50%} #div3{font-size: 5em}- xx-small、x-small、small、medium、large、x-large、xx-large把字體的尺寸設置為不同的尺寸，默認值：medium。
{font-size: xx-small}- smaller 把 font-size 設置為比父元素更小的尺寸。
- arger 把 font-size 設置為比父元素更大的尺寸。
-
-
font-variant:規定是否以小型大寫字母的字體顯示文本。
- normal 默認值。瀏覽器會顯示一個標準的字體。
- small-caps 瀏覽器會顯示小型大寫字母的字體。
-
font-style:規定文本的字體樣式。
- normal 默認值。瀏覽器會顯示一個標準的字體。
italic 瀏覽器會顯示一個斜體的字體樣式。- oblique 瀏覽器會顯示一個傾斜的字體樣式。暫時不作講解，了解即可
-
font-weight:規定字體的粗細。
- normal 默認值。定義標準的字符。
bold 定義粗體字符。- bolder 定義更粗的字符。lighter 定義更細的字符。
- 100-900;定義由粗到細的字符。400 等同于 normal，而 700 等同于 bold。
-
font-family:規定文本的字體系列。#div5{font:italic bold small-caps 60px 楷體;} -
font:在一個聲明中設置所有字體屬性。- 這個簡寫屬性用于一次設置元素字體的兩個或更多方面。
- 至少要指定字體大小和字體系列
- 可以按順序設置如下屬性：font-style/font-variant/font-weight/font-size/font-family
@font-face:嵌入字體注：字體的設置還有其他幾個很少的用到的屬性，比如font-size-adjust為元素規定 aspect 值；font-stretch 收縮或拉伸當前的字體系列。都很少用到或者多數瀏覽器不支持，
#div1{font-size: 5em}
#div2{font-variant: small-caps}
#div3{font-style: italic}
#div4{font-weight: bold}
#div5{font:italic bold small-caps 60px 楷體;}
#div6{font:italic small-caps 40px 宋體}
@font-face {
font-family: "abc";
src: url('./telefono.ttf');
}
p{font-family: abc;font-size: 50px}
CSS中常用的文本屬性設置
掌握
-
color 設置文本顏色
color: rgb(46, 172, 185); -
text-align 規定元素中的文本的水平對齊方式。
- left 默認值/right/center/justify兩端對齊
- CSS3中新增了start和end屬性值，在通常情況下，start相當于left，end相當于right
text-align: justify;
text-align: end; -
line-height 設置行高。
- normal/數字/百分比/px/em
line-height: 2em; -
text-indent 設置文本的首行縮進
- 常用單位像素/百分比/em
text-indent: 50px -
text-decoration 向文本添加修飾。
- none 默認值。顯示標準的文本。
- underline 定義文本下劃線。
- overline 定義文本上劃線。
- line-through 定義穿過文本下的一條線。
- blink 定義閃爍的文本。
- CSS3中還有一些新增加的屬性值但是目前瀏覽器多不支持，不再介紹
text-decoration: underline; -
letter-spacing 設置字符間距。
- 定義字符間的固定空間
- normal 默認。/像素：（允許使用負值）
letter-spacing: 20px; -
word-spacing 設置字/單詞間距。
- 增加或減少單詞間的空白
- normal 就等同于設置為 0。/如果指定為長度值，會調整字之間的通常間隔；（允許使用負值）。
word-spacing: 2em; -
text-transform 設置對象中的文本的大小寫
- none默認。標準的文本。/capitalize每個單詞以大寫字母開頭。/uppercase轉換為大寫字母。/lowercase轉換為小寫字母
text-transform: capitalize; -
text-shadow 向文本添加陰影。
text-shadow: 10px 10px 5px rgb(203, 130, 32), 15px 15px 5px rgb(80, 6, 187)(設置兩個陰影)
熟悉
-
white-space 設置元素中空白的處理方式。
- normal 默認。空白會被瀏覽器忽略
- pre 空白會被瀏覽器保留。其行為方式類似 HTML 中的pre標簽。
- nowrap 文本不會換行，文本會在在同一行上繼續，直到遇到br標簽為止。
- pre-wrap 保留空白符，但是正常地進行換行。
- pre-line 合并空白符，但是正常地進行換行。
white-space: pre-line; -
direction 設置文本方向
- ltr默認。文本方向從左到右。/rtl 文本方向從右到左。
direction: ltr; -
word-wrap 允許對長的不可分割的單詞進行分割并換行到下一行。
- normal默認值/break-word:在長單詞或 URL 地址進行換行。
word-wrap: break-word; -
word-break 規定非中日韓文本的換行規則。
- normal默認值/break-all：允許在單詞內換行。/keep-all只能在半角空格或連字符處換行。
word-break: break-all; text-fill-color 文本填充顏色，指定文字填充部分的顏色.目前多數瀏覽器不支持
-
text-stroke 文本邊框顏色，指定文字描邊部分的顏色。目前多數瀏覽器不支持
- text-stroke-width文字的描邊寬度
- text-stroke-color文字的描邊顏色
- 備注:使用該屬性需要使用瀏覽器私有前綴
-
text-overflow 設置是否使用一個省略標記（...）標示對象內文本的溢出
- clip： 默認值當對象內文本溢出時不顯示省略標記（...），而是將溢出的部分裁切掉。
- ellipsis：當對象內文本溢出時顯示省略標記（...）。
- 溫馨提示:該屬性需要和over-flow:hidden屬性、white-space:nowrap配合使用
了解
text-outline 規定文本的輪廓
text-justify 規定當 text-align 設置為 "justify" 時所使用的對齊方法。
text-align-last 設置如何對齊最后一行或緊挨著強制換行符之前的行。
text-emphasis 向元素的文本應用重點標記以及重點標記的前景色。
-
unicode-bidi 用于同一個頁面里存在從不同方向讀進的文本顯示。與direction屬性一起使用
- normal/embed/bidi-override
- 不常用，了解即可
direction: rtl;; unicode-bidi: bidi-override; hanging-punctuation 規定標點字符是否位于線框之外。
punctuation-trim 規定是否對標點字符進行修剪。
tab-size:設定一個tab在頁面中的顯示長度
text-wrap 規定文本的換行規則。注釋：目前主流瀏覽器都不支持 text-wrap 屬性。
