交作业4：CSS常用选择器与背景设置技巧（2019-7-4）

作业1：写一个盒子, 要求用到margin,padding,border, 并用到它们的完整语法, 简写语法。

html代码如下：

实例

<!--作业1：写一个盒子, 要求用到margin,padding,border, 并用到它们的完整语法, 简写语法-->
<p>作业1：写一个盒子, 要求用到margin,padding,border, 并用到它们的完整语法, 简写语法</p>
<div class="box1">
    <p>盒模型完整语法</p>
</div>

<div class="box2">
    <p>盒模型简写语法</p>
</div>

CSS如下：

实例

.box1 {
    width: 240px;
    height: 30px;
    background-color: aqua;
    text-align: center;

    padding-top: 20px;
    padding-right: 30px;
    padding-bottom: 40px;
    padding-left: 50px;

    border-color: blue;
    border-top-style:solid;
    border-right-style:dashed;
    border-bottom-style:solid;
    border-left-style:dashed;

    border-top-width: 10px;
    border-right-width: 10px;
    border-bottom-width: 10px;
    border-left-width: 10px;

    margin-top: 20px;
    margin-right: 30px;
    margin-bottom: 40px;
    margin-left: 50px;
}

.box2 {
    width: 240px;
    height: 90px;
    background-color:chartreuse;
    text-align: center;

    padding:20px ;

    border: 20px blue solid;

    margin: 30px;
}

作业2：模仿课堂案例, 熟悉基本选择器的用法: 属性, 兄弟, 类型, 伪类等,自己举例完成,例如商品列表等来完成它, 重点放在nth-child, nth-of-type的理解上, 一定要多练多想为什么,并能分析执行的结果。

HTML代码如下：

实例

<!--作业2：模仿课堂案例, 熟悉基本选择器的用法: 属性, 兄弟, 类型, 伪类等,自己举例完成,例如商品列表等来完成它, 重点放在nth-child, nth-of-type的理解上, 一定要多练多想为什么,并能分析执行的结果-->
<p>作业2：模仿课堂案例, 熟悉基本选择器的用法: 属性, 兄弟, 类型, 伪类等,自己举例完成,例如商品列表等来完成它, 重点放在nth-child, nth-of-type的理解上, 一定要多练多想为什么,并能分析执行的结果</p>
<!--1、层级、ID、类、属性、兄弟、群组、伪类、类型选择器-->
<p>1、层级、ID、类、属性、兄弟、群组、伪类、类型选择器</p>
<p>黑色边框为兄弟选择器</p>
<div>
    <ul>
        <li id="bg-red">ID选择器</li>
        <li class="bg-blue">类选择器</li>
        <li style="font-size : 20px">属性选择器</li>
        <li style="color: darkgreen">属性选择器</li>
        <li style="font-style: italic">群组选择器</li>
        <li>6</li>
        <li style="font-style: italic">群组选择器</li>
        <li>伪类选择器</li>
        <li>9</li>
        <li>类型选择器</li>
    </ul>
</div>



<div>
    <ul>
        <li id="bg-yellow">群组选择器</li>
        <li class="bg-green">群组选择器</li>
        <li style="font-size : 20px">3</li>
        <li class="bg-green">群组选择器</li>
        <li class="bg-green">群组选择器</li>
        <li>6</li>
        <li class="bg-green">群组选择器</li>
        <li>伪类选择器</li>
        <li>9</li>
        <li>类型选择器</li>
    </ul>
</div>
<br>
<br>

<!--2、表单选择器-->
<p>2、表单选择器</p>

<div>
    <p>
        <label for="user">账号：</label>
        <input type="text" id="user" name="user">
    </p>
    <p>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password">
    </p>
    <p>
        <label for="nan">性别：</label>
        <input type="radio" name="gender" value="nan" id="nan"><label for="nan">男</label>
        <input type="radio" name="gender" value="nv" id="nv"><label for="nv">女</label>
        <input type="radio" name="gender" value="baomi" id="baomi"><label for="baomi">保密</label>
    </p>
    <p>
        <button type="button">提交</button>
    </p>


</div>

CSS代码如下：

实例

