怎样用css设定下表框的宽度、样式、颜色

2023-02-21 01:13:02html-css09

怎样用css设定下表框的宽度、样式、颜色,第1张

请把问题讲得清楚一些，你说的表框是模块的边框还是表格的边框

如果是模块边框的话，就先弄懂这些参数和属性：

none (没有边框，无论边框宽度设为多大)

dotted (点线式边框)

dashed (破折线式边框)

solid (直线式边框)

double (双线式边框)

groove (槽线式边框)

ridge(脊线式边框)

inset (内嵌效果的边框)

outset (突起效果的边框)

边框宽度属性(border-width)

这个属性用来设定上下左右边框的宽度，它的值如下：

medium (是缺省值)

thin (比medium细)

thick (比medium粗)

用长度单位定值。可以用绝对长度单位(cm, mm, in, pt, pc)或者用相对长度单位 (em, ex, px)。

边框颜色属性(border-color)

这个属性用来设定上下左右边框的颜色。例句如下：

.d5 {border-color:grayborder-style:solid}

边框属性(border)

这个属性是边框属性的一个快捷的综合写法，它包含border-width, border-style和border-color。例句如下：

.d1 {border:5px solid gray}

单边边框属性

上下左右四个边框不但可以统一设定，也可以分开设定。

设定上边框属性，你可以使用border-top, border-top-width, border-top-style, border-top-color。

设定下边框属性，你可以使用border-bottom, border-bottom-width, border-bottom-style, border-bottom-color。

设定左边框属性，你可以使用border-left, border-left-width, border-left-style, border-left-color。

设定上边框属性，你可以使用border-right, border-right-width, border-right-style, border-right-color。

边框属性

前面例子里提到的，例如用来定义字体颜色的color，字体大小的font-size，都是CSS的属性。从这一课起，就开始详细介绍CSS的各类属性。

每一个网页都可以理解成是被一个方框框起来的，而页面中不同的部分又可以分为一个个小的方框。因此定义方框的边距、边界、颜色等的边框属性应用而生。

1、边距属性：

·左边距（margin-left）

·右边距（margin-right）

·上边距（margin-top）

·下边距（margin-bottom）

·边距（margin）

边距属性定义HTML页面中方框四边和其他元素之间的空白距离，每一个margin-side属性只影响到一条边，而margin则提供了一个同时设置四个边距的机会。

2、填充属性：

·左填充（padding-left）

·右填充（padding-right）

·上填充（padding-top）

·下填充（padding-bottom）

·填充（padding）

填充属性设置边框和内部元素的距离。它和边距属性十分相似，每个padding-side定义一个边框距离，padding则同时定义四个距离。

3、边界属性

·上边界宽（border-top-width）

·右边界宽（border-right-width）

·下边界宽（border-bottom-width）

·左边界宽（border-left-width）

·边界宽（border-width

这几个属性定义边界宽度，用thin、medium和thick分别表示细、中等和粗，或者指定具体的数值来定义边界的宽度。

·边界颜色（border-color）

这个属性定义边界的颜色，可以用16种颜色名或RGB值来设置。如果指定一种颜色，则表示四个边框是一种颜色，指定两种颜色，则定义顺序为上下、左右；指定三种颜色，顺序为上、左右、下；指定四种颜色，顺序则为上、右、下、左。16种颜色名分别为：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。RGB值则应表示为#RRGGBB或r%,g%,b%。

·边界样式（border-style）

该属性用以定义边框的风格呈现式样。共有九种。

none －不显示边框，为缺省值

dotted －点线

dashed —虚线

solid －实线

double －双线

groove －凹线

ridge －凸线

inset －使整个方框凸起

outset －使整个方框凹陷

·上边界（border-top）

·右边界（border-right）

·下边界（border-bottom）

·左边界（border-left）

·边界（border）

这几个是简写属性，它集合了上面几种属性的特点，可使用其给边框一次性定义宽度、式样和颜色。各属性值之间用空格隔开。

4、尺寸属性

定义方框的宽度width和高度height。

例：DIV.sample {width: 300px

height: 200px }

CSS语言大全，如下：

字体属性：(font)

