Be a better web developer：day3

一、表单控件

1.下拉选择框

2.文本域　　支持用户多行输入　　可以由用户调整大小

3.提交按钮（将表单的数据提交给服务器）、重置按钮（将表单控件的值，重置为初始状态）、普通按钮（绑定自定义事件）、特殊按钮（<button>标签，如果放在form中作用和提交按钮一样，放在form外部需要绑定自定义事件）

4.label 标签

使用label标签包含要显示的文本

为label标签添加for属性，属性值与要绑定的空间的id属性值保持一致

  <form action="">
    <select name="province">　　下拉选择框
        <option value="Hebei">河北</option>
        <option value="Shanxi">陕西</option>
        <option value="Sichuan">四川</option>
    </select><br>
    <textarea name="hh" cols="30" rows="10"></textarea>　　文本域
    <br>　　换行
    <input type="submit" name="" id="d">　　提交按钮
    <input type="reset" name="">　　重置按钮
    <input type="button" name="" value="button">　　普通按钮，可以绑定自定义事件
    <button>登录</button><br>　　特殊按钮，在表单中和提交按钮一样
    <label>label单纯显示文本</label><br>
    <label for="d">点我就和点击提交一样</label><br>　　label标签的显示联系
    <label>HH: <input type="text" name="en"     
                    placeholder="label"/>　　label标签的隐式联系
         </label>
  </form>
  <button>绑定自定义事件</button>　　表单外的button按钮

二、CSS：Cascading Style Sheet 层叠样式表实现网页布局，美化页面元素

1.行内样式 / 内联样式：在具体的HTML标签中引入css代码

常见属性：font-size 设置字体大小，取值为像素值；color：设置文本颜色，取值为颜色的英文单词；background-color：设置背景颜色

<p style="font-size:20px;">大小为20像素值的文本</p>

2.文档内嵌：将css代码从标签中抽离出来，单独写在一起，使用<style></style>标签引入样式表

<style>
    CSS选择器 {
                    属性 : 值;
                    属性 : 值;
                    ...
    }
</style>
选择器：用来匹配文档中元素，并且为其设置样式，{}中是要给元素添加的样式声明

3.外部样式表 / 外链方式：创建外部的css文件，在HTML文档中只需引入外部样式表

优点：真正实现样式与结构的分离，便于维护，可以实现样式的复用

<link rel="stylesheet" href="url">
在url的样式表中添加选择器

4.样式表特点

层叠性：多个css样式共同作用于元素

继承性：父元素中设置的样式，子元素可以继承下来，大部分文本相关的属性都可以被继承，块级元素的宽度与父元素保持一致

优先级：发生样式冲突时，考虑优先级

从低到高：继承样式、浏览器的缺省设置、文档内嵌方式设置的样式（相同的优先级，代码的书写顺序决定最终样式，后来者居上）、行内样式优先级最高

三、css选择器：根据指定的选择模式匹配文档中元素，并为其设置样式

选择模式：选择符（匹配元素的依据）

1.标签选择器 / 元素选择器：根据标签名，匹配文档中所有的该元素，为其设置样式；常用于清除页面默认样式，以及设置基础样式

  <style>　　标签选择器
    p{
        color:red;
     }
  </style>

2.类选择器：根据元素的class属相值进行匹配；写选择器时不要随便出现任何符号，类名自定义，禁止以数字开头，尽量简单易懂

　　　　组合使用，选择器1选择器2{ } 匹配同时满足选择器1和选择器2的元素并设置样式

　　　　　　注意：标签与类名组合使用时，标签在前，类名在后

　　　　每个元素都具备class属性，可以使用多个类名，多个类名之间使用空格隔开

<style>　　　　类选择器　　　标签选择器和类选择器的组合使用
    .c1{
        background-color:blue;
    }　　　　　　　　　　　　
    p.c1{
        color:green;
        }　　　　　　　　
</style>

3.ID选择器：根据元素的id属性值匹配元素，每个元素都具备id属性，并且id属性具有唯一性

　　页面中具有唯一性的元素，都可以使用id进行标识，并使用id选择器添加样式

　　页面中具有唯一性的元素：外围结构标签，搜索框

　　注意：id具有唯一性，不能重复使用相同的id值，在使用JS获取页面元素时，id时元素唯一的标识，出现重复时后面的额元素无法获取

  <style>　　　　ID选择器
    #top{
        width:100%;
        height:100px;
        background-color:red;
    }
  </style>

4.群组选择器：为一组元素统一设置样式

  <style>　　群组选择器
    div,p,span{
        color:snow;
    }
  </style>

5.后代选择器：依托元素的层级关系匹配后代元素，后代元素包含直接子元素和间接子元素

 <style>　　后代选择器　　　　为块级元素div下的所有span元素设置样式
    div span{
            color:red;
            }
</style>

6.子代选择器：依托元素的层级关系，匹配直接子元素；在选择器1对应的元素中，匹配满足选择器2的直接子元素

  <style>　　子代选择器　　　　只对div下的直接子元素span设置样式
    div>span{
        background-color:green;
        font-size:24px;
    }
  </style>

7.伪类选择器：针对元素的不同状态设置样式，可分为超链接伪类选择器和动态伪类选择器

　　　　　　伪类选择器必须与其他选择器结合使用

超链接伪类选择器：

　　：link 超链接访问前的状态

　　：visited 超链接访问后的状态

动态伪类选择器：

　　：hover 表示鼠标悬停时的状态

　　：active 表示鼠标点按时的状态

　　：focus 表示获取焦点时的状态，常用于输入框，接收用户输入时，就表示获取到焦点

设置超链接四种状态下的样式

a:link{}
a:visited{}
a:hover{}
a:active{}
书写顺序：LoVe/HAte 爱恨原则

  <style>
    a:link{
        text-decoration:none;
        color:black;
    }
    a:visited{
        color:red;
    }
    a:hover{
        color:blue;
    }
    a:active{
        background-color:blue;
    }
    input:focus{
        outline:none;
    }
  </style>
 </head>
 <body>
    <a href="https://www.baidu.com/">百度</a>
    <input type="text">
 </body>

Be a better web developer：day3

猜你喜欢