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

时间:2023-03-08 18:56:20

 书读百遍,其义自见

 遵照这句话 今天再次重新把慕课网的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(内容的宽度)