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

级联样式

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部样式选择器</title>
    <link href="CSS%20样式选择器.css" rel="stylesheet" type="text/css">
</head>
<body>
<table>
    <tr>
        <td> table的行内容</td>
    </tr>
    <tr>
        <td> tr就是table每一行的内容,和iOS中不同,table的一个复用就有许多行,h5看起来是一行一行写进去的</td>
    </tr>
    <tr>
        <td>不加css时就是空白的一行</td>
    </tr>
</table>
</body>
</html>

外部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文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部样式</title>
    <style type="text/css">
        // . + 类名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;
        }
        table{
            background-color: #003366;
        }
        td{
            background-color: #ffffff;
            font-size: 20pt;
        }
    </style>
</head>
<body>
<div class="title">
    疯狂Java体系图书
</div>
<table>
    <tr>
        <td>疯狂Java讲义</td><td>我并不会换行</td>
    </tr>
    <tr>
        <td>疯狂Android讲义</td><td>经典Java EE企业应用实战</td>
    </tr>
    <tr>
        <td>疯狂Ajax讲义</td><td>疯狂XML讲义</td>
    </tr>
</table>
</body>
</html>

内部样式.png

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML内联样式</title>
</head>
<body>
    <div style="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;
         ">
        疯狂Java体系图书
    </div>
    <table style="background-color: #0099bb;">
        <tr>
            <td style="background-color: #ffffff; font-size: 20px; font-family: '楷体_GB2312;">经典Java EE企业应用实战</td>
        </tr>
    </table>
/* 内联方式直接指定到了具体的HTML元素,因此无需指定selector部分 */
</body>
</html>

内联样式.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号）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html"; charset="UTF-8">
    <title>ID选择器</title>
    <style type="text/css">
        /* 对所有Div元素都其作用的CSS样式 */
    div {
        width: 200px;
        height: 30px;
        background-color: #ddd;
        padding: 3px;
    }
        /* 对id为xx的元素起作用的CSS样式 */
        #xx{
            border: 2px dotted black;
            background-color: #900;
        }

    </style>
</head>
<body>
    <div>没有任何属性的Div元素</div>
    <div id="xx">id属性值为30的Div元素</div>
</body>
</html>

效果如下：

ID选择器.png

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title>包含选择器</title>
    <style type="text/css">
        /* 对所有的div元素起作用的CSS样式 */
        div{
            width: 350px;
            height: 60px;
            background-color: #dddddd;
           /*设置两个div之间的间隔为5px,如果不设置两个div就挨在一起*/
            margin: 5px;
        }
        /* 对处于div之内且类名为a的元素起作用的CSS样式 */
        div .a{
            width: 200px;
            height: 35px;
            border: 2px dotted black;
            background-color: #888888;
        }
    </style>
</head>
<body>
    <div>没有任何属性的div元素</div>
    <div>
        <section>
            <div class="a">处于div内且class属性为a的元素</div>
        </section>
    </div>
    <p class="a">没有处于div内,但class属性为a的元素</p>
</body>
</html>

效果如下：

包含选择器.png

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

级联样式

选择器Selector

推荐阅读更多精彩内容