做仿网站的书,几分钟弄清楚php做网站,课件ppt免费下载,网上购物哪个平台正品别人的议论#xff0c;那是别人的#xff0c;你的人生#xff0c;才是你的 —— 24.5.7 一、复合选择器 定义#xff1a;由两个或多个基础选择器#xff0c;通过不同的方式组合而成 作用#xff1a;更准确、更高效的选择目标元素#xff08;标签#xff09; 1.后代选择… 别人的议论那是别人的你的人生才是你的 —— 24.5.7 一、复合选择器 定义由两个或多个基础选择器通过不同的方式组合而成 作用更准确、更高效的选择目标元素标签 1.后代选择器 后代选择器选中某元素的后代元素 选择器写法父选择器、子选择器CSS属性父子选择器之间用空格隔开 后代选择器包含后代的所有包含儿子、孙子、重孙子 示例 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title后代选择器/titlestyle/* div 里面的 span 文字颜色是红色 */div span {color:aquamarine;}/style
/head
bodyspanspan 标签/spandivspan这个是div的儿子span/spanpspan这个是div的孙子span/span/p/div
/body
/html 2.子代选择器 子代选择器:选中某元素的子代元素(最近的子级) 选择器写法:父选择器 子选择器{CSS 属性}父子选择器之间用 隔开 示例 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title子代选择器/titlestyle/* div 的儿子 span 文字颜色是红色 */div span {color: red;}/style
/head
bodydivspan儿子 span/spanpspan孙子 span/span/p/div
/body
/html 3.并集选择器 并集选择器选中多组标签设置相同的样式 选择器写法选择器1,选择器2,…, 选择器N {CSS 属性}选择器之间用隔开。 示例 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title并集选择器/titlestyle/* div p span 颜色是红色 */div,p,span {color:red;}/style
/head
bodydivdiv 标签/divpp 标签/pspanspan 标签/span
/body
/html 4.交集选择器了解 交集选择器选中同时满足多个条件的元素。 选择器写法选择器1选择器2{CSS 属性}选择器之间连写没有任何符号 示例 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title交集选择器/titlestyle/* 类选择器的名字就是点加类名 .是类选择器自带的 */p.box{color: red;}/style
/head
bodyp classboxp 标签使用了类选择器 box/ppp 标签/pdiv classboxdiv 标签使用了类选择器 box/div
/body
/html 5.伪类选择器 伪类选择器伪类表示元素状态选中元素的某个状态设置样式 鼠标悬停状态选择器hover{CSS 属性} 示例 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title伪类选择器/titlestylea:hover {color: brown;}/* 任何标签都可以设置鼠标悬停的状态 */.box:hover {color: greenyellow;}p:hover {color: aqua;}/style
/head
bodya href#a 标签超链接/adiv classboxdiv标签/divp一切都会好的/p
/body
/html 伪类 — 超链接 超链接一共有四个状态 选择器 作用 :link 访问前 :visited 访问后 :hover 鼠标悬停 :active 点击时(激活) 提示如果要给超链接设置以上四个状态需要按 LVHA 的顺序书写。 示例 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title超链接标签/titlestyle/*a:link {color:red;}a:visited{color: green;}a:hover{color:blue;}a:active{color:cadetblue;}*//* 工作中一个 a 标签选择器设置超链接的样式hover状态特殊位置 */a{color:red;}a:hover{color:green;}/style
/head
bodya href#a 标签测试伪类/a
/body
/html 二、CSS 特性 CSS特性 化简代码 / 定位问题并解决问题 继承性 继承性子级默认继承父级的文字控制属性 当标签有自己的属性则会使用自己的属性不需要继承 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS特性-继承性/titlestylebody{font-size: 30px;color: green;font-weight: 700;}/style
/head
bodydivdiv 标签/divpp 标签/pspanspan 标签/span!-- 如果标签自己有样式则生效自己的不继承超链接默认是蓝的所以不用继承 --a href#a 标签/ah1h1 标签/h1
/body
/html 层叠性 特点: 相同的属性会覆盖:后面的 CSS 属性覆盖前面的 CSS 属性 不同的属性会叠加:不同的 CSS 属性都生效 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS特性-层叠性/titlestyle/* 覆盖 叠加 */div{color: red;font-weight: 700;}/* 想要生效的相同属性放在后面 */div{color:green;font-size: 30px;}/style
/head
bodydivdiv标签/div
/body
/html 优先级 优先级: 也叫权重当一个标签使用了多种选择器时基于不同种类的选择器的匹配规则。 规则: 选择器优先级高的样式生效 公式: 通配符选择器 标签选择器 类选择器 id选择器 行内样式 !important选择器选中标签的范围越大优先级/权重越低 选中标签的范围越大优先级/权重越低 !important 是一个提权功能提高权重/优先级到 最高慎用 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title特性-优先级/titlestyle*{/* !important 是一个提权功能提高权重/优先级到 最高慎用 */color:aquamarine !important;}div{color:red;}.box{color: blue;}#test{color:orange;}/style
/head
bodydiv classbox idtest stylecolor:purplediv 标签/div
/body
/html 优先级-叠加计算规则 叠加计算 叠加计算:如果是复合选择器则需要权重叠加计算。公式:(每一级之间不存在进位) (行内样式id选择器个数类选择器个数标签选择器个数) 规则: ① 从左向右依次比较选个数同一级个数多的优先级高如果个数相同则向后比较 ② !important 权重最高 ③ 继承权重最低 题1 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title权重叠加1/titlestyle/* 行内样式为0 id选择器为0 类选择器为2 标签选择器为1*/.c1 .c2 div{color: blue;}/* 行内样式为0 id选择器为1 类选择器为0 标签选择器为1*/div #box3{color: green;}/* 行内样式为0 id选择器为1 类选择器为1 标签选择器为0*//* 最终生效第三个 所以浏览器颜色是橙色 */#box1 .c3{color:orange;}/style
/head
bodydiv idbox1 classc1div idbox2 classc2div idbox3 classc3这行文本是什么颜色的/div/div/div
/body
/html 题2 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title权重叠加2/titlestylediv p{color:red;}.father{color: blue;}/style
/head
bodydiv classfatherp classson文字/p/div
/body
/html 题3 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title权重叠加3/titlestyle/* 行内样式为0 id选择器为2 类选择器为0 标签选择器为0*/#father #son{color: blue;}/* 行内样式为0 id选择器为1 类选择器为1 标签选择器为1*/#father p.c2{color: black;}/* 行内样式为0 id选择器为0 类选择器为2 标签选择器为2*/div.c1 p.c2{color:red;}/* father是继承 所以即使有important也排除 */#father{color:green !important;}div#father.c1{color:yellow;}/style
/head
bodydiv idfather classc1p idson classc2这行文本是什么颜色/p/div
/body
/html 三、Emmet 写法 Emmet 写法 Emmet写法:代码的简写方式输入缩写 VS Code 会自动生成对应的代码 HTML 如下表所示 CSS: 大多数简写方式为属性单词的首字母 四、背景属性 1.背景属性-拆分写法 背景图 background-image 网页中使用背景图实现装饰性的图片效果 属性名: background-image(bgi) 属性值: url(背景图 URL) div {width: 400px;height:400px;background-image:url(./images/1.png);
} 示例 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title背景图/titlestyle/* 盒子是 400 * 400 */div {width: 400px;height: 400px;/* 背景图默认是平铺效果 盒子太大会默认复制 */background-image: url(./images/小猫.png);}/style
/head
bodydivdiv标签/div
/body
/html 背景图平铺方式 background-repeat 属性名 background-repeat ( bgr) 属性值 效果 no-repeat 不平铺 repeat 平铺(默认效果) repeat-x 水平方向平铺 repeat-y 垂直方向平铺 示例 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title背景图平铺方式/titlestylediv{width: 400px;height: 400px;background-color: pink;background-image: url(./images/小猫.png);/* 不平铺盒子的左上角显示一张背景图 */background-repeat: no-repeat;}/style
/head
bodydiv div标签/div
/body
/html 背景图位置 属性名 background-position(bgp) 属性值 水平方向位置 垂直方向位置 关键字 关键字 位置 left 左侧 right 右侧 centei 居中 top 顶部 bottom 底部 坐标(数字px正负都可以) 水平:正数向右;负数向左 垂直:正数向下;负数向上 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;
} 示例 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title背景图位置/titlestylediv{width: 400px;height: 400px;background-color: pink;background-image: url(./images/小猫.png);background-repeat: no-repeat;/* 调整背景图位置 left左边 right右边 bottom底部 top首部*/background-position: right bottom;/* 也可以 符号 像素 0 *//* background-position: 50px 0;background-position: 100px 0;background-position: -100px 0;background-position: 0 100px;background-position: 0 -100px;background-position: 0 -50px; */}/style
/head
bodydivdiv 标签/div
/body
/html 提示 关键字取值方式写法可以颠倒取值顺序 可以只写一个关键字另一个方向默认为居中;数字只写一个值表示水平方向垂直方向为居中 示例 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title背景图位置/titlestylediv{width: 400px;height: 400px;background-color: pink;background-image: url(./images/小猫.png);background-repeat: no-repeat;/* 只写一个数字表示水平方向垂直方向不写表示居中 */background-position: 30px;}/style
/head
bodydivdiv 标签/div
/body
/html 背景图缩放 作用: 设置背景图大小 属性名: background-size(bgz) 常用属性值: 关键字 cover:等比例缩放背景图片以完全覆盖背景区可能背景图片部分看不见 contain:等比例缩放背景图片以完全装入背景区可能背景区部分空白 百分比:根据盒子尺寸计算图片大小 数字单位(例如:px) 示例 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title背景图缩放/titlestylediv {width: 700px;height: 600px;background-color: pink;background-image: url(./images/小猫.png);background-repeat: no-repeat;/* contain等比例缩放如果图的宽高跟盒子尺寸相等停止缩放可能导致盒子有留白 *//* background-size: contain; *//* cover完全覆盖盒子可能导致图片显示不全 *//* background-size: cover; *//* 取百分比的写法可能导致图片显示不全100%表示图片的宽度和盒子宽度一样高度按照图片比例等比例缩放 */background-size: 85%;}/style
/head
bodydivdiv 标签/div
/body
/html 背景图固定 作用: 背景不会随着元素的内容滚动。 属性名: background-attachment(bga) 属性值: fixed body {background-image:url(./images/bg.jpg); background-repeat:no-repeat;background-attachment:fixed;
} 示例 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title背景图固定/titlestylebody{background-image: url(./images/我始终相信.jpg);background-repeat: no-repeat;background-position: center top;background-attachment: fixed;}/style
/head
bodyp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/p
/body
/html 2.背景属性-复合属性 背景复合属性 属性名: background(bg) 属性值: 背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定 空格隔开各个属性值不区分顺序) div {width: 400px;height:400px;background: pink url(./images/1.png) no-repeat right center/cover;
} 示例 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlebackground属性/titlestylediv {width: 600px;height: 600px;/* background: pink url(./images/我始终相信.jpg)no-repeat center bottom/cover; */background: pink url(./images/我始终相信.jpg)no-repeat center bottom/contain;}/style
/head
bodydivdiv 标签/div
/body
/html 3.显示模式 显示模式:标签(元素)的显示方式。 作用: 布局网页的时候根据标签的显示模式选择合适的标签摆放内容 块级元素 独占一行 宽度默认是父级的100% 添加宽高属性生效 行内元素 一行可以显示多个 宽高尺寸由内容撑开 设置宽高属性不生效 行内块元素 一行可以显示多个 宽高尺寸也可以由内容撑开 设置宽高属性生效 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title显示模式/titlestyle/* 块级别元素独占一行 块元素宽度默认是父级的100% 添加宽高属性生效 */div {width: 100px;height: 100px;}.div1{background-color: brown;}.div2{background-color: orange;}span{width: 200px;height: 200px;}.span1{background-color: brown;}.span2{background-color: orange;}/* 图片的宽高会生效 */img{width: 100px;height: 100px;}/style
/head
body!-- 块级别元素独占一行 块元素宽度默认是父级的100% 添加宽高属性生效--div classdiv1div1 标签1/divdiv classdiv2div2 标签2/div!-- 行内元素一行可以共存多个尺寸由内容撑开价款高不生效 --span classspan1span111111111/spanspan classspan2span1/span!-- 行内块元素一行共存多个默认尺寸由内容撑开加宽高生效 --img src./images/我始终相信.jpg altimg src./images/我始终相信.jpg alt/body
/html 总结 1.“独占一行;宽高属性生效;默认宽度是父级的100%”是什么显示模式的特点? 块级 2.“一行共存多个;宽高属性不生效;宽高由内容撑开”是什么显示模式的特点? 行内 3.“一行共存多个;宽高属性生效;宽高默认由内容撑开”是什么显示模式特点 行内块 转换显示模式 属性名: display 属性值: 属性值 效果 block 块级 inline-block 行内块 inline 行内 块级和行内块是工作中常用的属性行内属性基本不用 示例 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title显示模式转换/titlestyle/* 块级别元素独占一行 块元素宽度默认是父级的100% 添加宽高属性生效 */div {width: 100px;height: 100px;/* 转换为行内块显示模式 */display: inline-block;/* 转换为行内显示模式 */display: inline;}.div1{background-color: brown;}.div2{background-color: orange;}span{width: 200px;height: 200px;/* 把默认的行内模式转换为块模式 */display: block;/* 转换为行内块模式 */display: inline-block;}.span1{background-color: brown;}.span2{background-color: orange;}/* 图片的宽高会生效 */img{width: 100px;height: 100px;/* 将行内块元素转换为块级别元素 */display: block;}/style
/head
body!-- 块级别元素独占一行 块元素宽度默认是父级的100% 添加宽高属性生效--div classdiv1div1 标签1/divdiv classdiv2div2 标签2/div!-- 行内元素一行可以共存多个尺寸由内容撑开价款高不生效 --span classspan1span111111111/spanspan classspan2span1/span!-- 行内块元素一行共存多个默认尺寸由内容撑开加宽高生效 --img src./images/我始终相信.jpg altimg src./images/我始终相信.jpg alt/body
/html 五、综合案例
综合案例一-热词 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title综合案例一、热词/titlestyle/* a的默认效果 */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;}/style
/head
bodya href#HTML/aa href#CSS/aa href#JavaScript/aa href#Vue/aa href#React/a
/body
/html 综合案例二-banner效果 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlebanner效果/titlestyle.banner{/* 字体高度 */height: 500px;/* 背景颜色 */background-color: #f3f3f4;/* 背景图 */background-image: url(./images/我始终相信.jpg);/* 取消平铺效果 */background-repeat: no-repeat;/* 将图像放在左下角 */border-spacing: left bottom;/* 将字体放在右边 可以继承给子集*/text-align: right;color: #333333;}.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;/* 块级无法右对齐 因为块级元素占一行 *//* 超链接文字位置 */text-align: center;/* 超链接文字高度 */line-height: 40px;/* 超链接文字颜色 */color:#fff;/* 超链接不要下划线 */text-decoration: none;/* 字体颜色 */font-size: 20px;}/style
/head
bodydiv classbannerh2一切都会好的 /h2p苦难是花开的伏笔/pa href#我一直相信/a/div
/body
/html
