前端css进阶

最新推荐文章于 2024-06-14 11:01:38 发布
最新推荐文章于 2024-06-14 11:01:38 发布
阅读量129 收藏
点赞数
文章标签： 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shangxianjiao/article/details/132267688
版权

day04-CSS进阶

目标：掌握复合选择器作用和写法；使用background属性添加背景效果

01-复合选择器

定义：由两个或多个基础选择器，通过不同的方式组合而成。

作用：更准确、更高效的选择目标元素（标签）。

后代选择器

后代选择器：选中某元素的后代元素。

选择器写法：父选择器 子选择器 { CSS 属性}，父子选择器之间用空格隔开。

<style>
  div span {
    color: red;
  }
</style>
<span> span 标签</span>
<div>
  <span>这是 div 的儿子 span</span >
</div>

子代选择器

子代选择器：选中某元素的子代元素（最近的子级）。

选择器写法：父选择器 > 子选择器 { CSS 属性}，父子选择器之间用 > 隔开。

<style>
  div > span {
    color: red;
  }
</style>

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

并集选择器

并集选择器：选中多组标签设置相同的样式。

选择器写法：选择器1, 选择器2, …, 选择器N { CSS 属性}，选择器之间用 , 隔开。

<style>
  div,
  p,
  span {
    color: red;
  }
</style>

<div> div 标签</div>
<p>p 标签</p>
<span>span 标签</span>

交集选择器

交集选择器：选中同时满足多个条件的元素。

选择器写法：选择器1选择器2 { CSS 属性}，选择器之间连写，没有任何符号。

<style>
  p.box {
  color: red;
}
</style>

<p class="box">p 标签，使用了类选择器 box</p>
<p>p 标签</p>
<div class="box">div 标签，使用了类选择器 box</div>

注意：如果交集选择器中有标签选择器，标签选择器必须书写在最前面。

伪类选择器

伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式。

鼠标悬停状态：选择器:hover { CSS 属性 }

<style>
  a:hover {
    color: red;
  }
  .box:hover {
    color: green;
  }
</style>

<a href="#">a 标签</a>
<div class="box">div 标签</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 属性都生效
<style>
  div {
    color: red;
    font-weight: 700;
  }
  div {
    color: green;
    font-size: 30px;
  }
</style>

<div>div 标签</div>

注意：选择器类型相同则遵循层叠性，否则按选择器优先级判断。

优先级

优先级：也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。

<style>
  div {
    color: red;
  }
  .box {
    color: green;
  }
</style>

<div class="box">div 标签</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-image（bgi）
  • 属性值：url(背景图 URL)
div {
  width: 400px;
  height: 400px;

  background-image: url(./images/1.png);
}

提示：背景图默认有平铺（复制）效果。

平铺方式

属性名：background-repeat（bgr）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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-position（bgp）

属性值：水平方向位置 垂直方向位置

  • 关键字

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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-size（bgz）

常用属性值：

  • 关键字

    • 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-attachment（bga）

属性值：fixed

body {
  background-image: url(./images/bg.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

背景复合属性

属性名：background（bg）

属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定（空格隔开各个属性值，不区分顺序）

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</a>

CSS样式

<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;
}
</style>

07-综合案例二 – banner 效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wzkxjxVQ-1691943895410)(assets/1680320758496.png)]

HTML标签

<div class="banner">
  <h2>让创造产生价值</h2>
  <p>我们希望小游戏平台可以提供无限的可能性，让每一个创作者都可以将他们的才华和创意传递给用户。</p>
  <a href="#">我要报名</a>
</div>

CSS样式

