CSS样式基础学习

当前位置 : 首页 > 网页制作 > CSS > CSS样式基础学习

CSS样式基础学习

来源: 作者: 时间:2016-02-18 10:12
既然是做前端了,学习CSS样式是必须的.[html] html xmlns=http://www.w3.org/1999/xhtml head id=Head1 runat=server titleViewPage2/title style type=text/css /*C...
既然是做前端了,学习CSS样式是必须的.
 
 
 
[]  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head id="Head1" runat="server">  
    <title>ViewPage2</title>  
    <style type="text/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-family: Verdana, Arial;  
        }  
    </style>  
</head>  
<body>  
    <h1>  
        h1</h1>  
    <h2>  
        h2</h2>  
    <h3>  
        h3</h3>  
    <div class="divouter">  
        .divouter  
        <table border="1" cellpadding="0" cellspacing="0">  
            <tr>  
                <td>  
                    <input type="button" name="name" value=" Test" class="btn" />  
                </td>  
                <td>  
                    <div class="redbg">  
                        .divouter .redbg</div>  
                </td>  
                <td>  
                    <div class="yellowbg">  
                        .divouter .yellowbg  
                        <table border="1" cellpadding="0" cellspacing="0" id="login_tab">  
                            <tr>  
                                <td>  
                                    .divouter .yellowbg td  
                                </td>  
                            </tr>  
                        </table>  
                    </div>  
                </td>  
                <td>  
                    <table border="1" cellpadding="0" cellspacing="0">  
                        <tr>  
                            <th>  
                                th  
                            </th>  
                            <td>  
                               派生选择器 td  
                                <table border="1" cellpadding="0" cellspacing="0">  
                                    <tr>  
                                        <td>  
                                        TD2  
                                        </td>  
                                    </tr>  
                                </table>  
                            </td>  
                        </tr>  
                    </table>  
                </td>  
            </tr>  
            <tr>  
                <td class="fancy">  
                   派生选择器 td.fancy  
                </td>  
                <th class="fancy">  
                   派生选择器 th.fancy  
                </th>  
                <td title="Test title">  
                    属性选择器Test title  
                </td>  
                <td title="W3School">  
                    属性选择器W3School  
                </td>  
                <td>  
                    <input type="text" name="name" value="属性选择器:结合派生 " /></td>  
            </tr>  
        </table>  
    </div>  
</body>  
</html>  
 
 
Tag:
网友评论

<