WebBasic02-CSS

表单:从浏览器向服务器传输数据的手段
1.显示,收集信息,并提交信息到服务器
2.二要素:Form元素,表单控件                                     
3. 表单元素:<form></form>用来圈定提交的范围
    主要属性:action:指定提交的目标(服务器网址)
                        method:指出表单数据提交的方式
                        enctype:表单数据进行编码的方式                                                                         
4. 表单控件:用来让用户输入数据                                     
     按照标签可以分为2大类:
1) input标签(9个),以type属性区分
   * 文本框,密码框 <input type="text"/>,<input type="password"/>
     属性:value:给框设置默认值,maxlength:限定输入的最大长度,readonly:设置只读
   * 单选框,复选框 <input type="radio"/>,<input type="checkbox"/>
     属性:name:单选框的名称,同名的框是一组,彼此可以互斥(有我没你),checked:设置此框被默认选中
   * 文件框,隐藏框:<input type="file"/>(选择要上传的文件),
                                  <input type="hidden"/>(不希望用户看见的信息,需要提前通过value设置好默认值)
   * 提交,重置,普通按钮:<input type="submit"/>,<input type="reset"/>,<input type="button"/>
     属性:value:设置按钮的显示名
2) 其他标签(3个)                                
         * label:用来管理表单中的文本,可将某文本和某控件绑定在一起,使得用户点击该文本时就相当于点击了那个控件 , 
                    即:它可以增大控件的受力面积
    绑定步骤:给目标加上id,给文本加上label,并设置for="id"的值  
 id:任何元素都有id属性,是元素的唯一标识,可将其理解为元素的身份证号 
* 下拉选:<select>
<option>请选择</option>
<option>北京</option>
<option>上海</option>....
    </select>
    属性:selected:设置默认选中
* 文本域:<textarea></textarea> 
 属性:rows:设置占据多少行文本的高度,cols:设置占据多少列文本的宽度                                
                                     
CSS
CSS的注释:/*...*/
1.指层叠样式表,样式定义如何显示HTML元素,其存储在样式表中
2. 内联样式:
    直接在元素的style属性里写CSS,该CSS无法复用
3. 内部样式:
    在head的style子标签中写的CSS,可以在当前页面复用
4. 外部样式:
    通过link标签引入的外部css文件,任何页面都可以复用这些样式 <link rel="stylesheet" href="css文件名">                                  
5.CSS由多个样式规则组成,每个样式规则有两个部分,选择器和声明
6.CSS的规则特性:
    * 继承性:父元素的某些样式可以被子元素继承
    * 层叠性:先后多次给同一个元素写不同的声明,这些声明的效果会叠加
    * 优先级:多次给同一个元素写相同的声明,以后者为准,内联>内部=外部>浏览器默认                                     
7.CSS选择器:
   1) 元素选择器:通过元素名选择CSS作用的目标
   2) 类选择器:拥有共性的某一类元素作为目标  .className{}
   3) id选择器:根据id选择唯一的元素  #id的值{}
   4) 选择器组:选中一组选择器中,每个选择器所对应的目标的并集
   5) 派生选择器:根据元素的层次关系选择某元素的子元素
     *后代选择器:选择满足条件的所有子孙
     *子元素选择器:选择满足条件的所有儿子
   6) 伪类选择器:根据状态来选择某一组元素
       常用类:link(未访问的超链接),visited(已访问的超链接),active(激活态),hover(鼠标悬停),focus(有焦点的元素)