1. 程式人生 > >09-CSS基礎-CSS常見屬性

09-CSS基礎-CSS常見屬性

09-CSS基礎-CSS常見屬性

 


CSS常見屬性CSS一般是用來描述標籤名稱和屬性名稱,屬性名稱就是改變樣式,標籤名稱就是以後要學習的選擇器)

https://upload-images.jianshu.io/upload_images/647982-818da2e694534f3b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/892

文字屬性

font-style

  • 作用: 規定文字樣式
  • 格式: font-style: italic;
  • 取值:
  • normal 正常的, 預設就是正常的
  • italic : 傾斜的
  • 快捷鍵:
  • fs font-style: italic;
  • fsn font-style: normal;

font-weight

  • 作用: 規定文字粗細
  • 格式
    : font-weight: bold;
  • 取值:
  • 單詞取值:
  • bold 加粗
  • bolder 比加粗還要粗
  • lighter 細線, 預設就是細線
  • 數字取值:
  • 100-900之間整百的數字
  • 快捷鍵
  • fw font-weight:;
  • fwb font-weight: bold;
  • fwbr font-weight: bolder;

font-size

  • 作用: 規定文字大小
  • 格式: font-size: 30px;
  • 取值: px(畫素 pixel)
  • 快捷鍵
  • fz font-size:;
  • fz30 font-size: 30px;

font-family

  • 作用: 規定文字字型
  • 格式: font-family:"楷體";
  • 取值: 各種字型名稱
  • 快捷鍵:
  • ff font-family:;
  • 注意點:
  • 如果取值是中文, 需要用雙引號或者單引號括起來
  • 設定的字型必須是使用者電腦裡面已經安裝的字型

字型屬性補充

  • 如果設定的字型不存在, 那麼系統會使用預設的字型來顯示
  • 預設一般使用宋體
  • 如果設定的字型不存在, 而我們又不想用預設的字型來顯示怎麼辦?
  • 可以給字型設定備選方案
  • 格式:font-family:"字型1", "備選方案1", ...;
  • 如果想給中文和英文分別單獨設定字型, 怎麼辦?
  • 但凡是中文字型, 裡面都包含了英文
  • 但凡是英文字型, 裡面都沒有包含中文
  • 也就是說中文字型可以處理英文, 而英文字型不能處理中文
  • 注意點: 如果想給介面中的英文單獨設定字型, 那麼英文的字型必須寫在中文的前面

  • 補充在企業開發中最常見的字型有以下幾個
  • 中文: 宋體/黑體/微軟雅黑
  • 英文: "Times New Roman"/Arial
  • 還需要知道一點, 就是並不是名稱是英文就一定是英文字型,因為中文字型其實都有自己的英文名稱, 所以是不是中文字型主要看能不能處理中文
  • 宋體 SimSun
  • 黑體 SimHei
  • 微軟雅黑 Microsoft YaHei

文字屬性縮寫

  • 縮寫格式:

font: style weight size family;

  • 例如:

font:italic bold 10px "楷體";

  • 注意點:
  • 在這種縮寫格式中有的屬性值可以省略
  • sytle可以省略
  • weight可以省略
  • 在這種縮寫格式中styleweight的位置可以交換
  • 在這種縮寫格式中有的屬性值是不可以省略的
  • size不能省略
  • family不能省略
  • sizefamily的位置是不能順便亂放的, size一定要寫在family的前面, 而且sizefamily必須寫在所有屬性的最後

文字屬性

text-decoration

  • 作用: 給文字新增裝飾
  • 格式: text-decoration: underline;
  • 取值:
  • underline 下劃線
  • line-through 刪除線
  • overline 上劃線
  • none 什麼都沒有, 最常見的用途就是用於去掉超連結的下劃線
  • 快捷鍵:
  • td text-decoration: none;
  • tdu text-decoration: underline;
  • tdl text-decoration: line-through;
  • tdo text-decoration: overline;

text-align

  • 作用: 設定文字水平對齊方式
  • 格式: text-align: center;
  • 取值:
  • left
  • right
  • center
  • 快捷鍵:
  • ta text-align: left;
  • tar text-align: right;
  • tac text-align: center;

text-indent

  • 作用: 設定文字縮排
  • 格式: text-indent: 2em;
  • 取值: 2em, 其中em是單位, 一個em代表縮排一個文字的寬度
  • 快捷鍵:
  • ti text-indent:;
  • ti2e text-indent: 2em;

顏色屬性

  • CSS中如何通過color屬性來修改文字顏色
  • 格式: color: ;
  • 取值:
  • 英文單詞
  • 一般情況下常見的顏色都有對應的英文單詞, 但是英文單詞能夠表達的顏色是有限制的, 也就是說不是所有的顏色都能夠通過英文單詞來表達
  • rgb
  • rgb其實就是三原色, 其中r(red 紅色) g(green 綠色) b(blue 藍色)

格式: rgb(0,0,0),可以隨意協調三顏色的亮度來控制顏色。比如灰色: rgb(200,200,200);是代表灰色。值越大顏色越淺。

  •  
  • 第一個數字就是用來設定三原色的光源元件紅色顯示的亮度
  • 第二個數字就是用來設定三原色的光源元件綠色顯示的亮度
  • 第三個數字就是用來設定三原色的光源元件藍色顯示的亮度
  • 這其中的每一個數字它的取值是0-255之前, 0代表不發光, 255代表發光, 值越大就越亮

紅色: rgb(255,0,0);

綠色: rgb(0,255,0);

藍色: rgb(0,0,255);

黑色: rgb(0,0,0);

白色: rgb(255,255,255);

灰色: rgb(200,200,200);

只要讓紅色/綠色/藍色的值都一樣就是灰色

  •  
  • rgba
  • rgba中的rgb和前面講解的一樣, 只不過多了一個a.
  • a代表透明度, 取值是0-1, 取值越小就越透明
  • 例如:

color: rgba(255,0,0,0.2);

  •  
  • 十六進位制
  • 通過十六進位制來表示顏色其實本質就是RGB
  • 十六進位制中是通過每兩位表示一個顏色
  • 例如: #FFEE00 FF表示R EE表示G 00表示B
  • 什麼是十六進位制?
  • 十六進位制和十進位制一樣都是一種計數的方式
  • 在十進位制中取值範圍0-9, 逢十進一
  • 在十六進位制中取值範圍0-F, 逢十六進一

十進位制   0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

十六進位制 0 1 2 3 4 5 6 7 8 9  a  b  c  d  e  f

  •  
  • 十六進位制和十進位制轉換的公式
  • 用十六進位制的第一位*16 + 十六進位制的第二位 = 十進位制
  • FF就是255,00就是0

15 == 1*16 + 5 = 21

12 == 1*16 + 2 = 18

FF == F*16 + F == 15*16 + 15 == 240 + 15 = 255

00 == 0*16 + 0 = 0

  •  
  • 1.5十六進位制縮寫
  • CSS中只要十六進位制的顏色每兩位的值都是一樣的, 那麼就可以簡寫為一位
  • 例如: #FFEE00 == #FE0
  • 注意點:
  • 1.如果當前顏色對應的兩位數字不一樣, 那麼就不能簡寫
  • #123456;
  • 2.如果兩位相同的數字不是屬於同一個顏色的, 也不能簡寫
  • #122334