前端样式设计与应用-优快云博客

本文链接：https://blog.youkuaiyun.com/lonestar555/article/details/8446713
既然是做前端了,学习CSS样式是必须的.
<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-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>
CSS样式基础学习
