CSS概述及简单使用

css选择器

符号名称	含义	示例
*(星号)	用于匹配任何标记	* {color:red}
>(大于号)	用于指定父子节点关系	AAA>CCC>DDD {color:red}匹父节点分别为 CCC和AAA的节点DDD节点
(空格)	用于匹配在某一层有某个父节点的节点	AAA CCC DDD {color:red}匹配包含该父节点CCC 的父节点AAA的节点DDD
+(加号)	用于表示在同一个级别节点之间的关系	AAA+BBB {color:red}表示，有一个兄弟节点AAA的 节点BBB
名称[表达式]	选择包含特殊属性值的节点	BBB[type='xyz'] {color:blue} 表示包含text属性值为 xyz的BBB标签

下方示例演示相邻(即兄弟节点)选择器使用方法

    
    



    

        
第一章 学习HTML5
        
第一章 HTML5标记
        
第一章 HTML5插入图片
    
    

        
HTML的发展
        
HTML5的新增功能
        
如何学习HTML5
    

可以尝试去掉li +看看具体变化，帮助你理解+选择器

位置模型

值名称	含义
relative	元素框相对父节点偏移某个距离，元素仍保持其未定位前的形状，它原本所占的空间仍保留
absolute	元素框从文档流中完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者 是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样
fixed	元素框的表现类似于absolute值，不过其包含块是视窗本身
z-index	用来指定相互重叠的元素的叠放顺序，数值较大的元素会叠放在数值较小的元素前面

下面示例使用css来对文本内容进行定位

    
    


    
该内容是通过定义后的位置
    
通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧150px，距离页面顶部100px。

光标样式

style="cursor:pointer"光标呈现为指示链接的指针(一只手)

CSS与DIV标记边缘

通过DIV+CSS方式呈现一个表格

    
    
    


    

        

            
消费项目
            
衣服
            
化妆品
            
食物
            
总计
        
        

            
一月
            
241元
            
30元
            
730元
            
1001元
        
        

            
二月
            
150元
            
14元
            
650元
            
814元