IT新手入门,零基础学IT,转行做IT,IT行业的职位选择,你我一同探讨!

IT新手入门网给你介绍IT行业的职位有哪些,让你转行做IT不发愁,IT入门有捷径

当前位置: 主页 > 技能提升 > HTML5/前端互联网工程师 > html5自学-css3基础入门(第四天)

html5自学-css3基础入门(第四天)

时间:2017-01-23 08:18来源:原创 作者:恪己 点击:
一、表单控件 1、input 1、语法 input 或 input/ 属性: 1、type 区分元素 2、value 值 3、name 名称 , 匈牙利命名法 4、disabeld 禁用,无值 2、分类 1、文本框与密码框 type=text : 文本框 type=passw
一、表单控件
     1、input
            1、语法
              <input> 或 <input/>
               属性:
                       1、type
                              区分元素
                       2、value
                              值
                       3、name
                              名称 , 匈牙利命名法
                      4、disabeld
                              禁用,无值
           2、分类
                       1、文本框与密码框
                                     type="text" : 文本框
                                     type="password" : 密码框
                                     属性:
                                                1、maxlength 
                                                2、readonly
                                                                    无值
                       2、单选按钮 和 复选框
                                     type="radio" : 单选按钮
                                     type="checkbox" : 复选框  
                                    属性:
                                            1、name
                                                          分组
                                            2、checked
                                                         设置默认被选中
                      3、按钮
                              type="submit" : 提交按钮
                              type="reset" : 重置按钮
                              type="button" : 普通按钮
                            属性:
                                     1、name
                                      2、value
                                              按钮上的文本
                            按钮:<button>显示文本</button>
                                                  button 如果放在 表单中,就是提交按钮,位于表单外,就是普通按钮
                     4、隐藏域 和 文件选择框
                                 type="hidden"
                                 type="file"
                                 注意:
                                            使用file时
                                            1、method 必须为 post
                                            2、enctype 必须为 multipart/form-data
      2、textarea
                  语法:<textarea></textarea>
                  属性:
                           1、name
                                         名称
                          2、cols
                                      显示的列数
                          3、rows
                                     显示行数
       3、select & option 
                      选项框:下拉选项框 , 滚动列表
                      语法
                              <select></select>
                                         属性:
                                                    1、name
                                                                  名称
                                                    2、size
                                                                   值大于1的话则为 滚动列表 
                                                    3、multiple
                                                                    实现多选,无值
                               <option></option>
                                            属性:
                                                         1、value
                                                         2、selected
      4、其他元素
                          1、为控件分组
                                      <fieldset></fieldset> --分组
                                      <legend></legend> --分组的标题
                          2、关联文本和控件
                                           <label>文本</label>
                                            属性:
                                                         for :关联的控件的ID值 
     5、其他常用标记(非表单控件)
              1、浮动框架
                          1、作用
                                                   在一个浏览器窗口中,能够显示多个页面文档
                          2、语法
                                       <iframe>文本</iframe>
 
                                      属性:
                                               1、src
                                               2、width
                                               3、height
                                               4、frameborder
                                                                   取消边框,设置为0
             2、摘要与细节
                       <details></details> --定义细节
                       <summary></summary> --定义标题
                       <details>
                                   <summary>标题</summary>
                       </details>
             3、度量元素
                           <meter>文本</meter>
                           属性:
                                   1、min :最小值,默认0
                                   2、max :最大值,默认1
                                   3、value :显示的值 
             4、时间元素
                            <time>文本</time>
                             属性:
                                     1、datetime
             5、高亮显示
                                <mark></mark>
二、CSS基础
     1、什么是CSS
                 CSS:Cascading Style Sheets
                 层叠样式表 或 级联样式表 或 样式表
     2、CSS特征
                   1、以统一的方式声明元素的样式
                   2、提高了样式的可重用性 和 可维护性 
     3、CSS 和 HTML 的关系
                   1、HTML 负责构建网页
                   2、CSS 负责 美化网页
                   W3C推荐 尽量使用 css 样式属性 取代 HTML元素的属性
     4、CSS样式表使用方式
                   1、内联方式
                                  别名:内联样式 或 行内样式
                                  <ANY style="若干样式声明">
                                  样式声明--> 属性名:值;
                                  特点:声明好的样式只能在定义的元素中使用
                  2、内部样式表
                       将样式定义在页面中,页面范围内有效
                       <head>
                                      <style>
                                               若干样式规则
                                       </style>
                       </head>
                         样式规则:选择器,样式声明
                         选择器{
                         若干样式声明;
                         }
                         选择器:规范页面中哪些元素能够使用定义好的样式
 
                         div{
                                    color:red;
                                    font-size:12px;
                          }
                 3、外部样式表
                              将样式定义在 外部的 样式文件中(*.css)
                              步骤:
                                   1、创建.CSS文件并且定义样式(样式规则)
                                   2、在使用的页面中进行引入
                                                 <link rel="stylesheet" href="样式表URL">
****************************************
1、CSS语法
             1、CSS样式表特征
                         1、继承性
                                        大部分的样式规则和样式声明是可以被继承的
                         2、层叠性
                                        可以为一个元素定义多个样式
                                        不冲突时,多个样式表中的样式可以层叠为1个
                         3、优先级
                                        样式定义冲突时,按照不同样式表/规则的优先级来应用样式
                                        样式优先级:
                                        浏览器缺省设置         低
                                        外部/内部样式表        中
                                                     -就近原则
                                        内联样式
 
                                        !important 规则:手动调整优先级
                                        使用方式:选择器{属性:值 !important;}
                                        注意: !important 尽量少用
          2、排错
                          提示:Unknown property name
                                                       不知道  属性     名称
                                                        属性名写错了!!!!
                           提示:Invalid property value
                                                        未验证  属性     值
                                                        属性值写错了!!!!
 
                           所编写的样式 没有出现在 开发工具里的Styls中,选择器写错了!!!!
 
                           只要写完一条样式声明,后面就加 ; 作为结尾
 
                          缺少 } ,该样式规则以后的所有样式规则都没有效果显示
2、CSS基础选择器
              1、作用
                     规范了页面中哪些元素能够使用定义好的演示
                     目的:匹配页面元素
             2、分类
                             1、通用选择器
                                                      语法: *{}
                                                      作用:匹配页面中的所有元素
                                                      ex:
                                                              *{
                                                                   font-size:12px;
                                                               }
                                                     注意:尽量少用
                              2、元素选择器

     

------分隔线----------------------------
栏目列表
推荐内容