HTML5+CSS3+移动web——CSS进阶

最新推荐文章于 2024-06-15 11:46:27 发布
最新推荐文章于 2024-06-15 11:46:27 发布
阅读量1.1k 收藏 31
点赞数 22
分类专栏： HTML+CSS 文章标签： 前端 css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ymxk2876721452/article/details/136822258
版权

系列文章目录

HTML5+CSS3+移动web——HTML 基础-CSDN博客icon-default.png?t=N7T8https://blog.csdn.net/ymxk2876721452/article/details/136070953?spm=1001.2014.3001.5502HTML5+CSS3+移动web——列表、表格、表单-CSDN博客icon-default.png?t=N7T8https://blog.csdn.net/ymxk2876721452/article/details/136221443?spm=1001.2014.3001.5502HTML5+CSS3+移动web——CSS基础-CSDN博客icon-default.png?t=N7T8https://blog.csdn.net/ymxk2876721452/article/details/136465434?spm=1001.2014.3001.5502HTML5+CSS3+移动web——CSS 文字控制属性-CSDN博客icon-default.png?t=N7T8https://blog.csdn.net/ymxk2876721452/article/details/136600522?spm=1001.2014.3001.5502

目录

系列文章目录

一、复合选择器

后代选择器

子代选择器

并集选择器

交集选择器

伪类选择器

超链接伪类

二、CSS特性

继承性

层叠性

优先级

基础选择器

复合选择器-叠加

三、背景属性

背景图

平铺方式

背景图位置

背景图缩放

背景图固定

背景复合属性

四、显示模式

块级元素

行内元素

行内块元素

一、复合选择器

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

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

后代选择器

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

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

子代选择器

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

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

并集选择器

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

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

 交集选择器

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

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

伪类选择器

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

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

超链接伪类

超链接需要设置以上四个状态，需要按 LVHA 的顺序书写

选择器作用
:link访问前
:visited访问后
:hover鼠标悬停
:active点击时（激活）

 

二、CSS特性

CSS特性：化简代码 / 定位问题，并解决问题

继承性

继承性：子级默认继承父级的文字控制属性。如果标签有默认文字样式则会继承失败

层叠性

特点：

  • 相同的属性会覆盖：后面的 CSS 属性覆盖前面的 CSS 属性

  • 不同的属性会叠加：不同的 CSS 属性都生效

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

优先级

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

基础选择器

规则：选择器优先级高的样式生效。

公式：通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

（选中标签的范围越大，优先级越低）

复合选择器-叠加

（行内样式、id选择器个数、类选择器个数、标签选择器个数）

规则：

  • 从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较

  • !important 权重最高

  • 继承权重最低

三、背景属性

背景图

使用背景图实现装饰性的图片效果。

background-image ：url(图片地址);  一般设置width和height来控制图片显示大小

