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(内容的宽度)