H5学习笔记（三）

1、表单控件 name属性 value属性
  1、name值重复的问题
     type="radio"    name值可以重复
     type="checkbox"    name值可以重复

     除以上两种控件之外，其余的表单控件name值不允许重复
     所有表单元素（input textarea，select）都必需设置name属性
  2、value属性值得问题
      type="text" type="password" textarea
      以上三个控件在创建时可以不给value
      其余的控件，在创建时就必需赋予value属性
**********************************************************
1、css概述
    1、问题
       1、设置页面上所有的文本的颜色为红色
       2、所有的div都变成蓝色
       3、将所有的div颜色改为绿色
      页面html属性，有以下问题
      1、相同的效果但需要不同的属性设置
       body  text="red"
       font color="red"
       2、属性的方式不够通用
        可维护性和可重用性不高
      2、css
    通过css解决以上的问题
    1、什么是css
        css：casscadding style sheets
        层叠样式表
        作用：
        定义页面中元素的样式
        1、实现页面内容与表现的分离
        2、代码可重用性
    2、css与html关系
        html内容体现
        css样式的修饰
        如果css样式属性与html属性相冲突时
        ，w3c建议尽量使用css属性代替html属性
    3、css样式表使用
       1、使用css样式表的方式
        1、内联方式
            又称为：行内样式
        实现：将样式定义在html元素 style属性中
        语法：

        style属性值：
        由若干个样式属性与值来完成
        属性:值
        多个属性之间，用;进行分隔
        属性:值;属性:值;
        常用属性：
            color:文本颜色取值，可以来颜色的英文表示（red，green，blue）
            background-color：背景颜色，取值同上
            font-size:字体大小，取值以px为单位
        2、内部样式表
           将样式定义在html文档的头部元素中
           使用步骤：
            1、元素中增加一对元素
            2、在style元素中增加样式规则
            样式规则：
            由选择器 和样式声明来组成
            选择器：规范了页面中哪些元素能够使用声明好的样式
            如标签选择器 ，由标签名作为选择器，相当于对页面中所有这个标签的样式进行改变
            样式声明：具体的样式。属性:值;
            完整语法结构
            选择器{
            属性:值;
            属性:值;
            }
        3、外部样式表
           将样式表定义在外部的css文件中
           在页面对css文件进行引入
           步骤：
            1、创建css文件(.css结尾)
            2、在页面中引入css文件
            
            在进行引入
            完整语法结构
                选择器{
                属性:值;
                属性:值;
                }
 2、css语法
    1、css样式特征
     1、继承性
        大部分的属性可以被继承
     2、层叠性
        为一个元素定义多个样式规则
        样式规则中的样式不冲突时，多个样式层叠为一个
     3、优先级
        样式冲突时，会按照不同样式的优先级来应用样式
        低：浏览器默认样式
        中：外部样式表与内部样式表（就近原则）
        高：内联样式
        !important可以调整样式优先级
        将!important添加在样式规则之后，中间用空格隔开
        --选择器{属性:属性值 !important;}
        谨慎使用
    2、css基础选择器（重点，难点）
      选择器作用：匹配页面中的元素
        1、通用选择器
         作用：匹配页面中所有的元素
         语法：*
         eg:*{
        color:red;
         }
         body{
        color:red;
         }
         2、元素选择器
         别名：标签选择器
         作用：定义页面中某个元素的默认样式，比如：div,p,span
         语法：p{}
           div{}

          3、类选择器
          作用：通过元素所附带的class属性值，对类选择器进行引用
          语法:.类选择器名称{}
          注意：不能以数字开头
          类选择器和元素选择器可以结合使用，目的就是为了对某种元素中不同样式的细分控制，
          语法：元素选择器.类选择器{}
          4、id选择器
        作用：能够通过元素所带的id属性值，对样式进行声明定义
        语法：#id值{}
        注意：名称不能以数字开头
        元素选择器#id选择器{}
          5、群组选择器
          作用：为了定义一组选择器的公共样式
          语法以，隔开的选择器列表
          sel1,sel2,sel3,...{}
          6、后代选择器
        多于一级以及一级的层级关系，后代
        语法:selector1 selector2{}
        在满足selector1选择的元素内，再去匹配选择器2的元素
          7、子代选择器
        只有一层的层级关系，子代
        语法：selector1>selector2
        >:表示的子代关系
        目标：缩小匹配的范围
          8、伪类选择器
          作用：匹配元素不同的状态
          语法:
        :伪类选择器{}
        选择器:伪类选择器{}
          分类：
        1、链接伪类
           目的：匹配超链接元素
           :link  适用于尚未访问过的超链接样式
           :visited适用于访问过的超链接的样式
        2、动态伪类
           :hover 适用于鼠标悬停在元素上的状态
           :active 适用于元素被激活(点击)时的状态
           :focus元素获取焦点时的样式
        3、目标伪类
        4、元素状态伪类
        5、结构伪类
        6、否定伪类
       3、选择器优先级--权值
        元素选择器--1
        类选择器---10
        伪类选择器-10
        id选择器  100
        内联样式--1000
        选择器的权值加到一起，大的优先，如果权值相同，以后定义为主。
   3、尺寸与边框（重点）
    1、css单位
      1、尺寸单位
         %：百分比
         in:英寸
         cm
         mm
         pt磅一般用于文字
         px像素，常用
         em：倍数，多用于文字大小，设置1em相当于原始大小，2em当前字体的2倍大小
         rem：相对于根元素去定义大小
         注意：尺寸相关属性在设置值得时候，必需加单位
     2、颜色单位：
        1、rgb(x,x,x)
        x:0-255
        rgb(0,0,0):黑色
        rgb(255,0,0)：红色
        2、rgb(x%,x%,x%)
        3、#rrggbb
        由6位16进制的数字组成
        0-9 A-F
        #000000 黑色#000
        #fff白色
        #111111-#eeeeee：灰色
        每两位数字一样的情况下，可以使用#rgb的方式来表示
        4、颜色的英文表示法
     2、尺寸属性
       1、什么是尺寸属性
        用来设置元素的宽度和高度
        默认尺寸
        块级元素：
            宽度：占据父元素的100%
            高度：自适应
        行内元素：宽度和高度自适应
       2、宽度
        属性：width
              max-width
              min-width
       3、高度
        属性：height
              max-height
              min-height
        4、哪些元素允许设置尺寸属性
        1、块级元素
        2、在非块级元素中，本身就具备宽高属性的html元素，可以设置尺寸属性
        5、溢出处理
        1、什么时候会产生溢出现象
        当使用尺寸属性限制元素框大小时，并且内容所需空间大于元素本身的空间
        2、溢出属性
            属性：overflow
                  overflow-x：横向溢出处理
                  overflow-y：纵向
             取值：
                1、visible：默认值，可见的
                2、hidden：隐藏
                3、scroll：滚动条。在元素中显示滚动条，溢出时，滚动条可用，不溢出时滚动条不可用（可见）
                4、auto：自动。溢出时显示滚动条并且可用，不溢出时，不显示滚动条
    3、边框属性
     1、边框
      属性
      1、简写方式
        border:width style color
        width:边框大小
        style：边框样式(实线，虚线)
        实线：solid
        虚线：dashed，dotted
        color:颜色
        除正常颜色取值之外，还可取值为透明的，transparent（有宽度，但是不可见的边框）
        注意：border属性设置四个边框的统一效果。
    2、单边设置
        属性：border-方向:width style color；
        方向：top、bottom、left、right
    3、单属性设置
    属性：
        border-属性：值
        属性：width、style、color
        注意：设置四个边框的某一个属性
    4、单边单属性设置
        border-方向-属性:值；
    5、边框的组成
        由四个三角形或者梯形组成
  2、边框倒角
    属性：border-radius
    取值：数值/百分比
    border-radius：简写属性，设置四个角的圆角半径
    单独定义
    border-top-left-radius:左上角倒角半径
    border-top-right-radius:右上角
    border-bottom-left-radius:左下角
    border-bottom-right-radius:右下角
1、边框阴影
  属性：box-shadow
    取值:用空格分开的值列表
    h-shadow：必须，阴影的水平偏移距离，取值为正，向右偏。
    v-shadow：必须，阴影的垂直偏移距离，取值为正，向下偏
    blur:可选，模糊距离
    spread：可选，阴影尺寸
    color:可选，阴影颜色
    inset可选，将默认的外部阴影，改为内部阴影
2、轮廓
    1、什么是轮廓
    是绘制于元素周围的一条线，位于边框之外
    2、属性：
        outline:width style color;
        outline-width：轮廓的宽度
        outline-style：轮廓的样式
        outline-color:轮廓的颜色
        常用的方式：
            outline:0;
            outline:none;