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就是一种叫做样式表(stylesheet)的技术。也有的人称之为层叠样式表(Cascading Stylesheet)。
在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。
它的作用可以达到:
(1)在几乎所有的浏览器上都可以使用。
(2)以前一些非得通过图片转换实现的功能,现在只要用CSS就可以轻松实现,从而更快地下载页面。
(3)使页面的字体变得更漂亮,更容易编排,使页面真正赏心悦目。
(4)你可以轻松地控制页面的布局。
(5)你可以将许多网页的风格格式同时更新,不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制,只要修改这个CSS文件中相应的行,那么整个站点的所有页面都会随之发生变动。
想一想,没有使用CSS前我们是如何控制字体的颜色和大小以及所使用的字体的?我们一般使用HTML标签来实现,代码非常烦琐。
很难想象,如果在一个页面里需要频繁地更替字体的颜色大小,最终生成的HTML代码的长度一定臃肿不堪。
说实话,CSS就是为了简化这样的工作诞生的,当然其功能决非这么简单。
CSS是通过对页面结构的风格控制的思想,控制整个页面的风格的。
关于CSS代码含义
CSS是Cascading style Sheets的简称,中文译作“层叠样式表单”,我把它叫作“层叠样式表”,我感到这样顺口一
点,没别的意思。实际上它是一组样式。你可能对CSS这个名词比较陌生,实际上无论你用Internet Explorer还是
Netscape Navigator在网上冲浪,几乎随时都在与CSS打交道,在网上没有使用过CSS的网页可能不好找。不管你用什么工
具软件制作网页,都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼,为什么同样内容的网页,有的人做出来有
几十KB,而高手做出来只有十几KB,CSS在其中的作用是不言而喻的。我把我在使用CSS中的一些小经验以及一些网友来信
提问的问题整理出来,供诸位参考。
1、CSS在网页制作中一般有三种方式的用法,那么具体在使用时该采用哪种用法?
当有多个网页要用到的CSS,采用外连CSS文件的方式,这样网页的代码大大减少,修改起来非常方便;只在单个网页
中使用的CSS,采用文档头部方式;只有在一个网页一、两个地方才用到的CSS,采用行内插入方式。
2、CSS的三种用法在一个网页中要以混用吗?
三种用法可以混用,且不会造成混乱。这就是它为什么称之为“层叠样式表”的原因,浏览器在显示网页时是这样处
理的:先检查有没有行内插入式CSS,有就执行了,针对本句的其它CSS就不去管它了;其次检查头部方式的CSS,有就执行
了;在前两者都没有的情况下再检查外连文件方式的CSS。因此可看出,三种CSS的执行优先级是:行内插入式、头部方
式、外连文件方式。
3、在Dreamweaver3中如何使外部文件式CSS?
在Dreamweaver3中使用外连文件式CSS并没有特殊要求,同样是用记事本创建一个*.css文件,在网页的<head>与
</head>之间加上一句这样的代码:<link rel="stylesheet" rel="external nofollow" href="在这里填上你的CSS文件地址(相对路径+文件
名)" type="text/css">就行了。
4、如何用Dreamweaver3快速创建CSS外连式文件?
对于一个初接触CSS的网页设计人员来讲,要用记事之类的编辑器,去创建一个CSS外连式文件是相当困难的。由于
Dreamweaver3对CSS支持的很好,用它来帮助就轻松多了。具体可以这样操作:
1)先在纸上写好在网站的网页中可能要用到的格名称,然后在Dreamweaver3的编辑窗中调出CSS面板,一个一个地定
义,并在一个空白页上适当地写一点相关内容,边定义边试用,效果不满意,立即修改;
2)全部定义好后,再用记事本创建一个空的CSS外连式文件,把在<head>与</head>之间的那段定义好的CSS复制
到CSS文件中去,就大功告成了。整个过程就是点鼠标,方便吧?
5、在Dreamweaver3中采用行内插入式CSS要手动写代码吗?
不用!先用CSS面板定义好要用的CSS,然后,在要插入CSS的标记插入:style="",再把你刚才定义的CSS从<head>
后面拖到这个双引号中来,把花括号以外的部分删去就行了。
6、在方档头部方式和外连文件方式的CSS中都有“<!--”和“-->”,好象没什么用,不要可以吗?
这一对东东的作用是为了不引起低版本浏览器的错误。如果某个执行此页面的浏览器不支持CSS,它将忽略其中的内
容。虽然现在使用不支持CSS浏览器的人已很少了,由于互联网上几乎什么可能都会发生,所以还是留着为妙。
7、如何给一部分文字加背景色?
给文字加上不同颜色,在DW3中只要在属性面板上选取文字的颜色就行了,非常方便,但要给部分文字加不同的背景色
却没有相应的功能,我们可以先做一个定义背景色的CSS(如:bgstyle),在DW3中点几下鼠就完成了。如一个定义淡黄色
背景的CSS是这样的:
<style type="text/css">
<!--
.bgstyle{ background:#FFFFCC}
-->
</style>
在要用时选取那段文字,再在CSS面板上点一下“bgstyle”就行了。
8、如何给部分文字加背景图像?
与加背景色操作类似,中是在背景在选择加载图象就是了,一个定义好的加背景图象的CSS例子的代码是这样的:
<style type="text/css">
<!--
.imgbgstyle{ background-image: url(/logo.gif)}
-->
</style>
在要用时选取那段文字,再在CSS面板上点一下“imgbgstyle”就行了。
9、如何使页面的背景在文字“滚动”时背景图案静止不动?
要使背景图案不随文字“滚动”的CSS是这样的:
<style type="text/css">
<!--
BODY{ background: purple url(/bg.jpg);
background-repeat:repeat-y;
background-attachment:fixed
}
-->
</style>
10、如何定义字间距?
在DW3中CSS的属性定义对话框(style Definition for.style1)的“Block”上的“letter spaceing”属性定义的就
是字间距,它指的是每一个字符之间的额外间距,经长度为单位,正负值均可,当取负值时产生字符挤在一起的效果。下
面代码是一个定义好的字间距CSS例子:
<style type="text/css">
<!--
.style1{ letter-spacing: 3px}
-->
</style>
11、如何给文字加上划线、下划线、删除线和闪烁?
在DW3中CSS的属性定义对话框(style Definition for.style1)的“Type”上的“decoration”属性定义的就是这些
内容,要注意的是闪烁属性有些版本的浏览器不支持,少用为好。下面是一个定义好上述效果的CSS例子:
<style type="text/css">
<!--
.style1{ text-decoration: underline overline line-through blink}
-->
</style>
其中:“underline”是定义下划线;“overline”是定义上划线;“ line-through”定义的是删除线;“blink”
定义的是文字闪烁。
12、如何使网页具有“首行缩进”功能?
由于DW3输入空格不方便,利用“首行缩进”将弥补这个不足。在DW3中CSS的属性定义对话框(style Definition
for.style1)的“Block”上的“text-indent”属性定义的就是“首行缩进”,所谓“首行”是指每段内容的第一行,也
就是直接按回车键就形成了一个新的段落。缩进最好以“em”(字符)为单位,比如:汉字编排要求每段开始缩进两个汉
字,设置好的CSS如下所示:
<style type="text/css">
<!--
.style1{ text-indent: 2em}
-->
</style>
在DW3要注意:在DW3中CSS的属性定义对话框(style Definition for.style1)的“Block”上的“text-indent”右
面的缩进单位选择框中“ems”指的就是“em”。
13、在用表格进行排版时,能使某一方向上的内容离开表格线一点吗?
可以!在DW3中CSS的属性定义对话框(style Definition for.style1)的“Box”上的“margin”定义的就是内容离
开边缘的距离,分别可定义四个方向:“top”“bottom”“left”“right”。下面就是定义在左边离开“10px”的CSS例
子代码:
<style type="text/css">
<!--
.style1{ margin: 0px 0px 0px 10px}
-->
</style>
14、能给某部分内容加边框吗?
用CSS可以给某部分内容加边框,在DW3中CSS的属性定义对话框(style Definition for.style1)的“Border”定义
的就是边框线,“top”“bottom”“left”“right”四边可分别定义线的粗细和颜色,这些定义好后不要忘记在下面的
“style”中定义线型,否则将看不边框线,因为默认的线型是“none”。下面是一个定义了上边框为:蓝色细线;左边框
为:绿色中粗线的CSS例子:
<style type="text/css">
<!--
.style1{ border: solid; border-width: thin 0px 0px medium; border-color:#0000FF black black#00FF00}
-->
关于本次css指令代码大全和代码大全的问题分享到这里就结束了,如果解决了您的问题,我们非常高兴。