资讯动态

CSS基础知识3

发布时间:2026/10/14 9:31:51 来源:尧图企业网站定制
CSS列表相关属性1.列表符号list-style-type:none(没有符号)square(方块形状)lower-roman(小写的罗马数字)upper-roman(大写的罗马数字)decimal(正常数字【1. 2.】)2.列表符号的位置list-style-position:outside (列表数字在外)list-style-position:inside (列表数字在里)3.自定义列表符号list-style-image:url()4.复合属性list-style:(将上述东西填入即可)以上可以用在ul,ol,li,其余均不可CSS --表格相关属性边框相关属性1.border-width: 2px 表示边框宽度2.border-color:表示边框颜色3.border-style:solid(实线)dashed(虚线)dotted(点线)double(双实线)4.快速方法(例)border:2px green solid5.里边边框td,th{border:2px green solid;}以上不仅仅是表格能用其他元素也能用表格独有属性1.控制表格的列宽table-layout:fixed(固定的宽度)2.控制单元格的间距【不要合并相邻单元格的间距】border-spacing:2px0px表示单元格直接没有间距3.合并相邻的单元格的边框单元格之间的间距不起效果border-collapse:separate(不合并)collapse(合并)4.隐藏没有内容的单元格empty-cells:show(展示)hide(隐藏)【不要合并相邻单元格的间距】5.设置表格标题位置caption-side:bottom(下方)top(上方)CSS–背景相关属性1.设置背景颜色background-color:transparent(透明默认颜色)2.设置背景图片background-image:url()3.设置背景图片的重复方式background-repeat:repeat(默认值)no-repeat(不重复)repeat-x(只在水平方向上重复)repeat-y(只在垂直方向上重复)4.控制背景图片的位置第一种写法关键词background-position:left top(左上角默认值)left bottom(左下角)center top(中间位置)left centercenter center或者只写一个center第二种写法用具体的像素值background-position70px 120px70px:图片左上角距离最左面70px120px:图片左上角距离最上面120px5.复合属性background:鼠标相关属性1.cursor:pointer(鼠标放上去呈现小手的图标默认值)2.move拖动标志3.wait等待图标4.crosshair(十字架图标)5.help6.自定义盒子模型CSS常用长度单位1.第一种长度单位px像素2.第二种长度单位:em(相当于当前元素的font-size的倍数)1em1*font-sizefont-size默认为16px3.第三种长度单位rem相当于根元素[html]的font-size的倍数4…第四种长度单位%相对其父元素的百分比5.文本缩进text-indent元素的显示模式1.块元素block2.行内元素inline3.行内块元素inline-block总结个元素的显示模式1.块元素2.行内元素3.行内块元素修改元素的显示模式display:块元素block行内元素inline行内块元素inline-block盒子模型的组成部分内容content1.内容区的宽width:400px2.内容区的高height:400px3.内边距(设置的背景颜色会填充内边距区域)padding20px4.边框(设置的背景颜色会填充边框区域)border10px5.外边距影响盒子位置margin50px盒子的内容区-content关于默认宽度盒子的内边距1.左侧内边距padding-left2.上内边距padding-top3.右侧内边距padding-right4.底内边距:padding-bottom5.复合属性写一个值含义四个方向的内边距是一样的padding:20px写二个值含义上下左右padding:10px 20px写三个值含义上 左右 下padding:10px 20px 30px写四个值含义上 右 下 左padding:10px 20px 30px 40px【padding不能写负数行内元素的左右内边距是没问题的上下内边距不能完美的设置块级元素,行内块元素四个方向内边距都可以完美设置】盒子的边框1.border-style:solid(实线默认黑色)2.border-width:10pxborder-left/right/top/bottom-width3. border-color:red4. border:10px solid red【solid:实线 dashed虚线 double双实线dotted点线 】盒子的外边距-margin同上

读完文章,也想定制专属网站?

尧图设计师 24 小时内与您沟通定制方案

免费获取报价 →
↑