CSS样式的基础学习总结

2020-04-27 07:59:41易采站长站整理

list-style-type:square;/*实心方形符号*/

list-style-image:url(/dot.gif);/*图片式符号*/

list-style-position:outside;/*凸排*/

list-style-position:inside;/*缩进*/

五、CSS背景样式:

background-color:#F5E2EC;/*背景颜色*/

background:transparent;/*透视背景*/

background-image: url(/image/bg.gif); /*背景图片*/

background-attachment: fixed; /*浮水印固定背景*/

background-repeat: repeat; /*重复排列-网页默认*/

background-repeat: no-repeat; /*不重复排列*/

background-repeat: repeat-x; /*在x轴重复排列*/

background-repeat: repeat-y; /*在y轴重复排列*/

指定背景位置

background-position: 90% 90%; /*背景图片x与y轴的位置*/

background-position: top; /*向上对齐*/

background-position: buttom; /*向下对齐*/

background-position: left; /*向左对齐*/

background-position: right; /*向右对齐*/

background-position: center; /*居中对齐*/

六、CSS连接属性:

a/*所有超链接*/

a:link/*超链接文字格式*/

a:visited/*浏览过的链接文字格式*/

a:active/*按下链接的格式*/

a:hover/*鼠标转到链接*/

鼠标光标样式:

链接手指 CURSOR: hand

十字体 cursor:crosshair

箭头朝下 cursor:s-resize

十字箭头 cursor:move

箭头朝右 cursor:move

加一问号 cursor:help

箭头朝左 cursor:w-resize

箭头朝上 cursor:n-resize

箭头朝右上 cursor:ne-resize

箭头朝左上 cursor:nw-resize

文字I型 cursor:text

箭头斜右下 cursor:se-resize

箭头斜左下 cursor:sw-resize

漏斗 cursor:wait

光标图案(IE6) p {cursor:url("光标文件名.cur"),text;}

七、CSS框线一览表:

border-top: 1px solid #6699cc; /*上框线*/

border-bottom: 1px solid #6699cc; /*下框线*/

border-left: 1px solid #6699cc; /*左框线*/

border-right: 1px solid #6699cc; /*右框线*/

以上是建议书写方式,但也可以使用常规的方式 如下:

border-top-color: #369 /*设置上框线top颜色*/

border-top-width:1px /*设置上框线top宽度*/

border-top-style: solid/*设置上框线top样式*/

其他框线样式

solid/*实线框*/

dotted/*虚线框*/

double/*双线框*/

groove/*立体内凸框*/

ridge/*立体浮雕框*/

inset/*凹框*/

outset/*凸框*/

八、CSS表单运用:

文字方块 <input type="text" name="T1"size="15">

按钮 <input type="submit" value="submit"name="B1">

复选框 <input type="checkbox" name="C1">

选择钮 <input type="radio" value="V1" checkedname="R1">

多行文字方块 <textarea rows="1" name="S1"cols="15"></textarea>