真正零基础学习HTML(四)

盒子模型
css基本属性:
1.border:边框 solid:实线颜色
2.width:宽
3.height:高
4.background-image:url()背景图片
background-repeat-x/y/no:水平重复或不重复
滚动:background-attachment:fixtd(固定)scroll(背景图片默认滚动)
background-position:left(水平)top(垂直);

字体属性
1.大小:<font size></font> 单位:px,pd
2.样式:font-style: oblique;(偏斜体) 、italic;(斜体) 、normal;(正常)
3.行高:line-height: normal;(正常) 单位:PX、PD、EM;
4.组合在一起,实现文本垂直居中 height: 40px;/测试attachment是请务必修改高度/line-height: 40px;
5.粗细:font-weight: bold;(粗体) 、lighter;(细体) 、normal;(正常)
6.变体:font-variant: small-caps;(小型大写字母) 、normal;(正常)
7.大小写:text-transform: capitalize;(首字母大写) 、uppercase;(大写) 、lowercase;(小写) 、none;(无)
8.修饰:text-decoration: underline;(下划线) 、overline;(上划线) 、line-through;(删除线) 、blink;(闪烁)
9.常用字体:(font-family):“Courier New”, Courier, monospace, “Times New Roman”, Times, serif, Arial, Helvetica, sans-serif, Verdana

鼠标样式
1.cursor:point小手
2.move十字
3.wait沙漏/转圈
4.help问号

区块属性
1.div块级(独占一行) span内联
2.对齐:text-align: justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中)
3.缩进:text-indent: 数值px;text-indent: 2em; text-indent: 20px;
4.垂直对齐:vertical-align: baseline;(基线) sub;(下标) super;(上标) top; text-top; middle; bottom; text-bottom;
5.词间距:word-spacing: normal; 数值
6.空格:white-space: pre;(保留) nowrap;(不换行)--<pre></pre>
7.显示:display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题);

盒子模型

1.border:10px solid red 边框
2.padding:20px 边框和内容间距
3.内容+填充padding+边框+外边距
4.margin:盒子和盒子距离

5.padding:上右下左(顺时针)20px 10px 15px 5px
padding:20px(上下) 10px(左右)
padding:20px(上) 10px(左右) 5px(下)

6.上下盒子外边距最终取最大的margin-top 或 margin-bottom
7.左右盒子外边距最终取和值margin-right 或 margin-left
8.margin:0 auto;上下是0 左右居中

边框属性
1.border-style: dotted;(点线) dashed;(虚线) solid(实线); double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;
2.border-width:; 边框宽度
3.border-color:#;
4.简写方法:border:width style color;
5.Border:1px solid red

CSS文字属性
1.color : #999999; /文字颜色/
2.text-decoration:underline; /加下划线/
3.text-align:center; /文字居中对齐/
4.vertical-align:top;
5.top 把元素的顶端与行中最高元素的顶端对齐
6.bottom 把元素的顶端与行中最低的元素的顶端对齐。
7.图像:list-style-image: url(xxx.gif/jpg/png);

CSS链接属性
1.a:link /超链接文字格式/
2.a:visited /浏览过的链接文字格式/
3.a:hover /鼠标转到链接/
4.a:active /按下链接的格式/

猜你喜欢

转载自blog.51cto.com/13162615/2120682