CSS文字文本屬性詳細講解

一.CSS的作用及格式

1.CSS的固定格式：

<style type="text/css">
标簽名稱
{
    屬性名稱: 屬性對應的值
}
</style>
           

1.1 CSS的注釋格式

/*
這是注釋的内容
*/
           

1.2注意點： style标簽必須寫在head标簽的開始标簽和結束标簽之間。設定樣式時必須按照固定的格式來設定，key: value;其中 : 不能省略。 ; 大多數情況下不能省略。

2.使用CSS來修改樣式有什麼好處？

1）不用記憶哪些屬性屬于哪個标簽，

2）當需求變更時我們不需要修改大量的代碼就可以瞞住需要。

3）在前端開發中CSS隻有一個作用，就是用來修改樣式的。

二. 文字相關屬性

1.文字樣式的屬性：

font-style; italic;

屬性有兩種 -normal: 正常的 -italic:斜體

<style">
p{
    font-style:italic;  /* 文字樣式為斜體*/
}
h1{
	font-style:normal;  /* 正常樣式，預設為正常樣式*/
}
</style>
           

1.1 webstorm快捷鍵是：

fs+table鍵 == font-style; italic;
fsn+table鍵 == font-style; normal;
           

2.文字粗細的屬性：

例如：font-weight:bold;

<style">
p{
   font-weight:bold; /* 文字加粗*/
}
h1{
	font-weight:bolder; /* 文字進一步加粗*/
}
h2{
	font-weight:lighterr; /* 文字粗細為細線*/
}
</style>
           

屬性的值有三種，-bold 加粗，-bolder 更粗，-lighter 細線

3.文字大小的屬性

例如：font-size : 30px ;
           

<style">
p{
   font-size : 30px ;  /* 文字大小為30px*/
}
</style>
           

3.1 注意點及webstorm快捷鍵：

注意點 : 通過font-size設定大小一定帶機關，也就是px

快捷鍵 ：

fz + table

4.規定文字字型的屬性：

例如：font-family : " 字型名稱 " ;
           

<style">
p{
  font-family : " 華文仿宋 " ; /* 文字字型為華文仿宋*/
}
</style>
           

4.2 字型屬性擴充，

4.2.1：字型不存在系統會顯示預設字型（宋體）如果我們不想用預設的字型怎麼辦？

針對于這種情況，我們可以給字型設定備選方案。例如

font-family:"字型1","備選方案1";

<style">
p{
/* 如果前者無法顯示，則顯示華文仿宋的字型*/
font-family : " 方正小标宋簡體 "，“華文宋體” ; 
}
</style>
           

4.2.2 ： 如果想給中文和英文分别單獨設定字型，怎麼辦？

CSS的中英文字型規定為：但凡是中文字型，裡面都包含英文。但凡是英文字型，裡面都不包含中文。也就是說中文字型可以處理英文，而英文字型不可以進行中文。

4.3 注意點：

4.3.1 ： 如果取值是中文，則需要使用雙引号或者單引号括起來。确且設定的字型必須是使用者電腦上已經安裝的字型。

4.3.2 ： 如果想要個界面中的英文單獨設立字型，那麼英文字型必須在中文的前面。

4.3.3： 補充在企業開發中最常見的字型有以下幾個

-中文：宋體/黑體/微軟雅黑

-英文：“time new roman”/Arial

4.3.4 ： 還需要注意一點，就是并不是名稱是英文就一定是英文字型，因為中文字型其實也都有自己的英文名稱，是以是不是中文字型看根據它能不能進行中文來判斷。

例如：-宋體：SinSun 。-黑體：SinHei 。-微軟雅黑：Microsoft YaHei1。

<style">
p{
 	font-family : " SinSun " ; /* 文字字型為宋體*/
    font-family : " SinHei  " ; /* 文字字型為黑體*/
}
</style>
           

5.文字屬性簡寫：

5.1 縮寫的格式 ：

格式：font : style  weight  size  family ;
           

<style">
p{
/* 文字樣式，粗細可以省略不寫，文字大小和文字字型必須要寫，size一定要放在family的前面*/
 	font ： italic bold 10px "楷體" ; 
    font-family : " SinHei  " ; 
}
</style>

           

5.3 注意點：

5.3.1 在這種縮寫格式中，有的屬性值可以省略.如：-style 可以省略。-weight 可以省略

5.3.2 在這種縮寫格式中，style和weight的位置可以交換

5.3.3 這種縮寫格式中有的屬性值不能省略

5.3.4 size和family不能省略

size和family的位置不能随便亂放，size一定要放在family的前面，而且，size和family必須寫在所由屬性的最後。

6.文本屬性

6.1 文本裝飾的屬性：

格式

text-decoration:underline;

屬性值有-underline 下劃線，-line-through 删除線。-overline 上劃線 -none 沒有，最常見的用處就是用于去掉超連結的下劃線。

<style">
p{
 	text-decoration:underline; /* 文字加上 下劃線*/
   	text-decoration:line-through; /* 文字加上 删除線·*/
   	text-decoration:overline; /* 文字加上 上劃線*/
}
/* 最常見的用處就是用于去掉超連結的下劃線*/
a{
 	text-decoration:none; /* 去掉a标簽的下劃線*/
}
</style>
           

6.2 文本水準對齊的屬性 ：

格式

text-align：right ;

屬性的值有-left 文字左對齊。-center文字水準居中。-right文字右對齊。

<style">
p{
 	text-align：right ;     /* 文字右對齊*/
   	text-align：center ;     /* 文字居中*/
   	text-align：left ;     /* 文字左對齊*/
}
</style>
           

6.3 文本縮進的屬性：

格式

text-indent ： 2em ;

其中em代表機關，一個em代表縮進一個文字的寬度。

<style">
p{
 	text-indent ： 2em ;  /* 文字左移2cm*/
}
</style>