1、 內(nèi)容可修改電子課件單元5 CSS3基本樣式設(shè)計 字體樣式和文本樣式文字是網(wǎng)頁最基本的組成元素，在網(wǎng)頁標簽中，可以通過標題標簽和段落標簽來插入文字，這些標簽有默認的顯示樣式。在實際應用中，可以通過CSS樣式來修改這些文字的顯示效果。引入font-stylefont-variantfont-weightfont-sizefont-family字體樣式屬性屬性值描述normal文本正常顯示italic文本斜體顯示oblique文本傾斜顯示font-style屬性用于規(guī)定斜體文本字體樣式pfont-style: italic;學而不思則罔，思而不學則殆字體樣式屬性font-variant屬性用于將元

2、素中所有的小寫字母都轉(zhuǎn)換為大寫 該屬性僅作用于英文字符，不經(jīng)常使用。字體樣式屬性屬性值描述normal默認值，標準字體small-caps小型大寫字母的字體inherit從父元素繼承屬性 font-variant屬性值值描述normal默認值，定義標準的字符bold定義粗體字符bolder定義更粗的字符lighter定義更細的字符100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900定義由細到粗的字符，400等同于normal，而700 等同于bold font-weight屬性值font-weight屬性用于設(shè)置文本粗細 示例： pfont-w

3、eight: bold;字體樣式屬性下面代碼設(shè)置網(wǎng)頁中文字字號為12像素 body font-size:12px;font-size 屬性用于設(shè)置文本的大小font-size 屬性值可以是絕對或相對值，比較常用的是使用數(shù)值來設(shè)置字體大小。px像素是相對于顯示器屏幕分辨率而言的，任意瀏覽器的默認字體高都是16px。em是相對于當前對象內(nèi)文本的字體尺寸。如當前對象內(nèi)文本的字體尺寸被設(shè)置為14px則1em=14px；如當前對象內(nèi)文本的字體尺寸未被設(shè)置，則相對于瀏覽器的默認字體尺寸1em=16px。rem是指相對于根元素的字體大小的單位。如果html根元素設(shè)置字體尺寸為10px，則1em=10px。字

4、體樣式屬性font-family 屬性用于定義文本的字體系列該屬性的取值可以有多個字體名稱，按優(yōu)先順序排列并以逗號隔開。優(yōu)先使用方正楷體，假設(shè)用戶電腦上沒有方正楷體，但是有微軟雅黑的字體，則瀏覽器中會以微軟雅黑的字體顯示p元素的文字。字體樣式屬性示例pfont-family: 方正楷體,微軟雅黑;font屬性（簡寫屬性） 語法： font: font-style font-variant font-weight font-size/line-height font-family; 字體 h1font: italic normal 20px/30px 楷體; 勤學好問 字體樣式屬性文字的顏色以及

5、文本格式的樣式效果colortext-aligntext-decorationtext-indentline-height文本樣式屬性color屬性用于設(shè)置文字的顏色常用顏色值CSS顏色規(guī)范預定義的顏色名稱，例如red，blue，green等。十六進制顏色代碼：#RRGGBB，其中RR（紅色），GG（綠色）和BB（藍色），所有值必須介于0和FF之間。RGB顏色代碼：RGB（紅，綠，藍）。每個參數(shù)（紅色，綠色和藍色）定義顏色的亮度，可在0和255之間，或一個百分比值（從0到100）之間的整數(shù)。文本樣式屬性值描述left默認值，文本左對齊right文本右對齊center文本居中對齊justify文

6、本兩端對齊text-align屬性值text-align屬性用來設(shè)置文本的水平對齊方式下面的樣式規(guī)則設(shè)置文本水平居中： .first text-align:center; 文本樣式屬性值描述none默認值，定義標準的文本underline定義文本下的一條線line-through定義穿過文本下的一條線text-decoration屬性值text-decoration屬性用來設(shè)置或刪除文本的裝飾線如果希望去掉超鏈接的下劃線，可以使用以下 CSS 來做到這一點：a text-decoration: none;如果希望添加刪除線效果，可以使用以下 CSS 來實現(xiàn)： spantext-decorati

