03、表单基础元素及CSS基础

一、快捷键

多个光标编辑：按住Alt选中

二、表单

1.表单的作用：

用来收集用户数据信息

2、表单组成：

表单框、提示信息、表单控件

3、表单框 form

  双标，默认独占一行
  用来规定当前表单的范围，不同表单之间相互之间不会受影响

4、提示信息：

让用户知道输入框的作用和如何操作

5、表单控件 input

  单标，默认不独占一行，type类型不同则功能不同     

6、注意：表单控件必须写在form中才起作用

    input             表单控件 
        type           类型
          *text         文本框
          *passward     密码框
          *reset        重置按钮，只能清空数据当前表单的数据信息
          *submit       提交按钮，既可以清空还可以提交数据
          button        普通按钮
        placeholder    描述输入字段预期值的简短的提示信息。兼容到s以上属性
        name           必须设置，否则在提交表单时，用户在其中输入的数据不会被发送给服务器属性
        value          参数值

三、CSS

1、概念：

css又叫层叠样式表

2、作用：

在网页中主要对网页信息的显示进行控制，简单说就是如何修饰网页信息的显示样式。

3、版本：

目前推荐遵循的是W3C发布的CSS3.0

*4、css语法结构：

1)css语法结构:    选择器{声明;声明;}     声明——属性:属性值;
    1>css语法结构;选择器{声明;声明;声明;}   声明——属性:属性值;
    2>css是由选择器和声明组成
    3>选择器写在{}之前，声明写在{}内，{}内可以写多个声明
    4>声明和声明之间分号隔开
    5>声明是由属性和属性值组成，属性和属性值之间用:连接
    6>选择符中空格不能乱加，但css无这样的限制
2)注意区别：
    html语法结构：
      eg：<h1 style="color: red; background:blue"></h1>
    css语法结构:
      eg：h1{color:red;background:yellow；}

5、css属性

    color           字体颜色
    background      背景色

6、css引入方式

  1)外部样式表
    写在html文件之外，link标签在头部引入
    <link rel="stylesheet" type="text/css" href="目标文件的路径及文件名全称" /> 
  2)内部样式表
    写在html文件之内，在head中添加style标签内书写样式
  3)行内样式表、内联、内嵌
    写在标签之内
    语法：<标签 style="属性：属性值;属性:属性值;"></标签>
    例：<div style="width:500px; height:200px;"></div>

7、关于css的生效

  1)选择器选中同一个元素时，修饰不同属性则都会生效，修饰同一属性时，权重相同，后写的生效
  2)行内样式优先生效，内部和外部无优先级顺序，权重相同时，就近原则

四、css选择器(符)

1、标签选择器

直接拿标签名当选择器

2、id选择器(#)

    给标签取个唯一的id名，语法：#id名{属性:属性值;}
    例：<p id="p3">xxxxx</p>
        #p3{xxx:xxx;xxx:xxx;}

3、群组选择器

选择器1,选择器2,选择器3{属性:属性值;}
    例：p3,.p4,em{xxx:xxx;xxx:xxx;}

4、class选择器/类选择器(.)

    给标签取个class名，语法：.class名{属性:属性值;}
    例：<p class="p4">xxxxx</p>
        .p4{xxx:xxx;xxx:xxx;}

5、*通配符/通配选择器

语法：*{属性：属性值}
    相当于“@全体成员”
    用于统一修改或清除所有标签的样式，如字体，边距，li小点点，下划线
    *{margin:0; padding:0;}代表清除所有元素的默认边距值和填充值；
      外边距     内边距

6、包含选择器

语法：选择符1 选择符2{属性:属性值;}
    选中选择器1下边所有层级中的选择器2
    例：<ul class="list">
          <li></li>
          <li></li>
          <li></li>
        </ul>
        样式 ： .list li{background:red;}

7、伪类选择器

    选中某种状态下的元素
    语法 ：xxx:xxx{}
    a:link{属性：属性值;}超链接的初始状态;
    a:visited{属性：属性值;}超链接被访问后的状态;
    :hover{属性：属性值;}鼠标悬停，即鼠标划过 元素 时的状态;
    a:active{属性：属性值;}超链接被激活时的状态，即鼠标按下时超链接的状态;
    Link--visited--hover--active。
    说明：
    1）当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为：
    a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效；
    2）hover可以用于任何元素
    3）为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；
    例如：a{color:red;} a:hover{color:green;} 表示超链接的初始和访问过后的状态一样，鼠标划过的状态和点击时的状态一样。

五、权重

在css样式中，如果属性发生冲突，谁的权重大，谁优先生效，权重如下：

    行内    1000
    id      0100
    class   0010
    标签    0001
    *       0-1
    包含    里边各个选择器权重相加
    群组    群组选择器各论各的,各自拼各自的权重
    伪类    权重是10，但是伪类选择器一般不单独使用，所以你也可以理解为+10
   行内(1000)>id(0100)>class(0010)>标签(0001)>*(0-1)
   选择器谁描述的越详细，谁的权重越大
  总结：如果多个选择器选中同一个标签，修饰的不同的样式，则都能生效;
        如果多个选择器选中同一个标签，修饰的同一个样式，谁的权重大谁优先生效;
        如果多个选择器选中同一个标签，修饰的同一个样式，并且权重相同，后写的优先生效;
  补充：如果你想让某个样式百分百生效，你可以这么写  color:red !important;
        !important可以加权重，无视其他任何权重，优先生效，但是不推荐多用。