CSS基礎(chǔ)

CSS

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

CSS常見屬性

文字屬性

  • font-style
  • 作用：規(guī)定文字樣式
  • 格式：font-style: italic;
  • 取值：
  • normal ： 正常的， 默認(rèn)就是正常的
  • italic : 傾斜的
  • 快捷鍵：
  • fs ： font-style: italic;
  • fsn ： font-style: normal;
  • font-weight
  • 作用： 規(guī)定文字粗細(xì)
  • 格式: font-weight: bold;
  • 取值：
  • 單詞取值:
    • bold 加粗
    • bolder 比加粗還要粗
    • lighter 細(xì)線， 默認(rèn)就是細(xì)線
  • 數(shù)字取值：
    • 100-900之間整百的數(shù)字
  • 快捷鍵：
  • fw ： font-weight:;
  • fwb ：font-weight: bold;
  • fwbr ： font-weight: bolder;
  • font-size
  • 作用：規(guī)定文字大小
  • 格式: font-size: 30px;
  • 取值: px(像素 pixel)
  • 快捷鍵：
  • fz ： font-size:;
  • fz30 ： font-size: 30px;
  • font-family
  • 作用: 規(guī)定文字字體
  • 格式: font-family:"楷體";
  • 取值: 各種字體名稱
  • 快捷鍵:
  • ff ： font-family:;
  • 注意：
  • 如果取值是中文， 需要用雙引號(hào)或者單引號(hào)括起來
  • 設(shè)置的字體必須是用戶電腦里面已經(jīng)安裝的字體

文字屬性補(bǔ)充

  • 如果設(shè)置的字體不存在, 那么系統(tǒng)會(huì)使用默認(rèn)的字體來顯示
  • 默認(rèn)一般使用宋體
  • 如果設(shè)置的字體不存在, 而我們又不想用默認(rèn)的字體來顯示怎么辦?
  • 可以給字體設(shè)置備選方案
  • 格式:font-family:"字體1", "備選方案1", ...;
  • 如果想給中文和英文分別單獨(dú)設(shè)置字體, 怎么辦?
  • 但凡是中文字體, 里面都包含了英文
  • 但凡是英文字體, 里面都沒有包含中文
  • 也就是說中文字體可以處理英文, 而英文字體不能處理中文
  • 注意：如果想給界面中的英文單獨(dú)設(shè)置字體, 那么英文的字體必須寫在中文的前面
  • 在企業(yè)開發(fā)中最常見的字體有以下幾個(gè)：
  • 中文: 宋體/黑體/微軟雅黑
  • 英文: "Times New Roman"/Arial
  • 并不是名稱是英文就一定是英文字體,因?yàn)橹形淖煮w其實(shí)都有自己的英文名稱, 所以是不是中文字體主要看能不能處理中文
  • 宋體 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
  • 作用: 設(shè)置文本水平對(duì)齊方式
  • 格式: text-align: right;
  • 取值：
  • left 左
  • right 右
  • center 中
  • 快捷鍵:
  • ta ： text-align: left;
  • tar： text-align: right;
  • tac： text-align: center;
  • text-indent
  • 作用: 設(shè)置文本縮進(jìn)
  • 格式: text-indent: 2em;
  • 取值: 2em, 其中em是單位, 一個(gè)em代表縮進(jìn)一個(gè)文字的寬度
  • 快捷鍵:
  • ti : text-indent:;
  • ti2e : text-indent: 2em;