大小 {font-size: x-large}(特大) xx-small(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD

样式 {font-style: oblique}(偏斜体) italic(斜体) normal(正常)

行高 {line-height: normal}(正常) 单位：PX、PD、EM

粗细 {font-weight: bold}(粗体) lighter(细体) normal(正常)

变体 {font-variant: small-caps}(小型大写字母) normal(正常)

大小写 {text-transform: capitalize}(首字母大写) uppercase(大写) lowercase(小写) none(无)

修饰 {text-decoration: underline}(下划线) overline(上划线) line-through(删除线) blink(闪烁)

常用字体： (font-family)

"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana

背景属性： (background)

色彩 {background-color: #FFFFFF}

图片 {background-image: url()}

重复 {background-repeat: no-repeat}

滚动 {background-attachment: fixed}(固定) scroll(滚动)

位置 {background-position: left}(水平) top(垂直)

简写方法 {background:#000 url(..) repeat fixed left top} /*简写·这个在阅读代码中经常出现，要认真的研究*/

区块属性： (Block) /*这个属性第一次认识，要多多研究*/

字间距 {letter-spacing: normal} 数值 /*这个属性似乎有用，多实践下*/

对齐 {text-align: justify}(两端对齐) left(左对齐) right(右对齐) center(居中)

缩进 {text-indent: 数值px}

垂直对齐 {vertical-align: baseline}(基线) sub(下标) super(下标) toptext-topmiddlebottomtext-bottom

词间距word-spacing: normal数值

空格white-space: pre(保留) nowrap(不换行)

显示 {display:block}(块) inline(内嵌) list-item(列表项) run-in(追加部分) compact(紧凑) marker(标记) tableinline-tabletable-raw-grouptable-header-grouptable-footer-grouptable-rawtable-column-grouptable-columntable-celltable-caption(表格标题) /*display 属性的了解很模糊*/

方框属性： (Box)

width:height:float:clear:bothmargin:padding:顺序：上右下左

边框属性： (Border)

border-style: dotted(点线) dashed(虚线) soliddouble(双线) groove(槽线) ridge(脊状) inset(凹陷) outset

border-width:边框宽度

border-color:#

简写方法border：width style color/*简写*/

列表属性： (List-style)

类型list-style-type: disc(圆点) circle(圆圈) square(方块) decimal(数字) lower-roman(小罗码数字) upper-romanlower-alphaupper-alpha

位置list-style-position: outside(外) inside

图像list-style-image: url(..)

定位属性： (Position)

Position: absoluterelativestatic

visibility: inheritvisiblehidden

overflow: visiblehiddenscrollauto

clip: rect(12px,auto,12px,auto) (裁切)

css属性代码大全

一 CSS文字属性：

color : #999999/*文字颜色*/

font-family : 宋体,sans-serif/*文字字体*/

font-size : 9pt/*文字大小*/

font-style:itelic/*文字斜体*/

font-variant:small-caps/*小字体*/

letter-spacing : 1pt/*字间距离*/

line-height : 200%/*设置行高*/

font-weight:bold/*文字粗体*/

vertical-align:sub/*下标字*/

vertical-align:super/*上标字*/

text-decoration:line-through/*加删除线*/

text-decoration: overline/*加顶线*/

text-decoration:underline/*加下划线*/

text-decoration:none/*删除链接下划线*/

text-transform : capitalize/*首字大写*/

text-transform : uppercase/*英文大写*/

text-transform : lowercase/*英文小写*/

text-align:right/*文字右对齐*/

text-align:left/*文字左对齐*/

text-align:center/*文字居中对齐*/

text-align:justify/*文字分散对齐*/

vertical-align属性

vertical-align:top/*垂直向上对齐*/

vertical-align:bottom/*垂直向下对齐*/

vertical-align:middle/*垂直居中对齐*/

vertical-align:text-top/*文字垂直向上对齐*/

vertical-align:text-bottom/*文字垂直向下对齐*/

二、CSS边框空白

padding-top:10px/*上边框留空白*/

padding-right:10px/*右边框留空白*/

padding-bottom:10px/*下边框留空白*/

padding-left:10px/*左边框留空白

三、CSS符号属性：

list-style-type:none/*不编号*/

list-style-type:decimal/*阿拉伯数字*/

list-style-type:lower-roman/*小写罗马数字*/

list-style-type:upper-roman/*大写罗马数字*/

list-style-type:lower-alpha/*小写英文字母*/

list-style-type:upper-alpha/*大写英文字母*/

list-style-type:disc/*实心圆形符号*/

list-style-type:circle/*空心圆形符号*/

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表单运用：

文字方块

按钮

复选框

选择钮

多行文字方块

下拉式菜单选项1选项2

八、CSS边界样式：

margin-top:10px/*上边界*/

margin-right:10px/*右边界值*/

margin-bottom:10px/*下边界值*/

margin-left:10px/*左边界值*/

CSS 属性：字体样式(Font Style)

序号中文说明标记语法

1 字体样式 {font:font-style font-variant font-weight font-size font-family}

2 字体类型 {font-family:"字体1","字体2","字体3",...}

3 字体大小 {font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}

4 字体风格 {font-style:inherit|italic|normal|oblique}

5 字体粗细 {font-weight:100-900|bold|bolder|lighter|normal}

6 字体颜色 {color:数值}

7 阴影颜色 {text-shadow:16位色值}

8 字体行高 {line-height:数值|inherit|normal}

9 字间距 {letter-spacing:数值|inherit|normal}

10 单词间距 {word-spacing:数值|inherit|normal}

11 字体变形 {font-variant:inherit|normal|small-cps }

12 英文转换 {text-transform:inherit|none|capitalize|uppercase|lowercase}

13 字体变形 {font-size-adjust:inherit|none}

14 字体 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}

文本样式(Text Style)

序号中文说明标记语法

1 行间距 {line-height:数值|inherit|normal}

2 文本修饰 {text-decoration:inherit|none|underline|overline|line-through|blink}

3 段首空格 {text-indent:数值|inherit}

4 水平对齐 {text-align:left|right|center|justify}

5 垂直对齐 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}

6 书写方式 {writing-mode:lr-tb|tb-rl}

背景样式

序号中文说明标记语法

1 背景颜色 {background-color:数值}

2 背景图片 {background-image: url(URL)|none}