CSS3 书写形式及选择器种类

1.CSS三种书写形式

• 行内样式

<h1 style="color: red">测试驿站</h1>

• 内联样式

<style>
    /*选择器*/
    h1 {
        color: green;
    }

</style>

• 外联样式

创建一个stycle.css文件

/* 外联样式 */
h3{
    color: blue;
}

在html文件中，通过link标签引入

 <link rel="stylesheet" href="./css/style.css">

2.CSS选择器

• 标签选择器

        /* 标签选择器 */
        body {
            background: #333;
        }

• class选择器

/*. 代表的是 class类选择器*/
        /* 只会找到id="blue-heading"的标签 */
        .primary-heading {
            color: blue;
        }

 

• ID选择器

/*#代表的是 ID选择器*/
        #welcome {
            background: #f4f4f4;

        }

• 多选择器

 /*多选择器*/
        #welcome,#about {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 5px;
        }

• 嵌套选择器

  /*嵌套选择器，先找到父级*/
        #welcome p {
            font-size: 20px;
        }