百度快照优化网站,网站制作公司合肥,wordpress 文献类主题,iis网站创建向导文章目录 01-后代选择器02-子代选择器03-并集选择器04-交集选择器05-伪类选择器06-拓展-超链接伪类07-CSS特性-继承性08-CSS特性-层叠性09-CSS特性-优先级11-Emmet写法12-背景图13-背景图平铺方式14-背景图位置15-背景图缩放16-背景图固定17-background属性18-显示模式19-显示模… 文章目录 01-后代选择器02-子代选择器03-并集选择器04-交集选择器05-伪类选择器06-拓展-超链接伪类07-CSS特性-继承性08-CSS特性-层叠性09-CSS特性-优先级11-Emmet写法12-背景图13-背景图平铺方式14-背景图位置15-背景图缩放16-背景图固定17-background属性18-显示模式19-显示模式转换20-综合案例-热词21-综合案例-banner效果 01-后代选择器
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 设置div里面的span标签包含的文字颜色 *//* 这叫做后代选择器 */div span{color: aqua;}/style
/head
bodyspanspan 标签/spandivspan这是div的儿子 span/spanpspan这是孙子span/span/p/div
/body
/html02-子代选择器
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 子代选择器 */div span{color: aquamarine;}/style
/head
bodydivspanerzi/spanpspansunzi/span/p/div
/body
/html03-并集选择器
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- 并集选择器 --stylediv,p,span{color: aqua;}/style
/head
bodydivdiv/divpp/pspanspan/span
/body
/html04-交集选择器
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 第一个p标签文字颜色是红色 *//* 选择器之前没有任何的符号 */p.box{color: red;}/style
/head
bodyp classboxp标签使用了类选择器/ppp标签/pdiv classboxdiv标签使用了类选择器/div/body
/html05-伪类选择器
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 设置鼠标悬停样式 */a:hover{color: aqua;}.box:hover{color: blue;}/style
/head
bodya href#a标签超链接/adiv classboxdiv标签/div
/body
/html06-拓展-超链接伪类
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* a:link{color: red;}a:visited{color: aqua;}a:hover{color: black;}a:active{color: blue;} */a{color: red;}a:hover{color: antiquewhite;}/style
/head
bodya href#a标签测试伪类/a
/body
/html07-CSS特性-继承性
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- 继承性 --stylebody{font-size: 30px;color: red;font-weight: 700;}/style
/head
bodydivdiv/divpp/pspanspan/spana href#a/ah1h1标签/h1
/body
/html08-CSS特性-层叠性
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 相同属性回覆盖不同属性会叠加 */div{color: green;font-size: 30px;}div{color: red;font-size: 700;}/style
/headbodydivdiv标签/div
/body
/html09-CSS特性-优先级
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 通配符选择器 */*{color: red;}/* 标签选择器 */div{color: green;}/* 类选择器 */.box{color: blue;}/* id选择器 */#text{color: orange;}/* 行内样式 *//* important*/*{color: red!important}/style
/head
body!-- --div classbox idtext stylecolor: purple;div标签/div
/body
/html11-Emmet写法
Emmet 是一种简化 HTML 和 CSS 编写的工具它通过简洁的语法提高了编码效率。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: ;height: ;width: ;background-color: ;width: 500px;height: 200px;background-color: #fff;}/style
/head
bodydiv classbox/divp classboxx/pp idid/pdivp/p/divspan/spanspan/spanspan/spandiv111/div
/body
/html12-背景图
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 400px;height: 400px;background-image: url(./images/1111.jpg);}/style
/head
bodydivdivbiaoqian/div
/body
/html13-背景图平铺方式
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 400px;height: 400px;background-color: pink;background-image: url(images/20.jpg);background-repeat: no-repeat;/* background-repeat: repeat; *//* background-repeat: repeat-x; *//* background-repeat: repeat-y; */}/style
/head
bodydivdiv标签/div
/body
/html14-背景图位置
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 400px;height: 400px;background-color: pink;background-image: url(./images/20.jpg);background-repeat: no-repeat;/* 左上角 *//* background-position: 0 0; *//* background-position: left right; *//* background-position: right bottom; *//* 水平正数向左负数向右 *//* background-position: 50px 0; *//* background-position: -50px 0; *//* 垂直整数向下 负数向上 *//* background-position: 0 100px; *//* background-position: 0 -100px; *//* background-position: 50px center; *//* background-position: bottom left; *//* 关键字可以只写一个另一个方向居中 */background-position: bottom;background-position: 50px ;} /style
/head
bodydivdivbiaoqian/div
/body
/html15-背景图缩放
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 400px;height: 400px;background-color: pink;background-image: url(images/20.jpg);background-repeat: no-repeat;/* background-repeat: repeat; *//* background-repeat: repeat-x; *//* background-repeat: repeat-y; *//* background-size: contain; *//* cover完全覆盖 背景图可能显示不全 *//* background-size: cover; *//* 宽度保持一致 */background-size: 100%;}/style
/head
bodydivdiv标签/div
/body
/html16-背景图固定
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody{background-color: pink;background-image: url(images/1111.jpg);background-repeat: no-repeat;/* background-repeat: repeat; *//* background-repeat: repeat-x; *//* background-repeat: repeat-y; */background-position: center top;background-attachment: fixed;}/style
/head
bodypvjdkfnvjf/ppfdkvkfk/ppdfv vff/ppfkmkfvkfdvk/ppvjdkfnvjf/ppfdkvkfk/ppdfv vff/ppfkmkfvkfdvk/ppvjdkfnvjf/ppfdkvkfk/ppdfv vff/ppfkmkfvkfdvk/ppvjdkfnvjf/ppfdkvkfk/ppdfv vff/ppfkmkfvkfdvk/ppvjdkfnvjf/ppfdkvkfk/ppdfv vff/ppfkmkfvkfdvk/ppvjdkfnvjf/ppfdkvkfk/ppdfv vff/ppfkmkfvkfdvk/ppvjdkfnvjf/ppfdkvkfk/ppdfv vff/ppfkmkfvkfdvk/ppvjdkfnvjf/ppfdkvkfk/ppdfv vff/ppfkmkfvkfdvk/ppvjdkfnvjf/ppfdkvkfk/ppdfv vff/ppfkmkfvkfdvk/ppvjdkfnvjf/ppfdkvkfk/ppdfv vff/ppfkmkfvkfdvk/ppvjdkfnvjf/ppfdkvkfk/ppdfv vff/ppfkmkfvkfdvk/ppvjdkfnvjf/ppfdkvkfk/ppdfv vff/ppfkmkfvkfdvk/p
/body
/html17-background属性
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- background复合属性 --stylediv{width: 400px;height: 400px;/* 颜色 图片路径 平铺方式 背景图位置、背景图缩放*//* background: pink url(./images/20.jpg) no-repeat center bottom/cover; */background: pink url(./images/20.jpg) no-repeat center bottom/contain;}/style
/head
bodydivdiv标签/div
/body
/html18-显示模式
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 块级元素的特点是独占一行宽度默认是父级的100% 加宽高生效 */div{width: 100px;height: 100px;}.div1{background-color: red;}.div2{background-color: aqua;}/* 行内元素加宽高不生效 */span{width: 100px;height: 100px;}.span1{background-color: pink;}.span2{background-color: blue;}/* 行内块一行共存多个默认尺寸由内容撑开 加宽高生效 */img{height: 100px;width: 100px;}/style
/head
body!-- 块级 --div classdiv1div标签1/divdiv classdiv2div标签2/div!-- 行内 --span classspan1span1/spanspan classspan2span2/span!-- 行内块 --img src./images/20.jpg altimg src./images/20.jpg alt
/body
/html19-显示模式转换
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 块级元素的特点是独占一行宽度默认是父级的100% 加宽高生效 */div{width: 100px;height: 100px;/* display: inline-block; */display: inline;}.div1{background-color: red;}.div2{background-color: aqua;}/* 行内元素加宽高不生效 */span{width: 100px;height: 100px;/* display: block; */display: inline-block;}.span1{background-color: pink;}.span2{background-color: blue;}/* 行内块一行共存多个默认尺寸由内容撑开 加宽高生效 */img{height: 100px;width: 100px;display: block;}/style
/head
body!-- 块级 --div classdiv1div标签1/divdiv classdiv2div标签2/div!-- 行内 --span classspan1span1/spanspan classspan2span2/span!-- 行内块 --img src./images/20.jpg altimg src./images/20.jpg alt
/body
/html20-综合案例-热词
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{background-color: #3064bb;width: 200px;height: 80px;text-align: center;}diva{line-height: 80px;font-size: 18px;text-decoration: none;color: white;}div:hover{background-color: #608dd9;}/style
/head
body!-- 也可以不用在div里面嵌套a标签 直接把a标签通过display变为块级标签 --diva href#HTML/a/divdiva href#CSS/a/divdiva href#JavaScript/a/divdiva href#Vue/a/divdiva href#React/a/div
/body
/html21-综合案例-banner效果
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.banner{height: 500px;background-color: #f3f3f4;background-image: url(./images/20.jpg);background-repeat: no-repeat;background-position: left bottom;/* text—align是对文字属性进行更改文字属性具有继承性 */text-align: right;color: #333;}.p1{height: 100px;line-height: 100px;font-size: 35px;}.p2{font-size: 20px;}.banner a{background-color:#f06b1f;height: 40px;width: 125px;color: #fff;/* 转行内块无法右对齐因为已经占了一整行了 */display: inline-block;text-align: center;line-height: 40px;font-size: 20px;}/style
/head
bodydiv classbannerp classp1让创造产生价值/pp classp2我们希望小游戏平台可以提供无线的可能地处江南单纯的拿出你的觉得你节食减肥那段艰难决定/pa我要报名/a/div
/body
/html
