從html被發明開始,樣式就以各種形式存在。不同的瀏覽器結合它們各自的樣式語言為使用者提供頁面效果的控制。最初的html只包含很少的顯示屬性。
隨著html的成長,為了滿足前端工程的需求,html增加了很多顯示功能,html變得混亂,html頁面顯得用臃腫,於是css誕生了
css(cascading style sheets)
css通常稱為css樣式表或**層疊?**樣式表(級聯樣式表),主要用於設定html頁面中的文字內容(字型、大小、對齊方式等)、的外形(寬高、邊框樣式、邊距等)以及版面的布局等外觀顯示樣式。
css以html為基礎,提供了豐富的功能,如字型、顏色、背景的控制及整體排版等,而且還可以針對不同的瀏覽器設定不同的樣式。
使用html時,需要遵從一定的規範。css亦如此,要想熟練地使用css對網頁進行修飾,首先需要了解css樣式規則,具體格式如下:
h1
選擇器(標籤選擇器) 屬性:屬性值 用分號連線
屬性="屬性值" 用空格鏈結
需要注意的是
1.排版結構 用段落對齊的排版書寫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屬性將不起作用。
此工具是我們的必備工具,以後**出了問題,我們首先第一反應就是:
「按f12」或者是 「shift+ctrl+i」 開啟 開發者工具。
選單: 右擊網頁空白出—檢視
小技巧
1.ctrl加滾輪鍵可以放大**
2.可以同時檢視html,css**
3.css樣式可以實時更改
要想將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
css規則是使用 /* 需要注釋的內容 */ 進行注釋的,即在需要注釋的內容前使用 「/*」 標記開始注釋,在內容的結尾使用 「*/」結束。
例如:
p
color屬性用於定義文字的顏色,其取值方式有3種:
ine-height屬性用於設定行間距,就是行與行之間的距離,即字元的垂直間距,一般稱為行高。line-height常用的屬性值單位有三種,分別為畫素px,相對值em和百分比%,實際工作中使用最多的是畫素px
一般情況下,行距比字型大小大7.8畫素左右就可以了。
text-align屬性用於設定文字內容的水平對齊,相當於html中的align對齊屬性。其可用屬性值如下:
left:左對齊(預設值)
right:右對齊
center:居中對齊
text-indent屬性用於設定首行文字的縮排,其屬性值可為不同單位的數值、em字元寬度的倍數、或相對於瀏覽器視窗寬度的百分比%,允許使用負值, 建議使用em作為設定單位。
1em 就是乙個字的寬度 如果是漢字的段落, 1em 就是乙個漢字的寬度
letter-spacing屬性用於定義字間距,所謂字間距就是字元與字元之間的空白。其屬性值可為不同單位的數值,允許使用負值,預設為normal。
word-spacing屬性用於定義英文單詞之間的間距,對中文字元無效。和letter-spacing一樣,其屬性值可為不同單位的數值,允許使用負值,預設為normal。
文字顏色到了css3我們可以採取半透明的格式
以後我們可以給我們的文字新增陰影效果了 shadow 影子
sublime可以快速提高我們**的書寫方式
可以使用絕對長度單位。
中軟實習 day7總結
使用寬度屬性width和高度屬性height可以對盒子的大小進行控制。width和height的屬性值可以為不同單位的數值或相對于父元素的百分比 實際工作中最常用的是畫素值。大多數瀏覽器,如firefox ie6及以上版本都採用了w3c規範,符合css規範的盒子模型的總寬度和總高度的計算原則是 外盒...
中軟實習 day8總結
如果,說浮動,關鍵在乙個 浮 字上面,那麼 我們的定位,關鍵在於乙個 位 上。定位是難點,一定要學好 那麼定位,最常運用的場景再那裡呢?如果用標準流或者浮動,實現會比較複雜或者難以實現,此時我們用定位來做,just soso!元素的定位屬性主要包括定位模式和邊偏移兩部分。1 邊偏移 邊偏移屬性 描述...
Python學習總結Day4
1 窗體左上角為座標原點 turtle.setup width,length,startx,starty 非必須 設定窗體的大小及位置,前兩個是窗體的大小,及長寬,後兩個是位置,相對螢幕左上角的位置 可選 1 絕對座標 海龜在畫布的正中心,執行方向為向著畫布的右側,右方向為x軸 turtle.got...