HTML与CSS小结

1.CSS属性表

字体颜色：color:red;
字体大小：font-size:30px;
宽高：width:300px;height:300px;
背景颜色：background:red;
加粗否：font-weight:bold;   bold加粗   normal不加粗
下划线否：text-decoration:none; underline加下划线。none取消下划线
行高：line-height:30px;
首行缩进：text-indent:2em;   1em代表一个中文字大小
左右浮动：float:left;float:right;
边框：border:1px solid red;     boder-top:1px solid green;
内边距：padding:20px;
外边距：margin:20px;
文本对齐方式：text-align:center;  center居中  left居左  right居右
设置字体类型：font-family:”宋体”;

2.HTML标签表

<div></div>   一个透明的大盒子，用于装某个区域或某一行
<span></span>  一个透明的小盒子，用于装icon和短文字
<a href=”#”>文字</a>  超链接
<p></p>    段落标签，用于存放大量文字
<h1></h1>标题标签，h1最大以此类推

...
<h6></h6>  


<ul>  无序列表标签，用于做排列一直整齐有序的地方
<li>列表1</li>
</ul>
<img src=”xx.jpg”>  引入图片
<label>用户名：</label>   用于提交表单的文字

提交的表单元素都放在此form标签中：

<form action=”提交的地址” method=”get/post”>
name属性有两个作用，一个用于做单选框，一个用于做表单提交的字段
<input type=”text” name=”user”>
<input type=”password” name=”pwd”>
<input type=”submit”>
</form>   

表单元素：

input标签：
type="text" 定义单行文本输入框
type="password" 定义密码输入框
type="radio" 定义单选框   要做单选框，name的值要一样，如：
<input type=”radio” name=”sex”>男
<input type=”radio” name=”sex”>女
type="checkbox" 定义复选框
type="file" 定义上传文件
type="submit" 定义提交按钮
type="reset" 定义重置按钮
type="button" 定义一个普通按钮

下拉框：

下拉1 下拉2

文本域：

<textarea></textarea>

3.前端三大语言

结构标准
Html
Html是网页的结构。相当于人的骨骼
表现（样式）标准
Css
Css是网页的美容师。相当于人的化妆师
行为标准
JavaScript
JS是网页的数据交互、效果交互。相当于人学会了技能

4.HTML注释

<!—注释的内容-->

5.图片标签
网页能够接收的图片格式：jpg png gif

<img src=”xx.jpg” title=”提示文本（鼠标悬停出现的问题）” alt=”替换文本（当图片加载不出来，用文字代替）”>

6.文字垂直居中的方法

height:40px;line-height:40px;
行高的值跟高度的值，一样，就能做到垂直居中

7.CSS选择器

标签选择器
div{color:red;}
<div></div>
类选择器
.red{color:red;}
<div class=”red”></div>
id选择器
#red{color:red;
}
<div id=”red”></div>
层级选择器
作用：简化代码，选中某某元素的子孙后代，通过空格隔开
div p{color:red;}
<div>
<p></p>
</div>

8.浮动

float:left;    让元素贴在父盒子的最左边
float:right;   让元素贴在父盒子的最右边

注意，兄弟级之间
9.内外边距

外边距：margin:50px;    作用：盒子（标签）与盒子（标签）之间的间距。用于兄弟级
内边距：padding:50px;   作用：盒子与内容之间的间距。一般用于父子级
10.CSS外链式
结构与样式相分离。样式用CSS文件写，结构用HTML文件写
好处：1.可以重复调用。2.页面简洁

步骤：

1.新建一个css文件
2.在html页面的head标签中输入：link – 回车 – 回车

11.表格注意事项
去掉单元格默认的间距
设置边框合并，要在table中去设置

合并单元格问题：
colspan=”2”:水平合并.水平合并就要把多出来的那个兄弟单元格去掉rowspan=”2”:垂直合并.垂直合并就要把多出来的下一行的单元格去掉
table的子级只能是tr
12.显示模式

标签的一些特性
块级的显示模式
特点：
1.能够设置宽高
2.独占一行

代表性标签：div/p/h1~h6/ul,li/table

行内显示模式
特点：

1.不能设置宽高
2.并排显示
3.不能设置垂直内外边距

代表标签：a/span/label
行内块显示模式
特点：
1.能够设置宽高
2.能够并排显示

代表性标签：表单元素类、img
13.显示模式的转换

把元素转为我想要的那个显示模式
转为行内块：display:inline-block;
转为块：display:block;
转为行内：display:inline;

14.边框

solid   实线
dahsed   虚线
dotted   点线
border:10px dashed black;

15.内边距

作用：父子级之间的间距。盒子与内容之间的间距，一般用于父子级

16.外边距

作用：兄弟级之间的间距。盒子与盒子之间的间距，一般用于兄弟级

17.行内标签不能接受垂直内外边距

18.版心居中

margin:0 auto;

使用条件：
1.必须有宽度
2.必须是块级显示模式

19.背景颜色半透明

background:rgba(0,0,0,0.5);

最后的值是代表透明度 0.5 就是 50%的透明度

opacity:0.5; 整个盒子都透明，连同内容一起透明

20.相对定位特点

position:relative;
1.占位置
2.以自己为起点去移动
21.绝对定位特点
position:absolute;

1.不占位置
2.默认以body为起点
3.能够设置宽高
22.子绝父（长辈）相
子级绝对定位、父级相对定位

作用：因为每个用户的分辨率不一样，默认以body为起点的话，元素的位置都会不一样。

子绝父相就可以作用，以父盒子为起点去移动
23.z-index

作用：解决定位盒子谁压着谁的问题。数值越大，越靠前
z-index:2;

24.固定定位特点

1.不占位置
2.以用户的可视区域为起点
3.能够设置宽高
永远固定在用户的屏幕中

25.盒子如何水平垂直居中

如果只是水平居中，用margin:0 auto;
垂直都要居中，一定要用定位
原理：left或top设置50%；再通过margin-left/top:-自身宽或高的一半px;

26.CSS权重值

如果选择器是一样的就看最后的样式，如果选择器不一样的就看谁的权重值更大则优先执行谁

不同的选择器，也会分大小

标签 < 类、伪类 < id < 内联
1 10 100 1000