2025年3月31日 星期一 乙巳(蛇)年 正月初一 设为首页 加入收藏
rss
掌上城东
  • 进入网站首页面

    掌上城东书院
    定制您的专属资源库
  • m.cdsy.xyz

    掌上城东书院
    随时随地，想看就看
关注我们
内容服务
旗下网站

高级搜索
帮助
加入我们

首页

您当前的位置：首页 > 计算机 > 编程开发 > Html+Div+Css（前端）

CSS进阶

时间：07-14来源：作者：点击数：19
CDSY,CDSY.XYZ

1 选择器进阶

1.1 复合选择器
在这里插入图片描述
  • <!DOCTYPE html>

  • <html lang="en">

  • <head>

  •     <meta charset="UTF-8">

  •     <meta http-equiv="X-UA-Compatible" content="IE=edge">

  •     <meta name="viewport" content="width=device-width, initial-scale=1.0">

  •     <title>Document</title>

  •     <style>

  •         /* 找到div的儿子p设置文字颜色是红色 */

  •         /* 父选择器   后代选择器 {} */

  •         div p {

  •             color: red;

  •         }

  •     </style>

  • </head>

  • <body>

  •     <!-- 后代: 儿子, 孙子, 重孙子..... -->

  •     <p>这是一个p标签</p>

  •     <div>

  •         <p>这是div的儿子p</p>

  •     </div>

  • </body>

  • </html>

  •
在这里插入图片描述
  • <!DOCTYPE html>

  • <html lang="en">

  • <head>

  •     <meta charset="UTF-8">

  •     <meta http-equiv="X-UA-Compatible" content="IE=edge">

  •     <meta name="viewport" content="width=device-width, initial-scale=1.0">

  •     <title>Document</title>

  •     <style>

  •         /* 空格隔开的是后代, 儿子,孙子,重孙子 */

  •         /* div a {

  •             color: red;

  •         } */

  • 

  •         /* 只想选中儿子a */

  •         /* div的儿子a文字颜色是红色 */

  •         div>a {

  •             color: red;

  •         }

  •     </style>

  • </head>

  • <body>

  •     <div>

  •         父级

  •         <a href="#">这是div里面的a</a>

  •         <p>

  •             <a href="#">这是div里面的p里面的a</a>

  •         </p>

  •     </div>

  • </body>

  • </html>

  •
1.2 并集选择器
在这里插入图片描述
  • <!DOCTYPE html>

  • <html lang="en">

  • <head>

  •     <meta charset="UTF-8">

  •     <meta http-equiv="X-UA-Compatible" content="IE=edge">

  •     <meta name="viewport" content="width=device-width, initial-scale=1.0">

  •     <title>Document</title>

  •     <style>

  •         /* p div span h1 文字颜色是红色 */

  •         /* 选择器1, 选择器2 {} */

  •         p, 

  •         div, 

  •         span, 

  •         h1 {

  •             color: red;

  •         }

  •     </style>

  • </head>

  • <body>

  •     <p>ppp</p>

  •     <div>div</div>

  •     <span>span</span>

  •     <h1>h1</h1>

  • 

  •     <h2>h2</h2>

  • </body>

  • </html>

  •
1.3 交集选择器
在这里插入图片描述
  • <!DOCTYPE html>

  • <html lang="en">

  • <head>

  •     <meta charset="UTF-8">

  •     <meta http-equiv="X-UA-Compatible" content="IE=edge">

  •     <meta name="viewport" content="width=device-width, initial-scale=1.0">

  •     <title>Document</title>

  •     <style>

  •         /* p {

  •             color: red;

  •         } */

  • 

  •         /* .box {

  •             color: red;

  •         } */

  • 

  •         /* 必须是p标签,而且添加了box类 */

  •         /* p.box {

  •             color: red;

  •         } */

  •         /* #dilireba {

  •             color: red;

  •         } */

  • 

  •         .box1 {

  •             color: green;

  •         }

  •     </style>

  • </head>

  • <body>

  •     <!-- 找到第一个p,带box类的, 设置文字颜色是红色 -->

  •     <p class="box box1" id="dilireba">这是p标签:box</p>

  •     <p class="box">这是p标签:box</p>

  •     <p>pppppp</p>

  •     <div class="box">这是div标签:box</div>

  • </body>

  • </html>

  •
