《CSS样式与布局》课件.ppt

《CSS样式与布局》欢迎来到《CSS样式与布局》的课程！本课程将带你深入了解CSS的基本原理和高级技巧，掌握使用CSS创建精美网页界面和交互式体验的方法。让我们开始探索CSS的奇妙世界吧！

CSS简介定义CSS（层叠样式表）是一种用于控制网页样式的语言。它允许我们定义元素的外观，例如颜色、字体、大小、位置等。作用CSS使我们能够将网站的外观和结构与内容分离，提高网站的可维护性和可读性。它也提供了强大的工具来实现创意的设计和交互体验。

CSS的基本语法选择器选择器用于指定要应用样式的元素。例如：h1,.myClass,#myId属性属性用于定义元素的样式特性。例如：color,font-size,margin,padding值值用于设置属性的值。例如：red,16px,10px,5em

CSS选择器元素选择器选择所有指定类型的元素。例如：p,h1,div类选择器选择具有特定类名的元素。例如：.myClassID选择器选择具有特定ID的元素。例如：#myId后代选择器选择某个元素的所有后代元素。例如：divp

文本样式字体font-family:Arial,sans-serif大小font-size:16px,1.5em颜色color:red,#FF0000对齐text-align:center,left,right

字体样式1字体系列Arial,TimesNewRoman,Helvetica,Verdana2字体粗细font-weight:bold,normal,lighter,bolder3字体风格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内容内容区域，包含元素的文本和图片。2内边距padding，内容区域和边框之间的空白区域。3边框border，元素周围的边框。4外边距margin，元素与其他元素之间的空白区域。

边框与圆角边框border:1pxsolidblack圆角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

Flexbox容器属性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-reverse

Flexbox项目属性flex-grow元素在剩余空间中的扩展比例flex-shrink元素在空间不足时的收缩比例flex-basis元素的默认大小align-self元素在容器中的对齐方式

网格布局Grid定义网格容器display:grid;创建网格行和列grid-template-columns,grid-template-rows放置网格项目grid-row-start,grid-column-start

Grid容器属性grid-template-columns定义网格列的宽度和间距grid-template-rows定义网格行的高度和间距grid-template-areas定义网格区域的命名和排列方式grid-gap设置网格行和列之间的间距

Grid项目属性grid-column-start指定项目开始所在的列grid-row-st