Fork me on GitHub

HTML与CSS基础小结

HTML与CSS小结

HTML

table>tr>th>td 可用类似的关系接上tab键来快捷建表

<form action="" method=“”> action定义提交链接 methon选择提交方式 post为ftp提交 get则会将信息在网页上方链接后显示

<input type="" name="" id="">语句 type来定义输入类型
无序列表以<ul>元素开始,并包含一个或多个<li>元素。


1
2
3
4
<ul>
<li>milk</li>
<li>fish</li>
</ul>

text为单行文本

password为密文

radio为单选

cheakbox为多选

file为文件类型

submit为提交

type="image" name="" src="" 也可用图片代替提交

reset为重置 type="reset" value="" 可改变显示的值

<textarea name=""></textarea> 多行文本

1
2
3
<select>
<option name="" value=""></option>
</select>

select与option配合为滚动选择

<label for="id">
配合<input id="id"><textarea id="id"><option id="id">
可达到点击标签名就能激活输入栏的效果

CSS

引入方法

外联式 <link rel="stylesheet" type="text/css" href="">
最为常用

嵌入式 在<body>中使用<style type="text/css"></style>

内联式 <div style="width:100px; color:red;">...</div>

常用样式:

color 设置文字颜色

font-size 设置文字大小

font-family 设置文字字体,如 “Microft YAHEI UI”;

font-style 设置文字是否倾斜,如 font-style: normal/italic;

font-weight 设置文字是否加粗,如 font-weight: bold/normal;

font-height 设置文字行高,如 font-height: xxpx; 行高相当于在每行文字上下同时加间距

font 同时设置文字的多个属性,如 font: 是否加粗 字号/行距 字体===>
font: bold 90px/90px "微软雅黑"

text-decoration 设置文字下划线, 如 text-decoration: none; 去掉文字下划线,一般用于链接去下划线。

text-indent 设置文字首行缩进,如 text-indent: 24px; 设置首行缩进24px。

颜色表示:

1、颜色名表示:red,greem。

2、color: rgb(x,y,z)

3、十六进制表示 color: #000000 最为常用

选择器:

1、标签选择器 范围过大,动一辙百,一般用在层级选择器中。

2、id选择器 只能对应一个元素,不推荐使用。

3、类选择器 应用最多,通过类名来选择元素。

4、层级选择器 选择父元素下的子元素,可与标签元素搭配使用,如:
.box span{color: red;}
.box .box01{font-size: 90px;}

5、组选择器 同时定义多个相同样式

6、伪类及伪元素选择器 常用伪类有hover,表示鼠标悬停在元素上的状态,伪元素选择器有before和after,可以通过样式在元素(即标签)中插入内容,常用于修复bug。
.box1: hover{color: red;}

1
2
3
.box2:before{
content: "行首文字";
}

1
2
3
.box3:after{
content: "行尾文字";
}
盒子模型(标签即元素即盒子)

content 内容

padding 内容与边框之间的填充

border 边框

margin 盒子与盒子间的间距

margin使用技巧:

margin: x,auto;
可设置也仅能设置水平对齐,自适应浏览器尺寸。

为消除多个div拼接式,边框并接加粗的现象,尝试用margin-top: -1px;来将div向上进行边框重叠。

margin中的bug及解决:
margin-top/bottom 垂直边距的合并,上下两边距相距时,会自动合并,留下较大值。

解决:

1、只设置一边的外边距

2、使用这种特性

3、将元素浮动或定位

内部盒子使用margin-top时,将外部盒子撑下来,塌陷。

解决:

1、外部盒子设置一个边框

2、外部盒子设置overflow:hidden

3、使用伪元素类:

1
2
3
4
.clearfix:before{
content:"";
display:table;
}

解决内联元素代码换行产生间距的问题:

父类font-size设为0 在子类中设置各自font-size

清除浮动,解决浮动元素无法撑开父级元素(子元素浮动,父元素未给高度)的问题:
1
2
3
4
5
.clearfix:after{
content:"";
display:table;
clear:both;
}

二者合并

1
2
3
4
5
6
7
8
9
10
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
zoom:1;
}//兼容IE

欢迎投喂,但你的支持就是对我最佳的回馈。