html,CSS颜色与度量单位

合集下载

css 尺寸单位

css 尺寸单位CSS尺寸单位是指web开发中用于定义元素大小的单位。

在CSS 中，尺寸单位主要有绝对单位和相对单位两种。

绝对单位指的是固定的尺寸单位，而相对单位则是相对于其他元素的大小来确定尺寸。

1. 绝对单位1.1 像素(px) - 这是最常用的绝对单位，1px等于1个物理像素（也称为屏幕像素）。

1.2 英寸(in) - 1英寸等于72个像素。

1.3 毫米(mm) - 1毫米等于约0.28像素。

1.4 厘米(cm) - 1厘米等于约28像素。

这些绝对单位通常用于固定元素的大小，因为它们的值是固定的，不会随着屏幕大小或分辨率的变化而改变。

但是，由于不同的设备（计算机，手机，平板电脑等）有不同的分辨率和屏幕尺寸，使用绝对单位来设计响应式网站可能会带来很大的挑战。

2. 相对单位2.1 百分比(%) -基于父元素的大小来确定尺寸。

例如，如果你将一个元素的宽度设置为50%，那么它的宽度将是其父元素宽度的一半。

2.2 em - em是相对于元素的字体大小（即其父元素的字体大小）来计算的。

例如，如果一个元素的字体大小为16像素，那么1em就等于16像素。

2.3 rem - rem也是相对于根元素的字体大小（即html元素的字体大小）来计算的。

它与em的区别在于，它是基于根元素的字体大小，而不是父元素的字体大小来计算的。

这使得rem更易于在响应式网站设计中使用。

2.4 vw和vh - 这些是相对于视口的宽度和高度来计算的。

视口是用户在浏览器中看到的部分页面。

1vw等于视口宽度的1%，1vh等于视口高度的1%。

这些单位可以用来定义响应式网站中的元素大小。

总之，选择哪种尺寸单位取决于你的具体需求。

如果你需要固定元素的大小，请使用绝对单位，如果你需要响应式设计，请使用相对单位。

掌握这些尺寸单位可以帮助您更好地控制网站的布局和响应。

CSS颜色字体代码-颜色大全-css-字体颜色

0CSS 颜色大全css 字体颜色CSS 颜色大全css 字体颜色,将颜色代码代替css里面的颜色，就可以。

div中控制某段字体颜色html代码div id=sidebar spanCSS 颜色大全css 字体颜色/span/div CSS文件#sidebar { } #sidebar .span{ color:#••你正在观看的是:CSS 颜色大全css 字体颜色CSS 颜色大全css 字体颜色,将颜色代码代替css里面的颜色，就可以。

div中控制某段字体颜色html代码<div id="sidebar"><span>CSS 颜色大全css 字体颜色</span></div>CSS文件#sidebar { }#sidebar .span{ color:#FF0000 }1 白色#FFFFFF2 红色#FF00003 绿色#00FF004 蓝色#0000FF5 牡丹红#FF00FF6 青色#00FFFF7 黄色#FFFF008 黑色#0000009 海蓝#70DB93 10 巧克力色#5C331711 蓝紫色#9F5F9F 12 黄铜色#B5A64213 亮金色#D9D91914 棕色#A67D3D15 青铜色#8C785316 2号青铜色#A67D3D 17 士官服蓝色#5F9F9F18 冷铜色#D9871919 铜色#B8733320 珊瑚红#FF7F0021 紫蓝色#42426F 22 深棕#5C403323 深绿#2F4F2F24 深铜绿色#4A766E25 深橄榄绿#4F4F2F26 深兰花色#9932CD 27 深紫色#871F7828 深石板蓝#6B238E29 深铅灰色#2F4F4F30 深棕褐色#97694F32 深绿松石色#7093DB 32 深绿松石色#7093DB33 暗木色#855E4234 淡灰色#54545435 土灰玫瑰红色#85636336 长石色#D19275 37 火砖色#8E232362 褐红色#8E236B63 中海蓝色#32CD9964 中蓝色#3232CD65 中森林绿#6B8E23 66 中鲜黄色#EAEAAE67 中兰花色#9370DB68 中海绿色#426F4269 中石板蓝色#7F00FF70 中春绿色#7FFF00 71 中绿松石色#70DBDB72 中紫红色#DB709373 中木色#A6806474 深藏青色#2F2F4F75 海军蓝#23238E 76 霓虹篮#4D4DFF77 霓虹粉红#FF6EC778 新深藏青色#00009C79 新棕褐色#EBC79E80 暗金黄色#CFB53B 81 橙色#FF7F0082 橙红色#FF240083 淡紫色#DB70DB84 浅绿色#8FBC8F85 粉红色#BC8F8F 86 李子色#EAADEA87 石英色#D9D9F388 艳蓝色#5959AB89 鲑鱼色#6F424290 猩红色#BC1717 91 海绿色#238E6892 半甜巧克力色#6B422693 赭色#8E6B2394 银色#E6E8FA95 天蓝#3299CC 96 石板蓝#007FFF97 艳粉红色#FF1CAE98 春绿色#00FF7F99 钢蓝色#236B8E100 亮天蓝色#38B0DE 101 棕褐色#DB9370102 紫红色#D8BFD8103 石板蓝色#ADEAEA104 浓深棕色#5C4033105 淡浅灰色#CDCDCD 106 紫罗兰色#4F2F4F107 紫罗兰红色#CC3299108 麦黄色#D8D8BF109 黄绿色#99CCcss样式大全(整理版）字体属性：(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|no rmal| 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-resiz e|sw-resize}来自:（注：可编辑下载，若有不当之处，请指正，谢谢!）[文档可能无法思考全面，请浏览后下载，另外祝您生活愉快，工作顺利，万事如意!]。

