UI SC265 CSS code详细解释

常用CSS代码大全（工作必备）用html+css可以很方便的进行网页的排版布局，但不是每一种属性或者代码我们都铭记于心，最近我把CSS中的常用代码进行了归纳总结，方便自己以后查看，同时也分享给大家，希望对你们有用。

一.文本设置1、font-size: 字号参数2、font-style: 字体格式3、font-weight: 字体粗细4、颜色属性 color:参数注意使用网页安全色二、超链接设置text-decoration: 参数主要目的是在浏览器显示文本链接时更改下划线。

参数取值范围：underline：为文字加下划线overline：为文字加上划线line-through：为文字加删除线blink：使文字闪烁none：不显示上述任何效果三、背景1、背景颜色 padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); font-size: 16px; border-left: 1px solid rgb(128, 128, 128); background: rgb(238, 238, 238); box-shadow: rgba(7, 17, 27, 0.05) 0px 4px 8px 0px; box-sizing: border-box; border-radius: 8px; font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑, Tahoma, Arial, sans-serif;">2、背景图片background-image: url(URL)URL就是背景图片的存放路径，none表示无。

3、背景图片重复 background-repeat: 参数参数取值范围：no-repeat：不重复平铺背景图片repeat-x：使图片只在水平方向上平铺repeat-y：使图片只在垂直方向上平铺如果不指定背景图像重复属性，浏览器默认水平和垂直平铺背景图像。

CSS编码规范CSS编码规范1 前⾔本⽂档的⽬标是使CSS代码风格保持⼀致，容易被理解和被维护。

虽然本⽂档是针对CSS设计的，但是在使⽤各种CSS的预编译器(如less、sass、stylus等)时，适⽤的部分也应尽量遵循本⽂档的约定。

2 代码风格2.1 ⽂件[建议] CSS⽂件使⽤⽆BOM的UTF-8编码。

解释：UTF-8 编码具有更⼴泛的适应性。

BOM 在使⽤程序或⼯具处理⽂件时可能造成不必要的⼲扰。

2.2 缩进[强制] 使⽤4个空格做为⼀个缩进层级，不允许使⽤2个空格。

⽰例：.selector {margin: 0;padding: 0;}2.3 空格[强制] 选择器与{之间必须包含空格。

⽰例：.selector {}[强制] 属性名与之后的:之间不允许包含空格，:与属性值之间必须包含空格。

⽰例：margin: 0;[强制] 列表型属性值书写在单⾏时，,后必须跟⼀个空格。

⽰例：font-family: Arial, sans-serif;2.4 ⾏长度[强制] 每⾏不得超过120个字符，除⾮单⾏不可分割。

解释：常见不可分割的场景为URL超长。

[建议] 对于超长的样式，在样式值的空格处或,后换⾏，建议按逻辑分组。

⽰例：/* 不同属性值按逻辑分组 */background:transparent url(aVeryVeryVeryLongUrlIsPlacedHere)no-repeat 0 0;/* 可重复多次的属性，每次重复⼀⾏ */background-image:url(aVeryVeryVeryLongUrlIsPlacedHere)url(anotherVeryVeryVeryLongUrlIsPlacedHere);background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.04, rgb(88,94,124)),color-stop(0.52, rgb(115,123,162)));2.5 选择器[强制] 当⼀个 rule 包含多个 selector 时，每个选择器声明必须独占⼀⾏。