<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>
shangxianjiao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端工程师进阶 10 日谈
sybh的博客
10-23 453
月影大大帮你梳理前端开发的『内功』，让你告别萌新，走上大佬的成长之路~
前端css进阶学习笔记
a_big_panda的博客
01-29 819
注意：可以通过调试工具判断样式是否可以继承例如：效果：注意：如上图所示，如果标签本身带有css属性则不继承父标签属性2.1层叠性的介绍注意：当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果例如：效果：注意：优先级相同时，后面的效果层叠前面的效果。
前端CSS进阶之案例--导航
sjp991012的博客
03-19 97
用《前端CSS进阶》文章里的内容完成一个导航案例 效果展示 代码实现 <!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, initi.
CSS的进阶
m0_73198722的博客
08-26 577
CSS的进阶补充
前端学习第五站——CSS学习进阶篇
qq_59212867的博客
01-31 719
CSS进阶学习篇
前端工程师进阶指南
默的博客
03-23 1754
前端工程师是当前和未来的重要职业之一，需要不断学习和提高自身技能，以应对不断变化的市场需求。无论是从基础知识的巩固和提高、深度技术的学习、团队协作和项目管理的能力、职业发展和学习规划等方面，前端工程师都需要持续不断地努力和进步。希望本文提供的指南能够为前端工程师提供帮助和指导，让前端工程师更好地实现自己的职业目标和梦想。
css进阶
2301_77083521的博客
07-04 281
当使用 HTML 和 CSS 进行布局定位时，可以使用多种技术和属性来控制元素在页面中的位置和排列。以下是一些常用的布局定位技术和相关属性的介绍：1. 盒模型（Box Model）：每个 HTML 元素都被视为一个矩形的盒子，由内容区域（content）、内边距（padding）、边框（border）和外边距（margin）组成。调整这些属性可以控制盒子在页面中的大小和间距。2. 定位方式（Positioning）：使用`position`属性来定义元素的定位方式。
前端进阶方向
weixin_43837268的博客
02-22 2352
一、服务端技术 对于服务端技术的话，有很多的前端工程师都不是特别的清楚。因为在很多前端工程师眼中 服务端的内容应该是属于后台的东西 ，如果你也有这种想法的话，那么 趁早丢弃 。 试想一个场景，身为一个软件开发工程师，假如有一天，你有了一个点子，想要通过技术来实现的时候。突然发现，你只会写前端的内容，对后台服务一无所知。你不得不求助于服务端工程师。这是不是一种悲剧。 所以说 服务端技术 可能在你的初期对你帮助不大，但是当你在技术领域越来越深入的时候，它是必不可少的内容。 目前针对于前端工程师的服务端技
【网页前端】CSS进阶综合案例
专注于Java领域开发 关注我 带你玩转Java
07-27 297
列车时刻表、分块展示板 、商品广告页、信息介绍版
CSS进阶
记录学习
04-06 1333
CSS复合选择器，并集选择器，交集选择器，hover伪类选择器，背景设置，元素的显示模式，CSS特性
CSS进阶指引
01-19
CSS并不是一个简单的事情，前端开发者可以使用他将页面制作的更佳漂亮。看得更远一些，我们更关心的是网站的性能以及如何制作出更好的网站。在本文中，我想分享我最近几个月的学到的有关于CSS编码的知识。作为一个...
CSS进阶学习资源 面试题
03-07
CSS需要注意的事情！面试官98%会问你的问题！没学这些好意思说自己是前端开发？我就是靠这份找到了实习！
富裕进阶：前端进阶十日谈
02-03
前端进阶十日谈 这里是前端进阶课程内容中的全部示例代码（非课程内容）。 内容共10章，40节课，61个例子。 在线访问： : 完整课程内容:backhand_index_pointing_right_light_skin_tone: 课程介绍 随着前端行业的...
2023年最全前端笔面（20w字）pdf
05-07
2023年最全前端面试（20w字）HTML5+CSS3+JS+TS4+Vue3+React18+八股文+手写+项目+笔试 （一开始就是在CSDN博客上写的，现在应部分同学的要求，我直接将博客内容复制成pdf，暂时没空整理格式，有的代码缺失还请见原文...
cssui:用于css进阶学习
07-06
诚然，此框架比不上Backbone，比不了anglarJS，甚至本身也会有一些问题，但是作为初步接触前端的同学，或者想在前端看到一些设计思想的同学，该框架还是有他一些优势。而且这个代码主要用于学习交流，我们带着看看不...
Web前端网站设计案例：深入剖析创意与技术的完美融合
liyrbtqe_66w的博客
06-12 428
在性能优化方面，设计师通过压缩代码、减少HTTP请求、使用CDN等技术手段，提升了网站的加载速度和响应性能，为用户提供了更加流畅的访问体验。综上所述，本Web前端网站设计案例通过视觉设计、用户体验、技术实现、性能优化、创意表达、响应式设计和跨平台兼容等方面的综合考量，成功打造了一款既美观又实用的网站。这个案例充分展示了Web前端设计的魅力和潜力，为未来的网站设计提供了有益的借鉴和启示。设计师通过独特的视觉元素和创意构思，将品牌理念和文化内涵融入其中，使得整个网站在传达信息的同时，也展现出品牌的独特魅力。
HTML入门教程：深度解析HTML，开启你的前端技术之旅
最新发布
zhangwenok的博客
06-14 1428
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
Web前端设计大赛：创意与技术的碰撞
huejiaqwerty888的博客
06-12 529
在这场竞赛中，参赛者们不仅需要展现出独特的创意，还需要运用精湛的技术将创意转化为实际作品。本文将从四个方面、五个方面、六个方面和七个方面，深入剖析Web前端设计大赛的魅力和挑战。交互设计是Web前端设计的核心环节。参赛者需要关注页面的加载速度、响应速度以及操作的便捷性等方面，确保用户在使用过程中能够获得良好的体验。参赛者需要敢于突破传统的设计理念和技术限制，尝试新的设计手法和技术应用。参赛者需要在创意构思、视觉呈现、交互设计、用户体验、技术实现、性能优化以及创新性和可实践性等方面进行全面考虑和精心打造。
Vue3-滑动到最右验证功能
地理信息的专栏
06-13 486
在登陆页面，需要滑块，且滑块向右移动到最右边，完成验证
前端怎么进阶高级前端工程师
03-28
1. 深入学习HTML、CSS和JavaScript的高级特性，了解浏览器的工作原理和渲染机制，掌握前端性能优化技巧。 2. 学习框架和库的使用，如React、Vue、Angular等，了解其原理和底层机制，以便更好地应用。 3. 学习前端...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值