1.4 hover伪类选择器
在这里插入图片描述
  • <!DOCTYPE html>

  • <html lang="en">

  • <head>

  •     <meta charset="UTF-8">

  •     <meta http-equiv="X-UA-Compatible" content="IE=edge">

  •     <meta name="viewport" content="width=device-width, initial-scale=1.0">

  •     <title>Document</title>

  •     <style>

  •         /* 悬停的时候文字颜色是红色 */

  •         a:hover {

  •             color: red;

  •             background-color: green;

  •         }

  • 

  •         /* 用户鼠标悬停到div的时候, 文字是绿色 */

  •         div:hover {

  •             color: green;

  •         }

  •     </style>

  • </head>

  • <body>

  •     <a href="#">这是超链接</a>

  •     <!-- 任何标签都可以添加伪类, 任何一个标签都可以鼠标悬停 -->

  •     <div>div</div>

  • </body>

  • </html>

  •
1.5 Emmet语法
在这里插入图片描述
1.6 总结
在这里插入图片描述

2 背景相关属性

2.1 背景颜色
在这里插入图片描述
  • <!DOCTYPE html>

  • <html lang="en">

  • <head>

  •     <meta charset="UTF-8">

  •     <meta http-equiv="X-UA-Compatible" content="IE=edge">

  •     <meta name="viewport" content="width=device-width, initial-scale=1.0">

  •     <title>Document</title>

  •     <style>

  •         div {

  •             width: 400px;

  •             height: 400px;

  •             /* background-color: pink; */

  •             /* background-color: #ccc; */

  •             /* 红绿蓝三原色, a是透明度0-1 */

  •             /* background-color: rgba(0, 0, 0, 0.5); */

  •             background-color: rgba(0, 0, 0, .5);

  •         }

  •     </style>

  • </head>

  • <body>

  •     <div>div</div>

  • </body>

  • </html>

  •
2.2 背景图片
在这里插入图片描述
  • <!DOCTYPE html>

  • <html lang="en">

  • <head>

  •     <meta charset="UTF-8">

  •     <meta http-equiv="X-UA-Compatible" content="IE=edge">

  •     <meta name="viewport" content="width=device-width, initial-scale=1.0">

  •     <title>Document</title>

  •     <style>

  •         div {

  •             width: 400px;

  •             height: 400px;

  •             background-color: pink;

  •             background-image: url(./images/1.jpg);

  •         }

  •     </style>

  • </head>

  • <body>

  •     <div>文字</div>

  • </body>

  • </html>

  •
2.3 背景平铺
在这里插入图片描述
  • <!DOCTYPE html>

  • <html lang="en">

  • <head>

  •     <meta charset="UTF-8">

  •     <meta http-equiv="X-UA-Compatible" content="IE=edge">

  •     <meta name="viewport" content="width=device-width, initial-scale=1.0">

  •     <title>Document</title>

  •     <style>

  •         div {

  •             width: 400px;

  •             height: 400px;

  •             background-color: pink;

  •             background-image: url(./images/1.jpg);

  •             /* background-repeat: repeat; */

  •             /* 不平铺: 图片只显示一个 */

  •             /* background-repeat: no-repeat; */

  •             /* background-repeat: repeat-x; */

  •             /* background-repeat: repeat-y; */

  •         }

  •     </style>

  • </head>

  • <body>

  •     <div>文字</div>

  • </body>

  • </html>

  •
