大型网站建设入门,wordpress迅雷插件,排名轻松seo 网站推广,学院网站建设工作会议day04-CSS进阶 目标#xff1a;掌握复合选择器作用和写法#xff1b;使用background属性添加背景效果 01-复合选择器 定义#xff1a;由两个或多个基础选择器#xff0c;通过不同的方式组合而成。 作用#xff1a;更准确、更高效的选择目标元素#xff08;标签#xf…day04-CSS进阶 目标掌握复合选择器作用和写法使用background属性添加背景效果 01-复合选择器 定义由两个或多个基础选择器通过不同的方式组合而成。 作用更准确、更高效的选择目标元素标签。 后代选择器 后代选择器选中某元素的后代元素。 选择器写法父选择器 子选择器 { CSS 属性}父子选择器之间用空格隔开。 stylediv span {color: red;} /style span span 标签/span divspan这是 div 的儿子 span/span /div子代选择器 子代选择器选中某元素的子代元素最近的子级。 选择器写法父选择器 子选择器 { CSS 属性}父子选择器之间用 隔开。 stylediv span {color: red;} /styledivspan这是 div 里面的 span/spanpspan这是 div 里面的 p 里面的 span/span/p /div 并集选择器 并集选择器选中多组标签设置相同的样式。 选择器写法选择器1, 选择器2, …, 选择器N { CSS 属性}选择器之间用 , 隔开。 stylediv,p,span {color: red;} /stylediv div 标签/div pp 标签/p spanspan 标签/span交集选择器 交集选择器选中同时满足多个条件的元素。 选择器写法选择器1选择器2 { CSS 属性}选择器之间连写没有任何符号。 stylep.box {color: red; } /stylep classboxp 标签使用了类选择器 box/p pp 标签/p div classboxdiv 标签使用了类选择器 box/div注意如果交集选择器中有标签选择器标签选择器必须书写在最前面。 伪类选择器 伪类选择器伪类表示元素状态选中元素的某个状态设置样式。 鼠标悬停状态选择器:hover { CSS 属性 } stylea:hover {color: red;}.box:hover {color: green;} /stylea href#a 标签/a div classboxdiv 标签/div超链接伪类 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jxAmbbLh-1691943895400)(assets/1680319272736.png)] 提示如果要给超链接设置以上四个状态需要按 LVHA 的顺序书写。 经验工作中一个 a 标签选择器设置超链接的样式 hover状态特殊设置 a {color: red; }a:hover {color: green; }02-CSS特性 CSS特性化简代码 / 定位问题并解决问题 继承性层叠性优先级 继承性 继承性子级默认继承父级的文字控制属性。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yle0Z6hX-1691943895401)(assets/1680319376438.png)] 注意如果标签有默认文字样式会继承失败。 例如a 标签的颜色、标题的字体大小。 层叠性 特点 相同的属性会覆盖后面的 CSS 属性覆盖前面的 CSS 属性不同的属性会叠加不同的 CSS 属性都生效 stylediv {color: red;font-weight: 700;}div {color: green;font-size: 30px;} /styledivdiv 标签/div注意选择器类型相同则遵循层叠性否则按选择器优先级判断。 优先级 优先级也叫权重当一个标签使用了多种选择器时基于不同种类的选择器的匹配规则。 stylediv {color: red;}.box {color: green;} /stylediv classboxdiv 标签/div基础选择器 规则选择器优先级高的样式生效。 公式通配符选择器 标签选择器 类选择器 id选择器 行内样式 !important ​ 选中标签的范围越大优先级越低 复合选择器-叠加 叠加计算如果是复合选择器则需要权重叠加计算。 公式每一级之间不存在进位 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eOi1CaxO-1691943895402)(assets/1680319646205.png)] 规则 从左向右依次比较选个数同一级个数多的优先级高如果个数相同则向后比较!important 权重最高继承权重最低 03-Emmet 写法 Emmet写法代码的简写方式输入缩写 VS Code 会自动生成对应的代码。 HTML标签 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5YMiGsdT-1691943895403)(assets/1680319897697.png)] CSS大多数简写方式为属性单词的首字母 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wvYPuOvL-1691943895404)(assets/1680319926111.png)] 04-背景属性 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KzR67gYT-1691943895404)(assets/1680319971861.png)] 背景图 网页中使用背景图实现装饰性的图片效果。 属性名background-imagebgi属性值url(背景图 URL) div {width: 400px;height: 400px;background-image: url(./images/1.png); }提示背景图默认有平铺复制效果。 平铺方式 属性名background-repeatbgr [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dMghK1tv-1691943895405)(assets/1680320072292.png)] div {width: 400px;height: 400px;background-color: pink;background-image: url(./images/1.png);background-repeat: no-repeat; }背景图位置 属性名background-positionbgp 属性值水平方向位置 垂直方向位置 关键字 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KZNtxI14-1691943895406)(assets/1680320211424.png)] 坐标 水平正数向右负数向左垂直正数向下负数向上 div {width: 400px;height: 400px;background-color: pink;background-image: url(./images/1.png);background-repeat: no-repeat;background-position: center bottom;background-position: 50px -100px;background-position: 50px center; }提示 关键字取值方式写法可以颠倒取值顺序可以只写一个关键字另一个方向默认为居中数字只写一个值表示水平方向垂直方向为居中 背景图缩放 作用设置背景图大小 属性名background-sizebgz 常用属性值 关键字 cover等比例缩放背景图片以完全覆盖背景区可能背景图片部分看不见contain等比例缩放背景图片以完全装入背景区可能背景区部分空白 百分比根据盒子尺寸计算图片大小 数字 单位例如px div {width: 500px;height: 400px;background-color: pink;background-image: url(./images/1.png);background-repeat: no-repeat;background-size: cover;background-size: contain; }提示工作中图片比例与盒子比例相同使用 cover 或 contain 缩放背景图效果相同。 背景图固定 作用背景不会随着元素的内容滚动。 属性名background-attachmentbga 属性值fixed body {background-image: url(./images/bg.jpg);background-repeat: no-repeat;background-attachment: fixed; }背景复合属性 属性名backgroundbg 属性值背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定空格隔开各个属性值不区分顺序 div {width: 400px;height: 400px;background: pink url(./images/1.png) no-repeat right center/cover; }05-显示模式 显示模式标签元素的显示方式。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w2zrCgAR-1691943895407)(assets/1680320464551.png)] 作用布局网页的时候根据标签的显示模式选择合适的标签摆放内容。 块级元素 特点 独占一行宽度默认是父级的100%添加宽高属性生效 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0eogXLh5-1691943895407)(assets/1680320578369.png)] 行内元素 特点 一行可以显示多个设置宽高属性不生效宽高尺寸由内容撑开 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i8M5j5qx-1691943895408)(assets/1680320583985.png)] 行内块元素 特点 一行可以显示多个设置宽高属性生效宽高尺寸也可以由内容撑开 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8UDhWnAV-1691943895408)(assets/1680320590005.png)] 转换显示模式 属性display [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9Q26ONbn-1691943895409)(assets/1680320613034.png)] 06-综合案例一-热词 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ufyf5ZJI-1691943895409)(assets/1680320664821.png)] HTML标签 a href#HTML/a a href#CSS/a a href#JavaScript/a a href#Vue/a a href#React/aCSS样式 style /* 默认效果 */ a { display: block; width: 200px; height: 80px; background-color: #3064bb; color: #fff; text-decoration: none; text-align: center; line-height: 80px; font-size: 18px; }/* 鼠标悬停的效果 */ a:hover { background-color: #608dd9; } /style07-综合案例二 – banner 效果 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wzkxjxVQ-1691943895410)(assets/1680320758496.png)] HTML标签 div classbannerh2让创造产生价值/h2p我们希望小游戏平台可以提供无限的可能性让每一个创作者都可以将他们的才华和创意传递给用户。/pa href#我要报名/a /divCSS样式 style.banner {height: 500px;background-color: #f3f3f4;background-image: url(./images/bk.png);background-repeat: no-repeat;background-position: left bottom;/* 文字控制属性继承给子级 */text-align: right;color: #333;}.banner h2 {font-size: 36px;font-weight: 400;line-height: 100px;}.banner p {font-size: 20px;}.banner a {width: 125px;height: 40px;background-color: #f06b1f;display: inline-block;/* 转块级无法右对齐因为块元素独占一行 *//* display: block; */text-align: center;line-height: 40px;color: #fff;text-decoration: none;font-size: 20px;} /style