《CSS樣式與布局》課件

《CSS樣式與布局》歡迎來(lái)到《CSS樣式與布局》的課程！本課程將帶你深入了解CSS的基本原理和高級(jí)技巧，掌握使用CSS創(chuàng)建精美網(wǎng)頁(yè)界面和交互式體驗(yàn)的方法。讓我們開(kāi)始探索CSS的奇妙世界吧！CSS簡(jiǎn)介定義CSS（層疊樣式表）是一種用于控制網(wǎng)頁(yè)樣式的語(yǔ)言。它允許我們定義元素的外觀，例如顏色、字體、大小、位置等。作用CSS使我們能夠?qū)⒕W(wǎng)站的外觀和結(jié)構(gòu)與內(nèi)容分離，提高網(wǎng)站的可維護(hù)性和可讀性。它也提供了強(qiáng)大的工具來(lái)實(shí)現(xiàn)創(chuàng)意的設(shè)計(jì)和交互體驗(yàn)。CSS的基本語(yǔ)法選擇器選擇器用于指定要應(yīng)用樣式的元素。例如：h1,.myClass,#myId屬性屬性用于定義元素的樣式特性。例如：color,font-size,margin,padding值值用于設(shè)置屬性的值。例如：red,16px,10px,5emCSS選擇器元素選擇器選擇所有指定類型的元素。例如：p,h1,div類選擇器選擇具有特定類名的元素。例如：.myClassID選擇器選擇具有特定ID的元素。例如：#myId后代選擇器選擇某個(gè)元素的所有后代元素。例如：divp文本樣式字體font-family:Arial,sans-serif大小font-size:16px,1.5em顏色color:red,#FF0000對(duì)齊text-align:center,left,right字體樣式1字體系列Arial,TimesNewRoman,Helvetica,Verdana2字體粗細(xì)font-weight:bold,normal,lighter,bolder3字體風(fēng)格font-style:italic,normal,oblique4文本裝飾text-decoration:underline,overline,line-through顏色與背景顏色color:red,#FF0000,rgb(255,0,0)背景顏色background-color:blue,#0000FF背景圖片background-image:url("myImage.jpg")盒模型1內(nèi)容內(nèi)容區(qū)域，包含元素的文本和圖片。2內(nèi)邊距padding，內(nèi)容區(qū)域和邊框之間的空白區(qū)域。3邊框border，元素周?chē)倪吙颉?外邊距margin，元素與其他元素之間的空白區(qū)域。邊框與圓角邊框border:1pxsolidblack圓角border-radius:5px內(nèi)邊距和外邊距內(nèi)邊距padding:10px;padding-top:20px;外邊距margin:10px;margin-left:20px;顯示屬性與定位displayblock,inline,inline-block,flex,gridpositionstatic,relative,absolute,fixed浮動(dòng)與清除浮動(dòng)浮動(dòng)float:left,right清除浮動(dòng)clear:left,right,both彈性布局Flexbox定義容器display:flex;設(shè)置方向flex-direction:row,column對(duì)齊項(xiàng)目justify-content,align-itemsFlexbox容器屬性flex-directionrow,column,row-reverse,column-reversejustify-contentflex-start,flex-end,center,space-between,space-around,space-evenlyalign-itemsflex-start,flex-end,center,stretch,baselineflex-wrapnowrap,wrap,wrap-reverseFlexbox項(xiàng)目屬性flex-grow元素在剩余空間中的擴(kuò)展比例flex-shrink元素在空間不足時(shí)的收縮比例flex-basis元素的默認(rèn)大小align-self元素在容器中的對(duì)齊方式網(wǎng)格布局Grid定義網(wǎng)格容器display:grid;創(chuàng)建網(wǎng)格行和列g(shù)rid-template-columns,grid-template-rows放置網(wǎng)格項(xiàng)目grid-row-start,grid-column-startGrid容器屬性grid-template-columns定義網(wǎng)格列的寬度和間距grid-template-rows定義網(wǎng)格行的高度和間距grid-template-areas定義網(wǎng)格區(qū)域的命名和排列方式grid-gap設(shè)置網(wǎng)格行和列之間的間距Grid項(xiàng)目屬性grid-column-start指定項(xiàng)目開(kāi)始所在的列g(shù)rid-row-start指定項(xiàng)目開(kāi)始所在的行g(shù)rid-column-end指定項(xiàng)目結(jié)束所在的列g(shù)rid-row-end指定項(xiàng)目結(jié)束所在的行多列布局column-count定義元素包含的列數(shù)column-width定義每一列的寬度column-gap定義列之間的間距層疊與繼承層疊CSS規(guī)則可能會(huì)沖突，CSS規(guī)則的優(yōu)先級(jí)決定了最終的樣式效果。繼承子元素可以從父元素繼承一些樣式，例如字體顏色、字體大小等。CSS的優(yōu)先級(jí)1！important最高優(yōu)先級(jí)2內(nèi)聯(lián)樣式style屬性3ID選擇器#myId4類選擇器.myClass5元素選擇器div6通用選擇器*偽類與偽元素偽類用于選擇元素的特殊狀態(tài)。例如：:hover,:focus,:active偽元素用于選擇元素的特定部分。例如::before,::after過(guò)渡與動(dòng)畫(huà)1過(guò)渡transition:propertydurationtiming-functiondelay;2動(dòng)畫(huà)animation:namedurationtiming-functiondelayiteration-countdirectionfill-modeplay-state;變形與濾鏡變形transform:translate,rotate,scale,skew濾鏡filter:blur,brightness,contrast,grayscale,hue-rotate,invert,opacity,sepia響應(yīng)式設(shè)計(jì)移動(dòng)端適配手機(jī)屏幕，提供最佳的移動(dòng)體驗(yàn)。桌面端適配電腦屏幕，提供最佳的桌面體驗(yàn)。平板端適配平板屏幕，提供最佳的平板體驗(yàn)。媒體查詢1設(shè)備類型例如：screen,print2屏幕尺寸例如：max-width,min-width3方向例如：portrait,landscape單位與尺寸像素px，最常用的單位百分比%，相對(duì)于父元素的大小em相對(duì)于父元素的字體大小rem相對(duì)于根元素的字體大小可訪問(wèn)性語(yǔ)義化使用合適的HTML元素，例如h1,h2,p,ul,li顏色對(duì)比度確保文字和背景顏色對(duì)比度足夠高鍵盤(pán)導(dǎo)航確保網(wǎng)站可以使用鍵盤(pán)進(jìn)行導(dǎo)航性能優(yōu)化壓縮文件壓縮CSS和JavaScript文件以減小文件大小減少HTTP請(qǐng)求合并CSS文件和JavaScript文件延遲加載延遲加載頁(yè)面中不重要的圖片和資源CSS框架與預(yù)處理器框架Bootstrap,TailwindCSS1預(yù)處理器Less,Sass2Less的語(yǔ)法與用法變量@color:#f00;嵌套.myClass{.child{color:@color;}}混合.myMixin(@color){color:@color;}.myClass{.myMixin(#0f0);}Sass的語(yǔ)法與用法變量$color:#f00;嵌套.myClass{.child{color:$color;}}混合@m