2.4 背景位置
在这里插入图片描述
  • <!DOCTYPE html>

  • <html lang="en">

  • <head>

  •     <meta charset="UTF-8">

  •     <meta http-equiv="X-UA-Compatible" content="IE=edge">

  •     <meta name="viewport" content="width=device-width, initial-scale=1.0">

  •     <title>Document</title>

  •     <style>

  •         div {

  •             width: 400px;

  •             height: 400px;

  •             background-color: pink;

  •             background-image: url(./images/1.jpg);

  •             background-repeat: no-repeat;

  •             /* background-position: right 0; */

  •             /* background-position: right bottom; */

  •             /* background-position: center center; */

  •             /* background-position: center; */

  •             /* background-position: 50px 0; */

  •             /* background-position: 50px 100px; */

  •             background-position: -50px -100px;

  • 

  •             /* 正数: 向右向下移动; 负数:向左向上移动 */

  •             /* 注意: 背景色和背景图只显示在盒子里面 */

  •         }

  •     </style>

  • </head>

  • <body>

  •     <div>文字</div>

  • </body>

  • </html>

  •
2.5 背景相关属性连写
在这里插入图片描述
  • <!DOCTYPE html>

  • <html lang="en">

  • <head>

  •     <meta charset="UTF-8">

  •     <meta http-equiv="X-UA-Compatible" content="IE=edge">

  •     <meta name="viewport" content="width=device-width, initial-scale=1.0">

  •     <title>Document</title>

  •     <style>

  •         div {

  •             width: 400px;

  •             height: 400px;

  •             /* 不分先后顺序 背景色  背景图  背景图平铺  背景图位置 */

  •             /* background: pink url(./images/1.jpg) no-repeat center bottom; */

  •             /* 背景图位置如果是英文单词可以颠倒顺序 */

  •             background: pink url(./images/1.jpg) no-repeat bottom center ;

  • 

  •             /* 测试背景图位置如果是数值 不要颠倒顺序 */

  •             /* 水平50px, 垂直100px */

  •             /* background: pink url(./images/1.jpg) no-repeat 50px 100px; */

  •             background: pink url(./images/1.jpg) no-repeat 100px 50px;

  • 

  • 

  •         }

  •     </style>

  • </head>

  • <body>

  •     <div></div>

  • </body>

  • </html>

  •

img标签和背景图片的区别

在这里插入图片描述

3 元素显示模式

3.1 块级元素
在这里插入图片描述
  • <!DOCTYPE html>

  • <html lang="en">

  • <head>

  •     <meta charset="UTF-8">

  •     <meta http-equiv="X-UA-Compatible" content="IE=edge">

  •     <meta name="viewport" content="width=device-width, initial-scale=1.0">

  •     <title>Document</title>

  •     <style>

  •         /* 块: 独占一行; 宽度默认是父级100%; 添加宽度都生效 */

  •         div {

  •             width: 300px;

  •             height: 300px;

  •             background-color: pink;

  •             

  •              /* 块  换行*/

  •              display: block;

  • 

  •             /* 行内块  可以设置宽高*/

  •               /* display: inline-block; */

  • 

  •             /* 行内 不可以设置宽高*/

  •             /* display: inline; */

  •         }

  •     </style>

  • </head>

  • <body>

  •     <div>11111</div>

  •     <div>22222</div>

  • </body>

  • </html>

  •
3.2 行内元素
在这里插入图片描述
  • <!DOCTYPE html>

  • <html lang="en">

  • <head>

  •     <meta charset="UTF-8">

  •     <meta http-equiv="X-UA-Compatible" content="IE=edge">

  •     <meta name="viewport" content="width=device-width, initial-scale=1.0">

  •     <title>Document</title>

  •     <style>

  •         /* 行内: 不换行; 设置宽高不生效; 尺寸和内容的大小相同 */

  •         span {

  •             width: 300px;

  •             height: 300px;

  •             background-color: pink;

  • 

  •             /* 行内块 不换行*/

  •             /*  display: inline-block; */

  • 

  •             /* 块  换行*/

  •             /* display: block;*/

  •             

  •             /* 行内 不可以设置宽高*/

  •             display: inline;

  •         }

  •     </style>

  • </head>

  • <body>

  •     <span>span</span>

  •     <span>span</span>

  • </body>

  • </html>

  •
