css学习笔记

一、Font 字体
1、font-family
示例:{font-family:字体:字体1}
2、font-size 字号大小
示例: p { font-style: normal; }
 p { font-size: 12px; }
 p { font-size: 20%; }
3、font-style  字体样式
参数: normal : 正常的字体
 italic : 斜体。对于没有斜体变量的特殊字体,将应用oblique
 oblique : 倾斜的字体
示例:  p { font-style: normal; }
 p { font-style: italic; }
 p { font-style: oblique; }
4、font-weight 文本字体的粗细
参数: normal : 正常的字体。相当于number为400。声明此值将取消之前任何设置
 bold : 粗体。相当于number为700。也相当于b对象的作用
 bolder : IE5+ 特粗体
 lighter : IE5+ 细体
示例: span { font-weight:800; }
5、text-decoration 文本的装饰
参数:  none :  无装饰
 blink :  闪烁
 underline :  下划线
 line-through :  贯穿线
 overline :  上划线
示例: div { text-decoration : underline; }
 div { text-decoration : underline overline; }
6、font-variant 英文的大小写转换
参数:  normal : 正常的字体
 small-caps : 小型的大写字母字体

示例: span { font-variant: small-caps; }

7、text-transform 英文大小写
参数: none :  无转换发生
 capitalize :  将每个单词的第一个字母转换成大写,其余无转换发生
 uppercase :  转换成大写
 lowercase :  转换成小写
示例: div { text-transform : uppercase; }

8、line-height 文字行高
参数: normal :  默认行高
 length :  百分比数字 | 由浮点数字和单位标识符组成的长度值,允许为负值
示例: div {line-height:6px; }
div {line-height:10.5; }

9、letter-spacing 文字之间的间隔
参数:  normal :  默认间隔
 length :  由浮点数字和单位标识符组成的长度值,允许为负值。
示例: div {letter-spacing:6px; }
 div {letter-spacing:0.5pt; }
 
10、word-spacing  英文单词间距
参数: normal :  默认间距
 length :  由浮点数字和单位标识符组成的长度值,允许为负值
示例:div { word-spacing : 10; }  div { word-spacing : 10px; }

二、文本  text
1、text-indent  文字缩进
参数:length :  百分比数字|由浮点数字和单位标识符组成的长度值,允许为负值。
示例:div { text-indent : -5px; }
div { text-indent : underline 10%;

2、text-align  对齐
参数: left :  左对齐
 right :  右对齐
 center :  居中
 justify :  两端对齐
示例: div { text-align : center; }

三、背景  background
1、background-color   背景色
参数: transparent :  背景色透明
 color :  指定颜色
示例: p { background-color: silver }
div { background-color: rgb(223,71,177) }
body { background-color: #98AB6F }
pre { background-color: transparent; }

2、background-image  背景图
参数: none :  无背景图
 url :  使用绝对或相对地址指定背景图像
示例: code { background-image: url("comet.jpg"); }
 blockquote { background-image: url("c:\InetPub\MyPixs\comet.jpg"); }
 br { background-image: url(http://Fred.com/ImageFile/Q.gif); }
 body { background-image: none; }

3、background-position  背景图像位置
参数: length :  百分数 | 由浮点数字和单位标识符组成的长度值。
 position :  top | center | bottom | left | center | right
示例: div { background: url("images/aardvark.gif"); background-position: 35% 80%; }
 menu { background: url("images/aardvark.gif"); background-position: 35% 2.5cm; }
 a { background: url("images/aardvark.gif"); background-position: 3.25in; }
 body { background: url("images/aardvark.gif"); background-position: top right; }

4、background-repeat  背景图像平铺
参数: repeat :  背景图像在纵向和横向上平铺
 no-repeat :  背景图像不平铺
 repeat-x :  背景图像在横向上平铺
 repeat-y :  背景图像在纵向平铺
示例: menu { background: url("images/aardvark.gif"); background-repeat: repeat-y; }
 p { background: url("images/aardvark.gif"); background-repeat: no-repeat; }

四、定位  Positioning
1、position 
参数: static :  无特殊定位,对象遵循HTML定位规则
 absolute :  将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位
 relative :  对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置
 fixed :  IE5.5及NS6尚不支持此属性
   层的高度
 height:  层的宽度
示例: div { position: absolute; bottom: 1in; left: 1in; right: 1in; top: 1in; }
 div { position:relative; top:-3px; left:6px; }

2、z-index 
参数: auto :  遵从其父对象的定位
 number :  无单位的整数值。可为负数
示例: div { position:absolute; z-index:3; 6px; }

五、布局  Layout
1、overflow
参数: visible : 不论层的大小,内容都显示出来
auto :  只在内容超出层的范围的时候才显示滚动条
hidden :  不显示超过对象尺寸的内容
scroll :  总是显示滚动条
示例: body { overflow: hidden; }
 div { overflow: scroll; height: 100px; 100px; }
2、visibility 
参数: inherit :  继承上一个父对象的可见性
 visible :  对象可视
 hidden :  对象隐藏
 collapse :  主要用来隐藏表格的行或列。
示例: img { visibility: inherit; float: right; }

六、边框  border
1、border-width  边框宽度
参数: medium :  默认宽度
 thin :  小于默认宽度
 thick :  大于默认宽度
 length :  由浮点数字和单位标识符组成的长度值。
示例: span { border-style: solid; border- thin; }
 span { border-style: solid; border- 1px thin; }

2、
border-top-width 上宽 (当把width换成color就是边框颜色)
border-bottom-width 下宽(当把whdth换成style就是边框样式)
border-left-width 左宽
border-right-width 右宽

3、border-style  边框样式
参数: none :  无边框
 hidden :  隐藏边框。IE不支持
 dotted :  点线
 dashed :  虚线
 solid :  实线边框
 double :  双线边框
 ----一一下只对表格有效-----
 groove :  根据border-color的值画3D凹槽
 ridge :  根据border-color的值画菱形边框
 inset :  根据border-color的值画3D凹边
 outset :  根据border-color的值画3D凸边
示例: body { border-style: double groove; }
 body { border-style: double groove dashed;

七、外补丁 margin
1、 检索或设置对象四边的外延边距。
 如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。
 margin-top  上
 margin-right 右
 margin-bottom 下
 margin-left 左
示例: body { margin: 36pt 24pt 36pt; }
 body { margin: 11.5%; }
 body { margin: 10% 10% 10% 10%; } 
 body { margin-top: 11.5%; }
八、内补丁 padding
检索或设置对象四边的补丁边距。
如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。
和外补丁相似

九、超链接
a:link {color: #FF0000}     /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 当有鼠标悬停在链接上 */
a:active {color: #0000FF}   /* 被选择的链接 */

十:鼠标光标
1、cursor:光标形状
参数: crosshair  交叉十字 help 代问号的鼠标
 default  默认鼠标形状 text 文本形状
 hand  手型 
 move  移动的形状
 wait  沙漏形状
 w-resize 向西的箭头 s-resize 向南的箭头
 n-resize 向北的箭头 e-resize 向东的箭头
 ne-resize 向东北  sw--resize 向西南
 se-resize 向东南 nw-resize 向西北
 
Xscan,LC4/5,流光……

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/shuyu586813/archive/2008/07/25/2707607.aspx

原文地址:https://www.cnblogs.com/shuyu/p/1499095.html