《CSS层叠样式表》课件

《层叠样式表》CSS简介CSS样式表网页外观是层叠样式表使用，你可以定义网页中元CSS****CSS的缩写素的外观，例如颜色、字体、大Cascading StyleSheets，它是一种用来控制网页样式的小、位置等语言独立于内容与内容分离，使网页结构和样式更清晰，也方便维护CSS HTML历史CSS年至今20001标准持续发展CSS3年1998-20002标准发布CSS2年1996-19983标准发布CSS1年19944诞生CSS语法CSS选择器属性用于指定要应用样式的元素定义元素的样式属性，例如颜色、字体、边框等值指定属性的值，例如红色、、12px等bold选择器CSS元素选择器类选择器12选择所有指定类型的元素选择具有特定类属性的元素HTML选择器属性选择器ID34选择具有特定属性的元素选择具有特定属性或属性值的ID元素元素选择器段落选择器选择器图片选择器DIV选择所有元素选择所有元素选择所有元素p divimg类选择器定义应用类选择器使用一个点号（）后跟一个类名，例如它用类选择器允许您将相同的样式应用于多个元素，而无需为每个元..myclass于选择所有具有该特定类名的元素，即使它们是不同的元素类型素单独指定样式您可以使用类选择器来创建样式组，并轻松地将这些样式应用于多个元素选择器ID唯一标识精确控制每个元素的属性值在整个文档使用符号和属性值来指定要ID#ID中必须是唯一的应用样式的特定元素全局影响选择器具有全局范围，可以影响页面中的任何元素ID属性选择器选择元素精确匹配通过元素的属性名称和值来选择元素例如，选择所有属性值为`href`的链接`https://www.example.com`包含匹配例如，选择所有属性包含`class`的元素`error`伪类与伪元素伪类伪元素通过添加额外的信息来扩展元素创建不存在的元素，用于添加额的选择，比如鼠标悬停、被点击外的样式，比如为文本添加装饰或获得焦点时、图标或隐藏内容层叠与继承层叠继承当多个样式规则应用于同一个元素时，会根据优先级规则确定继承是指子元素从父元素继承样式属性例如，如果一个段落元CSS哪个样式规则生效例如，如果一个元素同时拥有行内样式、内素的父元素设置了字体大小为，则该段落元素默认也会继承16px联样式和外部样式，则行内样式优先级最高，外部样式优先级最字体大小为16px低优先级规则样式冲突优先级顺序当多个样式规则应用于同一个元素时，浏览器会根据优先级规则•内联样式来决定使用哪个规则•ID选择器•类选择器•元素选择器•通配符选择器盒子模型内容区域内边距边框外边距内容区域包含文本、图片或其内边距是内容区域和边框之间边框是围绕内容区域和内边距外边距是边框和相邻元素之间他元素的空白区域的边框的空白区域内边距定义作用属性内边距（）指的是内容区域与边内边距用于控制内容与边框之间的空白区Padding padding-top,padding-right,padding-框之间的距离域，为内容提供呼吸空间，提升页面视觉bottom,padding-left效果外边距定义类型外边距用于控制元素周有四种外边距上margin margin-top围的空间，也就是元素与其他元、右、下margin-right margin-素或浏览器窗口边框之间的距离、左bottom margin-left合并单位相邻元素的外边距会发生合并，外边距可以使用像素、百分px即取两者中较大的值作为最终的比、等单位%em外边距边框边框宽度边框样式使用属性设置边使用属性设置边border-width border-style框的宽度，例如框的样式，例如border-width:border-style:、、10px solidborder-style:dashedborder-style:dotted边框颜色使用属性设置边框的颜色，例如border-color border-color:red背景属性背景颜色背景图像背景重复背景位置使用属性使用属性使用属使用属`background-color``background-image``background-repeat``background-position`设置元素的背景颜色设置元素的背景图像性控制背景图像的重复方式性设置背景图像的位置文本属性字体颜色设置文本的字体系列、大小、样式等定义文本的颜色，可以使用颜色名称或十六进制代码对齐控制文本的对齐方式，例如左对齐、居中、右对齐字体属性衬线字体无衬线字体手写字体在每个字符的笔画末端具有装饰性的小线，字符笔画没有装饰性的小线，简洁现代，适模仿手写风格，更具个性和创意，常用字体提高了可读性常用字体有合标题和网页设计常用字体有、有、等Times NewArial ComicSans MSBrush ScriptMT、等等Roman GeorgiaHelvetica列表样式列表类型自定义样式提供了两种主要类型的列表样式可以使用属性来更改列表项目的CSS CSS无序列表和有序列表标记、颜色和间距列表标记编号样式通过属性可以控制无有序列表的编号样式可以通过`list-style-type``list-序列表中的标记类型属性进行调整style-type`元素定位定位属性偏移属性层叠顺序使用属性可以控制元素的定使用、、和使用属性可以控制元素的层`position``top``right``bottom``left``z-index`位方式，包括、、属性可以调整元素相对于父元素或视窗叠顺序，数值越大，元素越靠前`static``relative`、和的位置`absolute``fixed``sticky`浮动布局定位将元素从标准文档流中移除，并允许您使用、、和left righttop属性来精确控制元素的位置bottom包裹浮动元素会包裹周围的内容，可以用于创建布局，例如侧边栏或图像环绕文字清除清除浮动元素的影响，防止其影响其他元素的布局弹性布局灵活排列1弹性布局提供了一种更灵活的方式来排列网页元素，允许元素根据容器的大小自动调整响应式设计2非常适合创建响应式网站，因为元素可以根据不同的屏幕尺寸自适应地调整大小和位置简单易用3使用少量属性，就可以轻松地控制元素的排列、方向、对齐方式和大小网格布局灵活高效1轻松构建复杂网页布局，实现高度自定义响应式设计2自动适应不同屏幕尺寸，优化用户体验代码简洁3使用简洁的语法定义网格结构，提高开发效率尺寸单位像素百分比px%12最常用的单位，表示屏幕上的单个像素点相对父元素的尺寸，灵活适应不同屏幕尺寸em rem34相对于父元素的字体大小，方便调整整体字体比例相对于根元素的字体大小，更易于控制全局字体大小html响应式设计自适应布局用户体验优化响应式设计允许网站自动调整其布局和内容以适应不同屏幕尺寸通过优化页面布局和内容可读性，响应式设计提供一致且友好的和设备用户体验，无论用户使用哪种设备预处理器CSS是一个成熟的预处理器，它允许是另一个受欢迎的预处理器，它是一种更灵活的预处理器，它支持多Sass CSSLess CSSStylus您使用变量、嵌套规则和混合等功能来编写提供了类似于的功能，但语法略有不种语法，包括缩进和类似于的语法Sass Python更简洁、更易维护的代码同CSS框架与库CSSBootstrap TailwindCSS MaterializeCSS一个流行的、响应式的框架，提供预先一个基于实用程序类的框架，允许您通过组一个基于规范的框CSS GoogleMaterial Design构建的组件，用于布局、按钮、导航等合类来创建自定义样式架，提供现代、整洁的外观和感觉最佳实践CSS语义化模块化规范化可读性使用语义化的标签，例将代码分解成多个独立的遵循一致的命名规范，例如使使用缩进、空格和注释等方法HTML CSS如，，，文件，每个文件负责特定模块用驼峰式命名法或下划线命名来提高代码的可读性，方便调header navmain，以便于理解和维护代的样式，提高代码的可维护性法，使代码更易读试和维护footer码和可重用性性能优化CSS减少请求压缩代码HTTP CSS合并文件，减少页面加载的使用工具压缩代码，减少文件CSS CSS请求次数大小，提高加载速度HTTP使用选择性加载CSS SpritesCSS将多个图片合并成一张图片，减根据需要加载不同的文件，避CSS少请求次数免加载不必要的样式HTTP未来展望CSS不断发展，未来将更加强大、等新CSS CSSModules CSS-in-JS技术将继续优化的开发流程，提升效率和可维护性CSS下一代规范将进一步完善布局和动画功能，提供更灵活的样CSS式控制方式将与其他技术深度融合，构建更加强大的CSS Web体验Web。