css樣式表(五)課件

CSS樣式表2020/10/131CSS樣式表2020/10/131CSS樣式表CSS是CascadingStyleSheets的英文縮寫，譯成中文的意思是層疊樣式表作用：可以在同一網(wǎng)頁中使用不同的網(wǎng)頁樣式，使網(wǎng)頁的元素更豐富更多元化2020/10/132CSS樣式表CSS是CascadingStyle引用樣式表的三種方式

直接插入式內(nèi)部文檔頭方式外部文件方式2020/10/133引用樣式表的三種方式直接插入式直接插入式作用范圍：只作用于本標(biāo)志插入格式：例：<tablestyle=‘color:red;

font-size:10pt;’>2020/10/134直接插入式作用范圍：只作用于本標(biāo)志2020/10/134內(nèi)部文檔頭插入方式作用范圍：定義的本網(wǎng)頁文件內(nèi)插入格式：<style>p{font-family:’宋體’;color:red;}pre{font-family:’黑體’;color:yellow}</style>2020/10/135內(nèi)部文檔頭插入方式作用范圍：定義的本網(wǎng)頁文件內(nèi)2020/10引用外部文件方式

作用范圍：所有引用該外部文件的網(wǎng)頁插入方式：<linkrel=‘stylesheet’href=‘文件名.css’type=‘text/css’>2020/10/136引用外部文件方式作用范圍：所有引用該外部文件的網(wǎng)頁2020如何建立樣式表第一種方式：HTML標(biāo)志{標(biāo)示屬性：屬性值；標(biāo)志屬性：屬性值；……}第二種方式：.類名稱{標(biāo)示屬性：屬性值；標(biāo)志屬性：屬性值；……}2020/10/137如何建立樣式表第一種方式：2020/10/137如何建立樣式表第三種方式：HTML標(biāo)志1，HTML標(biāo)志2，……{標(biāo)示屬性：屬性值；標(biāo)志屬性：屬性值；……}2020/10/138如何建立樣式表第三種方式：2020/10/138用CSS樣式表設(shè)定字體樣式設(shè)置字體的樣式：font-family:黑體/仿宋體/……設(shè)置字體的風(fēng)格：font-style:normal/itallic設(shè)置字體的加粗：font-weight:bold/bolder/lighter/100-900設(shè)置字體的大?。篺ont-size:<絕對尺度>/<相對尺度>/<比例尺度>2020/10/139用CSS樣式表設(shè)定字體樣式設(shè)置字體的樣式：2020/10/1用CSS樣式表設(shè)置邊框樣式設(shè)置邊框顏色：border-color：顏色值；設(shè)置邊框粗細(xì)：border-width：數(shù)值設(shè)置邊框的樣式：border-style：solid/double/dotted/dashed2020/10/1310用CSS樣式表設(shè)置邊框樣式設(shè)置邊框顏色：2020/10/13如何設(shè)置邊框不顯示border-top：none；border-bottom：none；border-left：none；border-right：none；2020/10/1311如何設(shè)置邊框不顯示border-top：none；2020/用CSS樣式表設(shè)置超鏈接的顏色未鏈接前的顏色a:link{text-decoration:none;color:blue}鏈接過后的顏色a:visited{text-decoration:none;color:red}鏈接活動(dòng)時(shí)的顏色a:active{text-decoration:none;color:green}鏈接盤旋時(shí)的顏色a:hover{text-decoration:none;color:yellow}2020/10/1312用CSS樣式表設(shè)置超鏈接的顏色未鏈接前的顏色2020/10/設(shè)置邊框顏色分別設(shè)定邊框顏色：border-top-color：顏色值；border-bottom-color：顏色值；border-left-color：顏色值；border-right-color：顏色值；2020/10/1313設(shè)置邊框顏色分別設(shè)定邊框顏色：2020/10/1313設(shè)定文本樣式設(shè)定文本的樣式：text-decoration:underline/overline/line-throungh/none設(shè)定文本的對齊：text-align:left/right/center/justify2020/10/1314設(shè)定文本樣式設(shè)定文本的樣式：2020/10/1314用CSS樣式表在HTML標(biāo)簽內(nèi)，實(shí)現(xiàn)元素隱藏

第一種方式：隱藏：style=‘visibility:hidden’顯示：style=‘visibility:visible’

第二種方式隱藏：style=‘display:none’顯示：style=‘display:’2020/10/1315用CSS樣式表在HTML標(biāo)簽內(nèi)，實(shí)現(xiàn)元素隱藏

第一種方式：2用CSS樣式表在JavaScript內(nèi)，實(shí)現(xiàn)元素隱藏第一種方式隱藏：元素名稱.style.visibility=‘hidden’顯示：元素名稱.style.visibility=‘visible’第二種方式隱藏：元素名稱.style.display=‘none’顯示元素名稱.style.display=‘’2020/10/1316用CSS樣式表在JavaScript內(nèi)，實(shí)現(xiàn)元素隱藏第一種方用CSS樣式表實(shí)現(xiàn)定位絕對定位HTML標(biāo)志{position:absolute;left:像素值;top:像素值;z-index:數(shù)值}相對定位HTML標(biāo)志{position:relative;left:像素值;top:像素值;z-index:數(shù)值}2020/10/1317用CSS樣式表實(shí)現(xiàn)定位絕對定位2020/10/1317用CSS樣式表設(shè)置滾動(dòng)條<styletype=‘text/css’>body{scrollbar-face-color：顏色值；//滾動(dòng)條頁面顏色scrollbar-track-color：顏色值；//滾動(dòng)條底面顏色scrollbar-arrow-color：顏色值；//滾動(dòng)條兩端箭頭顏色scrollbar-highlight-color：顏色值；//滾動(dòng)條斜面和左面顏色scrollbar-shadow-color：顏色值；//滾動(dòng)條下斜面和右面顏色}</style>2020/10/1318用CSS樣式表設(shè)置滾動(dòng)條<styletype=‘text/用CSS樣式表設(shè)置背景圖片設(shè)置背景圖片background-image:url(絕對路徑/相對路徑)；設(shè)置圖片不平鋪background-repeat:no-repeat;設(shè)置圖片的位置是固定的background-attachment:fixed;設(shè)置圖片的位置是居中的background-position:center;2020/10/