3.3 行内块元素
在这里插入图片描述
  • <!DOCTYPE html>

  • <html lang="en">

  • <head>

  •     <meta charset="UTF-8">

  •     <meta http-equiv="X-UA-Compatible" content="IE=edge">

  •     <meta name="viewport" content="width=device-width, initial-scale=1.0">

  •     <title>Document</title>

  •     <style>

  •         /* 行内: 不换行; 设置宽高不生效; 尺寸和内容的大小相同 */

  •         span {

  •             width: 300px;

  •             height: 300px;

  •             background-color: pink;

  • 

  •             /* 行内块 不换行*/

  •             /* display: inline-block; */

  • 

  •             /* 块  换行*/

  •             /* display: block;*/

  •             

  •             /* 行内 不可以设置宽高*/

  •             display: inline; 

  •         }

  •     </style>

  • </head>

  • <body>

  •     <span>span</span>

  •     <span>span</span>

  • </body>

  • </html>

  • 

  • <!DOCTYPE html>

  • <html lang="en">

  • <head>

  •     <meta charset="UTF-8">

  •     <meta http-equiv="X-UA-Compatible" content="IE=edge">

  •     <meta name="viewport" content="width=device-width, initial-scale=1.0">

  •     <title>Document</title>

  •     <style>

  •         /* 行内块: 一行显示多个; 加宽高生效 */

  •         img {

  •             width: 100px;

  •             height: 100px;

  •         }

  •     </style>

  • </head>

  • <body>

  •     <img src="./images/1.jpg" alt="">

  •     <img src="./images/1.jpg" alt="">

  • </body>

  • </html>

  •
3.4 元素显示模式转换
在这里插入图片描述
3.5 HTML嵌套规范注意点
在这里插入图片描述
3.6 居中方法总结
在这里插入图片描述

4 CSS 特性

4.1 继承性
在这里插入图片描述
  • <!DOCTYPE html>

  • <html lang="en">

  • <head>

  •     <meta charset="UTF-8">

  •     <meta http-equiv="X-UA-Compatible" content="IE=edge">

  •     <meta name="viewport" content="width=device-width, initial-scale=1.0">

  •     <title>Document</title>

  •     <style>

  •         div {

  •             color: red;

  •             font-size: 30px;

  •             height: 300px;

  •         }

  •     </style>

  • </head>

  • <body>

  •     <div>

  •         这是div标签里面的文字

  •         <span>这是div里面的span</span>

  •     </div>

  • </body>

  • </html>

  •

➢ 有哪些常见属性可以继承？

  1. color
  2. font-style、font-weight、font-size、font-family
  3. text-indent、text-align
  4. line-height

继承的应用

好处：可以在一定程度上减少代码

➢ 常见应用场景：

  1. 可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式
  2. 直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小

继承失效的特殊情况

在这里插入图片描述
4.2 层叠性
在这里插入图片描述
  • <!DOCTYPE html>

  • <html lang="en">

  • <head>

  •     <meta charset="UTF-8">

  •     <meta http-equiv="X-UA-Compatible" content="IE=edge">

  •     <meta name="viewport" content="width=device-width, initial-scale=1.0">

  •     <title>Document</title>

  •     <style>

  •         div {

  •             color: red;

  •             color: green;

  •         }

  • 

  •         .box {

  •             font-size: 30px;

  •         }

  •     </style>

  • </head>

  • <body>

  •     <div class="box">文字</div>

  • </body>

  • </html>

  •
4.3 优先级
在这里插入图片描述
4.4 权重叠加计算
在这里插入图片描述

5 综合案例

