css字體樣式，選擇器，外觀屬性

• 字體樣式
• • ont-size:字號大小
  • font-family:字體
  • css unicode 字體
  • font-weight：字體粗細
  • font-style:字體風格
  • font:綜合設置字體的樣式(重點)
  • css注釋
• 選擇器
• • 標簽選擇器
  • 類選擇器
  • id選擇器
  • id選擇器和類選擇器區別
  • 通配符選擇器
  • 偽類選擇器
  • 鏈接偽類選擇器
• CSS外觀屬性
• • color:文本顏色
  • line-height:行間距
  • text-align:水平對齊方式
  • text-indent:首行縮進
  • letter-spacing:字間距
  • word-spacing:單詞間距
  • CSS復合選擇器
  • 交集選擇器
  • 并集選擇器
  • 后代選擇器
  • 子元素選擇器
  • 屬性選擇器

字體樣式

ont-size:字號大小

font-size屬性 設置字號 該屬性的值可以使用相對長度單位 也可以使用絕對長度單位 其中相對長度單位比較常用 推薦使用px像素單位

font-family:字體

font-family屬性用于設置字體 常用的字體有宋體、微軟雅黑、黑體等

p{font-family:“微軟雅黑”;}

可以同時指定多個字體，中間以逗號隔開，表示如果瀏覽器不支持第一個字體，則會嘗試下一個，直到找到合適的字體。

常用技巧：

1.現在網頁中普遍使用14px 2.盡量使用偶數的數字字號。ie6等老式瀏覽器支持奇數會有bug 3.各種字體之間必須使用英文狀態下的逗號隔開。 4.中文字體需要加英文狀態下的引號，英文字體一般不需要加引號。當需要設置英文字體時，英文字體名必須位于中文字體名之前。 5.如果字體名中包含空格、#、$等符號，則改字體必須加英文狀態下的單引號或者雙引號，例如font-family："Times New Roman" 6.盡量使用系統默認字體，保證在任何用戶的瀏覽器中都能真確顯示

css unicode 字體

在css中設置字體名稱，直接寫中文是可以的。但是在文件編碼不匹配是會產生亂碼的錯誤。

方案一：你可以使用英文來代替。 比如font-family:“Microsoft Yahei”.

方案二：可以使用Unicode編碼來寫字體名稱來避免這些錯誤

以后盡量只寫Unicode字體 寫宋體 和微軟雅黑 “\5FAE\8F6F\96C5\9ED1”,"\5B8B\4F53"

font-weight：字體粗細

字體加粗出了用b和Strong標簽之外，可以使用css來實現，但是css是沒有語義的。

font-weight屬性用于定義字體的粗細，其可用屬性值：normal、bold、bolder、lighter、100-900(100的整數倍) 數字400等價于 normal，而700等價于bold。

font-style:字體風格

font-style屬性用于定義字體風格，如設置斜體、傾斜或者正常字體其可用屬性如下：

normal：默認值，瀏覽器會顯示標準的字體樣式。

italic:瀏覽器會顯示斜體的字體樣式。

oblique:瀏覽器會顯示傾斜的字體樣式

font:綜合設置字體的樣式(重點)

font屬性英語對字體樣式進行綜合設置，其根本語法如下：

選擇器{font: font-style font-weight font-size/line-height font-family;} 使用font屬性時，必須按上面的語法格式中的順序書寫，不能更換順序，各個屬性以空隔開 其中不需要設置的屬性可以省略，但是必須保留font-size和font-family屬性，否則font屬性將不起作用

css注釋

/* */

選擇器

要想將css樣式應用于特定的HTML元素，首先需要找到該目標元素。在css中，執行這一任務的樣式規則部分被稱為選擇器

標簽選擇器

標簽選擇器是指用HTML標簽名稱作為選擇器，按照標簽名稱分類，為頁面中某一類標簽指定統一的css樣式

標簽名{屬性1：屬性值1；屬性2：屬性值2} 或者 元素名{屬性1：屬性值1；屬性2：屬性值2}

