No.4小白的HTML+CSS心得篇

 

 书读百遍,其义自见

 遵照这句话 今天再次重新把慕课网的HTML+CSS看了一遍,再次阅读感受不再是那么陌生,从而心里默默地喜欢上了这种方式,坚持。

 好了,开始今天的收获小总结

 1、html中,表单<form>

  1)一旦说到交互问题,就是要用<form>的标签实现,比如 单选,多选,输入密码,输入文本框等

            <form method="post" action="save.php">

                     要实现的各个交互功能的标签

            </form> 

     2)谈谈form表单中的label标签,当鼠标点击label中的文本,就会触发此控件

         

           <input name="sex" type="radio" id="man">

           <label for ="man">男</label>

           <input name="sex" type="radio" id="man">

            <label for ="woman">女 </label> 

2、CSS中

     1)CSS ( Cascading Style  Sheets) 层叠样式表

        其中 “层叠”指的是样式的优先级,当产生冲突时以优先级高的为准

     2)根据CSS样式的插入方式分为三类:内联式 ,外联式,嵌入式

        注意下 外联式是把CSS样式写在单独的.css文件中  然后用如下方式调用

          <head>

              <link href="base.css" rel="stylesheet" type="text/css" /> 

         </head>

    3)对于插入的是嵌入式CSS样式的定义

      格式: 选择符{属性:值;}             注:属性多的话中间加“ ;”,最后也加上“ ;”,以后在再里面添加属性的时候方便,不容易出现此类错误

      选择符也叫选择器,指的就是所要作用的对象,如 p,span,div 标签

      选择符包括以下几类:

      1.标签选择器  如: p{ font-size:18px;color:red}

      2.类选择器   “.”开头  如:  .first{width:100px; length:500;}   注意:first 是自定义的

      3.ID选择器  “ #”开头 如:  #first{width:100px; length:500;}   

      4.子选择器   ”>"    如:p>span{color:green;}

      5.后代选择器 空格  如:p span{color:green;}

      6.通用选择器  *开头  如:  *{font-size:18px;}

      7.伪类选择器 现在多用 a:hover{colro:red}   意思就是 当鼠标移动到这个链接后就显示为红色

      8.分组选择器  多个标签名之间用”,“隔开  如:h1,span{color:red;}      当多个标签的css样式是一样时,为简洁高效 直接将其放置在一起设置 

   4)盒子模型

        可以想象成一个月饼大礼盒,包装外壳就是这个浏览窗口,里面的几块月饼就是几个模块,

        月饼离外边那个大包装盒之间的距离就是边界  margin --------可以设置属性 距离

        一个月饼就是一个div模块,一个月饼包装有 外壳盒子就是边框border -------可以设置属性  粗细,颜色,样式(实线,虚线,点线)

        月饼盒子与月饼的之间就是叫填充 padding  

        所以要明白  一个模块的实际宽度是  margin+border+padding+width(内容的宽度)

 

posted @ 2016-03-20 21:16  沙皮狗de爱  阅读(230)  评论(0编辑  收藏  举报