div {
  width: 500px;
  height: 500px;

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

平铺方式

background-repeat（属性值）

属性值显示效果
no-repeat不平铺
repeat平铺（默认）
repeat-x水平方向平铺
repeat-y垂直方向平铺

背景图位置

属性名：background-position（bgp）

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

关键字

关键字位置
left左侧
right右侧
center居中
top顶部
bottom底部

坐标

  • 水平：正数向右；负数向左

  • 垂直：正数向下；负数向上

可以只写一个关键字，另一个方向默认为居中；数字只写一个值表示水平方向，垂直方向为居中

背景图缩放

作用：设置背景图大小

属性名：background-size（bgz）

常用属性值：

  • 关键字

    • cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见

    • contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白

  • 百分比：根据盒子尺寸计算图片大小

  • 数字 + 单位（例如：px）

背景图固定

作用：背景不会随着元素的内容滚动。

属性名：background-attachment（bga）

属性值：fixed

背景复合属性

属性名：background（bg）

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

四、显示模式

布局网页的时候，根据标签的显示模式选择合适的标签摆放内容

属性：display

属性值效果
block块级
inline-block行内块
inline行内

块级元素

特点：

  • 独占一行

  • 宽度默认是父级的100%

  • 添加宽高属性生效

行内元素

特点：

  • 一行可以显示多个

  • 设置宽高属性不生效

  • 宽高尺寸由内容撑开

行内块元素

特点：

  • 一行可以显示多个

  • 设置宽高属性生效

  • 宽高尺寸也可以由内容撑开

星空椰
关注
  • 22
    点赞
  • 踩
  • 31
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web前端html5+css3前端开发入门学习笔记
m0_62516225的博客
10-16 1960
Web前端html5+css3前端开发入门学习笔记
HTML5+CSS3移动商城-分类
04-29
HTML5+CSS3移动商城-分类
Web前端开发——html5+css3进阶
WikY
08-29 291
CSS3-2D转换——transform 转换(transform)是css3中具有颠覆性的特征之一，可以实现元素的位移，旋转，缩放。 2D转换是改变标签在二维平面上的位置和形状的一种技术。 位移(transalte) 旋转(rotate) 缩放(scale) 2D转换——位移(translate) 可以改变元素在页面中的位置，类似定位 单位: 像素px，百分比% transform:transalte(x,y); transform:transalteX(); transform:transalteY()
前端 移动 开发html5,移动Web前端应用开发(HTML5+CSS3+JavaScript)
weixin_31438219的博客
06-07 437
移动Web前端应用开发(HTML5+CSS3+JavaScript)编辑锁定讨论上传视频《移动Web前端应用开发(HTML5+CSS3+JavaScript)》是2018年3月电子工业出版社出版的图书，作者是徐枫。书名移动Web前端应用开发(HTML5+CSS3+JavaScript)作者徐枫ISBN9787121337840页数276页定价45元出版社电子工业出版...
HTML5+CSS3案例一：学成在线
zhaoyang_m的博客
07-17 1109
链接：https://pan.baidu.com/s/10KBDVULhIOW698yODAmvSQ?，包含 HTML、CSS、图片、JavaScript等等。布局思路：先整体再局部，从外到内，从上到下，从左到右。标签结构：h1 > a > 网站名称（搜索关键字）调整盒子位置 → flex 布局、内外边距。画盒子，调整盒子范围 → 宽高背景色。搜索引擎优化：提升网站百度搜索排名。文件夹，内部包含当前网站的。网站根目录是指存放网站的。控制图片、文字内容样式。
CSS进阶：HTML5/CSS3（接上篇CSS）
qq_55092103的博客
05-09 356
我们只需要将上述案例中的改成即可实现.SASS 是一款 CSS 预编译器，它定义了一种新的编程语言，为CSS 增加了一些编程的特性，开发者使用这种语言进行编码后，代码需要被编译成 CSS 才能被浏览器理解。SASS 比 CSS 更像一门编程语言，它可以有变量，函数，控制语句、导入、嵌套等高级功能，类似的 CSS 预编译器还有less，Stylus等。提供变量，实现一键替换主题色之类的功能；用嵌套写法减少选择器的重复书写；用混用功能解决代码复用问题；用函数进行复杂的运算；
web前端面试题【html+css+js+框架】
weixin_44763882的博客
08-31 2613
文章目录1.http、html和浏览器1.http和https(1)http和https的基本概念(2)http和https的区别？(3)https协议的工作原理(4)https协议的优点(5)https协议的缺点2.tcp三次握手，一句话概括3.TCP和UDP的区别4.WebSocket的实现和应用(1)什么是WebSocket?(2)WebSocket是什么样的协议，具体有什么优点？5.HTTP请求的方式，HEAD方式6.一个图片url访问后直接下载怎样实现？7.web Quality （无障碍）8.几
《黑马程序员2023新版前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选》学习笔记总目录
放下华子我只抽RuiKe5的博客
09-23 1007
本文是对《黑马程序员2023新版前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选》所有知识点的笔记进行总结分类。 学习时总结的目录笔记以及思维导图和实训，将在后续更新。
HTML&CSS基础+JavaScript进阶
hm342133194的博客
03-27 1819
HTML、CSS基础，JS进阶内容
一篇文章让你掌握HTML+CSS
Lbsssss的博客
09-14 1703
一篇文章让你掌握HTML+CSS
HTML5+CSS3期末大作业——城市简介源码
05-05
HTML5+CSS3期末大作业——城市简介源码
HTML5+CSS3移动商城-购物车
04-29
HTML5+CSS3移动商城-购物车
html5+css3+js登录页面
04-10
html5+css3+js登录页面模板，适用于网页设计的登录页面。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码。
HTML5+CSS3 精美登陆界面源码
01-19
3个很精美的登陆界面，全都是用HTML5+CSS3开发的，所以可能不适合低版本IE浏览器。大家可以下来看看，做的超级漂亮的。
Web前端网站设计案例：深入剖析创意与技术的完美融合
liyrbtqe_66w的博客
06-12 446
在性能优化方面，设计师通过压缩代码、减少HTTP请求、使用CDN等技术手段，提升了网站的加载速度和响应性能，为用户提供了更加流畅的访问体验。综上所述，本Web前端网站设计案例通过视觉设计、用户体验、技术实现、性能优化、创意表达、响应式设计和跨平台兼容等方面的综合考量，成功打造了一款既美观又实用的网站。这个案例充分展示了Web前端设计的魅力和潜力，为未来的网站设计提供了有益的借鉴和启示。设计师通过独特的视觉元素和创意构思，将品牌理念和文化内涵融入其中，使得整个网站在传达信息的同时，也展现出品牌的独特魅力。
HTML入门教程：深度解析HTML，开启你的前端技术之旅
zhangwenok的博客
06-14 1441
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
Web前端设计大赛：创意与技术的碰撞
huejiaqwerty888的博客
06-12 549
在这场竞赛中，参赛者们不仅需要展现出独特的创意，还需要运用精湛的技术将创意转化为实际作品。本文将从四个方面、五个方面、六个方面和七个方面，深入剖析Web前端设计大赛的魅力和挑战。交互设计是Web前端设计的核心环节。参赛者需要关注页面的加载速度、响应速度以及操作的便捷性等方面，确保用户在使用过程中能够获得良好的体验。参赛者需要敢于突破传统的设计理念和技术限制，尝试新的设计手法和技术应用。参赛者需要在创意构思、视觉呈现、交互设计、用户体验、技术实现、性能优化以及创新性和可实践性等方面进行全面考虑和精心打造。
快速压缩前端项目
最新发布
lyd的博客
06-15 397
作为前端开发工程师难免会遇到需要把项目压缩成压缩文件来传送的情况，这时候需要压缩软件进行压缩文件处理
关于元旦节日的HTML5+css3
12-12
很抱歉，根据您提供的引用内容，似乎没有关于元旦节日的HTML5+CSS3的内容。但是，我可以为您提供一些关于春节的HTML5+CSS3的内容。 以下是HTML5+CSS3实现春节主题的一些方法和步骤： 1.使用CSS3实现动画效果 ```css @keyframes move { 0% { transform: translateX(0); } 50% { transform: translateX(100px); } 100% { transform: translateX(0); } } ``` 2.使用CSS3实现渐变效果 ```css background: linear-gradient(to right, #ff9966, #ff5e62); ``` 3.使用CSS3实现阴影效果 ```css box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); ``` 4.使用HTML5的canvas标签绘制春节主题图案 ```html <canvas id="myCanvas"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "#ff9966"; ctx.fillRect(0, 0, 150, 75); </script> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值