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:;

注意點:
如果取值是中文, 需要用雙引號或者單引號括起來

設(shè)置的字體必須是用戶電腦里面已經(jīng)安裝的字體

字體屬性補(bǔ)充

如果設(shè)置的字體不存在, 那么系統(tǒng)會使用默認(rèn)的字體來顯示
默認(rèn)一般使用宋體

如果設(shè)置的字體不存在, 而我們又不想用默認(rèn)的字體來顯示怎么辦?
可以給字體設(shè)置備選方案,格式:font-family:"字體1", "備選方案1", ...;

如果想給中文和英文分別單獨(dú)設(shè)置字體, 怎么辦?
中文字體可以處理英文, 而英文字體不能處理中文
注意點: 如果想給界面中的英文單獨(dú)設(shè)置字體, 那么英文的字體必須寫在中文的前面

補(bǔ)充在企業(yè)開發(fā)中最常見的字體有以下幾個
中文: 宋體/黑體/微軟雅黑;英文: "Times New Roman"/Arial

還需要知道一點, 就是并不是名稱是英文就一定是英文字體,因為中文字體其實都有自己的英文名稱, 所以是不是中文字體主要看能不能處理中文
宋體 SimSun;黑體 SimHei;微軟雅黑 Microsoft YaHei

文字屬性縮寫

縮寫格式:
font: style weight size family;

例如: font: italic bold 10px "楷體";

注意點: size和family都不能刪去,也不能互換位置,否則會沒效果,變?yōu)槌跏寄J(rèn)狀態(tài);
其他兩個互換位置或者刪去都可以

文本屬性

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è)置文本水平對齊方式

格式: text-align: center;

取值:
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是單位, 一個em代表縮進(jìn)一個文字的寬度

快捷鍵:
ti text-indent:;
ti2e text-indent: 2em;

顏色屬性

在CSS中如何通過color屬性來修改文字顏色
格式: color: 值;
取值:
英文單詞:一般情況下常見的顏色都有對應(yīng)的英文單詞, 但是英文單詞能夠表達(dá)的顏色是有限制的, 也就是說不是所有的顏色都能夠通過英文單詞來表達(dá)

rgb:格式: rgb(0,0,0)
這其中的每一個數(shù)字它的取值是0-255之前, 0代表不發(fā)光, 255代表發(fā)光, 值越大就越亮,讓RGB三個值一樣就是灰色,數(shù)字越大灰色越淺

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

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

  • CSS常見屬性 文字屬性 font-style 作用: 規(guī)定文字樣式 格式: font-style: italic...
    極客江南閱讀 9,643評論 2 78
  • 注意點: style標(biāo)簽必須寫在head標(biāo)簽的開始標(biāo)簽和結(jié)束標(biāo)簽之間(也就是必須和title標(biāo)簽是兄弟關(guān)系) st...
    Jackson_yee_閱讀 304評論 0 0
  • 1.塊級元素和行內(nèi)元素分別有哪些?動手測試并列出4條以上的特性區(qū)別 塊級元素:獨(dú)占一行,默認(rèn)情況下,其寬度自動填滿...
    LouisJ閱讀 768評論 0 0
  • 今天沒有課呀,超開心! 終于搞明白cjl為什么會不及時回我信息了。他爸媽吵架。今天問他爸媽情況怎么樣,他說...
    顧相閱讀 196評論 0 0
  • 立冬 西風(fēng)輕拂老煙松, 遍地芒針換舊容。 圓月一輪托綺夢, 今宵過去入隆冬。 臨江仙 立冬 ...
    陳慶利閱讀 210評論 0 1

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