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盒子模型

内填充 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 ↩︎

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

混合app开发学习笔记
什么是混合移动App开发[重点] 苹果上的软件是如何开发出来的:使用的是 OC.或者使用Swift这门语言安卓平台上的软件又是如何开发出来的:使用安卓相关的语言开发的,Java,安卓的控件进行开发 ...
html5混合app原理,HTML5混合App开发
内容简介在竞争激烈的移动互联网环境下,HTML5技术一直备受关注.HTML5混合App开发与原生App开发模式之间也争议不断.相对于原生App来说,HTML5混合App开发的成本更低.周期更短,而且 ...
高性能Cordova App开发学习笔记
高性能Cordova App开发学习笔记文件结构添加插件构建准备各个www的作用,prepare命令会将hello\www的内容会拷贝到platform下的wwww目录,知道该改哪里了吧?如果 ...
Polyworks脚本开发学习笔记(三)-TREEVIEW进阶操作
Polyworks脚本开发学习笔记(三)-TREEVIEW进阶操作移动/交换对象的顺序移动对象的顺序 TREEVIEW FEATURE MOVE ( 1,2 ) 将索引号为1和2的特征交换位置 T ...
bootstrap思想总结_bootstrap学习心得总结-css样式设计分享
由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么? 即前端页面搭建 ...
Asp.net控件开发学习笔记(三)-控件开发基础
封装在asp.net中,控件被分为两类.用户控件和自定义服务器控件.前者就是我们经常用来将一些可复用的内容封装成的.ascx文件.这里主要研究后者. 创建自定义服务器控件创建自 ...
Mr.J-- jQuery学习笔记(八)--CSS样式操作
CSS属性操作在jQuery中,关于元素的样式操作方法共有2种: (1)CSS属性操作: (2)CSS类名操作: 三种设置方法逐个设置 $("div").css("w ...
移动Web开发--学习笔记三响应式项目实战（微金所）
响应式项目实战(微金所) 响应式项目开发流程选择一种屏幕格式进行开发相应功能模块完成后,测试是否响应式效果确保响应式效果满足要求进行下一个功能模块开发使用自定义字体图标创建自己的字体图标h ...
基于HTML5的APP开发学习（一）
HTML5提供了一些全局属性,即每个标签上都可以使用的属性,亦即使属于非标准的标签也会有这些属性.常见的全局属性如下: accesskey:给当前元素创建一个键盘快捷键,字符用空格分隔. class: ...

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

CSS样式设计

CSS高级特性

背景属性

一点技巧

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

最新文章

热门文章