------------------------------------------精品文档-------------------------------------字体属性：(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;}) top; text-top;下标) super;(下标) sub;(基线{vertical-align: baseline;}( 垂直对齐．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) ?捻牵潳?牵?光标文件名.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 字体类型晻湯?慦業祬尺字体就尬字体尲尬字体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} |inherit}数值{text-indent: 段首空格34 水平对齐{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-widthborder-right-widthborder-bottom-widthborder-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}{float:left|right|none}浮漂910 清除{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属性大全[背景]属性共有六项：「背景颜色」（background-color），设置背景颜色。

CSS编码规范一、基本书写规范1、所有的CSS的尽量采用外部调用<LINK href="/style/style.css" rel="stylesheet" type="text/css">书写时重定义的最先，伪类其次，自定义最后（其中a:link a:visited a:hover a:actived 要按照顺序写）便于自己和他人阅读。

为了保证不同浏览器上字号保持一致，字号建议用点数pt和像素px来定义，pt一般使用中文宋体的9pt和11pt，px一般使用中文宋体12pt 和14.7px 这是经过优化的字号，黑体字或者宋体字加粗时，一般选用11pt和14.7px 的字号比较合适。

2、CSS推荐模板:<style type="text/css"><!—body { font-size:9pt; font-family:Arial, Helvetica, sans-serif; color:#333333; text-align:center; ma rgin:0px;}ul { margin:auto; }img { border:0px; }a { font-size:9pt; text-decoration:none;color:#FFFFFF; }a:hover { font-size:9pt; text-decoration:underline; color:#990000; }a.1 { font-size: 9pt; color: #3366cc; text-decoration: none}a.1:hover { font-size: 9pt; color: #FF9900; text-decoration: none}.colorblue,colorblue:hover { color:#003366 ;}.blue { font-family: "宋体"; font-size: 9pt; line-height: 20px; color: #0099FF; letter-spacing: 5em}.colorRed,a.colorRed:hover{ color: #FF0000; }.colorLime,a.colorLime:hover{ color: #00FF00; }.colorGreen,a.colorGreen:hover{ color: #008000; }.colorBlue,a.colorBlue:hover{ color: #0000FF; }.colorOrange,a.colorOrange:hover{ color: #FFA500; }--></style>为了保证浏览器的兼容性，必须设置页面背景<body bgcolor="#FFFFFF">3、其中注释写法，例：/*header begin!*/二、CSS命名参考1、常用的CSS命名规则：头：header内容：content/container尾：footer导航：nav侧栏：sidebar栏目：column2、直观命名当在设计Web页面以及需要对一个div进行标识的时候，最自然的想法就是使用可以描述元素所在页面位置的词汇来对其命名。

*背景设置*/body{}中加入background:url(/0454ldk) repeat-x #FFFFFF注：repeat 背景图像在纵向和横向上平铺no-repeat 背景图像不平铺repeat-x 背景图像在横向上平铺repeat-y 背景图像在纵向平铺/*半透明设置*/.modbox,.modbl,.modbc,.modbr{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !im portant;width:100%}/*解决回车换两行的问题*/Shift+回车/*全能隐藏代码*/display:none/*不停变换空间背景图片*//参数color:green 表示字体颜色。

font-size:14px 表示字体大小。

font-family:Georgia,黑体表示英文字体和中文字体border:1px 表示边框的粗细。

solid green 表示边框的颜色。

background-color:black 表示背景色。

/*最顶部加字方法!*/#tabline{margin-top:-490px;right:0px;line-height:8px; background:url(图片地址)no-repeat bottom; padding-bottom: 40px; margin-bottom: 10px}图片上面打上你要的字~欢迎光临/0454ldk/*添加LOGO*/#main {background:url(顶部LOGO) no-repeat 10px 0px;} /*10px 0px;距顶部距左*/#layout {width:980px;margin-left:0px;background:url(底部LOGO) no-repeat bottom0px;padding-bottom:80px} /*margin-left:0px底部图片距离最左边长度；bottom 0px边框大小；padding-bottom:80px主体模块最下端距离底部图片最顶端距离*//*添加小背景图片*/.stage{background:url(小背景图片) repeat-y 0px 0px} /*0px 0px距左距顶（建议为0）*//*空间整体宽度*/#main{width:740px!important;text-align:center}或#main{width:80%!important}/*版块长度及间距*/#layout td.c2t1{padding-left:55px;width:570px} /*最左版块*/#layout td.c2t2{width:60px} /*左右两版块间距*/#layout td.c2t3{width:260px;padding-right:30px} /*第2竖列版块信息*//*定义阅读文章时文章块宽度距左长度*/.stagepad {width:570px;margin-left:44px;}.stagepad a:link{text-decoration:none;font-weight:bold}.stagepad a:visited{text-decoration:none;font-weight:bold}/*文章虚线边框*/#m_blog t{color:#333333;line-height:20px;font-size:14px;border:1px dashed#090688;background:#Ffffff;PADDING: 10px;}/#m_blog t{color:#808080;line-height:20px;font-size:16px;border-top:2px dashed #1DC01D;border-bottom:2px dashed #1DC01D;border-left:2px dashed#1DC01D;border-right:2px dashed #1DC01D;PADDING-RIGHT: 10px; PADDING-LEFT: 10px;PADDING-TOP: 10px;PADDING-bottom: 10px;}dotted：点线dashed : 虚线double : 双线边框groove : 3D凹槽ridge : 菱形边框inset : 3D凹边outset : 3D凸边/*前景图片透明设置*/filter:alpha(opacity=90,finishopacity=100,style=0,)/*播放器*/#phx{FILTER: Alpha(Opacity=100, FinishOpacity=60, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)Invert(); WIDTH: 224px;HEIGHT:200px}Invert(); 滤镜效果可以更换/*不显示播放器，不影响音乐的播放*/添加#mod_bgmusic{display:none}/*日志背景*/#m_blog.modbox{background:url(图片)}或#m_blog t{background:url(图片) repeat; /*图片*/color:#666666;line-height:20px;font-size:14px}/*滚动条*/#m_blog{scrollbar-face-color: #E100E1;scrollbar-shadow-color: maroon;scrollbar-highlight-color: white;scrollbar-3dlight-color: #E100E1;scrollbar-darkshadow-color:#E100E1;scrollbar-arrow-color:#E100E1;scrollbar-base-color: #E100E1;scrollbar-track-color: #E100E1;overflow-y:auto;height:1330px;filter: chroma(color=#E100E1)}/*去掉横向滚动条*/在body{ }里加上overflow-x : hidden;/*禁止选择鼠标右键特效*/#main{background:url('javascript:document.oncontextmenu=new Function("event.returnValue=false;"); document.onselectstart=new Function("event.returnValue=false;");')}document.oncontextmenu=new Function("event.returnValue=false;");禁止鼠标右键document.onselectstart=new Function("event.returnValue=false;")禁止选择/*鼠标触碰按钮下陷*/a:hover{}中加入position:relative; left:2px; top:1px; clip:rect( );/*弹出窗口*/#comm_info 和#comm_info a 替换#comm_info a{color:#D77B18 border: 1px solid #000000; padding: 10px; background-image: url('javascript:alert("你要说的话");')}#comm_info{}或#m_links div.item{}添加background:url(javascript:alert())欢迎光临零點壹貮/0454ldk/*文章在新窗口中打开*/a:active { text: (target="_blank");}/*屏蔽Rss链接，baidu图片*/#comm_info a {display:none}/*标题背景*/#header div.lc{} -左#header div.rc{} -右插入background:url(http://***)/*百度空间进入后弹出对话框*/去掉#comm_info div.line 把#comm_info a换成#comm_info a{color:#D77B18 border: 1px solid #000000; padding: 10px; background-image:url('javascript:alert("欢迎光临/0454ldk");')}/*文章日期旁加小图案*/#m_blog div.date{text-indent:1.5cm;background:url(这里要填上你自己选的小图片的连接地址) 30% 0% no-repeat; /*背景图片*/margin:5px 0 8px 0;color:#999999;line-height:50px; /*调整行高*/}/*标题栏主体加小图案*/模块ID span.modtit{background:url(/0454ldk) no-repeat topleft;font-size:0px;width:100%;margin-left:-18px;padding-top:3px}/*常用插入时间图片位置的代码*/图片显示位置——个人档案照片下面：#m_pro div.act{margin-top:5px;background:url(/cgi-bin/date.cgi?trgb=red&;srgb=red&prgb=red&timezone=GMT-0500) no-repeat bottom; padding-bottom: 22px; margin-bottom: 6px; }图片显示位置——文章列表标题下面：#m_blog div.tit{font-size:14px;font-weight:bold;background:url(/cgi-bin/date.cgi?trgb=red&;srgb=red&prgb=red&timezone=GMT-0500) no-repeat bottom; padding-bottom: 22px; margin-bottom: 6px; }图片显示位置——文章列表标题左面：#m_blog div.tit{font-size:14px;font-weight:bold; line-height:24px; text-indent:120px;background:url(/cgi-bin/date.cgi?trgb=red&;srgb=red&prgb=red&timezone=GMT-0500) no-repeat; }图片显示位置——TAB导航栏：#tabline{top:89px;background:url(/cgi-bin/date.cgi?trgb=red&;srgb=red&prgb=red&timezone=GMT-0500) no-repeat bottom; padding-bottom: 32px; margin-bottom: 6px; }图片显示位置——相册下面：#m_album div.image{text-align:center;background:url(/cgi-bin/date.cgi?trgb=red&;srgb=red&prgb=red&timezone=GMT-0500) no-repeat bottom; padding-bottom: 45px; margin-bottom: 1px; }图片显示位置——每个友情链接下面：#m_links div.line{margin-top:5px;line-height:8px;border-top:1px solid #F4C1B5;background:url(/cgi-bin/date.cgi?trgb=red&;srgb=red&prgb=red&timezone=GMT-0500) no-repeat bottom; padding-bottom: 16px; margin-bottom: 10px; }图片显示位置——每个最新评论下面：#m_comment div.item{color:#000000;font-size:12px;background:url(/cgi-bin/date.cgi?trgb=red&;srgb=red&prgb=red&timezone=GMT-0500) no-repeat bottom; padding-bottom: 22px; margin-bottom: 6px; }图片显示位置——每个文章分类下面：#m_artclg div.line{margin-top:5px;line-height:8px;border-top:1px solid #F4C1B5;background:url(/cgi-bin/date.cgi?trgb=red&;srgb=red&prgb=red&timezone=GMT-0500) no-repeat bottom; padding-bottom: 16px; margin-bottom: 10px; }图片显示位置——其他区域：#comm_info div.line{margin-top:5px;line-height:8px;border-top:1px solid #BBC1C6;background:url(/cgi-bin/date.cgi?trgb=red&;srgb=red&prgb=red&timezone=GMT-0500) no-repeat bottom; padding-bottom: 22px; margin-bottom: 6px; }其他样式显示/cgi-bin/Count.cgi?display=date&;dd=A/*调整图片位置*/padding-bottom: 20px; margin-bottom: 5px; padding-bottom为距上高度，margin-bottom为距下高度。

CSS 编码规范代码规范一般性命名使用小写字母，复合词以-分隔; 例如nav.css , login-nav.css , login-page id 和类的命名为id 和样式类使用有意义或通用的名字，避免由于css 命名更改引起的不必要的文档或模板改变；例如/* 不推荐：无意义 */#yee-1901 {}/* 不推荐：表现层的命名 */.button-green {}/* 推荐: 具体 */#gallery {}#login {}.video {}/* 推荐: 通用 */.effect {}.alt {}id 和class 的命名长度应该适中，不要太简略也不要太详细；例如/* 不推荐 */#navigation {}.atr {}/* 推荐 */#nav {}.author {}元素选择器为了性能原因，请避免元素选择器和类选择器以及id 选择器混用;例如/* 不推荐 */ul#example {}div.error {}/* 推荐 */#example {}.error {}简写属性名字为了提高可读性，尽可能的使用简写属性。

例如/* 不推荐 */border-top-style:none;font-family:palatino,georgia,serif;font-size:100%;line-height:1.6;padding-bottom:2em;padding-left:1em;padding-right:1em;padding-top:0;/* 推荐 */border-top:0;font:100%/1.6palatino,georgia,serif;padding:01em2em;0 和单位对属性值为0 的情况省略单位；例如margin:0;padding:0;0 前缀情况省略属性值中的0 前缀;例如font-size:.8em;16 进制的颜色值表示尽可能使用3 个字符的16 进制颜色值；例如/* 不推荐 */color:#eebbcc;/* 推荐 */color:#ebc;前缀为了防止冲突，对于应用特定的样式附加应用前缀；例如.login-help {} /* login page */#detail-note {} /* detail page */hacks避免css hack ，考虑使用特定浏览器前缀表示；例如.ks-ie6p {margin:1em0;}格式规范属性声明顺序按照字母顺序声明属性，排序时忽略私有的浏览器前缀，对于特定的浏览器，私有的浏览器前缀应该参与排序;例如background:fuchsia;border:1pxsolid;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;color:black;text-align:center;text-indent:2em;块缩进块的内容应该被缩进；例如@media screen,projection {html {background:#fff;color:#444;}}分号使用分号结束单个属性的定义；例如/* 不推荐 */.test {display:block;height:100px}/* 推荐 */.test {display:block;height:100px;}空格在属性名冒号后加一个空格，例如/* 不推荐 */.test {display:block;}/* 推荐 */.test {display:block;}空行多个选择以及声明间以行分隔；例如/* 不推荐 */a:focus,a:active {position:relative; top:1px;}/* 推荐 */h1,h2,h3 {font-weight:normal;line-height:1.2;}多个css 规则间以空行分隔；例如html {background:#fff;}body {margin:auto;width:50%;}引号尽可能的不用引号，迫不得已时使用单引号./* 不推荐 */@import url("///css/maia.css");html {font-family:"open sans", arial,sans-serif; }/* 推荐 */@import url(///css/maia.css);html {font-family:'open sans', arial,sans-serif; }注释成组的css 规则间用块状注释和空行分离;例如/* Header */#login-header {}#login-header-below {}/* Footer */#login-footer {}#login-footer-below {}/* Gallery */.login-gallery {}.login-gallery-other {}。

CSS代码缩写⼀、CSS代码缩写 CSS代码缩写的作⽤：便捷代码输⼊，减少CSS⽂件⼤⼩，使代码更易读。

盒模型代码简写：主要包括内边距（补⽩）、边框、外边距（边界）三类。

从⽅向的属性有：上、下、左、右。

从描述可以分为：颜⾊、⼤⼩和样式。

⽽内边距和外边距只有⼤⼩。

缩写最后⼀个单词，如：div{ border-top-color：Red; border-top-width：2px; border-top-style： dotted;}可缩写为：div{ border-top：Red 2px dotted; } 这个没有先后顺序，只需压缩成⼀句代码即可。

⽅向属性的压缩，如：div{ padding-top：1px; padding-right：2px; padding-bottom：3px; padding-left：4px;}可缩写为：div { padding：1px 2px 3px 4px;} 以上4个属性值的顺序是固定的，按顺时钟的顺序排列：顶部⼀》右侧⼀》底部⼀》 左侧。

如果仅定义部分属性，则压缩时应保留未定义属性的预定义位置，并赋值为auto。

如果左右两值相同，上下值不同，可以缩写为： div { padding：1px 2px 3px; } 如果左右⽅向值相同，上下⽅向值也相同，可以缩写为： div { padding：1px 2px; } 如果四个⽅向值都相同，可以缩写为： div { padding：1px; }缩写中间⼀个词 如果前后缀相同，中间不同，也可以如下进⾏压缩，如： div { broder-top-width：thim; broder-right-width：thick; broder-bottom-width：medium; border-left-width：inherit; } 可缩写为：div { broder-width：thim thick medium inherit; } 列表和背景缩写：遵循盒模型缩写规律，可以复合属性替代多个单项属性，如： #newsList { list-style-type：circle; list-style-image：url(star.gif); list-style-position：inside; } 可缩写为： #newsList { list-style：circle url(star.gif) inside; } 这三个值没顺序，当定义了多个单项属性时，同样可以压缩。

常用code码-回复常用code码是计算机编程中经常出现的一系列代码。

这些code码用于实现特定的功能，帮助开发者更高效地编写程序。

本文将详细介绍常用code码的使用，从而帮助读者更好地了解和运用这些code码。

首先，我们先来讨论一下最常用的code码之一-HTML代码。

HTML是一种标记语言，用于创建网页结构和内容。

HTML代码使用一系列标签来定义和格式化文本、图像、链接和其他内容。

例如，标签< p>用于定义段落，< img>用于插入图像，< a>用于创建链接等。

通过使用适当的HTML 标签和属性，开发者可以编写出精美、互动的网页。

接下来，让我们聚焦于另一个常用的code码- CSS代码。

CSS是层叠样式表的缩写，是用于定义和样式化HTML文档的代码。

通过CSS代码，开发者可以控制文本的颜色、大小、对齐方式，调整图像的大小和边框样式，设计网页的布局和排版等。

CSS代码通过选择器来选择HTML元素，并通过属性和值来设定元素的样式。

例如，选择器"p"可以选择所有的< p>标签，属性"color"可以改变文本的颜色，而值"red"表示红色。

通过灵活运用CSS代码，开发者可以让网页变得更加美观和易读。

除了HTML和CSS，JavaScript是另一个常见的code码。

JavaScript是一种用于创建网页交互和动态效果的编程语言。

它可以通过操作HTML 元素、处理表单、验证输入等来增强网页的功能。

开发者可以使用JavaScript代码来响应用户的点击事件，控制元素的显示和隐藏，实现计算和数据处理等功能。

例如，通过JavaScript代码，我们可以编写一个函数来验证用户输入的表单是否符合要求，并在不满足条件时显示错误提示信息。

JavaScript的灵活性和强大功能使得它成为了广泛使用的一种编程语言。

css框架代码（原创实用版）目录1.CSS 框架代码概述2.CSS 框架代码的作用3.CSS 框架代码的编写方法4.CSS 框架代码的实际应用5.CSS 框架代码的未来发展趋势正文1.CSS 框架代码概述CSS 框架代码是一种用于构建网站样式的编程语言。

CSS 是层叠样式表的缩写，它用于控制网页的外观，包括字体、颜色、布局等。

CSS 框架代码则是一种更高级的 CSS 编写方式，它可以帮助开发者快速、简便地创建具有一致性的网站样式。

2.CSS 框架代码的作用CSS 框架代码具有以下作用：（1）提高开发效率：CSS 框架代码提供了一系列预定义的样式，开发者只需调用这些样式，就可以轻松地创建出美观的网站。

（2）保持一致性：CSS 框架代码可以帮助开发者保持网站样式的一致性，避免出现样式不一致的问题。

（3）易于维护：CSS 框架代码将样式与 HTML 结构分离，使得代码更易于阅读和维护。

3.CSS 框架代码的编写方法要编写 CSS 框架代码，需要掌握 CSS 的基本语法和选择器。

以下是一些常用的 CSS 框架代码编写方法：（1）使用 CSS 预处理器：如 Sass、Less 等预处理器可以让开发者更轻松地编写和维护 CSS 框架代码。

（2）使用 CSS 框架：如 Bootstrap、Material-UI 等成熟的 CSS 框架可以让开发者快速搭建网站样式。

（3）自定义 CSS 类：开发者可以根据需要自定义 CSS 类，以便更好地控制网站样式。

4.CSS 框架代码的实际应用CSS 框架代码在实际应用中具有广泛的应用，例如：（1）网站开发：CSS 框架代码可以帮助开发者快速构建网站样式，提高开发效率。

（2）移动端应用开发：CSS 框架代码可以应用于移动端应用，提高应用的视觉效果。

（3）响应式设计：CSS 框架代码可以实现响应式设计，使网站在不同设备上具有良好的显示效果。

5.CSS 框架代码的未来发展趋势随着前端技术的不断发展，CSS 框架代码在未来将呈现出以下发展趋势：（1）更加轻量化：随着网络速度的提升，用户对网站性能的要求越来越高，因此 CSS 框架代码将更加轻量化。