CSS样式设计

CSS核心基础

CSS样式规则
selector {property1: value1;property2: value2;…}
选择器 {属性1:值1;属性2:值2;…}
选择器：规定CSS的作用范围
键值对：更改相应的属性，显示出想要展现的效果

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

在HTML文档中应用CSS

<head>
   <style>
      selector {property1: value1;
                property2: value2;...}
   </style>
</head>

适合小规模设置格式，代码量较小的情况

链接样式
<head> <link rel=“stylesheet” href=“CSS文件路径” /> </head>
需要做全局统一的修改，CSS代码量较大，单独成为一个文件
三种模式混合使用，有助于达到最好的效果

基础选择器

标签选择器
div{…}、p{…}：所有具有div、p标签的内容都做{…}中的格式修改
id选择器
#mydiv{…}：所有具有 id 属性为 mydiv 的标签的内容都做{…}中的格式修改
类选择器
.myclass{…}：所有具有 class 属性为 myclass 的标签的内容都做{…}中的格式修改
限定式选择器
div#mydiv{…}、p.myclass{…}：基本格式为 ‘标签选择器’+‘类选择器 or id选择器’，中间无空格
表示选择所有 id 属性为 ‘mydiv’ 的 div 标签
后代选择器
div #mydiv{…}、div p{…}、p .myclass{…}：基本格式为 ‘标签选择器’+‘类选择器 or id选择器 or 标签’，中间有空格
表示选择所有 div 标签中的 p 标签
并集选择器
h1,span#myspan,.myclass{…}：基本格式为多个选择器，用 , 隔开，其为并列关系，具有相同的CSS样式
通配符选择器
*{…}：表示选择所有
其他选择器

做更加细致的选择分类

尺寸属性
HTML5 混合APP开发学习笔记（二）——CSS样式设计
单位

设置相应元素板块的尺寸大小，前者为属性，后者为值的单位

文本属性
HTML5 混合APP开发学习笔记（二）——CSS样式设计