《CSS层叠样式表》课件

层叠样式表CSSCSS是一种样式表语言,用于描述HTML文档的表现形式它是网页设计中不可或缺的一部分,为网页开发人员提供了强大的样式控制能力什么是CSS简介的作用的优势发展历程CSS CSSCSS CSSCSS（Cascading Style通过CSS,网页设计师可以将内•灵活性强,可以快速调整页CSS自1996年首次提出以来,Sheets，层叠样式表）是一种容与表现分离,专注于内容的面布局和样式经历了多个版本的发展和完用于描述HTML文档样式的语结构和语义,并通过样式表来善如今已成为网页设计不可•提高网页加载速度,减轻服言它可以控制网页的布局、控制页面的视觉呈现这不仅或缺的重要工具务器负担颜色、字体等视觉效果提高了页面的美观性,也增强•增强网页的可访问性和兼了可维护性容性•提高代码的可读性和可维护性的作用CSS美化网页跨设备兼容CSS可以控制网页的颜色、字体、大CSS可以自动适配不同尺寸的设备,确小、布局等,让网页更加美观大方保网页在手机、平板和电脑上都能正常显示代码简洁提高加载速度CSS可以将页面样式与内容分离,使得CSS可以优化页面加载速度,提升用户HTML代码更加简洁清晰体验的基本语法CSS声明规则1CSS由一系列规则组成,每个规则以选择器开始,随后是一对大括号包裹的声明块属性值对-2在声明块内,每个属性后跟一个冒号,后跟一个值多个属性-值对用分号隔开注释写法3CSS支持注释,以/*开头,以*/结尾注释可以放在任何位置,用于解释代码选择器CSS标签选择器类选择器12通过标签名称选择元素，如通过类名选择元素，如.my-h

1、p、div等class可以同时应用多个类选择器通用选择器ID34通过唯一的ID选择元素，如使用*选择所有元素常用于#my-id每个元素只能有一重置样式或选择所有兄弟元个ID素元素选择器瞄准元素简单高效元素选择器通过标签名称直接选元素选择器简单实用,可以快速应择网页上的HTML元素,如h