7、on: line-through;文本樣式屬性text-indent屬性用來控制文段首行縮進的距離下面樣式規(guī)則實現(xiàn)：段落首行縮進兩個字符 p text-indent:2em ;注意：縮進，經(jīng)常使用相對單位em，2em可以使得首字符縮進兩個字符的位置。文本樣式屬性line-height 屬性用來設(shè)置行間距（行高）設(shè)置段落行間距為1.5倍，可以用如下代碼： .first line-height:1.5em; 文本樣式屬性邊框樣式邊框樣式border-style屬性定義線型border-width屬性定義粗細border-color屬性定義顏色邊框樣式常用的樣式有border-style屬性dott

8、ed（點線）solid（實線）dashed（虛線）border-style屬性是邊框必須設(shè)置的一個屬性border-style: dotted solid double dashed；border-style: dotted solid double；border-style: dotted solid；border-style: dotted；上 右 下 左上 右和左 下上和下 右和左border-style屬性border-style屬性取值可以有一到四個值描述thin定義細的邊框medium默認值，定義中等的邊框thick定義粗的邊框length允許自定義邊框的寬度border-widt

9、h屬性注意：border-width屬性常用像素值來定義邊框的寬度注意：border-color單獨使用是不起作用的，必須得先使用border-style來設(shè)置邊框樣式。默認的邊框顏色是元素本身的前景色。如果沒有為邊框聲明顏色，它將與元素的文本顏色相同。如果元素沒有任何文本，邊框顏色就是其父元素的文本顏色。border-color: red;border-color: #00ff00;border-color: rgb(0,0,255);border-color屬性border-top-style 上邊框的樣式border-top-width上邊框的寬度border-top-color上邊框的

10、顏色border-bottom-style border-bottom-widthborder-bottom-colorborder-right-style border-right-widthborder-right-colorborder-left-style border-left-widthborder-left-color單邊框?qū)傩允纠?h1border-bottom-style: solid;border-bottom-color: #000;border-bottom-width: 1px; border屬性是border-style、border-width和border-c

11、olor屬性的簡寫單邊框?qū)傩院唽慴order-left、border-right、border-top、border-bottomh1border-bottom-style: solid;border-bottom-color: #000;border-bottom-width: 1px;h1border-bottom: 1px solid #000;border屬性示例： border: 1px solid #000;示例： 圓角屬性：border-radiusborder-radius屬性 .boxwidth: 100px;height: 100px;border: 1px solid #

12、000; border-radius: 20px;border-radius: 50%;border-radius屬性值：具體的像素值或者百分比border-radius屬性示例： 四個值：左上角 右上角 右下角 左下角（順時針方向）三個值：左上角 右上角和左下角 右下角 兩個值：左上角和右下角 右上角和左下角一個值：四個圓角值 .boxwidth: 200px;height: 100px;background-color: #6fb525;float: left;margin-right: 20px;.box1 border-radius: 15px 50px 30px 5px;.box2

13、border-radius: 15px 50px 30px;.box3 border-radius: 15px 50px;.box4 border-radius: 15px;border-radius屬性border-radius屬性取值實踐任務 設(shè)置公司簡介頁面樣式設(shè)置整個“公司簡介”模塊寬度為920px，字號為14px；設(shè)置“公司簡介”標題字號為16px，行高為50px，底部邊框為1px實線，顏色為#DDD；所有段落設(shè)置首行縮進2字符，行高為2em，兩端對齊；兩處強調(diào)文本效果如圖所示；設(shè)置圖片寬度為220px，高度為130px，邊框為3px雙實線，邊框顏色為#0072C6；設(shè)置圖文混排效果

14、，兩張圖都向右邊浮動；設(shè)置圖片與左邊文本距離為40px（margin-left:40px;）。任務描述背景樣式背景樣式background-color設(shè)置背景顏色background-image設(shè)置背景圖像background-repeat設(shè)置背景平鋪background-attachment設(shè)置背景圖像是否固定background-position設(shè)置背景圖像位置background背景屬性的縮寫背景屬性下面樣式規(guī)則實現(xiàn)：改變整個頁面的背景色 body background-color: red; 下面樣式規(guī)則實現(xiàn)：改變h1標題的背景色 h1 background-color: blue;

