HTML5 混合APP开发学习笔记（三）——CSS样式设计

最新推荐文章于 2022-10-17 09:18:28 发布

123，机器人

最新推荐文章于 2022-10-17 09:18:28 发布

阅读量298

点赞数

分类专栏： HTML5混合APP 文章标签： css3 混合APP

本文链接：https://blog.csdn.net/weixin_43569314/article/details/90214083

版权

HTML5混合APP 专栏收录该内容

17 篇文章 6 订阅

订阅专栏

CSS样式设计

CSS高级特性

继承性
书写CSS样式时，子标签会自动继承父标签的某些样式，恰当地使用继承这个特性可以简化代码，降低CSS样式的复杂性
以下CSS样式不能被继承：
1. 边框属性
2. 边距和填充属性
3. 背景属性
4. 定位属性
5. 尺寸属性
层叠性和优先级
所谓层叠性是指对于同一个标签元素是可以设计多个CSS样式的，而HTML标签在页面上的最终显示效果是多种CSS样式的叠加结果

选择器叠加，权重相加，仅显示最高权重的样式
p span{…} /权重为1+1=2/
P.blue{…} /权重为1+10=11/
.blue div{…} /权重为10+1=11/
p.parent span{…} /权重为1+10+1=12/
p.parent .child{…} /权重为1+10+10=21/
#header span{…} /权重为100+1=101/
#header span.blue{…} /权重为100+1+10/
一些特殊情况
- 继承样式的权重为0，如果子标签有样式，则会覆盖继承来的样式
- 内联样式优先，即 style 属性的权重很高
- 权重相同时，CSS遵循就近原则，即后应用的样式优先级较高
- ! important 语法拥有最大优先级，比如
  #mydiv {color:red! important}：无论其他样式如何设置，该标签的样式最终一定为红色

背景属性

设置背景颜色
background-color：颜色

其中 a/A 为透明度属性，0.0（完全透明）~1.0（完全覆盖）
opacity属性也可设置透明度：例 opacity: 0.5;

设置背景图片

简单设置
background: url(网络URL或文件路径); //水平垂直两个方向均平铺
平铺控制
background: url(imgs/bk.jpg) no-repeat; //不允许平铺
background: url(imgs/bk.jpg) repeat-x; //水平平铺
background: url(imgs/bk.jpg) repeat-y; //垂直平铺
设置背景图片位置
background-position: right bottom; //右下角（默认为左上角）
控制水平方向的值：left、center、right
控制垂直方向的值：top、center、bottom
¹

CSS Sprite的使用
所有零碎的图标都作到了一张图片上，然后将图片进行分割展示，提高图片的加载效率

		<style>
			div{
				width: 40px;
				height: 44px;
				background: url(imgs/spritetest.png) no-repeat;	
			}
			#div2{
				background-position: -40px 0;
			}
			#div3{
				background-position: -80px 0;
			}
		</style>
	</head>
	<body>
		<div id="div1"></div>
		<div id="div2"></div>
		<div id="div3"></div>
	</body>

背景图片的适配
background-size: 100% 100%;占据背景的比例，自适应
background-size:80px 60px;背景图片大小为确定值
background-size:cover; 保持比例，覆盖背景区域，完全覆盖，可能丢失部分图片信息
background-size:contain;保持比例，覆盖背景区域，图片信息完整，可能出现留白
背景关联
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），不会受到滚动的影响
background-attachment:fixed;

边框属性

border: 1px solid black;
矩形边框：粗细线条颜色
border-radius: 5px;
border-radius: 50%;
圆角边框，值为圆角的半径

CSS盒子模型
box

内填充 padding
padding：上填充距离右填充距离下填充距离左填充距离
也可以用padding-top、padding-bottom、padding-left、padding-right这4个属性进行分别单独设置。
外边距margin
margin：上外边距右外边距下外边距左外边距
同样可以用margin-top、margin-bottom、margin-left、margin-right这4个属性进行分别单独设置。
margin: 0 auto; 常用于居中，表示上下间距为0，左右自适应
box-sizing
box-sizing：content-box｜border-box;
content-box表示内填充和边框不包括在宽度和高度之内
border-box则表示内填充和边框包括在宽度和高度之内

一点技巧

APP开发中常用 html,body{margin:0;padding:0} 去除边距与填充

http://www.w3school.com.cn/css/pr_background-position.asp ↩︎

123，机器人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 混合APP开发学习笔记（三）——CSS样式设计

CSS样式设计CSS高级特性继承性书写CSS样式时，子标签会自动继承父标签的某些样式，恰当地使用继承这个特性可以简化代码，降低CSS样式的复杂性以下CSS样式不能被继承：边框属性边距和填充属性背景属性定位属性尺寸属性层叠性和优先级所谓层叠性是指对于同一个标签元素是可以设计多个CSS样式的，而HTML标签在页面上的最终显示效果是多种CSS样式的叠加结果选择器叠加，权...
复制链接

扫一扫

专栏目录