標簽選擇器最大的優點是能快速為頁面中的標簽統一樣式，但是不能設計差異化樣式

類選擇器

類選擇器使用"."進行標識，后面緊跟類名

.類名（屬性1：屬性值1；屬性2：屬性值2） 標簽調用時用class="類名"即可。

類選擇器最大的優勢是可以為元素對象定義單獨或相同的樣式。

1.長名稱或詞組可以使用中橫線來為選擇器命名 2.不建議使用"_"來命名css選擇器

瀏覽器兼容問題（比如使用_tips的選擇器命名，在IE6是無效的）

能良好區分JavaScript變量名(JS變量命名是用"_")

3.不要純數字、中文等命名，盡量使用英文字母來表示

id選擇器

id選擇器使用“#”進行標識，后面緊跟id名，其基本語法格式如下：

#id名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

該語法中，id名即為HTML元素的id屬性值，大多數HTML元素都可以定義id屬性，元素的id值是唯一的，只能對應于文檔中某一個具體的元素。
用法基本和類選擇器相同。

id選擇器和類選擇器區別

W3C標準規定，在同一個頁面內，不允許有相同名字的id對象出現，但是允許相同名字的class。

類選擇器（class） 好比人的名字， 是可以多次重復使用的， 比如 張偉 王偉 李偉 李娜

id選擇器 好比人的身份證號碼， 全中國是唯一的， 不得重復。 只能使用一次。

id選擇器和類選擇器最大的不同在于 使用次數上。

通配符選擇器

通配符選擇器用“*”號表示，他是所有選擇器中作用范圍最廣的，能匹配頁面中所有的元素。其基本語法格式如下：

* { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

例如下面的代碼，使用通配符選擇器定義CSS樣式，清除所有HTML標記的默認邊距。

* {margin: 0; /* 定義外邊距*/padding: 0; /* 定義內邊距*/ }

偽類選擇器

偽類選擇器用于向某些選擇器添加特殊的效果。比如給鏈接添加特殊效果， 比如可以選擇 第1個，第n個元素。

為了和我們剛才學的類選擇器相區別， 類選擇器是一個點 比如 .demo {} 而我們的偽類 用 2個點 就是 冒號 比如 :link{}

鏈接偽類選擇器

• :link /* 未訪問的鏈接 */

• :visited /* 已訪問的鏈接 已經點擊過的狀態*/

• :hover /* 鼠標移動到鏈接上 */

• :active /* 選定的鏈接 點擊不松開的時候 顯示的狀態 */

注意寫的時候，他們的順序盡量不要顛倒 按照 lvha 的順序。 love hate 愛上了討厭 記憶法

a { /* a是標簽選擇器 所有的鏈接 */font-weight: 700;font-size: 16px;color: gray;} a:hover { /* :hover 是鏈接偽類選擇器 鼠標經過 */color: red; /* 鼠標經過的時候，由原來的 灰色 變成了紅色 */

CSS外觀屬性

color:文本顏色

color屬性用于定義文本的顏色，其取值方式有如下3種：

1.預定義的顏色值，如red，green，blue等。

2.十六進制，如#FF0000，#FF6600，#29D794等。實際工作中，十六進制是最常用的定義顏色的方式。

3.RGB代碼，如紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%)。

需要注意的是，如果使用RGB代碼的百分比顏色值，取值為0時也不能省略百分號，必須寫為0%。

line-height:行間距

line-height屬性用于設置行間距，就是行與行之間的距離，即字符的垂直間距，一般稱為行高。line-height常用的屬性值單位有三種，分別為像素px，相對值em和百分比%，實際工作中使用最多的是像素px

一般情況下，行距比字號大7.8像素左右就可以了。

text-align:水平對齊方式

text-align屬性用于設置文本內容的水平對齊，相當于html中的align對齊屬性。其可用屬性值如下：

left：左對齊（默認值）

right：右對齊

center：居中對齊

text-indent:首行縮進

text-indent屬性用于設置首行文本的縮進，其屬性值可為不同單位的數值、em字符寬度的倍數、或相對于瀏覽器窗口寬度的百分比%，允許使用負值, 建議使用em作為設置單位。

1em 就是一個字的寬度 如果是漢字的段落， 1em 就是一個漢字的寬度

letter-spacing:字間距

letter-spacing屬性用于定義字間距，所謂字間距就是字符與字符之間的空白。其屬性值可為不同單位的數值，允許使用負值，默認為normal。

word-spacing:單詞間距

word-spacing屬性用于定義英文單詞之間的間距，對中文字符無效。和letter-spacing一樣，其屬性值可為不同單位的數值，允許使用負值，默認為normal。

word-spacing和letter-spacing均可對英文進行設置。不同的是letter-spacing定義的為字母之間的間距，而word-spacing定義的為英文單詞之間的間距。

CSS復合選擇器

復合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的,目的是為了可以選擇更準確更精細的目標元素標簽。

交集選擇器

交集選擇器由兩個選擇器構成，其中第一個為標簽選擇器，第二個為class選擇器，兩個選擇器之間不能有空格，如h3.special。

用的相對來說比較少，不太建議使用。

并集選擇器

并集選擇器（CSS選擇器分組）是各個選擇器通過逗號連接而成的，任何形式的選擇器（包括標簽選擇器、class類選擇器id選擇器等），都可以作為并集選擇器的一部分。如果某些選擇器定義的樣式完全相同，或部分相同，就可以利用并集選擇器為它們定義相同的CSS樣式。

后代選擇器

后代選擇器又稱為包含選擇器，用來選擇元素或元素組的后代，其寫法就是把外層標簽寫在前面，內層標簽寫在后面，中間用空格分隔。當標簽發生嵌套時，內層標簽就成為外層標簽的后代。

子元素選擇器

子元素選擇器只能選擇作為某元素子元素的元素。其寫法就是把父級標簽寫在前面，子級標簽寫在后面，中間跟一個 > 進行連接，注意，符號左右兩側各保留一個空格。

白話： 這里的子 指的是 親兒子 不包含孫子 重孫子之類。

比如： .demo > h3 {color: red;} 說明 h3 一定是demo 親兒子。 demo 元素包含著h3。

屬性選擇器

E[attr] 存在attr屬性即可
E[attr=val] 屬性值完全等于val
E[attr*=val] 屬性值里包含val字符并且在“任意”位置
E[attr^=val 屬性值里包含val字符并且在“開始”位置
E[attr$=val] 屬性值里包含val字符并且在“結束”位置

/* 獲取到 擁有 該屬性的元素 */ li[type] {border: 1px solid gray; } /* 獲取 屬性等于某個值的 元素 屬性值 可以使用 引號進行包裹 */ li[type="vegetable"] {background-color: green; } /* 使用空格分隔的 多個屬性 其中有某個屬性即可獲取 */ li[type~="hot"] {font-size: 40px; } /* 獲取以某個屬性開頭的語法 */ li[color^='green'] {background-color: orange; } /* 獲取以某個值 結尾的屬性 */ li[type$='t']{color: hotpink;font-weight: 900; }/* 獲取 屬性中 擁有某個值的 元素 */ li[type*=ea] {font-size: 100px; } /* 如果屬性的值 只有very 也能夠獲取 用來獲取 多個屬性 并且 使用-連接 */ li[price|='very'] {background-color: darkred; } <ul><li type='fruit' color='green'>西瓜</li><li type='vegetable' color='greenyellow'>西蘭花</li><li type='meat'>牛肉</li><li type='meat hot'>豬肉</li><li type='drink hot'>可樂</li><li type='drink hot'>雪碧</li><li price='very-cheap'>紅酒</li><li price='very'>白酒</li> </ul>

總結

以上是生活随笔為你收集整理的css字体样式，选择器，外观属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。