/*标签选择器*/
ul {
    margin-top:0;
    margin-bottom:0;
    padding-left: 0;
    padding-right: 0;

}

/*层级选择器,也叫做后代选择器*/
/*空格后面的元素均会被选中*/
/*如果选择更多的层级，用空格区分*/
ul li {
    /*设置背景色*/
    background-color: aquamarine;
    /*设置圆角，当达到50%就可以变成正圆*/
    margin: 20px;
    border-radius: 50%;
    /*清楚无序列表前面的点*/
    list-style: none;
    /*给li设置一个宽高*/
    width: 120px;
    height: 120px;
    /*给li设置值边框*/
    border: 1px solid red;
    /*文本横向居中*/
    text-align: center;
    /*设置文本行高与li宽高一直，使文本纵向居中*/
    line-height: 120px;
    /*设置显示属性为内联块使之横向显示*/
    display: inline-block;
}

/*ID选择器*/
#bg-red {
    background-color: red;
}

/*类选择器*/
.bg-blue {
    background-color:lightblue;
}

/*属性选择器*/
/*选择带有style属性的li元素*/
/*标签名与中括号之间不能有空格*/
li[style] {
    background-color: coral;
}

/*群组选择器*/
#bg-yellow,.bg-green {
    background-color : chartreuse;
}

/*兄弟选择器*/
/*   + 号 只选择同级的下一个元素*/
/*   ~ 号 可以选择后面同级的所有元素*/
#bg-red + .bg-blue {
    border: black 3px solid;
}

#bg-yellow ~ * {
    border: black 3px solid;
}

/*伪类选择器*/
/*冒号前必须有空格，冒号后面不能带空格*/
ul :nth-child(8) {
    background-color: linen;
}

/*类型选择器*/
/*冒号前后都不能带空格*/
ul li:nth-of-type(10) {
    background-color: darkmagenta;
}

/*表单选择器*/
/*冒号前后不能有空格*/
button:hover {
    width: 120px;
    height: 50px;
    color: blue;
}

作业3：写出你对常用选择器的使用体会, 重点放在标签, class, id, 后代, 群组, 以及常用伪类上。

答：常用选择器分为以下几种类型：

1、标签选择器：

直接使用html标签进行选择。

2、层级选择器：

直接使用html标签进行选择，并可对一个元素内的多个子元素进行选择，使用空格符将下级元素标签隔开。

3、ID选择器：

html中使用ID关键字进行标记，作为属性出现，CSS中使用#号开头进行标记，一个页面中只能有一个ID号

4、类选择器：

html中使用class关键字进行标记，作为属性出现，CSS中使用“.”作为标记，是最常用的选择器，可以对一组元素进行选择。

5、属性选择器：

使用中标签及括号“[ ]”进行选择，括号内填写元素的属性名称，但不要写属性值，同种属性的元素将会被选中。注意：标签和中括号之间不要有空格符。

6、群组选择器：

可以将多个ID、类、其他属性的元素一次性选中，使用逗号将各属性名称分隔开，这里填写的是属性值。ID名称前加#，类名称前加点

7、兄弟选择器：

用于选择同级的元素，使用“+”号链接相邻的两个元素的属性值，即可以选中主元素的后一个元素，此方法只可以选中后一个元素。

8、相邻选择器：

用于选择同级的元素，使用元素属性值及“+”号链接“*”进行选择，即可以选中主元素的后一个元素，此方法只可以选中后一个相邻的任意属性的元素。

9、同级选择器：

用于选择同级的元素，使用元素属性值及“~”号链接“*”进行选择，即可以选中主元素后所有同级任意属性的元素。

10、伪类选择器：

使用标签加冒号对进行选择，此方法是根据元素的位置进行选择。注意：冒号前必须有空格，冒号后面不能带空格，写错格式无效。

11、类型选择器：

在伪类选择器基础上，冒号之前再加上一个子元素标签，以便对不同标签的子元素进行分类选择。此方法关注的是元素的类型，而不是位置。注意：冒号前后都不能带空格，写错格式无效。格式为：标签 标签:元素类型。

12、表单选择器：

对表单元素进行选择。注意：冒号前后都不能带空格，写错格式无效。