1、p、用样式到网页上的各种元素div等广泛应用元素选择器是CSS中最基础、最常用的选择器之一,在网页设计中应用广泛类选择器按类选择优先级控制样式复用类选择器使用.符号来选择具有相同类名的类选择器的优先级高于元素选择器,但低于类选择器允许我们复用样式,提高代码的可元素这样可以对一组相似的元素应用相同ID选择器通过合理使用类选择器,可以灵维护性和复用性同一个类可被多个元素共的样式活控制样式的应用优先级享,增强了样式的统一性选择器ID唯一标识符高优先级ID选择器使用#加上唯一的标识ID选择器的优先级高于元素选择符来选择DOM元素每个ID在器和类选择器,因此可以轻松覆整个页面中应该是唯一的盖其他样式交互JavaScriptID选择器常用于JavaScript选择和操作特定的DOM元素后代选择器定义语法应用后代选择器用于选择元素的所有后代元素,后代选择器使用空格来描述后代关系,如div后代选择器常用于设置特定元素在父元素内包括子元素、孙元素以及更深层次的后代p选择div元素内部的所有p元素的样式,如设置列表项中文字的颜色子选择器定义作用示例注意事项子选择器用于选择父元素的直子选择器可以精确地定位页面例如，divp会选择所有div子选择器只会选择直接子元接子元素它使用符号来表元素,帮助开发者更好地控制元素的直接子元素p素,不会选择更深层次的后代示页面布局和样式元素相邻兄弟选择器选择紧邻元素灵活布局选择模式相邻兄弟选择器可以选择同一级中紧挨使用相邻兄弟选择器可以让网页布局更相邻兄弟选择器使用+符号,选择紧挨着的元素,这对于改变相邻的元素样式很加灵活,比如轻松切换相邻元素的显示与在前一个元素后面的兄弟元素有用隐藏通用兄弟选择器快速筛选通用兄弟选择器可以快速选择相邻的所有元素,提高CSS编写效率关联性强该选择器能够精准选中相关联的元素,体现了CSS的层叠性灵活应用通用兄弟选择器可与其他选择器结合使用,满足不同的页面布局需求样式属性CSS定义样式样式属性种类属性优先级属性继承CSSCSS层叠样式表是用于定义CSS提供了丰富的样式属性,涵当多个样式规则应用于同一元某些CSS属性会被子元素自动网页内容的样式和布局的语盖颜色、字体、文本、背景、素时,CSS会根据选择器的优先继承,开发者可利用这一特性言它通过各种选择器和属性盒模型、定位等各个方面这级来确定最终的样式效果开来简化样式编写但也需注意对HTML元素进行样式化些属性可以精细地控制网页元发者需要理解优先级规则以达哪些属性可以被继承素的视觉效果到预期效果颜色属性色彩模式色彩模式十六进制色码RGB CMYK通过混合红Red、绿Green和蓝Blue三在印刷领域使用的色彩模式,通过混合青用六位十六进制数表示RGB颜色的方式,如种基本色彩来制作各种色彩的方式Cyan、品红Magenta、黄Yellow和黑#FF0000表示纯红色Key四种颜色来制作字体属性字体族字体大小CSS提供了五大字体族:衬线字体、无衬线字体、等宽字体、草书字字体大小可以使用多种单位如像素、百分比、em等合理选择字体体和符号字体各种字体风格有不同的特点和适用场景大小有利于提高页面可读性字体粗细字体样式字体粗细从细到粗分为100到900不等的9个级别不同粗细的字体字体样式包括正常、斜体和倾斜斜体用于强调,倾斜用于装饰合用于突出重点或区分层级理使用可以丰富排版效果文本属性字体设置文本对齐可以设置字体系列、字体大小、字体通过设置文本对齐方式，可以控制文粗细等属性，控制文本的显示效果本在容器内的水平或垂直位置文本装饰文本间距可以设置文本的下划线、删除线、上通过设置行高、字间距等属性，可以划线等装饰效果，增加文本的视觉效控制文本的间隔距离，优化排版效果果背景属性背景颜色背景图像可以设置元素的背景颜色,使用可以为元素添加背景图像,并控关键字、十六进制数或RGB值等制图像的平铺方式、位置和大方式指定小背景渐变多重背景通过线性或径向渐变可以创造出元素可以同时设置多个背景,叠丰富多彩的背景效果加在一起形成复杂的背景效果盒模型内容区内边距12包含元素的实际内容，例如文内容区与边框之间的空间控本或图像制内容与边框之间的距离边框外边距34包围内容和内边距的线条可元素与其他元素之间的距离设置宽度、样式和颜色控制元素之间的间隔内边距内边距定义内边距设置内边距作用内边距是元素内容区域与边框之间的空间可以使用padding属性单独设置每个方向的内边距能增加元素的可读性和美观性合理它决定了元素内容与边框之间的距离内边距，也可以一次性设置所有方向的内边设置内边距是布局的关键距外边距外边距的定义外边距的设置外边距的应用外边距是指元素周围的空间,可以用来控制可以单独设置上、右、下、左四个方向的外外边距常用于控制块级元素之间的间距,以元素与其他元素之间的距离边距,也可以使用简写的方式及调整元素在页面上的位置边框边框的作用边框的样式边框的尺寸边框的颜色边框为元素添加了一个边框CSS支持多种边框样式,如实可以设置边框宽度,单位可以边框颜色可以使用颜色关键线,可以增强可见度并为内容线、虚线、点线等,可以根据是像素、百分比或em等宽字、十六进制值或RGB值等方划分区域边框具有颜色、宽需要选择合适的样式边框样度越大,边框越粗合理设置式设置设置不同颜色可以帮度和样式等属性式可以单独设置在某个方向边框宽度可以增强视觉效果助元素更好地区分定位静态定位相对定位元素按照正常文档流进行定位相对于自身的正常位置进行定默认情况下，所有元素都是静态位可以使用top、right、定位的bottom、left属性来调整位置绝对定位固定定位相对于最近的已定位（非static）相对于视口（浏览器窗口）进行的祖先元素进行定位如果没有定位即使页面滚动,元素也会保这样的祖先，则相对于文档body持在同一位置进行定位相对定位基于元素当前位置通过偏移属性调整12相对定位使元素相对于其本身可以使用top、right、bottom原来的位置进行定位,保留原有和left属性来设置元素的偏移位空间置层级控制3相对定位元素可以通过z-index属性控制元素的层级关系绝对定位固定位置绝对定位会脱离正常文档流,使元素能够以相对于浏览器或者父元素的固定位置进行定位层级控制绝对定位的元素可以设置z-index属性来控制层级,从而实现覆盖或被覆盖的效果灵活调整绝对定位元素可以使用top、right、bottom和left属性来自由调整位置,适用于需要精确定位的场景固定定位元素不随页面滚动参考视口定位固定定位的元素会固定在页面的固定定位的元素会相对于浏览器某个位置,即使页面滚动也不会随窗口视口进行定位,而不是相对之移动于父元素应用场景广泛固定导航栏、返回顶部按钮、悬浮广告等都是固定定位的常见应用浮动什么是浮动？浮动的特点浮动的应用注意事项浮动是CSS中一个重要的概念,•脱离文档流,不占据原有空浮动常用于构建网页布局,如•浮动元素不会超出其包含它可以让元素脱离正常的文档间实现图文环绕、横向排列等效块的范围流,并沿着左侧或右侧进行定果同时也可以用于实现清除•会产生水平方向的移动•浮动元素会覆盖其他的普位这样可以实现图文环绕等浮动通流内容效果•会影响其他元素的布局和•使用浮动后需要注意清除位置浮动,防止布局混乱清除浮动使用属性使用属性使用伪元素clear overflowafter在浮动元素后添加一个空的div元素，并给将父元素的overflow属性设置为auto或在父元素的最后添加一个空的after伪元该元素设置clear:both属性可以清除浮动hidden可以触发BFC（块级格式化上下素，并给该伪元素设置clear:both属性可以文），从而清除浮动清除浮动单位CSS绝对单位px、cm、mm等,指定一个固定的长度值易于预测,但无法适应不同设备大小相对单位%、em、rem等,相对于父元素或根元素的尺寸更易于适应不同设备视口单位vw、vh、vmin、vmax,相对于视口尺寸更灵活地适应各种分辨率继承CSS属性继承层叠顺序12许多CSS属性都可以从父元素当一个属性没有被子元素设置继承到子元素,子元素会继承父时,子元素会继承父元素的属性元素的样式值但是,更高层级的选择器会覆盖较低层级的选择器关键字关键字initial inherit34可以使用initial关键字将属性可以使用inherit关键字显式地重置为默认值,而不是继承自父继承父元素的属性值元素优先级CSS优先级规则继承和特异性优先级计算CSS优先级决定了样式如何应用于元素子元素可以继承父元素的样式但是当存在优先级以数字表示,从内联样式

1000、ID重要性、特异性和来源决定了CSS的应用优冲突时,特异性更高的选择器会覆盖继承的选择器

100、类选择器10到元素选择器先级样式1逐步递减。