CSS

• 格式：
  <style type="text/css">
  標簽名稱{
  屬性名稱: 屬性對應的值;
  ...
  }
  </style>
• 作用：在前端開發中CSS只有一個作用, 就是用來修改樣式
• 通過CSS來修改樣式有什么好處：
  • 1.不用記憶哪些屬性屬于哪個標簽
  • 2.當需求變更時我們不需要修改大量的代碼就可以滿足需求
• 注意：
• style標簽必須寫在head標簽的開始標簽和結束標簽之間(也就是必須和title標簽是兄弟關系)
• style標簽中的type屬性其實可以不用寫, 默認就是type="text/css"
• 設置樣式時必須按照固定的格式來設置. key: value;其中:不能省略, 分號大多數情況下也不能省略

CSS常見屬性

文字屬性

• 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可以省略
• 在這種縮寫格式中style和weight的位置可以交換
• 在這種縮寫格式中有的屬性值是不可以省略的，size不能省略，family不能省略
• size和family的位置是不能隨便亂放的，size一定要寫在family的前面, 而且size和family必須寫在所有屬性的最后

文本屬性

• 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: right;
• 取值：
• 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)
  • 第一個數字就是用來設置三原色的光源元件紅色顯示的亮度
  • 第二個數字就是用來設置三原色的光源元件綠色顯示的亮度
  • 第三個數字就是用來設置三原色的光源元件藍色顯示的亮度
  • 這其中的每一個數字它的取值是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 + 十六進制的第二位 = 十進制
  • 例如：
    15 == 116 + 5 = 21
    12 == 116 + 2 = 18
    FF == F16 + F == 1516 + 15 == 240 + 15 = 255
    00 == 0*16 + 0 = 0

• 十六進制縮寫

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