css颜色代码大全

css颜色代码大全CSS颜色代码大全。

在网页设计中，颜色的运用是非常重要的，它能够直接影响到用户的视觉体验和情绪感受。

而在CSS中，我们常常需要用到颜色代码来定义元素的颜色。

本文将为大家详细介绍CSS中常用的颜色代码，希望能够帮助大家更好地运用颜色来设计网页。

一、RGB颜色代码。

RGB颜色代码是由红（Red）、绿（Green）、蓝（Blue）三种颜色按照不同的比例混合而成的，每种颜色的取值范围是0-255。

在CSS中，我们可以使用rgb()函数来定义颜色，例如：```css。

div {。

background-color: rgb(255, 0, 0); / 红色 /。

}。

```。

二、十六进制颜色代码。

除了使用RGB颜色代码外，我们还可以使用十六进制颜色代码来表示颜色。

它由井号（#）和6位十六进制数组成，前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量。

例如：```css。

div {。

background-color: #ff0000; / 红色 /。

}。

```。

三、颜色关键字代码。

在CSS中，还有一些颜色关键字可以直接使用，比如red、green、blue等。

这些颜色关键字代表了常见的颜色，使用起来非常方便。

例如：```css。

div {。

color: red; / 红色 /。

}。

```。

四、HSL颜色代码。

HSL颜色代码是由色相（Hue）、饱和度（Saturation）、亮度（Lightness）三个参数来定义颜色的，它能够更直观地表示颜色。

在CSS中，我们可以使用hsl()函数来定义颜色，例如：```css。

div {。

background-color: hsl(0, 100%, 50%); / 红色 /。

}。

```。

五、透明度。

除了定义颜色外，我们还可以使用rgba()函数来定义带有透明度的颜色。

其中，最后一个参数表示透明度，取值范围是0-1。

