1. 字体的样式(font标签)
1. 文字颜色
<font color=""></font>
color属性颜色。可以用颜色对应的英文来表示,也可以用#0000FF是由井号加上三队十六进制数组成。
2. 文字字体
<font family=""></font>
family字体格式,可以在word里看字体名称。
3 . 文字大小
<font size=""></font>
size字体大小,size的值可以取1-∞
4. 文字加粗
<b></b>
是bold的简写,套上一个标签就可以加粗了。
5. 文字斜体
<i></i>
是italic的简写,直接套一个标签就会倾斜。
6. 下划线
<u></u>
是underline的缩写,直接套上标签就可。
2. 字体的分类
1. serif
衬线字体,在笔画上有特殊的修饰效果。
2. sans-serif
非衬线字体,横平竖直,横就是横,点就是点
3. monospace
等宽字体
4. cursive
草书字体
5. fantasy
虚幻字体
3. 字体的其他样式
1. font-style:设置使用斜体,斜体字体定义为字体系列中的一个单独的字体。值有:nomal,italic,oblique,inherit
2. font-weight:设置字体的粗细,值有:nomal,bold,bolder,lighter
3. font-varlant,设置小型大写字母的字体显示文本,值:nomal,small-caps,inherit
4. 行间距
line-height属性来调行间距,此属性在style标签中。
5. 文本的样式
1. 对齐
text-align: left |right |center |justify |inherit 文本水平对齐,
vertical-align: auto | baseline | sub | super | top | text-top | middle|buttom|text-buttom|%文本垂直对齐
2. 单词以及字母的间距
letter-spacing 字母间距(中文有效)
word-spancing单词间距(中文无效)
3. 定义行高
line-height:length. length应写具体数值
4. 首行缩进
text-indent:2em ; 数值可以随意填写,不可小于零,一般缩进都是2em,em代表字符。
6. 盒模型
盒模型的组成部分:content(内容),padding(内边距),border(边框),margin(外边距)
content:由width和height来设置,用于控制元素承载内容的区域
padding:用于设置边框与内容之间的距离,1个值得时候是上下左右。2个值是上下,左右。3个值是上,左右,下。4个值是上右下左,四个边框是:left、right、top、bottom,border样式中:solid是实线、dotted是点线、dashed是虚线、double是双实线
border:用于设置元素的边框,border-width是边框宽度,border-style是边框样式,border-corlor是边框颜色
margin:用于设置两个元素之间的距离,外边距margin-left、margin-right、margin-top、margin-bottom
1个值得时候是上下左右。2个值是上下,左右。3个值是上,左右,下。4个值是上右下左。
上面元素的margin-bottom和下边元素的margin-top取两者最大值,不是相加关系,父元素没有设置边框,子元素的margin-top会传递给父元素,此时给父元素设置overflow:hidden。
7. 边框
border 属性规定表格单元周围是否显示边框。值 "1" 指示应该显示边框,且表格不用于设计目的。
tr定义表格的行,rh定义表头,td定义表格单元
align:left/center/right 规定对齐方式
bgcolot:red/#00FFFF 规定背景颜色
border:1;规定表格的宽度
cellpadding:pixelx; 规定单元边与其内容之间的空白
cellspacing:pixels%;规定单元格之间的空白
frame:void/above/below/hsides/lhs/rhs/vsides/box/border; 规定外侧边框那部分是可见的
rules:none/groups/rows/cols/all;规定内侧边框的那部分是可见的。
summary:text;规定表格的摘要
width:%pixeels; 规定表格的高度。
8. 内边距
padding属性设置表格内边距,可以按照上、右、下、左的顺序分别设置各边的内边距,可以使用不同单位或百分比,但是不可以是负值。
还可以分别用padding-top/padding-right/padding-bottom/padding-left来修改上,右,下,左内边距
9.外边距
margin属性可以单独改变元素的上,下,左,右边距。也可以一次改变所有的属性。
还可以分别为:margin-top/margin-bottom/margin-right/margin-left来修改
数值写四个顺序为: 上,右,下,左
三个为:上,左右,下
两个为:上下,左右
一个就设置全部
10. 外边距重叠
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。
阻止重叠的方案:
1. 外层元素padding代替
2. 内层元素透明边框 border:1px solid transparent;
3. 内层元素绝对定位 postion:absolute:
4. 外层元素 overflow:hidden;
5. 内层元素 加float:left;或display:inline-block;
6. 内层元素padding:1px;
12. 浏览器默认样式
1.页边距
IE默认为10px,通过body的margin属性设置
FF默认为8px,通过body的padding属性设置
要清除页边距一定要清除这两个属性值
body {
margin:0;
padding:0;
}
2.段间距
IE默认为19px,通过p的margin-top属性设置
FF默认为1.12em,通过p的margin-bottom属性设
p默认为块状显示,要清除段间距,一般可以设置
p {
margin-top:0;
margin-bottom:0;
}
3.标题样式
h1~h6默认加粗显示:font-weight:bold;。
h1 {font-size:xx-large;}
h2 {font-size:x-large;}
h3 {font-size:large;}
h4 {font-size:medium;}
h5 {font-size:small;}
h6 {font-size:x-small;}
hx {
font-weight:normal;
font-size:value;
}
4.列表样式
IE默认为40px,通过ul、ol的margin属性设置
FF默认为40px,通过ul、ol的padding属性设置
dl无缩进,但起内部的说明元素dd默认缩进40px,而名称元素dt没有缩进。
ul, ol, dd {
list-style-type:none;/*清楚列表样式符*/
margin-left:0;/*清楚IE左缩进*/
padding-left:0;/*清楚非IE左缩进*/
}
5.元素居中
IE默认为text-align:center;
FF默认为margin-left:auto;margin-right:auto;
6.超链接样式
a 样式默认带有下划线,显示颜色为蓝色,被访问过的超链接变紫色,要清除链接样式.
a {
text-decoration:none;
color:#colorname;
}
7 鼠标样式
IE默认为cursor:hand;
FF默认为cursor:pointer;。该声明在IE中也有效
8 图片链接样式
IE默认为紫色2px的边框线
FF默认为蓝色2px的边框线
img {
border:0;
}