DOM创建元素 document.write() innerHTML document.createElement() 区别:document.write 是直接将内容写入页面的内容流，会导致页面全部重绘innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘innerHTML 复制节点的时候，不会复制原先节点的事件，会存在内存泄露问题如果页面创建元素很多，建议使用 innerHTML 因其效率更高（不要拼接字符串，采取数组形式拼接）如果页面创建元素较少，建议使用 createElement() 总结：不同浏览器下，innerHTML 效率要比 creatElement 高添加节点1.node.appendChild(child) node.appendChild() 方法将一个节点添加到指定父节点的子节点列表 末尾 。类似于 CSS 里面的 after 伪元素。2.node.insertBefore(child, 指定元素)node.insertBefore() 方法将一个节点添加到父节点的指定子节点 前面 。类似于 CSS 里面的 before 伪元素。删除节点node.removeChild(child) node.removeChild() 方法从 DOM 中删除一个子节点，返回删除的节点。复制节点node.cloneNode()node.cloneNode() 方法返回调用该方法的节点的一个副本。 注意：如果括号参数为 空或者为 false ，则是 浅拷贝 ，即只克隆复制节点本身，不克隆里面的子节点。如果括号参数为 true ，则是 深度拷贝 ，会复制节点本身以及里面所有的子节点。替换节点parentNode.replaceChild(newChild, oldChild); 用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。改变元素内容element.innerText 从起始位置到终止位置的内容, 但它去除 html 标签， 同时空格和换行也会去掉element.innerHTML 起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行常用元素的属性操作 1.innerText、innerHTML 改变元素内容 2.src、href 3.id、alt、title表单元素的属性操作利用 DOM 可以操作如下表单元素的属性：type、value、checked、selected、disabled 样式属性操作我们可以通过 JS 修改元素的大小、颜色、位置等样式。1.element.style //行内样式操作 2.element.className // 类名样式操作 注意： 1.JS 里面的样式采取驼峰命名法 比如 fontSize、 backgroundColor 2.JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高 3. 如果样式修改较多，可以采取操作类名方式更改元素样式。 4. class因为是个保留字，因此使用className来操作元素类名属性 5. className 会直接更改元素的类名，会覆盖原先的类名。 排他思想如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法：所有元素全部清除样式（干掉其他人）给当前元素设置样式 （留下我自己）注意顺序不能颠倒，首先干掉其他人，再设置自己节点层级利用 DOM 树可以把节点划分为不同的层级关系，常见的是 父子兄层级关系 。1. 父级节点node.parentNode parentNode 属性可返回某节点的父节点，注意是 最近的一个父节点 如果指定的节点没有父节点则返回 null2.子节点1.parentNode.childNodes （标准） parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合。 注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等。 如果只想要获得里面的元素节点，则需要专门处理。 所以我们一般不提倡使用childNodes2.parentNode.children （非标准） parentNode.children 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返 回 （ 这个是我们重点掌握的 ）。 虽然children 是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用3.parentNode.firstChildfirstChild 返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。4.parentNode.lastChild lastChild 返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。5.parentNode.firstElementChild firstElementChild 返回第一个子元素节点，找不到则返回null。6.parentNode.lastElementChild lastElementChild 返回最后一个子元素节点，找不到则返回null。 注意 ：这两个方法有兼容性问题，IE9 以上才支持 。 实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便，而 firstElementChild 和 lastElementChild 又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？ 解决方案： 1.如果想要第一个子元素节点，可以使用:parentNode.chilren[0] 2.如果想要最后一个子元素节点，可以使用:parentNode.chilren[parentNode.chilren.length - 1]3.兄弟节点1.node.nextSibling nextSibling 返回当前元素的下一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。2.node.previousSibling previousSibling 返回当前元素上一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。3.node.nextElementSibling nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回null。4.node.previousElementSibling previousElementSibling 返回当前元素上一个兄弟节点，找不到则返回null。 注意：这两个方法有兼容性问题， IE9 以上才支持。 问：如何解决兼容性问题？ 答：自己封装一个兼容性函数 function getNextElementSibling(element){ var el =element; while (el=el.nextSibling){ if (el.nodeType === 1){ return el; } } return null; }自定义属性的操作1. 获取属性值element.属性 获取属性值。 element.getAttribute('属性'); 区别：element.属性 获取内置属性值（元素本身自带的属性） element.getAttribute('属性'); 主要获得自定义的属性 （标准） 我们程序员自定义的属性2. 设置属性值element.属性 = '值' 设置内置属性值。 element.setAttribute('属性', '值'); 区别：element.属性 设置内置属性值 element.setAttribute('属性'); 主要设置自定义的属性 （标准）3. 移除属性element.removeAttribute('属性');H5自定义属性自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。 自定义属性获取是通过getAttribute('属性') 获取。 但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。 H5给我们新增了自定义属性：1. 设置H5自定义属性H5规定自定义属性data-开头做为属性名并且赋值。 比如 或者使用 JS 设置 element.setAttribute('data-index', 2)2.获取H5自定义属性1.兼容性获取 element.getAttribute('data-index'); 2.H5新增 element.dataset. index 或者 element.dataset['index'] ie 11才开始支持