5.1 案例1-普通导航
在这里插入图片描述
  • <!DOCTYPE html>

  • <html lang="en">

  • <head>

  •     <meta charset="UTF-8">

  •     <meta http-equiv="X-UA-Compatible" content="IE=edge">

  •     <meta name="viewport" content="width=device-width, initial-scale=1.0">

  •     <title>Document</title>

  •     <style>

  •         /* a 显示模式是行内, 加宽高默认不生效, 转显示模式: 行内块 */

  •         /*text-decoration:

  •         none   默认。定义标准的文本。

  •         underline  定义文本下的一条线。

  •         overline   定义文本上的一条线。

  •         line-through   定义穿过文本下的一条线。

  •         blink  定义闪烁的文本。

  •         inherit    规定应该从父元素继承 

  •         text-decoration 属性的值。*/

  •         a {

  •             text-decoration: none;  /*设置文本样式。*/

  •             width: 100px;

  •             height: 50px;

  •             background-color: red;

  •             display: inline-block;

  •             color: #fff;

  •             text-align: center;

  •             line-height: 50px;

  •         }

  • 

  •         a:hover {

  •             background-color: orange;

  •         }

  •     </style>

  • </head>

  • <body>

  •     <!-- a*5 -->

  •     <!-- 选多行加内容删除 alt + shift + 鼠标左键单击 -->

  •     <a href="#">导航1</a>

  •     <a href="#">导航2</a>

  •     <a href="#">导航3</a>

  •     <a href="#">导航4</a>

  •     <a href="#">导航5</a>

  • </body>

  • </html>

  •
5.2 案例2-五彩导航
在这里插入图片描述
  • <!DOCTYPE html>

  • <html lang="en">

  • <head>

  •     <meta charset="UTF-8">

  •     <meta http-equiv="X-UA-Compatible" content="IE=edge">

  •     <meta name="viewport" content="width=device-width, initial-scale=1.0">

  •     <title>Document</title>

  •     <style>

  •         a {

  •             text-decoration: none;

  •             width: 120px;

  •             height: 58px;

  •             background-color: pink;

  •             display: inline-block;

  •             text-align: center;

  •             line-height: 50px;

  •             color: #fff;

  •         }

  •         /* 每个a的背景图不同, 单独找到每个a, 设置不同的背景图片 */

  •         .one {

  •             background-image: url(./images/bg1.png);

  •         }

  • 

  •         .two {

  •             background-image: url(./images/bg2.png);

  •         }

  • 

  •         .three {

  •             background-image: url(./images/bg3.png);

  •         }

  • 

  •         .four {

  •             background-image: url(./images/bg4.png);

  •         }

  • 

  •         .one:hover {

  •             background-image: url(./images/bg5.png);

  •         }

  • 

  •         .two:hover {

  •             background-image: url(./images/bg6.png);

  •         }

  • 

  •         .three:hover {

  •             background-image: url(./images/bg7.png);

  •         }

  • 

  •         .four:hover {

  •             background-image: url(./images/bg8.png);

  •         }

  •     </style>

  • </head>

  • <body>

  •     <a href="#" class="one">五彩导航</a>

  •     <a href="#" class="two">五彩导航</a>

  •     <a href="#" class="three">五彩导航</a>

  •     <a href="#" class="four">五彩导航</a>

  • </body>

  • </html>

  •
CDSY,CDSY.XYZ
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
0
来顶一下
返回首页
返回首页
上一篇:CSS基础 下一篇:CSS盒子模型
推荐内容
高考生入学注意：这些大学不收复读生
高考生入学注意：这些大		【健康】纯净水、天然水、矿泉水、白开水有什么区别？日常喝水怎么选？
【健康】纯净水、天然
14种竞赛生升学路径盘点，原来高考只是你的第15个选择！
14种竞赛生升学路径盘		excel后缀xls和xlsx有什么区别？转换格式难不难？
excel后缀xls和xlsx有
相关内容
栏目更新
栏目热门
关于我们 | 联系我们 | 用户协议 | 广告服务 | 申请链接 | 网站地图 | 版权声明 | 用户留言 | 招聘信息 | 帮助中心 | 社区讨论 | 下载服务
中国文明网传播文明
Copyright ©2019-2024 CDSY Corporation, All Rights Reserved
城东书院® CDSY.XYZ 版权所有 湘ICP备19021508号-1 公安网备案湘公网安备 43102202000103号
※学习、工作、生活信息平台※
花非花，雾非雾，夜半来，天明去。来如春梦几多时，去似朝云无觅处。
本网大部分资源来源于会员上传，除本网组织的资源外，版权归原作者所有，如有侵犯版权，请立刻和本网联系并提供证据，本网将在三个工作日内改正。
美工素材
免费外链
一起解密
城东书院
美工之家