電子課件單元5 CSS3基本樣式設(shè)計(jì)

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

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

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

4、體樣式屬性font-family 屬性用于定義文本的字體系列該屬性的取值可以有多個(gè)字體名稱，按優(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 楷體; 勤學(xué)好問 字體樣式屬性文字的顏色以及

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

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

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

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

9、h屬性注意：border-width屬性常用像素值來定義邊框的寬度注意：border-color單獨(dú)使用是不起作用的，必須得先使用border-style來設(shè)置邊框樣式。默認(rèn)的邊框顏色是元素本身的前景色。如果沒有為邊框聲明顏色，它將與元素的文本顏色相同。如果元素沒有任何文本，邊框顏色就是其父元素的文本顏色。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屬性示例： 四個(gè)值：左上角 右上角 右下角 左下角（順時(shí)針方向）三個(gè)值：左上角 右上角和左下角 右下角 兩個(gè)值：左上角和右下角 右上角和左下角一個(gè)值：四個(gè)圓角值 .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í)踐任務(wù) 設(shè)置公司簡介頁面樣式設(shè)置整個(gè)“公司簡介”模塊寬度為920px，字號為14px；設(shè)置“公司簡介”標(biāo)題字號為16px，行高為50px，底部邊框?yàn)?px實(shí)線，顏色為#DDD；所有段落設(shè)置首行縮進(jìn)2字符，行高為2em，兩端對齊；兩處強(qiáng)調(diào)文本效果如圖所示；設(shè)置圖片寬度為220px，高度為130px，邊框?yàn)?px雙實(shí)線，邊框顏色為#0072C6；設(shè)置圖文混排效果

14、，兩張圖都向右邊浮動；設(shè)置圖片與左邊文本距離為40px（margin-left:40px;）。任務(wù)描述背景樣式背景樣式background-color設(shè)置背景顏色background-image設(shè)置背景圖像background-repeat設(shè)置背景平鋪background-attachment設(shè)置背景圖像是否固定background-position設(shè)置背景圖像位置background背景屬性的縮寫背景屬性下面樣式規(guī)則實(shí)現(xiàn)：改變整個(gè)頁面的背景色 body background-color: red; 下面樣式規(guī)則實(shí)現(xiàn)：改變h1標(biāo)題的背景色 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 是默認(rèn)值，表示圖像會跟隨頁面滾動 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如果省略某個(gè)屬性不寫出來，那么將自動為它取默認(rèn)值。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);徑向漸變徑向漸變語法列表和超鏈接樣式列表標(biāo)志類型圖形符號列表位置列表樣式列表類型屬性值顯示效果無序列表（ul）默認(rèn)值，disccirclesquare有序列表（ol）默認(rèn)值，decimal阿拉伯?dāng)?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不顯示任何符號常用屬性值修改列表項(xiàng)的標(biāo)志類型ul list-style-type : square紅茶綠茶花茶list-style-type屬性列表項(xiàng)標(biāo)志設(shè)置為圖像ul list-style-image: url(img/icon.gif);紅茶綠茶花茶注意：列表項(xiàng)標(biāo)志的圖片背景色最好設(shè)置為透明色，所以圖片格式最好為gif或者png格式list-style-image 屬性值描述inside列表項(xiàng)目標(biāo)記放置在文本以內(nèi)，且環(huán)繞文本根據(jù)標(biāo)記對齊。outside默認(rèn)值。列表項(xiàng)目標(biāo)記放置在文本以外，且環(huán)繞文本不根據(jù)標(biāo)記對齊。inherit規(guī)定

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

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

25、和 a:visited 之后 a:active 必須位于 a:hover 之后 在實(shí)際開發(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í)踐任務(wù) 設(shè)置新聞中心版塊樣式設(shè)置該模塊寬度為400px；設(shè)置“新聞中心”標(biāo)題字號為20px，行高為50px；列表項(xiàng)標(biāo)志使用icon1.jpg圖片，列表項(xiàng)行高為50px，除最后一項(xiàng)其它列表項(xiàng)設(shè)置底部邊框?yàn)?px虛線，顏色為#D1D1D1；日期向右邊浮動；列表超鏈接文本顏色為#666666，鼠標(biāo)指向列表鏈接文本顏色變?yōu)?FFA500。任務(wù)描述表格樣式和表單樣式表格樣式使用CSS樣式中的border屬性來設(shè)置表格邊框樣式table,th,td border:

29、1px solid #000;表格邊框border-collapse屬性值有collapse（合并）和separate（分離），默認(rèn)的屬性值為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