HTML5 学习--级联样式与CSS选择器

级联样式

级联样式（Cascading Style Sheet）英文缩写即为CSS，主要作用于网页的风格设计或说网页的布局，可以设置字体大小、颜色、以及元素的位置等。

常用的级联样式有三种：外部级联、内部级联和内联。

• 外部样式，使用link连接外部CSS，如下在head标签中使用href（类似于iOS中的url）连接一个外部CSS样式。外部样式的好处时，可以复用此CSS样式。
  HTML文件如下：

    
    
    



    

        
 table的行内容
    
    

        
 tr就是table每一行的内容,和iOS中不同,table的一个复用就有许多行,h5看起来是一行一行写进去的
    
    

        
不加css时就是空白的一行
    

外部CSS文件如下：

/* 通过table元素这个关键字作为选择器, 起到选择的作用。 是级联选择器的一种 */
table{
    background-color: #003366;
    width: 400px;
}
/* 关键字(或说元素)作为选择器, 起到查找定位的作用 */
/* 设置table每行的属性 */
td{
    background-color: #ffffff;
    font-size: 20pt;
    text-shadow: -2px 2px 2px #333;
}

外部样式.png

• 内部级联样式，在head标签中使用Style标签直接设置整个页面的样式，当前页面生效，不需要CSS文件。

    
    
    



    疯狂Java体系图书


    

        
疯狂Java讲义
我并不会换行
    
    

        
疯狂Android讲义
经典Java EE企业应用实战
    
    

        
疯狂Ajax讲义
疯狂XML讲义
    

内部样式.png

• 内联样式，直接在标签后面使用Style设置，可以精准控制当前元素的外观表现，不需要CSS文件， 不需要选择器。

    
    


    

        疯狂Java体系图书
    
    

        

            
经典Java EE企业应用实战
        
    
/* 内联方式直接指定到了具体的HTML元素,因此无需指定selector部分 */

内联样式.png

选择器Selector

选择器决定该样式定义对哪些元素起作用（类比iOS中的tag值，设置一个tag，然后通过tag去查找对应的控件，并修改该控件的属性），常用的选择器有：

• 标签（类比于关键字，即系统定义的，非自定义的变量）， 如table这个系统的关键字就是一个标签选择器。作用是table这个元素对应的外观有效。

table{
    background-color: #003366;
    width: 400px;
}

• . + 类名，使用. 加上元素class名作为选择器，设置Div这个元素外观效果

 // . + 类名title作为选择器，决定div这个元素有外观效果
        .title{
            font-size: 18px;
            color: #60c;
            height: 30px;
            width: 200px;
            border-top: 3px solid #cccccc;
            border-left: 3px solid #cccccc;
            border-bottom: 3px solid #000000;
            border-right: 3px solid #000000;
        }

• id 选择器， 使用#+id号作为选择器（xx为元素的id号）

    
    
    


    
没有任何属性的Div元素
    
id属性值为30的Div元素

效果如下：

ID选择器.png

• 包含选择器， div元素下面查找包含属性a的元素，设置它的外观效果（类似于深层次查找某个元素，先找到父元素，再找子元素，最后找孙辈的元素....）。

    
    
    


    
没有任何属性的div元素
    

        

            
处于div内且class属性为a的元素
        
    
    
没有处于div内,但class属性为a的元素

效果如下：

包含选择器.png