2019 9 11Day4css樣式學習

2021-09-27 01:48:15 字數 2948 閱讀 8189

選擇器(重點)

基礎選擇器

內容:css字型樣式屬性

選擇器和基礎選擇器

font-size屬性用於設定字型大小,該屬性的值可以使用相對長度單位,也可以使用絕對長度單位。

相對長度單位

說明em

相對與頁面的尺寸

px畫素,最常用,推薦你使用

絕對長度單位

說明in

英吋cm

厘公尺mm

公釐pt

點font-family屬性用於設定字型。網頁中常用的字型有宋體、微軟雅黑、黑體等,例如將網頁中所有段落文字的字型設定為微軟雅黑,可以使用如下css樣式**:

p

1.一般網頁都是14px以上的字型

2.偶數字型字型大小,ie6等老式瀏覽器支援奇數會有bug

3.各種字型之間用英文狀態下的逗號隔開

4.當字型是英文是,且有空格$#的時候,用雙引號括起來

5.盡量使用系統預設字型,保證任何使用者的瀏覽器都能正確顯示

在 css 中設定字型名稱,直接寫中文是可以的。但是在檔案編碼(gb2312、utf-8 等)不匹配時會產生亂碼的錯誤。xp 系統不支援 類似微軟雅黑的中文。

unicode,同一碼,萬國碼,單一碼,業界標準,它為每種語言的每個字元都設定乙個唯一的二進位制編碼,以滿足我們跨語言,跨平台進行文字轉換,處理的要求

1.用英文表示

2.用unicode

3.一般用中文

字型名稱

英文名稱

unicode 編碼

宋體simsun

\5b8b\4f53

新宋體nsimsun

\65b0\5b8b\4f53

黑體simhei

\9ed1\4f53

微軟雅黑

microsoft yahei

\5fae\8f6f\96c5\9ed1

楷體_gb2312

kaiti_gb2312

\6977\4f53_gb2312

隸書lisu

\96b6\4e66

幼園youyuan

\5e7c\5706

華文細黑

stxihei

\534e\6587\7ec6\9ed1

細明體mingliu

\7ec6\660e\4f53

新細明體

pmingliu

\65b0\7ec6\660e\4f53

字型加粗除了用 b 和 strong 標籤之外,可以使用css 來實現,但是css 是沒有語義的。

font-weight的屬性值

​ normal,bold,lighter,100-900(100的整數倍)

700和boldr一樣,400相當與normal

字型傾斜除了用 i 和 em 標籤之外,可以使用css 來實現,但是css 是沒有語義的。

font-style屬性用於定義字型風格,如設定斜體、傾斜或正常字型,其可用屬性值如下:

normal:預設值,瀏覽器會顯示標準的字型樣式。

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

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

font屬性用於對字型樣式進行綜合設定,其基本語法格式如下:

選擇器

重要重要重要

使用font屬性時,必須按上面語法格式中的順序書寫,不能更換順序,各個屬性以空格隔開。

注意:其中不需要設定的屬性可以省略(取預設值),但必須保留font-size和font-family屬性,否則font屬性將不起作用。

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

標籤選擇器是指用html標籤名稱作為選擇器,按標籤名稱分類,為頁面中某一類標籤指定統一的css樣式。

標籤名
最大優點是快速為頁面用型別的標籤同一樣式,也是他的缺點,不能設計差異化樣式

類選擇器用"."(英文點號)進行表示,後面緊跟類名

.類名
類選擇器最大優點就是可以為元素定義單獨或相同的樣式

1.長名稱或片語可以使用中橫線-為選擇器命名

2.不建議使用下劃線命名css選擇器

1.少按乙個shift鍵

2.區分js變數變數

3.瀏覽器相容問題,在ie6中 _tip無法生效的

3.不要用純數字,中文命名,盡量用英文本母表示

課堂案例:google

可以為標籤增加多個類名,從而達到更多選擇目的

1.樣式顯示效果和html元素中的類名先後順序沒有關係,受css樣式書寫的上下順序有關

2.各個類名用空格連線

多類名選擇器在後面專案常用到

id選擇器用"#"(英文點號)進行表示,後面緊跟id名

#id名
id是唯一的,只能對用文件中某乙個具體的元素,id是html的id屬性值,用法和類選擇器類似

id相當身份證號(不得重複,只是用一次),類選擇器相當名字(多次重複使用)

最大的不同就是使用次數

*
所有選擇器作用最廣的,匹配所有元素

偽類選擇器新增一些特殊效果,比如選擇第一元素,第n個元素

類選擇器用 . 偽類用 :

​ : link 未訪問的連線

​ :visited 、以訪問的連線

​ :hover 滑鼠懸停

​ :active 選定的連線

注意寫的時候,順序不要顛倒,lvha, love hate

day 4 CSS背景與邊框

規定 乙個元素的背景 元素的內容 內邊距 邊界 邊框 下層的區域 屬性值 描述用法注意 background color 為元素設定背景 預設為transparent 預設值是transparent background image 把放入背景 可以是靜態檔案,也可以是生成的漸變 注意此處與內容 如...

Day4 CSS 顏色 字型 邊框 背景

使用英文單詞表示顏色 16進製表示顏色,一共六個數值,前兩個表示紅色,中間兩個表示綠色,後面表示藍色,取值範圍0 f,000000 表示黑色 簡寫 000,ffffff 表示白色 簡寫 fff rgb表示顏色,rgb 取值範圍0 255 帶透明度,rgba rgb取值範圍0 255,最後一位是透明度...

前端菜鳥筆記 Day 4 CSS布局

內容引用 css 框模型概述 css 框模型 box model 規定了元素框處理元素內容 內邊距 邊框 和 外邊距 的方式。元素的背景應用於 由內容和內邊距 padding 邊框 border 組成的區域。邊框以外是外邊距 margin 外邊距預設是透明的,因此不會遮擋其後的任何元素。內邊距 邊框...