千锋前端浠浠呀老师HTML+CSS教程,零基础web前端开发入门必看视频

(一)文本类型css
1.文字颜色 color:red/#000/rgb(0,0,0);
2.字体大小 font-size:16px;
3.文本水平对齐方式 text-align:left/center/right/justify(两端对齐);
4.文本修饰 text-decoration:none(去掉下划线)/underline(下划线)/line-through(删除线);
5.行高 line-height 第一行文本的中线到第二行文本中线的距离
+ 针对多行文本(最好字体大小一样)之间的上下间距,给行高实现(ps中测量:第一行文本的头部到第二行文字头部之间的距离)
+ 针对单行文本实现垂直居中效果,line-height:当前盒子的高度;
6.加粗 font-weight:100-900; 500常规粗细,值越大字体越粗
7.倾斜 font-style:italic/normal;
8.首行缩进 text-indent:2em; 可以取负值
(二)背景类型css
1.背景颜色 background-color:red/#000/rgb(0,0,0);
2.背景图片 background-image:url(路径);
3.背景平铺 background-repeat:no-repeat(不平铺)/repeat-x(横向平铺)/repeat-y(纵向平铺);
4.背景定位 background-position:水平left/center/right/值 垂直top/center/bottom/值;
5.背景固定 background-attachment:fixed;
6.背景大小 background-size:cover; 覆盖
(三)其他类型css
1.宽度 width:200px;
2.高度 height:200px;
3.浮动属性 float:left/right/none;
特点:给元素添加浮动之后,元素就飘了,就会对后方的元素产生影响
作用:实现竖着的元素横着排列;
+ 需要所有的子元素都横着排列,就需要给所有的子元素都添加浮动,也要给父元素添加height。
4.外边距 margin 自身距离外边的距离 分为四个方向 上top 下bottom 左left 右right
左外边距 margin-left
右外边距 margin-right
上外边距 margin-top
下外边距 margin-bottom
margin使用口诀:谁要动就给谁添加margin
margin-top的使用是有兼容bug
问题描述:给子元素添加margin-top之后,导致整个父元素下移;
问题解决:给父元素添加 overflow:hidden; (超出隐藏,BFC原因)
margin:0 auto; auto 自适应
可以实现一个有宽度且宽度生效的大标签做水平居中
.box{width:200px;margin:0 auto;}
(一)大标签 特点:独占一行或者一块区域,竖着排列
1.标题标签 <h1></h1> ... <h6></h6>
2.段落标签 <p></p>
3.表格标签
<table>
<tr>
<td></td>
</tr>
</table>
重要的标签属性:
+ 边框 border="1"
+ 去掉单元格与单元格之间的默认间距 cellspacing="0"
+ 去掉单元格的内边距 cellpadding="0"
+ 宽度 width="200"
+ 高度 height="200"
+ 水平对齐方式 align="left/center/right"
+ 合并右边的单元格(合并列) colspan="合并的个数"
+ 合并下边的单元格(合并行) rowspan="合并的个数"
- 单元格做了合并之后,一定要删除或者注释掉多余的单元格
4.块标签 <div></div>
5.列表标签
5.1无序列表
<ul>
<li></li>
</ul>
5.2有序列表
<ol>
<li></li>
</ol>
5.3自定义列表
<dl>
<dt></dt>
<dd></dd>
</dl>
6.表单标签 <form action="路径" method="get/post"></form>
(二)小标签 特点:挨着排列,且有默认间距
1.文本节点标签 <span></span>
2.加粗标签 <b></b> <strong></strong>
3.倾斜标签 <i></i> <em></em>
4.超链接标签 <a href="#" target="_blank"></a>
(三)特殊标签
1.图片标签 <img src="路径" alt="给用户提示用语" title="图片标题">
2.文本类型输入框 <input type="text" name="名字" value="值" placeholder="给用户提示的">
3.密码类型输入框 <input type="password" name="名字" value="值" placeholder="给用户提示的">
4.提交按钮 <input type="submit" value="注册">
<button>登录</button>
5.重置按钮 <input type="reset" value="">