|
CSS 颜色大全 css 字体颜色,将颜色代码代替css里面的颜色，就可以。 div中控制某段字体 颜色/ f8 e/ B1 w: y9 s9 k/ K0 c
html代码
. I& X3 w* y( J; t+ U' ]<div id="sidebar">3 f5 h$ D3 x4 m
<span>CSS 颜色大全 css 字体颜色</span></div>
0 X- V+ G1 b$ \# ZCSS文件
# Q; B5 {9 R$ h; S2 Z" G#sidebar { }" D6 A; n' f2 @& ?
#sidebar .span{ color:#FF0000 } 1 白色 #FFFFFF | 2 红色 #FF0000 | 3 绿色 #00FF00* Z3 B6 [5 U4 ^- z5 U3 U
| 4 蓝色 #0000FF | 5 牡丹红 #FF00FF | 6 青色 #00FFFF
' V) z$ s& o3 a& o& c2 j# g | 7 黄色 #FFFF00 | 8 黑色 #000000 | 9 海蓝 #70DB93
# M; _' }+ N7 O& Z6 S9 q! t | 10 巧克力色 #5C3317 | 11 蓝紫色 #9F5F9F | 12 黄铜色 #B5A642 | 13 亮金色 #D9D919 | 14 棕色 #A67D3D | 15 青铜色 #8C7853 |
[# }2 v0 g% U) `8 B; g2 |# r/ i( r8 j1 t) U$ c
16 2号青铜色 #A67D3D+ y5 ~/ u& H% y/ Y' h6 [1 R9 r. O
| 17 士官服蓝色 #5F9F9F | 18 冷铜色 #D98719 | 19 铜色 #B87333 | 20 珊瑚红 #FF7F00 | 21 紫蓝色 #42426F | 22 深棕 #5C4033 | 23 深绿 #2F4F2F | 24 深铜绿色 #4A766E | 25 深橄榄绿 #4F4F2F | 26 深兰花色 #9932CD7 Z( W# C3 K0 O- d/ A: Y6 T, `
| 27 深紫色 #871F78 | 28 深石板蓝 #6B238E | 29 深铅灰色 #2F4F4F | 30 深棕褐色 #97694F | 32 深绿松石色 #7093DB | 32 深绿松石色 #7093DB | 33 暗木色 #855E42 | 34 淡灰色 #545454 | 35 土灰玫瑰红色#856363 | 36 长石色 #D19275% [) ]) h# _# K8 C% F d
| 37 火砖色 #8E2323 | 62 褐红色 #8E236B | 63 中海蓝色 #32CD99 | 64 中蓝色 #3232CD | 65 中森林绿 #6B8E23
0 \ r/ z+ [4 v; E- @ | 66 中鲜黄色 #EAEAAE | 67 中兰花色 #9370DB | 68 中海绿色 #426F42 | 69 中石板蓝色 #7F00FF | 70 中春绿色 #7FFF00 | 71 中绿松石色 #70DBDB | 72 中紫红色 #DB7093 | 73 中木色 #A68064 | 74 深藏青色 #2F2F4F | 75 海军蓝 #23238E
3 F8 o# _) Y* k ~6 l% c | 76 霓虹篮 #4D4DFF | 77 霓虹粉红 #FF6EC7 | 78 新深藏青色 #00009C | 79 新棕褐色 #EBC79E | 80 暗金黄色 #CFB53B | 81 橙色 #FF7F00 | 82 橙红色 #FF2400 | 83 淡紫色 #DB70DB | 84 浅绿色 #8FBC8F | ! i5 j* ^% Y% B3 W
85 粉红色 #BC8F8F( d! y. b5 t( S
| 86 李子色 #EAADEA | 87 石英色 #D9D9F3 | 88 艳蓝色 #5959AB | 89 鲑鱼色 #6F4242 | 90 猩红色 #BC1717& k! Y: X* @# m' C
| 91 海绿色 #238E68 | 92 半甜巧克力色#6B4226 | 93 赭色 #8E6B23 | 94 银色 #E6E8FA | 95 天蓝 #3299CC | 96 石板蓝 #007FFF | 97 艳粉红色 #FF1CAE | 98 春绿色 #00FF7F | 99 钢蓝色 #236B8E | 100 亮天蓝色 #38B0DE8 [- a6 g' X4 Q* k' T. S; e
| 101 棕褐色 #DB9370 | 102 紫红色 #D8BFD8 | 103 石板蓝色 #ADEAEA | 104 浓深棕色 #5C4033 | 105 淡浅灰色 #CDCDCD | 106 紫罗兰色#4F2F4F | 107 紫罗兰红色 #CC3299 | 108 麦黄色 #D8D8BF | 109 黄绿色 #99CC | 7 S O1 Q @" g
|
+ b- s" L) P! V, C4 \- s/ F | ( f2 K% ` X: D- B
|
5 \0 f# h+ |& x# O) A | 2 n0 z# b4 f, y7 w5 F- U3 W
|
css样式大全(整理版） 字体属性：(font)+ C8 o, u4 ^1 Q& e+ c7 v r" O7 g, t
大小 {font-size:x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD
6 x7 I! ~9 }2 Q样式 {font-style blique;}(偏斜体) italic;(斜体) normal;(正常)
$ A! [' Z4 `- C行高 {line-height:normal;}(正常) 单位：PX、PD、EM
2 C6 K8 N. W6 p& ?, U粗细 {font-weight:bold;}(粗体) lighter;(细体) normal;(正常)$ v" B3 I" u9 }- v; ^% f9 K: A
变体 {font-variant:small-caps;}(小型大写字母) normal;(正常)+ o9 v1 @3 h( `- h) k1 O
大小写 {text-transform:capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)* m7 V, p2 u F2 T/ ]
修饰{text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁) 常用字体： (font-family)
' _. U, G0 h4 L0 k"Courier New", Courier, monospace, "Times New Roman",Times, serif, Arial, Helvetica, sans-serif, Verdana 背景属性： (background)% g% v% C- R* Z4 n( V% w M# ]# c9 V
色彩{background-color: #FFFFFF;}
" g+ N7 t2 h V+ ?+ I# b图片{background-image: url();}7 Z7 [8 F2 n$ ^" D* {* c8 L
重复{background-repeat: no-repeat;}1 M% `9 ~$ G; _% O
滚动{background-attachment: fixed;}(固定) scroll;(滚动)
, }2 G( l- k( U, C3 E! ?* s" T位置{background-position: left;}(水平) top(垂直);/ ]- q4 l- M- D% \1 p8 ~' h
简写方法 {background:#000url(..) repeat fixed left top;} /*简写·这个在阅读代码中经常出现，要认真的研究*/ 区块属性： (Block) /*这个属性第一次认识，要多多研究*/
8 f7 C7 l) _* F6 G6 D+ N字间距 {letter-spacing:normal;} 数值 /*这个属性似乎有用，多实践下*/& t. q5 U! c- S3 |
对齐 {text-align:justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中)" H! j' Q3 ^( G9 T
缩进 {text-indent: 数值px;} \) S$ x& O3 [; s2 z& E' L
垂直对齐 {vertical-align:baseline;}(基线) sub;(下标) super;(下标) top; text-top;middle; bottom; text-bottom;
& I3 ?) j: D C9 r词间距word-spacing:normal; 数值# N1 M7 G2 e; W3 d% r' z9 _
空格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)
3 ?0 c. s; o" }/ g6 n# P( k' g/ r0 Awidth:;height:; float:; clear:both; margin:; padding:; 顺序：上右下左
3 K' |/ G* b8 h" Q! F边框属性： (Border)# x; C4 C' ^% ~5 O( n1 y' X" u; g
border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;% \. E4 Q+ _. [ L: ^0 O7 f
border-width:; 边框宽度6 v/ A% \4 p8 B1 Q1 `
border-color:#; 简写方法border：width stylecolor; /*简写*/ 列表属性： (List-style)
1 m! `8 Q, ^6 d5 j' A类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman;lower-alpha; upper-alpha;
+ Y% H- P5 H" E2 v5 c0 Q' @$ ^位置list-style-positionutside;(外) inside;: ?1 | U9 W2 C; x! y
图像list-style-image:url(..);
" r8 g/ ~1 G5 r/ `定位属性：(Position)
) e/ n1 z! \& qPosition:absolute; relative; static;2 B* l2 \2 ?5 T D1 C5 n- {
visibility: inherit; visible; hidden;! J% y+ V$ u7 w- I
overflow: visible; hidden; scroll; auto;5 j& |: `) ~( e5 Q/ @
clip: rect(12px,auto,12px,auto) (裁切) css属性代码大全6 K% u# d3 q" @5 I9 L
一 CSS文字属性：
6 j2 a$ j8 q5 N1 u& r3 t( A: fcolor : #999999; /*文字颜色*// e+ r& F. Q1 \# s4 Y! X# z
font-family : 宋体,sans-serif; /*文字字体*/
5 Z' q' f2 C) I' [7 q8 [ font-size : 9pt; /*文字大小*/4 ]1 _+ L7 R" R' y! H* T! W3 }" t' c7 J
font-style:itelic; /*文字斜体*/2 L; ^& \0 g* J& q0 Z) d
font-variant:small-caps; /*小字体*/, Z0 X3 E( ]3 V( P
letter-spacing : 1pt; /*字间距离*/
4 G! B* B: I4 h: b1 g/ T line-height : 200%; /*设置行高*/3 _0 |7 h: h, n& \! d
font-weight:bold; /*文字粗体*/
; B/ {- @5 c2 S% F" V vertical-align:sub; /*下标字*/
' R# L; b) |0 a8 @4 Z- F- `% u7 j vertical-align:super; /*上标字*/
2 x% Z4 {: d* ^9 t7 B text-decoration:line-through; /*加删除线*/! p4 O" u3 G6 A8 t% X- M
text-decoration: overline; /*加顶线*/
7 `3 h" A! k v3 d text-decoration:underline; /*加下划线*/2 c" o# J: o: ]! d( T
text-decoration:none; /*删除链接下划线*/% q8 k5 F5 Q: N$ d) N# |% z5 j
text-transform : capitalize; /*首字大写*/
/ p3 m; @5 |7 e8 d: `8 \ text-transform : uppercase; /*英文大写*/
% m7 G. ]1 T }! ~: }% q text-transform : lowercase; /*英文小写*/
D: h2 u6 u7 O* z$ _# [* u0 G- U$ A. v text-align:right; /*文字右对齐*/, r4 N7 x" W4 |8 [/ q B g z5 Y1 u
text-align:left; /*文字左对齐*/
. J, c5 B' E6 D' j, I text-align:center; /*文字居中对齐*/3 j! J9 p* s5 [
text-align:justify; /*文字分散对齐*/
$ Z0 V) \. `3 g ?8 N7 g2 Q vertical-align属性
, Z' e+ G; |; W& B1 \vertical-align:top; /*垂直向上对齐*/$ [' G3 q: I7 G; o8 K9 L6 @
vertical-align:bottom; /*垂直向下对齐*/
7 I5 w+ g6 v) W- k& i+ \9 r vertical-align:middle; /*垂直居中对齐*/
- w9 \2 a) K9 p* A2 l vertical-align:text-top; /*文字垂直向上对齐*/+ {0 @9 E2 r" M4 K5 k3 V4 ^
vertical-align:text-bottom; /*文字垂直向下对齐*/ CSS 属性： 字体样式(Font Style): n9 n% f9 f5 d2 G3 H4 F
序号中文说明标记语法9 _! V' T. [( }& w
1 字体样式 {font:font-style font-variant font-weight font-sizefont-family}
! {/ k/ \- z! w k3 C3 ? 2 字体类型 {font-family:"字体1","字体2","字体3",...}
! P7 ]" G2 H# E q4 | V0 o 3 字体大小 {font-size:数值|inherit| medium| large| larger| x-large| xx-large|small| smaller| x-small| xx-small}5 J# t+ d! y1 _% x4 U5 z+ M/ i; }
4 字体风格 {font-style:inherit|italic|normal|oblique}
5 w1 O* V# C( v$ m! h 5 字体粗细 {font-weight:100-900|bold|bolder|lighter|normal;}& r: U0 n9 D" h; d! n X
6 字体颜色 {color:数值;}
[5 @/ c6 t% i$ Q1 x 7 阴影颜色 {text-shadow:16位色值}+ i9 W7 s. `- ^& X/ ~( c2 m% o; ^
8 字体行高 {line-height:数值|inherit|normal;}' X8 q+ Z I7 e0 n& Q8 u
9 字 间 距 {letter-spacing:数值|inherit|normal}
3 @: p! k! Y/ W- E' } 10 单词间距 {word-spacing:数值|inherit|normal}( A6 W+ E7 [3 Y$ Y% E5 E8 K
11 字体变形 {font-variant:inherit|normal|small-cps }0 K* O# t* K: {: s6 u s
12 英文转换 {text-transform:inherit|none|capitalize|uppercase|lowercase}7 E( y6 p/ c v" b. M7 _3 T) }- s5 t8 T
13 字体变形 {font-size-adjust:inherit|none}1 Y+ G) M% u {- N9 G0 b
14 字体{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal|semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}5 l& x( d$ F8 M' H5 A+ a8 C0 U
文本样式(Text Style)
$ \* c( y" N) a% V6 F& _ 序号中文说明标记语法
# d" U( o' J1 H+ ? 1 行 间 距 {line-height:数值|inherit|normal;}
C3 {: P3 H3 z 2 文本修饰{text-decoration:inherit|none|underline|overline|line-through|blink}$ a' K* c# y \$ @( k/ I/ D ]7 |
3 段首空格 {text-indent:数值|inherit}
4 e) D) r! r2 o7 v2 O 4 水平对齐 {text-align:left|right|center|justify}
1 ~' |& U3 M. E2 f" n: z0 v 5 垂直对齐 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}" q9 s3 s+ ^! P: o `
6 书写方式 {writing-mode:lr-tb|tb-rl}, J# w8 H& p( F+ W& R- }7 D
' F" o" ~5 K3 n6 P: }9 t | 
发表于 2018-2-2 22:37:43