《CSS样式与布局》课件

《样式与布局》CSS欢迎来到《样式与布局》的课程！本课程将带你深入了解的基CSS CSS本原理和高级技巧，掌握使用创建精美网页界面和交互式体验的方CSS法让我们开始探索的奇妙世界吧！CSS简介CSS定义作用（层叠样式表）是一种用于控制网页样式的语言它允使我们能够将网站的外观和结构与内容分离，提高网站CSS CSS许我们定义元素的外观，例如颜色、字体、大小、位置等的可维护性和可读性它也提供了强大的工具来实现创意的设计和交互体验的基本语法CSS选择器属性值选择器用于指定要应用样式的元素属性用于定义元素的样式特性例值用于设置属性的值例如red,例如如h1,.myClass,#myId color,font-size,margin,16px,10px,5empadding选择器CSS元素选择器选择所有指定类型的元素例如p,h1,div类选择器选择具有特定类名的元素例如.myClass选择器ID选择具有特定的元素例如ID#myId后代选择器选择某个元素的所有后代元素例如div p文本样式字体大小颜色对齐font-family:Arial,sans-font-size:16px,

1.5em color:red,#FF0000text-align:center,left,serif right字体样式字体系列1Arial,Times NewRoman,Helvetica,Verdana字体粗细2font-weight:bold,normal,lighter,bolder字体风格3font-style:italic,normal,oblique文本装饰4text-decoration:underline,overline,line-through颜色与背景颜色背景颜色背景图片color:red,#FF0000,rgb255,0,0background-color:blue,#0000FF background-image:urlmyImage.jpg盒模型内容1内容区域，包含元素的文本和图片内边距2，内容区域和边框之间的空白区域padding边框3，元素周围的边框border外边距4，元素与其他元素之间的空白区域margin边框与圆角边框圆角border:1px solidblack border-radius:5px内边距和外边距内边距外边距padding:10px;padding-top:20px;margin:10px;margin-left:20px;显示属性与定位displayblock,inline,inline-block,flex,gridpositionstatic,relative,absolute,fixed浮动与清除浮动浮动清除浮动float:left,right clear:left,right,both弹性布局Flexbox定义容器display:flex;设置方向flex-direction:row,column对齐项目justify-content,align-items容器属性Flexboxflex-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-reverse项目属性Flexboxflex-grow flex-shrink flex-basis align-self元素在剩余空间中的扩展元素在空间不足时的收缩元素的默认大小元素在容器中的对齐方式比例比例网格布局Grid定义网格容器display:grid;创建网格行和列grid-template-columns,grid-template-rows放置网格项目grid-row-start,grid-column-start容器属性Gridgrid-template-columns定义网格列的宽度和间距grid-template-rows定义网格行的高度和间距grid-template-areas定义网格区域的命名和排列方式grid-gap设置网格行和列之间的间距项目属性Gridgrid-column-start grid-row-start grid-column-end grid-row-end指定项目开始所在的列指定项目开始所在的行指定项目结束所在的列指定项目结束所在的行多列布局column-count column-width column-gap定义元素包含的列数定义每一列的宽度定义列之间的间距层叠与继承层叠继承规则可能会冲突，规则的子元素可以从父元素继承一些样CSS CSS优先级决定了最终的样式效果式，例如字体颜色、字体大小等的优先级CSS！important1最高优先级内联样式2属性style选择器ID3#myId类选择器

4.myClass元素选择器5div通用选择器6*伪类与伪元素伪类伪元素用于选择元素的特殊状态例如用于选择元素的特定部分例如:hover,:focus,:active::before,::after过渡与动画过渡1transition:property durationtiming-function delay;动画2animation:name durationtiming-function delayiteration-count directionfill-mode play-state;变形与滤镜变形滤镜transform:translate,rotate,scale,skew filter:blur,brightness,contrast,grayscale,hue-rotate,invert,opacity,sepia响应式设计移动端桌面端平板端适配手机屏幕，提供最佳的移动体验适配电脑屏幕，提供最佳的桌面体验适配平板屏幕，提供最佳的平板体验媒体查询123设备类型屏幕尺寸方向例如例如例如screen,print max-width,min-width portrait,landscape单位与尺寸像素，最常用的单位px百分比，相对于父元素的大小%em相对于父元素的字体大小rem相对于根元素的字体大小可访问性语义化颜色对比度键盘导航使用合适的元素，例如确保文字和背景颜色对比度足够高确保网站可以使用键盘进行导航HTML h1,h2,p,ul,li性能优化压缩文件压缩和文件以减小文件大小CSS JavaScript减少请求HTTP合并文件和文件CSS JavaScript延迟加载延迟加载页面中不重要的图片和资源框架与预处理器CSS框架预处理器1Bootstrap,Tailwind CSS2Less,Sass的语法与用法Less变量@color:#f00;嵌套.myClass{.child{color:@color;}}混合.myMixin@color{color:@color;}.myClass{.myMixin#0f0;}的语法与用法Sass变量嵌套混合$color:#f00;.myClass{.child{color:$color;}}@mixin myMixin$color{color:$color;}.myClass{@includemyMixin#0f0;}工程化实践CSS总结与展望通过本课程，我们学习了的基础知识、常用技巧以及一些高级特性未来，将继续发展，不断涌现新的特性和技CSS CSS术让我们保持学习和探索，用创造更加精彩的网页体验！CSS。