15、background-color屬性body background-image: url(bg.gif); 注意：url括號里寫的是圖片的相對路徑background-image屬性background-repeat屬性值：repeat-x 圖像橫向平鋪repeat-y 圖像縱向平鋪repeat 圖像橫向和縱向都平鋪no-repeat 圖像不平鋪body background-image: url(bg.gif);background-repeat: no-repeat; background-repeat屬性background-attachment屬性用于指定背景圖像是固定在屏幕上的，還是

16、隨著它所在的元素而滾動的。屬性值： scroll 是默認值，表示圖像會跟隨頁面滾動 fixed 表示圖像是固定在屏幕上的body background-image: url(bg.gif);background-repeat: no-repeat; background-attachment: fixed; background-attachment屬性background-position屬性值：可以是以百分比或固定單位（比如像素、厘米等）；也可以是“top”、“bottom”、“center”、“l(fā)eft”和“right”這些值。background-position: 100px 200

17、px； 表示背景圖像將被放置在位于距瀏覽器窗口左邊100像素、頂部200像素處。background-position: 50% 25%； 表示圖像被放置在頁面內(nèi)水平居中、離頂部四分之一處。background-position: top right；表示圖像被放置在頁面的右上角。background-position屬性body background-image: url(bg.gif); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; backgro

18、und-position屬性background-position屬性值：可以是以百分比或固定單位（比如像素、厘米等）；也可以是“top”、“bottom”、“center”、“l(fā)eft”和“right”這些值。background-color: #FFCC66;background-image: url(bg.gif);background-repeat: no-repeat;background-attachment: fixed;background-position: right bottom;background: #FFCC66 url(bg.gif) no-repeat fixe

19、d right bottom;屬性值順序： background-color | background-image | background-repeat |background-attachment | background-position如果省略某個屬性不寫出來，那么將自動為它取默認值。background屬性background屬性是所有與背景有關(guān)的屬性的縮寫用法。漸變背景線性漸變徑向漸變漸變漸變的背景效果通常使用background-image屬性來設(shè)置。background-image:linear-gradient(direction,color-stop1,color-stop

20、2,.);.box1 width: 200px;height: 200px;background-image: linear-gradient(red, yellow);direction屬性值可以設(shè)置為：to right（從左到右），to bottom right(從左上角到右下角)等。.box1 width: 200px;height: 200px;background-image: linear-gradient(to bottom right , red, yellow);線性漸變線性漸變語法background-image: radial-gradient(shape size at

21、 position, start-color, ., last-color);.box1 width: 200px;height: 200px;background-image:radial-gradient(red,yellow,green);徑向漸變徑向漸變語法列表和超鏈接樣式列表標志類型圖形符號列表位置列表樣式列表類型屬性值顯示效果無序列表（ul）默認值，disccirclesquare有序列表（ol）默認值，decimal阿拉伯數(shù)字1、2、3upper-alpha大寫英文字母A、B、Clower-alpha小寫英文字母a、b、cupper-roman大寫羅馬數(shù)字I、II、IIIlowe

22、r-roman小寫羅馬數(shù)字i、ii、iii、公共屬性none不顯示任何符號常用屬性值修改列表項的標志類型ul list-style-type : square紅茶綠茶花茶list-style-type屬性列表項標志設(shè)置為圖像ul list-style-image: url(img/icon.gif);紅茶綠茶花茶注意：列表項標志的圖片背景色最好設(shè)置為透明色，所以圖片格式最好為gif或者png格式list-style-image 屬性值描述inside列表項目標記放置在文本以內(nèi)，且環(huán)繞文本根據(jù)標記對齊。outside默認值。列表項目標記放置在文本以外，且環(huán)繞文本不根據(jù)標記對齊。inherit規(guī)定

23、應該從父元素繼承 list-style-position 屬性的值。確定列表標志出現(xiàn)在列表項內(nèi)容之外還是內(nèi)容內(nèi)部list-style-position 屬性屬性值的順序為：list-style-type、list-style-position、list-style-image。ul list-style-type: none;/* 設(shè)置列表項無項目符號*/ul li background-image: url(img/icon.gif);/* 設(shè)置列表項背景圖片*/background-repeat: no-repeat;/* 設(shè)置背景圖片不重復*/background-position: l

