超全面CSS款式梳理

2021-03-17 15:52 jianzhan

1 字体样式特性:(font) 

尺寸 {font-size: x-large;}(特大)xx-small;(极小) 1般汉语用不到,要是用标值便可以,企业: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 NewRoman", 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) /*这个特性第1次了解,要多多科学研究*/ 
字间隔 {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) (裁剪)     

2 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; /*文本竖直向下对齐*/   

3、CSS边框空白 

padding-top:10px; /*上边框留空白*/ 
padding-right:10px; /*右侧框留空白*/ 
padding-bottom:10px; /*下边框留空白*/ 
padding-left:10px; /*左侧框留空白  

4、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; /*缩进*/   

5、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轴反复排序*/   

6、特定情况部位   

background-position : 90% 90%; /*情况照片x与y轴的部位*/ 
background-position : top; /*向上对齐*/ 
background-position : buttom; /*向下对齐*/ 
background-position : left; /*向左对齐*/ 
background-position : right; /*向右对齐*/ 
background-position : center; /*垂直居中对齐*/   

7、CSS联接特性:   

a /*全部超连接*/ 
a:link /*超连接文本文件格式*/ 
a:visited /*访问过的连接文本文件格式*/ 
a:active /*按下连接的文件格式*/ 
a:hover /*电脑鼠标转到连接*/ 
电脑鼠标光标款式: 
连接手指 CURSOR: hand 
10字体样式 cursor:crosshair 
箭头朝下 cursor:s-resize 
10字箭头 cursor:move 
箭头朝右 cursor:move 
加1问号 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;}  
 

8、CSS框线1览表:   

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款式*/   

9、别的框线款式  
 

solid /*实线框*/ 
dotted /*虚线框*/ 
double /*双线框*/ 
groove /*立体式内凸框*/ 
ridge /*立体式浮雕框*/ 
inset /*凹框*/ 
outset /*凸框*/   

8、CSS表单应用: 

文本方块 
按钮 
复选框 
挑选钮 
多写作字方块 
往下拉式菜单 选项1选项2   

9、CSS界限款式: 

margin-top:10px; /*上界限*/ 
margin-right:10px; /*右侧界值*/ 
margin-bottom:10px; /*下界限值*/ 
margin-left:10px; /*左侧界值*/   

10、CSS 特性: 字体样式款式(Font Style) 

1 字体样式款式 {font:font-stylefont-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⑼00|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}   

101、文字款式(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}   

102、情况款式 

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:情况色调|情况图像|情况反复|情况附件|情况部位}  
 

103、架构款式(Box Style) 

1 界限留白 {margin:margin-topmargin-right margin-bottom margin-left} 
2 补白 {padding:padding-toppadding-right padding-bottom padding-left} 
3边框宽度  
{border-width:border-top-widthborder-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-widthborder-style color} 
上边框 {border-top:border-top-width border-style color} 
右侧框 {border-right:border-right-width border-stylecolor} 
下边框 {border-bottom:border-bottom-width border-stylecolor} 
左侧框 {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}   

104、归类目录 

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款式梳理,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!