zoukankan      html  css  js  c++  java
  • 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{100px; length:500;}   注意:first 是自定义的

          3.ID选择器  “ #”开头 如:  #first{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(内容的宽度)

  • 相关阅读:
    一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?
    210902
    1-2
    1-1
    4
    3
    2
    1
    u编码
    windows java 安装版 控制面板
  • 原文地址:https://www.cnblogs.com/lanyiming/p/5299680.html
Copyright © 2011-2022 走看看