24、eft center;/* 設(shè)置背景圖片位置靠左垂直方向居中*/padding-left: 20px;/* 設(shè)置列表項文本到左邊的距離為16px*/紅茶綠茶花茶list-style屬性（簡寫屬性）首頁產(chǎn)品展示公司簡介會員注冊聯(lián)系我們lifloat: left;列表方向超鏈接的特殊性在于能夠根據(jù)它們所處的狀態(tài)來設(shè)置它們的樣式。超鏈接的四種狀態(tài)：a:link - 普通的、未被訪問的鏈接 a:visited - 用戶已訪問的鏈接 a:hover - 鼠標指針位于鏈接的上方 a:active - 鏈接被點擊的時刻偽類選擇器超鏈接樣式超鏈接的四種狀態(tài)設(shè)置次序規(guī)則：a:hover 必須位于 a:link

25、和 a:visited 之后 a:active 必須位于 a:hover 之后 在實際開發(fā)中，經(jīng)常將超鏈接的樣式簡化為設(shè)置a和a:hover這兩種狀態(tài)的樣式超鏈接樣式原始頁面效果navheight: 30px;background-color: #0072C6;nav ullist-style: none;nav ul lifloat: left;首頁產(chǎn)品展示公司簡介會員注冊聯(lián)系我們超鏈接樣式案例：橫向?qū)Ш綑趎avheight: 30px;background-color: #0072C6;nav ullist-style: none;nav ul lifloat: left; 設(shè)置鏈接顏色設(shè)

26、置超鏈接下劃線效果nav ul li acolor: #fff;nav ul li a:hovercolor: red;nav ul li acolor: #fff;text-decoration: none;nav ul li a:hovercolor: red;text-decoration: underline;超鏈接樣式案例：橫向?qū)Ш綑趎avheight: 30px;background-color: #0072C6;nav ullist-style: none;nav ul lifloat: left;nav ul li acolor: #fff;text-decoration: n

27、one;nav ul li a:hovercolor: red;text-decoration: underline;background: orange;navheight: 30px;background-color: #0072C6;nav ullist-style: none;nav ul lifloat: left;nav ul li acolor: #fff;text-decoration: none;display: block; width: 100px;text-align: center;line-height: 30px;nav ul li a:hovercolor: r

28、ed;text-decoration: underline;background: orange;超鏈接樣式設(shè)置鏈接背景顏色案例：橫向?qū)Ш綑趯嵺`任務 設(shè)置新聞中心版塊樣式設(shè)置該模塊寬度為400px；設(shè)置“新聞中心”標題字號為20px，行高為50px；列表項標志使用icon1.jpg圖片，列表項行高為50px，除最后一項其它列表項設(shè)置底部邊框為1px虛線，顏色為#D1D1D1；日期向右邊浮動；列表超鏈接文本顏色為#666666，鼠標指向列表鏈接文本顏色變?yōu)?FFA500。任務描述表格樣式和表單樣式表格樣式使用CSS樣式中的border屬性來設(shè)置表格邊框樣式table,th,td border:

29、1px solid #000;表格邊框border-collapse屬性值有collapse（合并）和separate（分離），默認的屬性值為separate。tableborder-collapse: collapse;table,th,td border: 1px solid #000;border-collapse屬性通過 width 和 height 屬性定義表格的寬度和高度。tableborder-collapse: collapse;table,th,td border: 1px solid #000;tablewidth: 400px;height: 200px;表格寬度和高度對

30、齊方式屬性屬性值水平對齊方式text-alignleft（向左）、right（向右）和center（居中）垂直對齊方式vertical-aligntop（頂部）、bottom（底部）和middle（中部）tableborder-collapse: collapse;table,th,td border: 1px solid #000;tablewidth: 400px;height: 200px;tdtext-align: center;vertical-align: bottom;表格文本對齊文字顏色使用color屬性表格邊框顏色使用border屬性背景色使用background(或background-color)屬性tableborder-collapse: collapse;table,th,td border: 1px solid