0
点赞
收藏
分享

微信扫一扫

day4 HTML5基础小知识 -表单与选择器

悲催博士僧 2022-04-18 阅读 35

1.表单

目录

1.表单

2.id选择器    

3.群组选择器

4.后代选择器(包含选择器)

5.伪类选择器     

6.html的语法

7.权重(优先级)

8.样式表的创建(3种)


1.表单
    主要是用来收集用户信息的
    创建表单<form></form>会换行
    输入<input/>不会换行
           <input type="text"/>文本框
           <input type="password"/>密码框
           <input type="submit"/>提交按钮
           <input type="reset"/>重置按钮
           <input type="button">/<buuton></button>a按钮
   区别:
          button如果作为属性值来使用,仅仅只是用来跳转的,不进行页面提交
          类似超链接
          button如果作用标签来用,进行页面提交,功能类似submit
          input 自带的特点:有边框,背景颜色是白色


2.id选择器    


      a.在样式表里以#自己取的名字{}
      b.在标签上用id调用  <div id="all"></div>
      id选择器具有唯一性,属性值只能是一个


3.群组选择器


      把相同的代码组合到一起,用逗号隔开


4.后代选择器(包含选择器)


      语法:选择器1 选择器2 选择器3{属性:属性值;...}
      最终改动的是选择器2


5.伪类选择器     


       a{}
       a:hover{}  
       如果结束默认和鼠标划上的,a的:link建议不写
       如果四种状态全写的情况,必须按顺序来
      
       语法 :
             a:link{属性:属性值;}超链接的初始状态;
             a:visited{属性:属性值;}超链接被访问后的状态;
             a:hover{属性:属性值;}鼠标悬停,即鼠标划过超链接时的状态;
             a:active{属性:属性值;}超链接被激活时的状态,即鼠标按下时超链接的状态;
             Link--visited--hover--active


6.html的语法


            双标签<标签名称 属性=“属性值”...></标签名称>
            单标签<标签名称 属性=“属性值”...>

   CSS的语法
        选择器{属性:属性值;}
               注意: 
                   1.冒号前面是属性,后是属性值(属性值不能加双引号)
                   2.属性值以;结束的
                   3.不分先后顺序
                   4.添加空格或者换行不影响属性的显示
                   5.属性值如果是数字,除非特殊要求(0),否则都要加单位


   改哪个标签就给哪个标签添加属性


7.权重(优先级)


             给同一个标签设置相同的属性,如果发生冲突才会有优先级

             行内样式表 > 内部样式表(外部样式表)
                 内部样式表和外部样式表的权重相同,谁后书写的执行谁的


8.样式表的创建(3种)


     (1).内部样式表  只作用于当前的文件    一般用在活动  专题

     (2).行内(行间)样式表 只作用于当前标签 不常用
              语法<标签名称 style="属性:属性值;"></标签名称>
              
     (3).外部样式表  用的最多   作用于所有文件
            引入外部样式表  用的最多
               a.先创建外部样式后缀是.css
               b.在<head>
                        <link href="路径" rel="stylesheet" type="text/css"/>
                        rel="stylesheet" 关联样式表
                        type="text/css" 可加可不加

                       </head>
            导入外部样式表  用的很少
                <style>
                    @import url(路径);
                </style>
          

举报

相关推荐

0 条评论