创建选择器 HTML选择器 标志选择器 类选择器 // 派生选择器 h1 h2 { } // 标志选择器 #text { } // 类选择器 .da { } // 分组选择器 h1, #text...修饰页面文本和页面背景的属性 background，将背景属性设置在一个声明中 background-color，设置页面对象的背景颜色 background-image，引用图像，将其设置为背景 background-repeat...，设置背景图像重复的方式 background-position，设置背景图像的具体位置 background-attachment，设置背景图像是固定还是随着页面的其余部分滚动 color，设置文本颜色...E E:last-child，匹配父元素的最后一个子元素E E:nth-child(n)，匹配父元素的第n个子元素E E:nth-last-child(n)，匹配父元素的倒数第n个子元素E E:only-child...E E:nth-of-type(n)，匹配同类型中的第N个同级兄弟元素E E:nth-last-of-type(n)，匹配同类型中的倒数第n个同级兄弟元素E CSS结构伪类选择符 E:link，设置超链接
系统级最小字号 浏览器默认设定页面的最小字号，用户可以前往 chrome://settings/fonts 根据需求更改。 而我们在实际项目中，不能奢求用户更改浏览器设置。...:hover ：鼠标指针浮动在上面的元素 :focus ：选择具有焦点的 :first-child：父元素的首个子元素 伪元素选择器 :first-letter ：用于选取指定选择器的首字母 :first-line...:last-of-type 父元素的最后一个元素 :only-of-type 父元素的特定类型的唯一子元素 :only-child 父元素中唯一子元素 :nth-child(n) 选择父元素中第N个子元素...:nth-last-of-type(n) 选择父元素中第N个子元素，从后往前 :last-child 父元素的最后一个元素 :root 设置HTML文档 :empty 指定空的元素 :enabled...为什么要使用它们？ 预处理器， 如：less，sass，stylus，用来预编译sass或者less，增加了css代码的复用性。
使用 :has() 选择器可以访问父元素、子元素，甚至兄弟元素 例如：带有“⭐️”元素的项目会应用灰色背景，而带有选中复选框的项目会应用蓝色背景。...如果使用常规的 nth-child，例如 :nth-child(2) 在特殊类上，浏览器将选择应用了特殊类的元素，也是第二个子元素。...支持 嵌套 Sass等框架的嵌套功能，是最受css开发人员追捧的功能之一，但是要想使用样式嵌套的功能只能安装各种框架，现在Web平台也同样支持了嵌套功能，允许开发人员以更简洁的分组格式编写，从而减少冗余...以前，开发人员依靠第 3 方脚本来重命名类，或特定的命名约定来防止样式冲突，但很快，可以使用 @scope。 这里将 .title 元素限定为 .card。...这允许您创建有趣的效果，例如视差背景图像、滚动进度条和在进入视野时显示自己的图像。 此 API 支持一组 JavaScript 类和 CSS 属性，使您可以轻松创建声明性滚动驱动的动画。
-- 规范， 可以编写css的代码，每个声明，最好使用分号结尾 语法：(里面不能写html代码， 注释/**/) 选择器{ 声明1;...[class]~p{ background: yellow; } 结构伪类选择器 /*选择ul的第一个子元素*/ ul li:first-child...height 背景高度 line-height 行高 想要文字上下居中，行高与背景高度一致 text-decoration: underline; 下划线 line-through; 中划线（删除线...z-index （好像）定位，浮起来，才有层级的关系 0~n级图层，覆盖的问题 z-index: 10; 不透明度 opacity: 0.5; filter: opacity(0.5...); 后记 还有CSS预处理器： SASS LESS（功能简单，效率较低，但够用）
CSS预处理器： 介绍CSS预处理器（如Sass和Less）的使用，以及它们如何帮助你更高效地编写和管理CSS代码。.../my.css"> 行内式： css写在标签style属性中 作用范围 当前标签 配合js使用 zhishiyigedivbaioqian 基础选择器： 标签选择器： 就是以标签来命名的选择器...，设置样式 选择器语法：选择器：hover{css} 背景颜色 background-color: ; 背景图片 background-image: url(); 背景平铺 background-repeat...： 选择器：E:first-child{} 匹配父元素第一个子元素 E:last-child{}匹配父元素最后一个选择器 E:nth-child（n）{}匹配父元素第n个元素 E:nth-last-child...（n）匹配父元素倒数第n个元素 n可以取值2n 4n等even（偶数） odd（奇数） 伪元素：一般页面的非主体内容可以使用伪元素 由css模拟出的标签效果 ：：before 在父元素内容最前面添加一个微元素
background-image 设置元素的背景图像。 background-size 规定背景图⽚的尺⼨。 background-repeat 设置是否及如何重复背景图像。...标题和段落、图像 HTML超链接元素 HTML列表元素 HTML表单表格元素 表单属性、表格结构 CSS基础 基础语法和选择器、CSS引用方式 CSS属性 CSS背景色 、背景图、字体...CSS3新增选择器 兄弟选择器、属性选择器、伪类选择器、伪元素选择器 颜色、字体、盒阴影、背景、圆角、动画、渐变、过渡、多 列、弹性盒模型、2D、3D的功能 JavaScript语法基础 变量、关键字...响应式开发技术 MySQL概念，MySQL安装，MySQL数据库管理，MySQL表结构管理，基础数据类型、关系、数据表创建、查看、修改、删除，MySQL用户管理，用户创建与删除、权限授予与回收、密码设置与更改...（掌握） ✓ SASS概述、安装配置、基础语法
样式表数量 下面是每个页面使用的外部样式表的数量分布： image.png 今年每个页面的样式表分布相对于去年有所增加，第50-90百分位的都增加了一个，第10-15百分位的都没有变化。...下面是按照图片格式在移动页面上通过CSS加载的外部图像大小分布： 有趣的是，在第 90 个百分位数时，GIF 图像平均比 SVG 文件还要小。 4....除此之外，使用自定义属性值的选择器， 60% 设置在根元素上（使用:root或html选择器），大约 5% 设置在元素上。其余的应用于根元素的某些后代而不是....下面是 Sass 中最常用的流控制结构： image.png 下面是 Sass 中最常用的规则嵌套： image.png Sass 的一个主要优点就是能够将规则嵌套在其他规则中，从而避免编写重复的选择器模式...统计发现，87% 的 Sass 样式表使用了规则嵌套。
是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。 Q2、为什么需要CSS？...CSS中有几个模块，部分如下： 选择器 盒模型 背景和边框 文字效果 2D / 3D转换 动画制作 多列布局 用户界面 Q20、CSS允许使用哪些不同的媒介类型？...用于控制图像滚动的属性是什么？ background-attachment：该属性设置背景图像是随页面其余部分滚动还是固定滚动。...而更改绝对定位会触发回流。变换使浏览器为该元素创建一个GPU层，但是更改绝对定位属性将使用CPU。因此，translate（）效率更高，并且可以缩短绘制时间，从而使动画更流畅。...2、易于编写嵌套选择器。 3、用于一致主题的变量。可以跨不同项目共享主题文件。 4、Mixins生成重复的CSS。 5、诸如循环，列表和映射之类的Sass功能可以使配置更容易且更省力。
;}，如a.red:visited {color:#FF0000;} :first-child可以使用 :first-child 伪类来选择元素的第一个子元素在下面的例子中，选择器匹配所有作为元素的第一个子元素的...使用content 属性来指定要插入的内容。默认情况下，生成的伪元素是内联的，但这可以使用属性显示更改。...会受到框中填充的背景颜色影响Content（内容） - 盒子的内容，显示文本和图像图片在盒模型中，外边距可以是负值，而且在很多情况下都要使用负值的外边距。...background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。...background-Origin属性指定了背景图像的位置区域。content-box, padding-box,和 border-box区域内可以放置背景图像。
这边课程内容包括： CSS3新特性 新选择器 边框、背景升级、圆角、阴影 新的盒模型 渐变、动画、2D3D转换 伸缩布局、多列布局 新单位 在线字体图标 前缀应用、浏览器兼容、渐进增强 媒体查询 移动端适配开发方案...语法规则 说明 E:first-child 第一个子元素 E:last-child 最后一个子元素 E:nth-child(n) 第n个子元素，计算方法是E元素的全部兄弟元素； E:nth-last-child...E:empty 选中没有任何子节点的E元素；（使用不是非常广泛） n可是多种形式：nth-child(2n+0)、nth-child(2n+1)、nth-child(-1n+3)等；需要满足y=ax...+b 注：指E元素的父元素，并对应位置的子元素必须是E 3.2.2 目标伪类 E:target 结合锚点进行使用，处于当前锚点的元素会被选中； 3.2.3 伪元素选择器 语法规则 说明 E::first-letter...round 平铺图像。当不能整数次平铺时，根据情况放大或缩小图像。 space 平铺图像 。
这边课程内容包括： CSS3新特性 新选择器 边框、背景升级、圆角、阴影 新的盒模型 渐变、动画、2D3D转换 伸缩布局、多列布局 新单位 在线字体图标 前缀应用、浏览器兼容、渐进增强 媒体查询 移动端适配开发方案...语法规则 说明 E:first-child 第一个子元素 E:last-child 最后一个子元素 E:nth-child(n) 第n个子元素，计算方法是E元素的全部兄弟元素； E:nth-last-child...E:empty 选中没有任何子节点的E元素；（使用不是非常广泛） n可是多种形式：nth-child(2n+0)、nth-child(2n+1)、nth-child(-1n+3)等；需要满足y=ax+...b 注：指E元素的父元素，并对应位置的子元素必须是E 3.2.2 目标伪类 E:target 结合锚点进行使用，处于当前锚点的元素会被选中； 3.2.3 伪元素选择器 语法规则 说明 E::first-letter...round 平铺图像。当不能整数次平铺时，根据情况放大或缩小图像。 space 平铺图像 。
子元素过滤选择器 ——5.1 :first-child和:last-child :first-child表示第一个子元素，:last-child表示最后一个子元素。...——5.3 :nth-child 看到这个就想起英文单词里的，fourth, fifth, sixth……，nth表示第n个，:nth-child就表示第n个child元素。...:nth-child有三种用法： 1) :nth-child(x)，获取第x个子元素 2) :nth-child(even)和:nth-child(odd)，从1开始，获取第偶数个元素或第奇数个元素...例如x = 3, y = 0时就是3n，表示取第3n个元素（n>=0）。实际上xn+y是上面两种的通项式。...简体中文 ——6.2 :checked（取选中的单选框或复选框元素） 下面的代码，更改边框或背景色仅在
$(document).ready(function () { $('tr:eq(2)').css('background', '#FF0000'); }); 更改第三行的背景色...子元素过滤选择器 ——5.1 :first-child和:last-child :first-child表示第一个子元素，:last-child表示最后一个子元素。...——5.3 :nth-child 看到这个就想起英文单词里的，fourth, fifth, sixth……，nth表示第n个，:nth-child就表示第n个child元素。...:nth-child有三种用法： 1) :nth-child(x)，获取第x个子元素 2) :nth-child(even)和:nth-child(odd)，从1开始，获取第偶数个元素或第奇数个元素 ...例如x = 3, y = 0时就是3n，表示取第3n个元素（n>=0）。实际上xn+y是上面两种的通项式。
《CSS高效开发实战—CSS 3、LESS、SASS、Bootstrap、Foundation》围绕的就是如何跨浏览器、跨设备进行高效率的CSS开发。...《CSS高效开发实战—CSS 3、LESS、SASS、Bootstrap、Foundation》分为3部分：第1部分是HTML/CSS基础和CSS 3新特性演示，涵盖盒子模型、浮动布局、属性前缀、选择器...、字体、边框、背景、颜色、变换、动画、弹性盒子、媒介查询和响应式设计等多个方面；第2部分介绍Bootstrap、Foundation、Pure等当前流行的CSS框架及LESS、SASS等生产力工具；第3...《CSS高效开发实战—CSS 3、LESS、SASS、Bootstrap、Foundation》内容精练、重点突出、实例丰富、讲解通俗，是广大CSS设计人员和前端开发人员必备的参考书，同时也非常适合大中专院校师生学习阅读...，也可作为高等院校计算机及相关培训机构的教材使用。
:nth-child(n) 匹配父元素下的第n个子元素 eg: .box :nth-child(3){color:red;} 匹配.box下每个父元素下的第三个子元素 4....:nth-child(2n) 匹配父元素下的第偶数个子元素 eg: .tab tr:nth-child(2n){background:red;} 匹配.tab下第偶数个tr 注： :nth-child(...:nth-last-child(n) 匹配父元素下倒着数第n个子元素 eg: .tab tr:nth-last-child(3){color:red;} 匹配.tab下倒数第三个子元素tr ——————...:nth-of-type(n) 匹配父元素下指定类型的第n个子元素 eg: .uls li:nth-of-type(3){background:blue;} 匹配.uls下li这种类型的第3个子元素 10...:nth-last-of-type(n) 匹配父元素下指定类型的倒数第n个子元素 eg: .uls li:nth-last-of-type(3){background:orange;} 匹配.uls下li
$(document).ready(function () { $('tr:eq(2)').css('background', '#FF0000'); }); 更改第三行的背景色，在上面的代码中C的背景会变色...子元素过滤选择器 ——5.1 :first-child和:last-child :first-child表示第一个子元素，:last-child表示最后一个子元素。...——5.3 :nth-child 看到这个就想起英文单词里的，fourth, fifth, sixth……，nth表示第n个，:nth-child就表示第n个child元素。...:nth-child有三种用法： 1) :nth-child(x)，获取第x个子元素 2) :nth-child(even)和:nth-child(odd)，从1开始，获取第偶数个元素或第奇数个元素...例如x = 3, y = 0时就是3n，表示取第3n个元素（n>=0）。实际上xn+y是上面两种的通项式。
结构伪类 1.1. nth-child 结构伪类 - :nth-child :nth-child(1) 是父元素中的第1个子元素 :nth-child(2n) n代表任意正整数和0 是父元素中的第偶数个子元素...(第2、4、6、8……个) 跟:nth-child(even)同义 :nth-child(2n + 1) n代表任意正整数和0 是父元素中的第奇数个子元素(第1、3、5、7……个) 跟:nth-child...(odd)同义 nth-child(-n + 2) 代表前2个子元素 1.2. nth-last-child/nth-of-type/nth-last-of-type 结构伪类 - :nth-last-child...CSS Sprite 什么是CSS Sprite 是一种CSS图像合成技术，将各种小图片合并到一张图片上，然后利用CSS的背景定位来显示对应的图片部分 有人翻译为:CSS雪碧、CSS精灵 使用CSS Sprite...精灵图的原理是通过只显示图片的很小一部分来展示的; 通常使用背景: ✓ 1.设置对应元素的宽度和高度 ✓ 2.设置精灵图作为背景图片 ✓ 3.调整背景图片的位置来展示 如何获取精灵图的位置 http
（Eelement ~ Siblings） 兼容性：IE8+、FireFox、Chrome、Safari、Opera 群组选择器 概念：群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用逗号...、Safari、Opera Element:nth-child(N) 概念：匹配属于其父元素的第 N 个子元素，不论子元素是哪个都算入，匹配不到Element则无效 兼容性：IE9+、FireFox4...概念：匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数 兼容性：IE9+、FireFox4+、Chrome、Safari、Opera Element:nth-of-type...(N) 概念：匹配属于父元素的特定类型的第 N 个子元素的每个元素 兼容性：IE9+、FireFox4+、Chrome、Safari、Opera Element:nth-last-of-type...(N) 概念：匹配属于父元素的特定类型的第 N 个子元素的每个元素，从最后一个子元素开始计数 兼容性：IE9+、FireFox4+、Chrome、Safari、Opera Element:first-of-type
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