例如：```css。

div {。

CSS知识点总结

CSS知识点总结⼀．Css分类1.替代replaced elements:img input(radio button, checkbox, text)不可替代nonreplaces elements:html,xhtml,span,a,div,body,form,p,em,strong,2.block-level and inline-level:(block可以包含inline 元素，反过来是不可以的！) block-level:p div li ulinline-level: a span strong em b i u⼆．选择器2.元素选择器：P{}3. Grouping Selectors(分组)eg:h2, p {color: gray;}4.The universal selector（通配选择器）eg:* {color: red;}5. Grouping Declarationseg:h1 {font: 18px Helvetica; color: purple; background: aqua;}6.类选择器：.ddd7.ID选择器：#ddd8.属性选择器简单属性选择h1[class] {color: silver;}根据具体属性值p[class="warning"] {font-weight: bold;}根据部分属性值选择p[class~="warning"] {font-weight: bold;}⼦串匹配属性选择器[foo^="bar"][foo$="bar"][foo*="bar"]特定属性选择类型*[lang|="en"] {color: white;}9.使⽤⽂档结构后代选择器blockquote b, p b {color: gray;}选择⼦元素h1 > strong {color: red;}选择相邻兄弟元素h1 + p {margin-top: 0;}10.伪类选择器静态伪类：a:visited{}a:link{}(好像⽤不了)动态伪类：a:focus{}(常⽤于input元素)a:hover{}a:active{}选择第⼀个⼦元素：Li:first-child{}根据语⾔选择（）*:lang(fr){}结合伪类：link:hover:active {color: orange;}伪元素选择器：设置⾸字母样式li:first-letter{ color:Red;设置第⼀⾏的样式：.aa:first-line{ color:Purple;}设置之前和之后元素的样式：a:before{ content:"{}"; color:Silver;}a:after{ content:"end"; color:Aqua;}三．结构和层叠1.特殊性：重要性：!Important (最强悍！) eg: p.dark {color: #333 !important; background: white;}内联样式特殊性：1000 ID选择器：0100 li#answer {color: navy;} /* 0,1,0,1 (winner) */类属性值，属性选择或伪类：0010 h2.grape{color: purple;}/* 0,0,1,1 (winner)*元素和伪元素：0001 h1 {color: red;} /* 0,0,0,1 */通配选择器：0000结合符:⽆继承：⽆（0特殊性⽐⽆特殊性的更强）Eg: * {color: gray;} (（当h1中有其他元素时win）h1#page-title {color: black;}2.继承a)Border：没有继承b)Body:可以向上继承到html,其他的都是向下继承3.层叠：具有相同特殊性的靠后的权重⼤按权重和来源排序：（p79）读者的重要声明>创作⼈员的重要声明>创作⼈员的正常声明>读者正常>⽤户代理声明按特殊性排序按顺序排序Lvha顺序⽐较重要：即live visited hover active四．值和单位1.数字2.百分数3.颜⾊命名颜⾊：blue green white red black maroon ...⽤GRB指定颜⾊函数式RGB颜⾊(百分数法：0%-100%，数字法：0-255)Eg:rgb(100%,100%,100%)rgb(0%,0%,0%)rgb(255,255,255)rgb(0,0,0)灰度表：p.one {color: rgb(0%,0%,0%);}p.two {color: rgb(20%,20%,20%);}p.three {color: rgb(40%,40%,40%);}p.four {color: rgb(60%,60%,60%);}p.five {color: rgb(80%,80%,80%);}p.six {color: rgb(0,0,0);}p.seven {color: rgb(51,51,51);}p.eight {color: rgb(102,102,102);}p.nine {color: rgb(153,153,153);}p.ten {color: rgb(204,204,204);}25%*255=63.75=64⼗六进制RGB颜⾊Web颜⾊：rgb值20%和52和33（⼗六进制）整除4.长度单位a)绝对长度单位：in,cm,mm,pt(点),pc（派卡）1in=2.54cm 1cm=0.3394in1 in=72pt 1 in=6pcB) 相对长度单位Em和ex:Px:1em=14px 1em=2exEm最好的度量单位5.URL绝对URL相对URL注意：url和开始括号之间不能有空格6.关键字None:不同于0，Inherit:它的属性值和⽗元素相同7.css2单位：p(110)a)⾓度值：deg, grad 和 radb)时间值：s,ms 1000ms=1sc)频率值：hz,mhz五．字体1.字体系列制定字体系列：p {font-family: TimesNR,serif;}p {font-family: Times,TimesNR,'New Century Schoolbook',Georgia,'New York',serif;} 有空格、包括“#”和”$”的时候加“单引号”Cursive必须加“双引号”2.字体加粗a)Font-weight:bold bolder mormal 100 --900 lighterb)相对⼤⼩关键字:Bolder 是相对于⽗级字体粗细⽽⾔3.字体⼤⼩a)Font-size:xx-small x-small small medium large x-large xx-large smaller larger inheritb)相对⼤⼩关键字：larger smallerc)绝对⼤⼩：xx-small x-small small medium large x-large xx-larged)百分数：根据⽗元素继承的⼤⼩来计算strong {font-weight: lighter; font-size:larger;}strong b {font-weight:lighter; font-size:200%;}4.风格和变形a)字体风格：Font-style:italic oblique normal inheritb)字体变形：font-variant:small-caps normal inherit（只对英⽂有⽤，对汉语没有影响）c)转换⼤⼩写：p{ text-transform:uppercase;}5.拉伸和调整字体a)字体拉伸：font-stretch:normal| wider | narrower | ultra-condensed | exTRa-condensed| condensed| semi-condensed| semi-expanded| expanded| exTRa-expanded| ultra-expanded | inheritb)我的浏览器不⽀持（可以忽略）6.Font属性a)等价：h1{ font-style:inherit; font-weight:bold; font-variant:small-caps; font-size：20px; font-family:Candara,Corbel;}h1{ font:inherit bold small-caps20px Candara,Corbel; }b)注意;前两个可以互换，后两个不可以，normal 可以省略c)增加⾏⾼：line-height,Eg：body {font-size: 12px;}h1 {font: bold italic200%/1.2Verdana,Helvetica,Arial,sans-serif;}7.字体匹配六．⽂本属性1.缩进和⽔平对齐a)缩进⽂本：(只能⽤于块级元素！)text-indent:3em 10%b)⽔平对齐：(只能⽤于块级元素！)text-align:left center right justify(两端对齐⽂本) inherit2.垂直对齐：元素中⽂本基线之间的最⼩距离a)Line-height:”line-height”减去“font-size”等于⾏间距i.Line-height:18px,0.33in,150%,1.5emii.适⽤于所有元素iii.⾏⾼和继承：Line-height值从⽗元素继承时，要从⽗元素计算，⽽不是⼦元素上计算。

HTMLCSS属性大全

HTMLCSS属性⼤全CSS 属性⼤全⽂字属性「字体族科」（font-family），设定时，需考虑浏览器中有⽆该字体。

「字体⼤⼩」（font-size），注意度量单位。

《绝对⼤⼩》|《相对⼤⼩》|《长度》|《百分⽐》(⼀般设置双数)「字体加粗」（font-weight），除了 normal（正常）、bold（粗体）、bolder（特粗）、lighter（细体）外，还有9种以像素为度量为单位的设置⽅式（100，200，300，400，500，600，700，800，900）。

「字体风格」（font-style），也就是字型。

（normal : 正常的字体italic : 斜体。

对于没有斜体变量的特殊字体，将应⽤obliqueoblique : 倾斜的字体）「字体变形」（font-variant），字体变形属性决定了字体显⽰是normal (普通) ，还是Small-caps（⼩型⼤写字母）当⽂字中所有字母都是⼤写的时候，⼩型⼤写字母（值）会显⽰⽐⼩写字母稍⼤的⼤写字符。

有正常（normal）和值（⾃定义间隔值）两种选择⽅式。

「字母间距」（letter-spacing），其作⽤与字符间距类似，也有正常（normal）和值（⾃定义间隔值）两种选择⽅式。

「垂直对齐」（vertical-align），控制⽂字或图像相对于其母体元素的垂直位置。

如将⼀个2×3像素的GIF图像同其母体元素⽂字的顶部垂直对齐，则该GIF图像将在该⾏⽂字的顶部显⽰。

共有基线（baseline，将元素的基准线同母体元素的基准线对齐）、下标（sub，将元素以下标的形式显⽰）,上标（super，将元素以上标的形式显⽰）、顶部（top ，将元素顶部同最⾼的母体元素对齐）、⽂本顶对齐（text-top，将元素的顶部同母体元素⽂字的顶部对齐）、中线对齐（middle，将元素的中点同母体元素的中点对齐）、底部（bottom，将元素的底部同最低的母体元素对齐）及值（⾃定义）等9种选择。

CSS颜色代码大全参照表

CSS颜色代码大全参照表CSS颜色代码是用来设置网页元素的颜色的一种方法。

在CSS中，可以使用多种方式来表示颜色，包括预定义的颜色名称、十六进制值、RGB值、HSL值等等。

下面是一个CSS颜色代码的大全参照表，包含了常用的颜色名称和对应的代码表示。

1. 预定义颜色名称：- black: #000000- silver: #C0C0C0- gray: #808080- white: #FFFFFF- maroon: #800000- red: #FF0000- purple: #800080- fuchsia: #FF00FF- green: #008000- lime: #00FF00- olive: #808000- yellow: #FFFF00- navy: #000080- blue: #0000FF- teal: #008080- aqua: #00FFFF2. 十六进制颜色值：十六进制颜色值由6位十六进制数字组成，前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量。

每个分量的取值范围是00到FF，其中00表示最小值，FF表示最大值。

例如，红色的十六进制颜色值是#FF0000，绿色的十六进制颜色值是#00FF00，蓝色的十六进制颜色值是#0000FF。

3. RGB颜色值：RGB颜色值由三个数字组成，分别表示红色分量、绿色分量和蓝色分量。

每个分量的取值范围是0到255，其中0表示最小值，255表示最大值。

例如，红色的RGB颜色值是rgb(255, 0, 0)，绿色的RGB颜色值是rgb(0, 255, 0)，蓝色的RGB颜色值是rgb(0, 0, 255)。

4. RGBA颜色值：RGBA颜色值和RGB颜色值类似，只是在RGB颜色值的基础上添加了一个透明度分量。

透明度分量的取值范围是0到1，其中0表示完全透明，1表示完全不透明。

例如，红色完全不透明的RGBA颜色值是rgba(255, 0, 0, 1)，绿色半透明的RGBA颜色值是rgba(0, 255, 0, 0.5)，蓝色完全透明的RGBA颜色值是rgba(0, 0, 255, 0)。

css单位转换计算

css单位转换计算CSS中常用的长度单位有像素（px）、百分比（%）、em、rem等。

在做页面布局和响应式设计时，经常需要进行单位的转换和计算。

以下是一些常见的单位转换计算方法：1. 像素（px）转百分比（%）：-百分比值=(目标元素的值/父元素的值)×100例如，如果一个元素的宽度是200px，它的父元素的宽度是400px，则该元素的宽度以百分比表示为：-百分比值=(200/400)×100=50%2. 百分比（%）转像素（px）：-像素值=(目标元素的值×父元素的值)/100例如，如果一个元素的宽度是50%，它的父元素的宽度是400px，则该元素的宽度以像素表示为：- 像素值= (50 × 400) / 100 = 200px3. 像素（px）转em：- em值 = 目标元素的值 / 目标元素的字体大小例如，如果一个元素的字体大小是16px，它的宽度是32px，则该元素的宽度以em表示为：- em值 = 32 / 16 = 2em4. em转像素（px）：- 像素值 = 目标元素的em值× 目标元素的字体大小例如，如果一个元素的字体大小是16px，它的宽度是2em，则该元素的宽度以像素表示为：- 像素值= 2em × 16px = 32px5. rem转像素（px）：- 像素值 = 目标元素的rem值× 根元素的字体大小例如，如果一个元素的字体大小是16px，它的宽度是2rem，而根元素的字体大小是14px，则该元素的宽度以像素表示为：- 像素值= 2rem × 14px = 28px6. 像素（px）转rem：- rem值 = 目标元素的值 / 根元素的字体大小例如，如果一个元素的字体大小是14px，它的宽度是28px，而根元素的字体大小是14px，则该元素的宽度以rem表示为：- rem值 = 28 / 14 = 2rem上述计算方法适用于进行常用单位的转换。

CSS的长度单位

CSS的长度单位(V客学院知识分享) 在CSS属性中有时候需要设置一些长度值，比如width属性用于设置元素的宽度。

其中在设置width属性值的时候我们需要给其加上单位标识符px、cm等。

CSS规定了两种类型的长度单位，一种是绝对单位，另一种是与其他属性挂钩的相对单位。

1、绝对单位
绝对单位指的是cm、mm这类现实生活的度量单位，CSS支持五种绝对单位in英尺、cm厘米、mm毫米、pt磅、pc pica。

2、相对单位
相对长度需要依赖于其他类型的单位，它的规定和使用更复杂。

常见的相对单位有：em 与元素字号挂钩，ex与元素字体的“x高度”挂钩，rem与根元素的字号挂钩，px CSS像素，%另一属性的值得百分比。

其中与字号挂钩的相对单位em和像素单位px运用较常见。

首先我们来看看em，em相对于当前元素的字体大小，比如在CSS样式中我们设置p标签font-size:20pt;height:2em，那么这里面的height的属性值实际上的数值是字号的两倍。

而像素一般是指相对于显示器上可寻址的最小单位。

我们在CSS中，一条样式是可以混合多种单位，包括混合使用绝对单位和相对单位。

当然使用绝对单位的前提是我们能预先知道内容的呈现方式，但相对定位更灵活、更容易管理，而且我们开发基本都是处于虚拟世界之中。

颜色代码表

颜色代码表颜色在我们日常生活中扮演着重要的角色，它不仅能给人带来美感，还能影响我们的情绪和行为。

在数字化的世界中，颜色代码表成为了设计师、开发者和制造商们不可或缺的工具。

通过颜色代码表，我们可以准确地指定所需的颜色，使得视觉设计工作更加高效和精确。

HTML颜色代码表HTML颜色代码采用十六进制的表示方法，以#开头，后面跟着6位十六进制数字，分别代表RGB（红绿蓝）三种颜色的强度。

以下是一些常用的HTML颜色代码：•#FFFFFF - 白色•#000000 - 黑色•#FF0000 - 红色•#00FF00 - 绿色•#0000FF - 蓝色CSS颜色代码表在CSS中，除了使用HTML颜色代码外，还可以使用颜色名称或RGB值表示颜色。

以下是一些CSS颜色代码示例：p {color: red;/* 红色 */}span {color: rgb(255,0,0);/* 红色 */}颜色心理学颜色不仅是视觉的刺激，也能引起心理上的联想和情绪。

不同的颜色对人们的情绪和行为产生不同的影响。

比如：•红色：激发人们的注意力，代表热情和力量。

•蓝色：给人带来安宁和冷静的感觉，常用于压力大的环境。

•黄色：象征活力和快乐，可以提升人们的心情。

颜色搭配原则在设计中，颜色的搭配是至关重要的。

一些常见的颜色搭配原则包括：•互补色：挑选彼此在色轮上相对位置相反的颜色，如红绿、蓝橙等。

•类比色：选择在色轮上相邻的颜色，如红橙黄、蓝紫等。

•单色调：使用同一颜色的不同深浅变化，营造简洁而和谐的氛围。

结语颜色代码表是我们数字时代不可或缺的工具，它为我们提供了丰富多彩的选择，让我们的设计工作更加便捷和精确。

通过对颜色的深入理解和合理运用，我们可以创造出更具吸引力和影响力的作品。

希望本文分享的颜色代码表和相关知识能够帮助您在设计工作中取得更好的效果。

CSS中的颜色名称和十六进制值对照表

CSS中的颜色名称和十六进制值对照表在CSS（层叠样式表）中，我们可以使用颜色来为网页添加各种各样的视觉效果和吸引力。

无论是为背景设置颜色，还是为文本添加特定的颜色，CSS提供了多种方式来表示颜色。

其中，我们可以使用颜色名称或者十六进制值来指定颜色。

本文将为您提供一个CSS中颜色名称和对应十六进制值的对照表，以供参考和使用。

在CSS中，颜色名称是一种方便且易于理解的方式来表示颜色。

通过使用预定义的颜色名称，我们可以快速而准确地指定所需的颜色。

下面是一些常用的颜色名称及其对应的十六进制值：1. 白色（White）：#FFFFFF2. 黑色（Black）：#0000003. 红色（Red）：#FF00004. 绿色（Green）：#00FF005. 蓝色（Blue）：#0000FF6. 灰色（Gray）：#8080807. 银色（Silver）：#C0C0C08. 金色（Gold）：#FFD7009. 橙色（Orange）：#FFA50010.黄色（Yellow）：#FFFF0011.紫色（Purple）：#800080除了这些基本的颜色名称，CSS还提供了许多其他不同的颜色名称供我们选择。

这些颜色名称可以直接在CSS代码中使用，以实现所需的颜色效果。

此外，我们还可以使用十六进制值来表示颜色。

十六进制值由六个十六进制数字组成，每两个数字代表RGB（红绿蓝）颜色模型中的一个颜色通道。

每个通道的取值范围是从00到FF，其中00代表该颜色通道的最小值，FF代表最大值。

下面是一些常见的颜色十六进制值示例：1. #FF0000：红色2. #00FF00：绿色3. #0000FF：蓝色4. #FFFFFF：白色5. #000000：黑色通过使用这些十六进制值，我们可以非常精确地指定所需的颜色，并实现特定的设计效果。

需要注意的是，CSS中还支持其他表示颜色的方式，比如RGB值和HSL值。

这些方式在一些特定情况下可能更具灵活性和准确性。

常用css颜色

常用css颜色CSS颜色是指在CSS样式表中使用的颜色值。

CSS颜色值可以使用颜色名称、十六进制颜色值、RGB颜色值、HSL颜色值等表示。

其中，使用颜色名称表示的颜色值比较常用且易于记忆，以下是常用的CSS 颜色名称列表：1.黑色：#000000（RGB(0,0,0)）2.白色：#FFFFFF（RGB(255,255,255)）3.红色：#FF0000（RGB(255,0,0)）4.橙色：#FFA500（RGB(255,165,0)）5.黄色：#FFFF00（RGB(255,255,0)）6.绿色：#008000（RGB(0,128,0)）7.蓝色：#0000FF（RGB(0,0,255)）8.靛蓝色：#4B0082（RGB(75,0,130)）9.紫色：#800080（RGB(128,0,128)）10.粉色：#FFC0CB（RGB(255,192,203)）11.棕色：#A52A2A（RGB(165,42,42)）12.灰色：#808080（RGB(128,128,128)）13.银色：#C0C0C0（RGB(192,192,192)）14.金色：#FFD700（RGB(255,215,0)）15.深蓝色：#000080（RGB(0,0,128)）这些颜色名称在编写CSS样式表时比较常用，可以快速设置页面元素的背景色、文本颜色、边框颜色等。

当然，除了这些颜色名称外，还可以使用十六进制颜色值、RGB颜色值、HSL颜色值等其他方式来表示颜色。

总之，掌握常用的CSS颜色名称是编写CSS样式表的基础。

在实际开发中，开发者应该根据具体情况选择合适的颜色值，并灵活使用各种表示颜色的方式，以满足页面的设计需求。

css常用颜色表

css常用颜色表CSS常用颜色表在网页设计中，颜色的选择是非常重要的，而CSS（层叠样式表）则为我们提供了丰富的颜色选项，可以让我们轻松实现丰富多彩的网页界面。

本文将介绍一些常用的CSS颜色值，帮助读者更好地理解和应用这些颜色。

1. RGB颜色值RGB（Red Green Blue）是一种用于表示颜色的标准，它通过组合红、绿、蓝三种基本色，可以得到各种颜色。

例如，RGB(255, 0, 0)表示红色，RGB(0, 255, 0)表示绿色，RGB(0, 0, 255)表示蓝色。

通过调整每个基本色的数值，我们可以得到任意其他的颜色。

2. 十六进制颜色值十六进制颜色值是另一种常用的表示颜色的方式，它使用0-9和A-F这16个字符来表示颜色的红、绿、蓝三个通道的数值。

例如，#FF0000表示红色，#00FF00表示绿色，#0000FF表示蓝色。

通过改变每个通道的数值，我们可以得到各种不同的颜色。

3. 常用颜色名除了使用RGB和十六进制颜色值，CSS还提供了一些常用的颜色名，这些颜色名可以直接在CSS代码中使用，而不需要具体的数值表示。

例如，red表示红色，green表示绿色，blue表示蓝色。

这些颜色名的好处是易于记忆和使用，可以提高开发效率。

4. RGBA颜色值RGBA（Red Green Blue Alpha）是一种与RGB类似的颜色表示方式，它多了一个Alpha通道用于表示透明度。

透明度的取值范围是0到1，0表示完全透明，1表示完全不透明。

例如，RGBA(255, 0, 0, 0.5)表示半透明的红色，即红色的颜色值为255，透明度为0.5。

5. HSL颜色值HSL（Hue Saturation Lightness）是一种基于色相、饱和度和亮度的颜色表示方式。

色相（Hue）表示颜色在色轮上的位置，取值范围是0到360；饱和度（Saturation）表示颜色的纯度，取值范围是0%到100%；亮度（Lightness）表示颜色的明暗程度，取值范围是0%到100%。

CSS中px、em、rem、%、vw、vh单位之间的区别详解

CSS中px、em、rem、%、vw、vh单位之间的区别详解1 、pxpx就是pixel（像素）的缩写，相对长度单位，相对于屏幕分辨率。

2、em参考物是⽗元素的font-size，具有继承的特点。

浏览器默认字体是16px，整个页⾯内1em不是⼀个固定的值。

字体⼤⼩同样都是1.5em，但是效果却截然不同，按照W3C提供的公式，我们可以计算下： class为id1的div字体⼤⼩继承⾃⽗元素body：16px*1.5em = 24px class为id2的div字体⼤⼩继承⾃⽗元素id1：24px*1.5em = 36px class为id3的div字体⼤⼩继承⾃⽗元素id2：36px*1.5em = 54px3、remrem是CSS3新增的⼀个相对单位，但相对的只是HTML根元素。

通过它既可以做到只修改根元素就成⽐例地调整所有字体⼤⼩，⼜可以避免字体⼤⼩逐层复合的连锁反应。

4、%% 百分⽐，相对长度单位，相对于⽗元素的百分⽐值元素宽⾼与字体⼤⼩使⽤区别：（1）尽量使⽤相对尺⼨单位使⽤相对尺⼨单位计量，则在调整页⾯的布局的时候，不需要遍历所有的内部DOM结构，重新设置内部⼦元素的尺⼨⼤⼩。

如果是随着⽗容器或者是整体页⾯布局⽽改变尺⼨，则使⽤%更好，如元素的⾼度和宽度设置。

（2）字体尺⼨尽量使⽤em、rem为了字体⼤⼩的可维护性和伸缩性，推荐使⽤em，如果存在3层以及3层以上的字体相对尺⼨的设置，可以考虑使⽤rem。

5、vw和vhvm、vh、vmin、vmax是⼀种视窗单位，也是相对单位。

它相对的不是⽗节点或者页⾯的根节点。

⽽是由视窗（Viewport）⼤⼩来决定的，单位 1，代表类似于 1%。

视窗(Viewport)是你的浏览器实际显⽰内容的区域—，换句话说是你的不包括⼯具栏和按钮的⽹页浏览器。

具体描述如下：vw：视窗宽度的百分⽐（1vw 代表视窗的宽度为 1%）vh：视窗⾼度的百分⽐vmin：取当前Vw和Vh中较⼩的那⼀个值vmax：取当前Vw和Vh中较⼤的那⼀个值vh和vw相对于视⼝的⾼度和宽度， 1vh 等于1/100的视⼝⾼度，1vw 等于1/100的视⼝宽度⽐如：浏览器⾼度900px，宽度为750px, 1 vh = 900px/100 = 9 px，1vw = 750px/100 = 7.5 px，很容易实现与同屏幕等⾼的框。

常用的CSS属性的英文单词总结及用法、解释

padding -内边界：确定围绕块元素的空格填充数量，其中包含4个属性“padding-top控制上留白的宽度、padding-right控制右留白的宽度、padding-bottom控制下留白宽度、padding-left控制左留白的宽度。
2、边框
border-width -宽：控制边框的宽度，其中分为4个属性：border-top-width顶边框的宽度、border-right-width右边框的宽度、border-bottom-width底边框的宽度、border-left-width左边框的宽度。
blue 蓝色 bug 软件程序中的错误
body 主体，一个HTML 标记 building 建立
bold 粗体 button 按钮
anchor 锚记<a>标记是这个单词的缩写 anchor 锚记<a>标记是这个单词的缩写
arrow 箭头 arrow 箭头
auto 自动 auto 自动
text-align - 文本对齐：设置块的水平对齐方式。共有左对齐（left）、右对齐（right）、居中（center）和均分（justify）等4种选择。
text-indent - 文字缩进：控制块的缩进程度。
white-space -空白间距：在HTML中，空格是被省略的；在CSS中则使用属性（white-space）控制空格的输入。共有正常（normal）、保留（pre）和不换行（nowrap）等3种选择。
B
background 背景 border 边框
banner 页面上的一个横条 both 二者都是clear 属性的一个属性值
background-attachment - 附加：用于控制背景图像是否会随页面的滚动而一起滚动。有固定（fixd，文字滚动时，背景图像保质固定）和滚动（scroll，背景图像随文字内容一起滚动）两种选择。

HTML px、em、pt长度单位

HTML px
pt单位名称为点（Point），肯定长度单位普通老版本的table用法长度大小单位，但是现在基本上没有用法。
html单位简短介绍：
Px 像素Pixel；相对长度单位。
Pt 点（Point）；肯定长度单位
Em 相对长度单位，这里em与html 标签的"EM"拼法彻低相同，而这里em作为单独文本单位。
HTML代码：
我是divcss1
我是divcss2
我是divcss3
本文转载自中文网
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于扫瞄器的默认字体尺寸。
对文字设置不同长度em px pt单位看看效果：
CSS代码：
.divcss-px{ font-size:12px}
.divcss-pt{ font-size:12pt}
.divc法px作为单位的字体大小,但现在几乎IE都支持在这里也推举用法PX作为单位;
2. 国外的大部分网站能够调节的缘由在于其用法了em作为字体单位;
3. Firefox能够调节px和em，但是96%以上的中国网民用法IE扫瞄器(或内核)。
px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕辨别率而言的，QQ截图也是用法PX作为长度宽度单位。

简述css颜色值表达方式

简述css颜色值表达方式CSS是一种用于样式表设计的编程语言,它允许我们使用颜色值来定义网页的样式和布局。

CSS颜色值表达方式是一种使用颜色值来表示颜色的方法,它允许我们以一种简单而统一的方式来定义颜色,并且可以通过简单的代码来控制颜色的外观。

下面是CSS颜色值的表达方式:1. 基本颜色值:- #:表示基本颜色,其中#后面的数字表示颜色的深浅程度,数字越大,颜色越浅。

- #000000:表示深灰色。

- #00000000:表示黑色。

- #ff0000:表示白色。

- #00ff00:表示蓝色。

- #0000ff:表示红色。

2. 颜色名称:- 颜色名称后面的#表示该颜色的基本颜色值。

例如:#FF0000表示深红色。

- 颜色名称后面的&表示该颜色的基本颜色值和后面的一串数字表示该颜色的深浅程度。

例如:#FF0000&ff0000表示深红色。

3. 颜色值:- 颜色值可以使用数字、字母或下划线表示。

例如:#FF0000表示深红色,#000000表示黑色,#ff00表示白色。

- 颜色值可以使用字母X或字母x表示,其中x表示该颜色的替换色。

例如:#FF0000x000000表示深红色,#ff00xx表示深蓝色。

4. 颜色对象:- 颜色对象是一个包含颜色值和颜色名称的列表。

例如:#FF0000, #000000, #ff00, #00ff表示不同的深红色。

除了以上提到的几种方式,CSS还提供了一些其他的颜色值表达方式,例如: - 颜色值的缩写形式:例如:#FF00表示深红色,#00FF表示深蓝色,#ff00表示白色。

- 颜色值的渐变形式:例如:#ff0000 -> #000000表示从深红色到黑色的颜色渐变。

CSS颜色值表达方式是一种简单而有效的工具,它允许我们以一种统一的方式来定义颜色,并且可以控制颜色的外观。

通过使用不同的颜色值和表达方式,我们可以创建出丰富多彩的网页样式。

CSS的一些单位，如rem、px、em、vw、vh、vm

CSS的⼀些单位，如rem、px、em、vw、vh、vm总结了⼀下⼀些单位的不同px：像素（pixel）相对长度单位，，是相对于屏幕显⽰器分辨率⽽⾔的；em：em的值并不是固定的，会集成⽗级元素的字体⼤⼩；注意： 1.body选择其中声明Font-size=62.5%； 2.将原来的px数值除以10，然后换上em作为单位； 3.重新计算那些被放⼤的字体的em数值。

避免字体⼤⼩的重复声明。

任何浏览器默认字体⼤⼩都是16px，所有未经调整的浏览器都符合1em=16px，南⽆0.75em=12px，10px=0.625em。

为了简化Font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em的值变为16px*62.5%=10px，这样12px就是1.2em，10px 就是1em，也就是将原来的px数值除以10换上em的单位就可以了。

rem：相对单位，（root em 即rem），使⽤rem为单位设置字体⼤⼩时，是相对于HTML根元素的⼤⼩，可通过该根元素就成⽐例的修改调整所有字体⼤⼩，⼀般⽤的时候都是写在body或html上⾯， body{fontsize:625%;}也就是1rem=100px；不过在写项⽬的时候最好搭配媒体查询⼀起，⽐如： html{font-size:10px} 10px==62.5% @media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}} @media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}} @media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}} @media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}} @media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}} @media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}} @media screen and (min-width:800px){html{font-size:25px}}vw：视⼝的最⼤宽度，1vw=视⼝宽度的百分之⼀；vh：视⼝得最⼤⾼度，1vh=视⼝⾼度的百分之⼀；vmin/vm：相对于视⼝的宽度或⾼度中较⼩的那个。

HTML颜色一览（color）

HTML颜色一览（color）
在HTML里，颜色有两种表示方式。

一种是用颜色名称表示，比如blue表示蓝色。

另外一种是用16进制的数值表示RGB的颜色值。

RGB是Red，Green，Blue意思，RGB每个原色的最小值是0，最大值是255，如果换算成16进制表示，就是(#00)，(#FF)。

比如白色的RGB(255,255,255)，就用#FFFFFF表示；还有黑色的RGB(0,0,0)，就用#000000表示。

注：在W3C制定的HTML 4.0标准中，只有16种颜色可以用颜色名称表示(aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow)，其它的颜色都要用16进制RGB颜色值表示。

当然，现在的浏览器支持更多的颜色名称。

不过为保险起见，建议你还是采用16进制RGB颜色值来表示颜色。

并且在值前加上#这个符号。

为了方便大家找到合适的颜色，我们在这里列了一些颜色说明，以供大家参考，不妨作为一种速查工具。

Web安全颜色
以前，很多电脑显示器最多支持256色，因此出现了216种Web 安全颜色，以保证网页的颜色能够正确显示。

那为什么不是256种Web安全颜色呢？因为Microsoft和Mac 操作系统有40种不同的系统保留颜色。

以下就是216种Web安全颜色：
微软支持的颜色名称
下面是微软IE4.0以上都支持的颜色名称：。

HTML颜色构成及写法和常见颜色代码值

HTML颜色构成及写法和常见颜色代码值什么是HTML 颜色？它采用的是RGB 颜色，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色。

HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）；每种颜色的最小值是0（十六进制：#00），最大值是255（十六进制：#FF）；三种颜色红，绿，蓝的组合从0到255，一共颜色名？目前所有浏览器都支持以下颜色名颜色名称是在HTML和CSS颜色规范定义的（17标准颜色，再加124）;下表列出了所有颜色的值，包括十六进制值。

提示: 17标准颜色：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色，黄色。

什么是HTML 颜色值？颜色由红(R)、绿(G)、蓝(B)组成;颜色值由十六进制来表示红、绿、蓝（RGB）;每个颜色的最低值为0(十六进制为00)，最高值为255(十六进制为FF);十六进制值的写法为#号后跟三个或六个十六进制字符;三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。

补充说明：汇总css布局模型和常见代码缩写与长度单位 css基本概念与css核心语法介绍1.颜色值缩写/*关于颜色的css样式也是可以缩写的，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半*/比方：p{color:#000000;}与p{color: #336699;}可写成p{color:#000}与p{color:#369}2.颜色值概述为：在网页中的颜色设置是非常重要，有字体颜色（color）、背景颜色（background-color）、边框颜色（border）等，设置颜色的方法也有很多种：(1).英文命令颜色:p{color:red;}(2).RGB颜色:这个与 photoshop 中的 RGB 颜色是一致的，由R(red)、G(green)、B(blue) 三种颜色的比例来配色。