CSS样式基础学习


		既然是做前端了,学习CSS样式是必须的.
 
 
 
[html]  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head id="Head1" runat="server">  
    <title>ViewPage2</title>  
    <style type="text/css">  
        /*CSS类选择器:按钮样式*/  
        .btn  
        {  
            background-color: SkyBlue;  
            width: 160px;  
            height: 24px;  
            font-size: 16px;  
            border: 1px solid red;  
            color: White;  
        }  
        /*鼠标经过样式*/  
        .btn:hover  
        {  
            background-color: Sienna;  
            width: 160px;  
            height: 24px;  
            font-size: 16px;  
            border: 1px solid yellow;  
            color: White;  
        }  
        /*父样式*/  
        .divouter  
        {  
            position: absolute;  
            left: 171px;  
            top: 179px;  
            background-color: SeaGreen;  
            color: Gold;  
            overflow: scroll;  
        }  
        /*继承父项样式, html元素也必须是父子关系*/  
        .divouter .redbg  
        {  
            background-color: Red;  
        }  
        /*继承父项样式*/  
        .divouter .yellowbg  
        {  
            background-color: yellow;  
        }  
        /*yellowbg下的所有td*/  
        .divouter .yellowbg td  
        {  
            background-color: Gray;  
        }  
        /*选择所有td*/  
        td  
        {  
            font-family: Arial, Helvetica, sans-serif;  
            font-size: 14px;  
            font-weight: bold;  
        }  
        /*id 选择器:选择id=login_tab的元素*/  
        #login_tab  
        {  
            width: 500px;  
            text-align: right;  
        }  
        /* 派生选择器:通过依据元素在其位置的上下文关系来定义样式  
        一层一层往下选择,最终选择最后那层的td*/  
        .divouter table tr td table td  
        {  
            width: 500px;  
            text-align: center;  
            background-color: Blue;  
        }  
        /*选择器的分组:分享相同的声明,所有的标题元素都是绿色的*/  
        h1, h2, h3, h4, h5, h6  
        {  
            color: green;  
        }  
        /*派生选择器:  
        类名为 fancy 的td单元   
        */  
        td.fancy  
        {  
            color: #f60;  
            background-color: #666;  
        }  
        /*派生选择器:  
        类名为 fancy 的th单元   
        */  
        th.fancy  
        {  
            color: #666;  
            background-color: #f60;  
        }  
        /*属性选择器:  
        带有 title 属性的所有元素设置样式  
        */  
        [title]  
        {  
            color: red;  
            background-color: ForestGreen;  
        }  
        /*属性选择器:  
        下面的例子为 title="W3School" 的所有元素设置样式：  
        */  
        [title="W3School"]  
        {  
            color: #f60;  
            background-color: DarkCyan;  
            border: 5px solid Black;  
        }  
        /*属性选择器:  
        结合派生  
        */  
        input[type="text"]  
        {  
            width: 150px;  
            display: block;  
            margin-bottom: 10px;  
            background-color: YellowGreen;  
            font-famil

补充：web前端 , HTML/CSS  ,