顏色屬性

  • 在CSS中如何通過color屬性來修改文字顏色

  • 格式: color: 值;

  • 取值:

  • 英文單詞

    • 一般情況下常見的顏色都有對(duì)應(yīng)的英文單詞, 但是英文單詞能夠表達(dá)的顏色是有限制的, 也就是說不是所有的顏色都能夠通過英文單詞來表達(dá)

  • rgb

    • rgb其實(shí)就是三原色, 其中r(red 紅色) g(green 綠色) b(blue 藍(lán)色)
    • 格式: rgb(0,0,0)
    • 第一個(gè)數(shù)字就是用來設(shè)置三原色的光源元件紅色顯示的亮度
    • 第二個(gè)數(shù)字就是用來設(shè)置三原色的光源元件綠色顯示的亮度
    • 第三個(gè)數(shù)字就是用來設(shè)置三原色的光源元件藍(lán)色顯示的亮度
    • 這其中的每一個(gè)數(shù)字它的取值是0-255之前, 0代表不發(fā)光, 255代表發(fā)光, 值越大就越亮
      紅色: rgb(255,0,0);
      綠色: rgb(0,255,0);
      藍(lán)色: rgb(0,0,255);
      黑色: rgb(0,0,0);
      白色: rgb(255,255,255);
      灰色: rgb(200,200,200);
      只要讓紅色/綠色/藍(lán)色的值都一樣就是灰色,這三個(gè)值越小那么就越偏黑色, 越大就越偏白色

  • rgba

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

  • 十六進(jìn)制

    • 通過十六進(jìn)制來表示顏色其實(shí)本質(zhì)就是RGB
    • 十六進(jìn)制中是通過每?jī)晌槐硎疽粋€(gè)顏色
    • 例如: #FFEE00 FF表示R EE表示G 00表示B
      • 什么是十六進(jìn)制?
    • 十六進(jìn)制和十進(jìn)制一樣都是一種計(jì)數(shù)的方式
    • 在十進(jìn)制中取值范圍0-9, 逢十進(jìn)一
    • 在十六進(jìn)制中取值范圍0-F, 逢十六進(jìn)一
      十進(jìn)制 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
      十六進(jìn)制 0 1 2 3 4 5 6 7 8 9 a b c d e f
      • 十六進(jìn)制和十進(jìn)制轉(zhuǎn)換的公式
    • 用十六進(jìn)制的第一位*16 + 十六進(jìn)制的第二位 = 十進(jìn)制
    • 例如：
      15 == 116 + 5 = 21
      12 == 1      16 + 2 = 18
      FF == F16 + F == 1516 + 15 == 240 + 15 = 255
      00 == 0*16 + 0 = 0

  • 十六進(jìn)制縮寫

    • 在CSS中只要十六進(jìn)制的顏色每?jī)晌坏闹刀际且粯拥? 那么就可以簡(jiǎn)寫為一位
    • 例如: #FFEE00 == #FE0
    • 注意：
      • 1.如果當(dāng)前顏色對(duì)應(yīng)的兩位數(shù)字不一樣, 那么就不能簡(jiǎn)寫
      • 123456;
      • 2.如果兩位相同的數(shù)字不是屬于同一個(gè)顏色的, 也不能簡(jiǎn)寫
      • 122334
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • CSS常見屬性 文字屬性 font-style 作用: 規(guī)定文字樣式 格式: font-style: italic...
    極客江南閱讀 9,641評(píng)論 2贊 78
  • CSS基礎(chǔ) 本文包括CSS基礎(chǔ)知識(shí)選擇器（重要?。。。├^承、特殊性、層疊、重要性CSS格式化排版單位和值盒模型浮動(dòng)...
    廖少少閱讀 3,438評(píng)論 0贊 40
  • 請(qǐng)各位讀者添加一下作者的微信公眾號(hào)，以后有新的文章，將在微信公眾號(hào)直接推送給各位，非常感謝。 如果您覺得這篇文章還...
    MR_LIXP閱讀 2,972評(píng)論 1贊 9
  • 一.CSS描述 CSS全稱為“層疊樣式表(Cascading Style Sheets)”，它主要是用于定義HTM...
    snowy_sunny閱讀 1,200評(píng)論 0贊 4
  • 有兩個(gè)例子，一個(gè)是ck平面廣告，一個(gè)是豐趣海淘。
    waitbutwhy閱讀 282評(píng)論 0贊 1

友情鏈接更多精彩內(nèi)容