CSS（二）三大特性 盒模型和浮动 一、css三大特性1、层叠性​ 相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题​ 层叠性原则:样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式样式不冲突，不会层叠2、继承性​ CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。子元素可以继承父元素的样式：​ （text-，font-，line-这些元素开头的可以继承，以及color属性）继承性口诀：龙生龙，凤生凤，老鼠生的孩子会打洞行高的继承性： body { font:12px/1.5 Microsoft YaHei； }行高可以跟单位也可以不跟单位如果子元素没有设置行高，则会继承父元素的行高为 1.5此时子元素的行高是：当前子元素的文字大小 * 1.5body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高3、优先级当同一个元素指定多个选择器，就会有优先级的产生。选择器相同，则执行层叠性选择器不同，则根据选择器权重执行选择器优先级计算表格：优先级注意点:权重是有4组数字组成,但是不会有进位。可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推..等级判断从左向右，如果某一位数值相同，则判断下一位数值。可以简单记忆法: 通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为 1000, !important 无穷大.继承的权重是0， 如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0。权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。div ul li ------> 0,0,0,3.nav ul li ------> 0,0,1,2a:hover -----—> 0,0,1,1.nav a ------> 0,0,1,1二、盒子模型1、网页布局的本质网页布局的核心本质： 就是利用 CSS 摆盒子。网页布局过程：先准备好相关的网页元素，网页元素基本都是盒子 Box 。利用 CSS 设置好盒子样式，然后摆放到相应位置。往盒子里面装内容2、盒子模型（Box Model）组成​ 盒子模型：把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。​ CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和 实际内容3、边框（border）3.1、边框的使用1、border可以设置元素的边框。边框有三部分组成：边框宽度(粗细) 边框样式 边框颜色；2、语法： border : border-width || border-style || border-color; 边框样式 border-style 可以设置如下值：none：没有边框即忽略所有边框的宽度（默认值）solid：边框为单实线(最为常用的)dashed：边框为虚线dotted：边框为点线3、边框的合写分写边框简写： border: 1px solid red; 边框分开写法： border-top: 1px solid red; /* 只设定上边框， 其余同理 */ 3.2、表格的细线边框1、border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。2、语法： border-collapse:collapse; collapse 单词是合并的意思border-collapse: collapse; 表示相邻边框合并在一起3.3、边框会影响盒子实际大小边框会额外增加盒子的实际大小。因此我们有两种方案解决：测量盒子大小的时候,不量边框。如果测量的时候包含了边框,则需要 width/height 减去边框宽度4、内边距（padding）4.1、内边距的使用方式1、padding 属性用于设置内边距，即边框与内容之间的距离。2、语法：合写属性：分写属性：4.2、内边距会影响盒子实际大小1、当我们给盒子指定 padding 值之后，发生了 2 件事情：内容和边框有了距离，添加了内边距。padding影响了盒子实际大小。2、内边距对盒子大小的影响：如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小。3、解决方案：​ 如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。5、外边距（margin）5.1、外边距的使用方式margin 属性用于设置外边距，即控制盒子和盒子之间的距离。5.2、外边距典型应用外边距可以让块级盒子水平居中的两个条件：盒子必须指定了宽度（width）。盒子左右的外边距都设置为 auto 。常见的写法，以下三种都可以：margin-left: auto; margin-right: auto; margin: auto; margin: 0 auto;注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。5.3、外边距合并使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。主要有两种情况:1、相邻块元素垂直外边距的合并​ 当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。解决方案： 尽量只给一个盒子添加 margin 值。 2、嵌套块元素垂直外边距的塌陷​ 对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。解决方案：可以为父元素定义上边框。可以为父元素定义上内边距。可以为父元素添加 overflow:hidden。5.4、清除内外边距​ 网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。 * { padding:0; /* 清除内边距 */ margin:0; /* 清除外边距 */ }​ 注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了一、其他样式1、圆角边框在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。border-radius 属性用于设置元素的外边框圆角。语法： border-radius:length; 参数值可以为数值或百分比的形式如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-bottom-left-radius兼容性 ie9+ 浏览器支持, 但是不会影响页面布局,可以放心使用2、盒子阴影CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。语法： box-shadow: h-shadow v-shadow blur spread color inset; 3、文字阴影在 CSS3 中，我们可以使用 text-shadow 属性将阴影应用于文本。语法： text-shadow: h-shadow v-shadow blur color;二、浮动1、传统网页布局的三种方式​ CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)：普通流（标准流）浮动定位这三种布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然就完成了。注意：实际开发中，一个页面基本都包含了这三种布局方式（后面移动端学习新的布局方式） 。2、标准流（普通流/文档流）所谓的标准流: 就是标签按照规定好默认方式排列块级元素会独占一行，从上向下顺序排列。常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。常用元素：span、a、i、em 等以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式。3、为什么需要浮动？​ 总结： 有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。 因为浮动可以改变元素标签默认的排列方式.​ 浮动最典型的应用：可以让多个块级元素一行内排列显示。​ 网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。4、什么是浮动？​ float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。语法： 选择器 { float: 属性值; }5、浮动特性加了浮动之后的元素,会具有很多特性,需要我们掌握的.1、浮动元素会脱离标准流(脱标：浮动的盒子不再保留原先的位置)2、浮动的元素会一行内显示并且元素顶部对齐注意： ​ 浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。3、浮动的元素会具有行内块元素的特性​ 浮动元素的大小根据内容来决定​ 浮动的盒子中间是没有缝隙的6、浮动元素经常和标准流父级搭配使用为了约束浮动元素位置, 我们网页布局一般采取的策略是:​ 先用标准流父元素排列上下位置, 之后内部子元素采取浮动排列左右位置. 符合网页布局第一准侧三、常见网页布局浮动布局注意点1、浮动和标准流的父盒子搭配。先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置2、一个元素浮动了，理论上其余的兄弟元素也要浮动。一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，以防止引起问题。浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.四、清除浮动1、为什么需要清除浮动？​ 由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。2、清除浮动本质清除浮动的本质是清除浮动元素造成的影响：浮动的子标签无法撑开父盒子的高度注意：如果父盒子本身有高度，则不需要清除浮动清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了3、清除浮动样式语法： 选择器{clear:属性值;} 我们实际工作中， 几乎只用 clear: both;清除浮动的策略是: 闭合浮动.4、清除浮动的多种方式4.1、额外标签法额外标签法也称为隔墙法，是 W3C 推荐的做法。使用方式：​ 额外标签法会在浮动元素末尾添加一个空的标签。例如 <div style="clear:both"></div>，或者其他标签（如<br />等）。​ 优点： 通俗易懂，书写方便​ 缺点： 添加许多无意义的标签，结构化较差​ 注意： 要求这个新的空标签必须是块级元素。总结:​ 1、清除浮动本质是?​ 清除浮动的本质是清除浮动元素脱离标准流造成的影响​ 2、清除浮动策略是?​ 闭合浮动. 只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子.​ 3、额外标签法?​ 隔墙法, 就是在最后一个浮动的子元素后面添​ 4、加一个额外标签, 添加 清除浮动样式.​ 实际工作可能会遇到,但是不常用4.2、父级添加 overflow 属性可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。例如：overflow:hidden | auto | scroll;优点：代码简洁缺点：无法显示溢出的部分注意：是给父元素添加代码4.3、父级添加after伪元素:after 方式是额外标签法的升级版。给父元素添加： .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* IE6、7 专有 */ *zoom: 1; } 优点：没有增加标签，结构更简单缺点：照顾低版本浏览器代表网站： 百度、淘宝网、网易等4.4、父级添加双伪元素给父元素添加 .clearfix:before,.clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .clearfix { *zoom:1; } 优点：代码更简洁缺点：照顾低版本浏览器代表网站：小米、腾讯等总结为什么需要清除浮动？父级没高度。子盒子浮动了。影响下面布局了，我们就应该清除浮动了。CSS属性书写顺序（重点）生活中衡量一个人有气质：​ 穿着打扮 举止言行 等等 编程中如何衡量一个人的代码能力：​ 规范标准 优雅高质量 等等 一个词形容 专业 从代码中看出是否有经验..建议遵循以下顺序：布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）自身属性：width / height / margin / padding / border / background文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …举例： .jdc { display: block; position: relative; float: left; width: 100px; height: 100px; margin: 0 10px; padding: 20px 0; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; color: #333; background: rgba(0,0,0,.5); border-radius: 10px; }

CSS（一）css选择器 和css样式 css简介CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称. 有时我们也会称之为 CSS 样式表或级联样式表。 CSS 是也是一种标记语言 CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。 CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮， 让页面布局更简单。 CSS 最大价值: 由 HTML 专注去做结构呈现，样式交给 CSS，即 结构 ( HTML ) 与样式( CSS ) 相分离css语法规范1.使用 HTML 时，需要遵从一定的规范，CSS 也是如此。要想熟练地使用 CSS 对网页进行修饰，首先需要了解CSS 样式规则。2.CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。1.选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式 2.属性和属性值以“键值对”的形式出现 3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等 4.属性和属性值之间用英文“:”分开 5.多个“键值对”之间用英文“;”进行区分 例如： 所有的样式，都包含在 <style> 标签内，表示是样式表。<style> 一般写到 </head> 上方 <head> <style> h4 { color: blue; font-size: 100px; } </style> </head>css代码风格： 1. 样式格式书写 1.紧凑格式 h3 { color: deeppink;font-size: 20px;} 2.展开格式 h3 { color: pink; font-size: 20px; } 强烈推荐第二种格式， 因为更直观。 2. 样式大小写风格 1.小写格式 h3 { color: pink; } 2.大写格式 H3 { COLOR: PINK; } 强烈推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外。 3. 样式空格风格 1. h3 { color: pink; }属性值前面，冒号后面，保留一个空格 选择器（标签）和大括号中间保留空格css选择器的作用答：选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。 简单来说，就是选择标签用的。找到所有的 h1 标签。 选择器（选对人）设置这些标签的样式，比如颜色为红色（做对事）。css基础选择器基础选择器又包括：标签选择器、类选择器、id 选择器和通配符选择器标签选择器：标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。语法：标签选择器{ 属性：属性值 ... }作用： 标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。类选择器如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器.语法：.类名 { 属性1: 属性值1; ... } 结构需要用class属性来调用 class 类的意思 <div class="类名"> 变红色 </div>1.如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。2.类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。3.类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。4.可以理解为给这个标签起了一个名字，来表示。5.长名称或词组可以使用中横线来为选择器命名。6.不要使用纯数字、中文等命名，尽量使用英文字母来表示。7.命名要有意义，尽量使别人一眼就知道这个类名的目的。8.命名规范：见附件（ Web 前端开发规范手册.doc）多类名选择器我们可以给一个标签指定多个类名，从而达到更多的选择目的。 这些类名都可以选出这个标签.简单理解就是一个标签有多个名字. 多类名的具体使用：亚瑟注意： 1.在标签class 属性中写 多个类名 2.多个类名中间必须用空格分开 3.这个标签就可以分别具有这些类名的样式id选择器：id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#" 来定义。 语法： #id名 { 属性1: 属性值1; ... } 注意：id 属性只能在每个 HTML 文档中出现一次id选择器和类选择器的区别：1.类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。 2.id 选择器好比人的身份证号码，全中国是唯一的，不得重复。 3.id 选择器和类选择器最大的不同在于使用次数上。 4.类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。通配符选择器： 语法： * { 属性1: 属性值1; ... }通配符选择器不需要调用， 自动就给所有的元素使用样式 特殊情况才使用，后面讲解使用场景(以下是清除所有的元素标签的内外边距,后期讲) * { margin: 0; padding: 0; } 选择器总结css字体属性:字体大小：CSS 使用 font-size 属性定义字体大小。 语法：p { font-size: 20px; }1.px（像素）大小是我们网页的最常用的单位2.谷歌浏览器默认的文字大小为16px3.不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小4.可以给 body 指定整个页面文字的大小字体粗细：CSS 使用 font-weight 属性设置文本字体的粗细。语法： p { font-weight: bold; } 1.学会让加粗标签（比如 h 和 strong 等) 不加粗，或者其他标签加粗2.实际开发时，我们更喜欢用数字表示粗细字体样式：CSS 使用 font-style 属性设置文本的风格。语法： p { font-style: normal; } 字体的综合写法字体属性可以把以上文字样式综合来写, 这样可以更节约代码: body { font: font-style font-weight font-size/line-height font-family;} 使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开 不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用字体总结：css文本属性：文本颜色：color 属性用于定义文本的颜色。语法： div { color: red; }开发中最常用的是十六进制文本对齐：text-align 属性用于设置元素内文本内容的水平对齐方式。语法： div { text-align: center; }修饰文本：语法： div { text-decoration：underline； }重点记住如何添加下划线 ? 如何删除下划线 ? 其余了解即可.文本缩进语法： div { text-indent：20px； } div { text-indent：2em； } em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。行间距：line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离语法： p { line-height: 26px; }行高的文本分为 上间距 文本高度 下间距 = 行间距css样式表：按照 CSS 样式书写的位置（或者引入的方式），CSS 样式表可以分为三大类：行内样式表（行内式）行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式. 语法： <div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>1.style 其实就是标签的属性在双引号中间，写法要符合 CSS 规范2.可以控制当前的标签设置样式3.由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用4.使用行内样式表设定 CSS，通常也被称为行内式引入内部样式表（嵌入式）内部样式表（内嵌样式表）是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个 标签中 语法： <style> div { color: red; font-size: 12px; } </style>1. 标签理论上可以放在 HTML 文档的任何地方，但一般会放在文档的标签中2.通过此种方式，可以方便控制当前整个页面中的元素样式设置3.代码结构清晰，但是并没有实现结构与样式完全分离4.使用内部样式表设定 CSS，通常也被称为嵌入式引入，这种方式是我们练习时常用的方式外部样式表（链接式）实际开发都是外部样式表. 适合于样式比较多的情况. 核心是:样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中使用. 引入外部样式表分为两步：新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。在 HTML 页面中，使用 标签引入这个文件。<link rel="stylesheet" href="css文件路径">Chrome调试工具：1.Ctrl+滚轮 可以放大开发者工具代码大小。 2.左边是 HTML 元素结构，右边是 CSS 样式。 3.右边 CSS 样式可以改动数值（左右箭头或者直接输入）和查看颜色。 4.Ctrl + 0 复原浏览器大小。 5.如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。 6.如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误。一、emmet语法1、简介​ Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法。​ 快速生成HTML结构语法​ 快速生成CSS样式语法2、快速生成HTML结构语法生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成 如果想要生成多个相同标签 加上 就可以了 比如 div3 就可以快速生成3个div如果有父子级关系的标签，可以用 > 比如 ul > li就可以了如果有兄弟关系的标签，用 + 就可以了 比如 div+p如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键就可以了如果生成的div 类名是有顺序的， 可以用 自增符号 $如果想要在生成的标签内部写内容可以用 { } 表示3、快速生成CSS样式语法CSS 基本采取简写形式即可​ 比如 w200 按tab 可以 生成 width: 200px;​ 比如 lh26px 按tab 可以生成 line-height: 26px;4、快速格式化代码Vscode 快速格式化代码: shift+alt+f也可以设置 当我们 保存页面的时候自动格式化代码:1）文件 ------.>【首选项】---------->【设置】；2）搜索emmet.include;3）在settings.json下的【工作区设置】中添加以下语句：​ "editor.formatOnType": true,​ "editor.formatOnSave": true二、css的复合选择器1、什么是复合选择器？​ 在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。 ​ 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，可以更准确、更高效的选择目标元素（标签）​ 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等2、后代选择器 (重要）定义：​ 后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。语法：​ 上述语法表示选择元素 1 里面的所有元素 2 (后代元素)。语法说明：元素1 和 元素2 中间用空格隔开元素1 是父级，元素2 是子级，最终选择的是元素2元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可元素1 和 元素2 可以是任意基础选择器例子：3、子选择器 (重要）定义：​ 子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。​ （简单理解就是选亲儿子元素）语法：​ 上述语法表示选择元素1 里面的所有直接后代(子元素) 元素2。语法说明：元素1 和 元素2 中间用 大于号 隔开元素1 是父级，元素2 是子级，最终选择的是元素2元素2 必须是亲儿子，其孙子、重孙之类都不归他管. 你也可以叫他 亲儿子选择器例子：4、并集选择器 (重要）定义：​ 并集选择器可以选择多组标签, 同时为他们定义相同的样式，通常用于集体声明。并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。语法：​ 上述语法表示选择元素1 和 元素2。语法说明：元素1 和 元素2 中间用逗号隔开逗号可以理解为和的意思并集选择器通常用于集体声明例子：5、伪类选择器定义：​ 伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。语法：​ 伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child 。6、链接伪类选择器定义：​ 伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。语法：​ 伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child 。​ a:link 没有点击过的(访问过的)链接​ a:visited 点击过的(访问过的)链接​ a:hover 鼠标经过的那个链接​ a:active 鼠标正在按下还没有弹起鼠标的那个链接链接伪类选择器注意事项​ 为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active。​ 记忆法：love hate 或者 lv 包包 hao 。​ 因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。链接伪类选择器实际工作开发中的写法：7、:focus 伪类选择器定义：​ :focus 伪类选择器用于选取获得焦点的表单元素。​ 焦点就是光标，一般情况 类表单元素才能获取例子：复合选择器总结三、css的显示模式1、什么是元素的显示模式定义：​ 元素显示模式就是元素（标签）以什么方式进行显示，比如自己占一行，比如一行可以放多个。作用：​ 网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。2、元素显示模式的分类2.1、块元素常见的块元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>​ 标签是最典型的块元素。块级元素的特点：比较霸道，自己独占一行。高度，宽度、外边距以及内边距都可以控制。宽度默认是容器（父级宽度）的100%。是一个容器及盒子，里面可以放行内或者块级元素。注意：​ 文字类的元素内不能放块级元素<p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放<div> 同理， <h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素2.2、行内元素常见的行内元素：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>​ 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。行内元素的特点：相邻行内元素在一行上，一行可以显示多个。高、宽直接设置是无效的。默认宽度就是它本身内容的宽度。行内元素只能容纳文本或其他行内元素。注意：链接里面不能再放链接特殊情况链接 <a> 里面可以放块级元素，但是给 <a> 转换一下块级模式最安全2.3、行内块元素常见的行内块标签：<img />、<input />、<td>​ 它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。行内块元素的特点：和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。默认宽度就是它本身内容的宽度（行内元素特点）。高度，行高、外边距以及内边距都可以控制（块级元素特点）。2.4、元素显示模式总结​ 学习元素显示模式的主要目的就是分清它们各自的特点，当我们网页布局的时候，在合适的地方用合适的标签元素。3、元素显示模式的转换简单理解: 一个模式的元素需要另外一种模式的特性比如想要增加链接 <a> 的触发范围。 转换方式转换为块元素：display:block;转换为行内元素：display:inline;转换为行内块：display: inline-block;4、单行文字垂直居中的代码解决方案: ​ 让文字的行高等于盒子的高度 就可以让文字在当前盒子内垂直居中简单理解: ​ 行高的上空隙和下空隙把文字挤到中间了，​ 如果行高小于盒子高度,文字会偏上，​ 如果行高大于盒子高度,则文字偏下。四、css的背景通过 CSS 背景属性，可以给页面元素添加背景样式。背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。1、背景颜色样式名称：​ background-color 定义元素的背景颜色使用方式：其他说明：​ 元素背景颜色默认值是 transparent（透明）2、背景图片样式名称：​ background-image 定义元素的背景图片使用方式：其他说明：​ 实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)​ 注意：背景图片后面的地址，千万不要忘记加 URL， 同时里面的路径不要加引号。3、背景平铺样式名称：​ background-repeat 设置元素背景图像的平铺 使用方式：4、背景图片位置样式名称：​ background-position 属性可以改变图片在背景中的位置使用方式：​​ 参数代表的意思是：x 坐标和 y 坐标。 可以使用 方位名词 或者 精确单位其他说明：1、参数是方位名词​ 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致​ 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐2、参数是精确单位​ 如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标​ 如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中3、参数是混合单位​ 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标5、背景图片固定样式名称：​ background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。使用方式：​其他说明：​ background-attachment 后期可以制作视差滚动的效果。6、背景样式合写背景合写样式：​ background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;使用方式：7、背景色半透明CSS3 提供了背景颜色半透明的效果。 使用方式：最后一个参数是 alpha 透明度，取值范围在 0~1之间我们习惯把 0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .3);注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响CSS3 新增属性，是 IE9+ 版本浏览器才支持的，但是现在实际开发,我们不太关注兼容性写法了,可以放心使用8、背景总结