css样式颜色大全，css颜色代码对照表
大家好，如果您还对css样式颜色大全不太了解，没有关系，今天就由本站为大家分享css样式颜色大全的知识，包括css颜色代码对照表的问题都会给大家分析到，还望可以解决大家的问题，下面我们就开始吧！
CSS颜色代码大全视图参照表
CSS颜色代码大全视图参照表
以下是一个详细的CSS颜色代码参照表，包含了各种常见颜色的十六进制（Hex）代码以及对应的颜色名称：
白色与灰色系
#FFFFFF：白色（White）#DDDDDD：浅灰色（Light Gray）#AAAAAA：中灰色（Medium Gray）#888888：深灰色（Dark Gray）#666666：更深灰色#444444：非常深灰色#000000：黑色（Black）粉色系
#FFB7DD：浅粉红（Light Pink）#FF88C2：热粉红（Hot Pink）#FF44AA：亮粉红（Bright Pink）#FF0088：粉红（Pink）#C10066：深粉红（Deep Pink）#A20055：暗粉红（Dark Pink）#8C0044：非常暗粉红红色系
#FFCCCC：浅红色（Light Red）#FF8888：珊瑚色（Coral）#FF3333：番茄色（Tomato）#FF0000：红色（Red）#CC0000：暗红色（Dark Red）#AA0000：非常暗红色#880000：深红色（Maroon）橙色系
#FFC8B4：浅橙色（Light Salmon）#FFA488：橙色（Orange）#FF7744：亮橙色（Bright Orange）#FF5511：暗橙色（Dark Orange）#E63F00：非常暗橙色#C63300：深橙色#A42D00：非常深橙色黄色与金色系
#FFDDAA：浅黄色（Light Yellow）
#FFBB66：金色（Gold）
#FFAA33：亮黄色（Bright Yellow）
#FF8800：黄色（Yellow）
#EE7700：暗黄色（Dark Yellow）
#CC6600：非常暗黄色
#BB5500：深黄色
#FFCC22：金色（另一种表示）
#FFEE99：浅金色（Light Gold）
#FFDD55：亮金色（Bright Gold）
#FFB3FF：浅金色带粉（Pinkish Gold）
#FFB886：金色（另一种表示，接近#FFBB66）
#B8860B：暗金色（Dark Gold）
#DAA520：金色（Goldenrod）
绿色系
#FFEE99：浅黄绿色（Light Yellow Green）
#FFDD55：亮黄绿色（Bright Yellow Green）
#FFCC22：黄绿色（Yellow Green）
#90EE90：亮绿色（Light Green）
#98F898：浅绿色（Pale Green）
#7CFC00：草坪绿（Lawn Green）
#32CD32：菜绿（Lime Green）
#00FF00：绿色（Green）
#00FF7F：春绿（Spring Green）
#00FA9A：中春绿（Medium Spring Green）
#7FFF00：查特绿（Chartreuse）
#ADFF2F：黄绿色（Yellow Green，另一种表示）
#228B22：森林绿（Forest Green）
#2E8B57：海绿（Sea Green）
#008080：蓝绿色（Teal）
#3CB371：中海绿（Medium Sea Green）
#8FBC8F：海绿（另一种表示，接近#2E8B57但更深）
#20B2AA：浅海绿（Light Sea Green）
#66CDAA：水绿（Medium Aquamarine）
#48D1CC：中海蓝绿（Medium Turquoise）
#00CED1：蓝绿（Turquoise）
蓝色系
#87CEEB：天蓝（Sky Blue）
#87CEFA：浅天蓝（Light Sky Blue）
#ADD8E6：亮蓝（Light Blue）
#B0C4DE：钢蓝（Steel Blue）
#4682B4：钢蓝（另一种表示，更深）
#1E90FF：道奇蓝（Dodger Blue）
#6495ED：矢车菊蓝（Cornflower Blue）
#00BFFF：深天蓝（Deep Sky Blue）
#0000FF：蓝色（Blue）
#0000CD：中蓝（Medium Blue）
#4169E1：皇家蓝（Royal Blue）
#191970：午夜蓝（Midnight Blue）
#00008B：深蓝（Dark Blue）
#000080：海军蓝（Navy）
#483D8B：暗石板蓝（Dark Slate Blue）
#5F9EA0：军蓝（Cadet Blue）
#008B8B：暗青色（Dark Cyan）
#B0E0E6：粉蓝（Powder Blue）
#AFEEEE：浅粉蓝（Pale Turquoise）
#E0FFFF：浅青色（Light Cyan）
#F0FFFF：青色（Cyan/Aqua）
紫色系
#800080：紫色（Purple）
#9370DB：中紫色（Medium Purple）
#BA55D3：中兰花紫（Medium Orchid）
#EE82EE：紫罗兰（Violet）
#DA70D6：兰花紫（Orchid）
#D8BFD8：蓟色（Thistle）
#E6E6FA：薰衣草紫（Lavender Blush）
#800000：栗色（Maroon，与#800080的紫色相近但偏红）
#8B008B：暗洋红（Dark Magenta）
#9400D3：暗紫罗兰（Dark Violet）
#4B0082：靛蓝（Indigo）
#8A2BE2：蓝紫罗兰（Blue Violet）
#7B68EE：中石板蓝（Medium Slate Blue）
#6A5ACD：石板蓝（Slate Blue）
其他颜色
#DEB887：浅棕色（Burlywood）
#F5DEB3：小麦色（Wheat）
#FFE4B5：浅黄褐色（Moccasin）
#FFDEAD：桃色（Navajo White）
#FFDAB9：浅桃色（Peachpuff）
#FFE4C4：浅黄褐色（Bisque）
#FAEBD7：古董白（Antique White）
#FFEFD5：番木瓜色（Papaya Whip）
#FFF8DC：玉米丝色（Cornsilk）
#FDF5E6：老花色（Old Lace）
#FAF0E6：亚麻色（Linen）
#FFF5EE：贝壳色（Seashell）
#FFFAFA：雪花色（Snow）
#FFFAF0：花白色（Floral White）
#FFFFF0：象牙白（Ivory）
#F0FFF0：淡绿色（Honeydew）
#F0F8FF：爱丽丝蓝（Alice Blue）
#F5F5DC：米色（Beige）
#FFFACD：柠檬绸色（Lemon Chiffon）
#FAFAD2：浅金黄色（Light Goldenrodyellow）
#D2B48C：棕色（Tan）
#A9A9A9：深灰色（Dark Gray，另一种表示）
#C0C0C0：银色（Silver）
#D3D3D3：浅
CSS语言大全
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;(下标) top; text-top; middle; bottom; text-bottom;
词间距word-spacing: normal;数值
空格white-space: pre;(保留) nowrap;(不换行)
显示{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;(表格标题)/*display属性的了解很模糊*/
方框属性：(Box)
width:; height:; float:; clear:both; margin:; padding:;顺序：上右下左
边框属性：(Border)
border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;
border-width:;边框宽度
border-color:#;
简写方法border：width style color;/*简写*/
列表属性：(List-style)
类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;
位置list-style-position: outside;(外) inside;
图像list-style-image: url(..);
定位属性：(Position)
Position: absolute; relative; static;
visibility: inherit; visible; hidden;
overflow: visible; hidden; scroll; auto;
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}
3背景重复{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
4背景固定{background-attachment:fixed|scroll}
5背景定位{background-position:数值|top|bottom|left|right|center}
6背影样式{background:背景颜色|背景图象|背景重复|背景附件|背景位置}
框架样式(Box Style)
序号中文说明标记语法
1边界留白{margin:margin-top margin-right margin-bottom margin-left}
2补白{padding:padding-top padding-right padding-bottom padding-left}
3边框宽度{border-width:border-top-width border-right-width border-bottom-width border-left-width}
宽度值： thin|medium|thick|数值
4边框颜色{border-color:数值数值数值数值}数值：分别代表top、right、bottom、left颜色值
5边框风格{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}
6边框{border:border-width border-style color}
上边框{border-top:border-top-width border-style color}
右边框{border-right:border-right-width border-style color}
下边框{border-bottom:border-bottom-width border-style color}
左边框{border-left:border-left-width border-style color}
7宽度{width:长度|百分比| auto}
8高度{height:数值|auto}
9漂浮{float:left|right|none}
10清除{clear:none|left|right|both}
分类列表
序号中文说明标记语法
1控制显示{display:none|block|inline|list-item}
2控制空白{white-space:normal|pre|nowarp}
3符号列表{list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}
4图形列表{list-style-image:URL}
5位置列表{list-style-position:inside|outside}
6目录列表{list-style:目录样式类型|目录样式位置|url}
7鼠标形状{cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}
css设置滚动条颜色与样式以及如何去掉与隐
我们大家在浏览网页的时偶尔会看到很漂亮的各种颜色样式的滚动条，这就是通过css代码控制来实现的，于是本人搜集整理一番，这里和大家分享一下使用CSS设置滚动条颜色以及如何去掉滚动条的方法，需要的朋友可以参考下,很有用的
我们大家在浏览网页的时偶尔会看到很漂亮的各种颜色样式的滚动条，这就是通过css代码控制来实现的，于是本人搜集整理一番，这里和大家分享一下使用CSS设置滚动条颜色以及如何去掉滚动条的方法，需要的朋友可以参考下,很有用的
div{ scrollbar-face-color:#fcfcfc; scrollbar-highlight-color:#6c6c90; scrollbar-shadow-color:#fcfcfc; scrollbar-3dlight-color:#fcfcfc; scrollbar-arrow-color:#240024; scrollbar-track-color:#fcfcfc; scrollbar-darkshadow-color:#48486c; scrollbar-base-color:#fcfcfc}
滚动条样式主要涉及到如下CSS属性: overflow属性:检索或设置当对象的内容超过其指定高度及宽度时如何显示内容 overflow: auto;在需要时内容会自动添加滚动条 overflow: scroll;总是显示滚动条 overflow-x: hidden;禁止横向的滚动条 overflow-y: scroll;总是显示纵向滚动条 width: 568px; width: 98%;设置区域的宽度[像素/百分比等等] height: 120px;设置区域的高度[像素/百分比等等]
<STYLE> BODY{ SCROLLBAR-FACE-COLOR:#f892cc; SCROLLBAR-HIGHLIGHT-COLOR:#f256c6; SCROLLBAR-SHADOW-COLOR:#fd76c2; SCROLLBAR-3DLIGHT-COLOR:#fd76c2; SCROLLBAR-ARROW-COLOR:#fd76c2; SCROLLBAR-TRACK-COLOR:#fd76c2; SCROLLBAR-DARKSHADOW-COLOR:#f629b9; SCROLLBAR-BASE-COLOR:#e9cfe0}</STYLE>
SCROLLBAR-FACE-COLOR:滚动条凸出部分的颜色 SCROLLBAR-HIGHLIGHT-COLOR:滚动条空白部分的颜色 SCROLLBAR-SHADOW-COLOR:立体滚动条阴影的颜色 SCROLLBAR-3DLIGHT-COLOR:滚动条亮边的颜色 SCROLLBAR-ARROW-COLOR:上下按钮上三角箭头的颜色 SCROLLBAR-TRACK-COLOR:滚动条的背景颜色 SCROLLBAR-DARKSHADOW-COLOR:滚动条强阴影的颜色 SCROLLBAR-BASE-COLOR:滚动条的基本颜色网页中去掉滚动条：去掉横向滚动条：<body style='overflow:scroll;overflow-x:hidden'>去掉竖向滚动条：<body style='overflow:scroll;overflow-y:hidden'>两个都去掉：<body scroll="no">框加中去滚动条在name=""后面加 scrolling="No" 1,Overflow内容溢出时的设置 overflow水平及垂直方向内容溢出时的设置 overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置以上三个属性设置的值为visible、scroll、hidden、auto visible默认值。使用该值时，无论设置的"width"和"height"的值是多少，其中的内容无论是否超出范围都将被强制显示。 hidden效果与visible相反。任何超出"width"和"height"的内容都会不可见。 scroll无论内容是否超越范围，都将显示滚动条。 auto当内容超出范围时，显示滚动条，否则不显示。应用:没有水平滚动条:<div style="overflow-x:hidden">test</div>没有垂直滚动条<div style="overflow-y:hidden">test</div>没有滚动条<div style="overflow-x:hidden;overflow-y:hidden"或style="overflow:hidden">test</div>自动显示滚动条<divstyle="height:100px;width:100px;overflow:auto;">test</div> 2,自己定义滚动条的颜色我们一般默认的滚动条样式如下左图,右图是放大了1600倍的样子,我们可以看到滚动条有几种言责组合的,我给他们标了7个号,分别注释在下面的css代码的后面了,注意css的注释代码是放在两个斜杠内的两个星号之间,如:
Body{ scrollbar-arrow-color:#f4ae21; scrollbar-face-color:#333; scrollbar-3dlight-color:#666; scrollbar-highlight-color:#666; scrollbar-shadow-color:#999; scrollbar-darkshadow-color:#666; scrollbar-track-color:#666;}
关于css样式颜色大全和css颜色代码对照表的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。