Css属性书写顺序建议
CSS样式规则及字体样式
字体样式应用：
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>字体属性</title> <style>
可以通过escape() 来测试属于什么字体。
字体名称
英文名称
Unicode 编码
宋体
SimSun
\5B8B\4F53
新宋体
NSimSun
\65B0\5B8B\4F53
黑体
SimHei
\9ED1\4F53
微软雅黑
Microsoft YaHei \5FAE\8F6F\96C5\9ED1
楷体_GB2312 KaiTi_GB2312 \6977\4F53_GB2312
p{ font-family:"微软雅黑";}
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。
常用技巧：
1. 现在网页中普遍使用14px+。 2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。 3. 各种字体之间必须使用英文状态下的逗号隔开。 4. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。 5. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。 6. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
formatter中css写法
文章标题：深度解析formatter中的CSS写法一、引言在当今的网页设计和开发中，CSS作为前端开发的重要组成部分，其写法一直备受关注和讨论。
特别是在formatter中的CSS写法，更是需要我们深入了解和研究。
在本篇文章中，我们将从简到繁，由浅入深地探讨formatter中的CSS写法，以便读者能更深入地理解这一主题。
二、什么是formatter中的CSS写法？在介绍formatter中的CSS写法之前，首先我们需要了解什么是formatter。
formatter是一种用于美化、格式化代码的工具，可以使代码整齐、易读，并且符合特定的代码风格规范。
而在这些代码风格规范中，CSS写法作为前端开发的重要组成部分，需要我们深入了解和掌握。
三、为什么重视formatter中的CSS写法？1. 代码可读性在团队协作开发过程中，良好的CSS写法可以增强代码的可读性，让团队成员更容易理解和维护代码，提高工作效率。
2. 代码规范性良好的CSS写法可以保证代码的规范性，减少代码错误和bug的产生，提高代码的质量和稳定性。
3. 前端性能优化精简、高效的CSS写法可以减少页面加载时间，提高网页性能，从而提升用户体验。
四、如何在formatter中编写优质的CSS？1. 命名规范在formatter中编写CSS时，应该遵循良好的命名规范，采用有意义且简洁的类名和ID名，以便于代码的维护和扩展。
2. 嵌套规范在编写嵌套的CSS样式时，应尽量避免过深的嵌套结构，保持代码的清晰和简洁。
3. 属性顺序在书写CSS属性时，应该遵循统一的属性顺序，将相似属性进行分组，以便于代码的管理和阅读。
4. 代码缩进良好的代码缩进可以提高代码的可读性，减少代码出错的可能性，应该在formatter中注重代码缩进的规范。
五、总结回顾通过对formatter中的CSS写法的全面评估和深度探讨，我们不仅加深了对这一主题的理解，更学习到了如何编写高质量、深度和广度兼具的CSS样式。
css属性及属性值
css属性及属性值1、css 背景属性： background 在⼀个声明中设置所有的背景属性。
1 background-attachment 设置背景图像是否固定或者随着页⾯的其余部分滚动。
1 background-color 设置元素的背景颜⾊。
1 background-position 设置背景图像的开始位置。
background-image 设置元素的背景图像。
1 url('URL') 指向图像的路径。
none 默认值。
不显⽰背景图像。
inherit 规定应该从⽗元素继承 background-image 属性的设置。
background-repeat 设置是否及如何重复背景图像。
repeat 默认。
背景图像将在垂直⽅向和⽔平⽅向重复。
repeat-x 背景图像将在⽔平⽅向重复。
repeat-y 背景图像将在垂直⽅向重复。
no-repeat 背景图像将仅显⽰⼀次。
inherit 规定应该从⽗元素继承 background-repeat 属性的设置。
2、css 边框属性：border 在⼀个声明中设置所有的边框属性。
border-width 规定边框的宽度。
参阅：border-width 中可能的值。
border-style 规定边框的样式。
参阅：border-style 中可能的值。
solid 定义实线。
border-color 规定边框的颜⾊。
参阅：border-color 中可能的值。
border-bottom 在⼀个声明中设置所有的下边框属性。
border-bottom-color 设置下边框的颜⾊。
border-bottom-style 设置下边框的样式。
border-bottom-width 设置下边框的宽度。
border-color 设置四条边框的颜⾊。
border-left 在⼀个声明中设置所有的左边框属性。
border-left-color 设置左边框的颜⾊。
css书写规则
css书写规则Div+css命名规范Css的命名是区分大小写的，建议全部使用小写。
下面总结一下最好的命名准则，好的命名不仅有利于维护人员阅读对搜索搜索引擎优化(seo)有很大的好处。
其中对代码的优化是一个很关键的步骤。
为了更加符合SEO的规范，下面是目前流行的CSS+DIV的命名规则，并做了些补充：1.1. div+css命名规范页头:header登录条:loginBar标志:logo侧栏:sideBar广告:banner导航:nav子导航:subNav菜单:menu子菜单:subMenu搜索:search滚动:scroll页面主体:main内容:content标签页:tab文章列表:list提示信息:msg小技巧:tips栏目标题:title友情链接:friendLink页脚:footer加入:joinus指南:guild服务:service热点:hot新闻:news下载:download注册:regsiter状态:status按钮:btn投票:vote合作伙伴:partner版权:copyRight产品管理1.2. CSS的Id命名规范外套:wrap主导航:mainNav子导航:subnav页脚:footer整个页面:content页眉:header页脚:footer商标:label标题:title主导航:mainNav(globalNav)顶导航:topnav边导航:sidebar左导航:leftsideBar右导航:rightsideBar旗志:logo标语:banner菜单内容1:menu1Content菜单容量:menuContainer子菜单:submenu边导航图标:sidebarIcon注释:note面包屑:breadCrumb(即页面所处位置导航提示) 容器:container内容:content搜索:search登陆:login功能区:shop(如购物车，收银台)当前的：current1.3. css样式文件命名主要的:master.css布局版面:layout.css专栏:columns.css文字:font.css打印样式:print.css主题:themes.css通用：basic.css上面的命名规范很直观，即使程序人员不添加注释，我们也会很清楚的知道是什么意思。
六、CSS入门
六、CSS⼊门CSS核⼼基础CSS样式规则选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}CSS代码结构中的特点CSS样式中的选择器严格区分⼤⼩写，属性和值不区分⼤⼩写，按照书写习惯⼀般将“选择器、属性和值”都采⽤⼩写的⽅式。
多个属性之间必须⽤英⽂状态下的分号隔开，最后⼀个属性后的分号可以省略，但是，为了便于增加新样式最好保留。
如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英⽂状态下的引号。
在编写CSS代码时，为了提⾼代码的可读性，通常会加上CSS注释。
在CSS代码中空格是不被解析的，花括号以及分号前后的空格可有可⽆。
属性和属性值之间不允许出现空格，否则浏览器会报错引⼊CSS样式表优先级：如果三种样式同时控制我们的内容：⾏内优先级最⾼外部样式，内部样式：谁离着内容近，谁优先级⾼1、⾏内式⾏内式也称为内联样式，是通过标记的style属性来设置元素的样式<标记名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标记名>style是标记的属性，实际上任何HTML标记都拥有style属性，⽤来设置⾏内式。
其中属性和值的书写规范与CSS样式规则相同，⾏内式只对其所在的标记及嵌套在其中的⼦标记起作⽤。
2、内嵌式内嵌式是将CSS代码集中写在HTML⽂档的<head>头部标记中，并且⽤<style>标记定义<style>标记定义，其基本语法格式如下：<head><style type="text/css">选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</style></head><style>标记⼀般位于<head>标记中<title>标记之后，也可以把他放在HTML⽂档的任何地⽅。
解析CSS选择器的优先级与层叠规则
解析CSS选择器的优先级与层叠规则CSS（层叠样式表）选择器的优先级和层叠规则在网页设计中起到了至关重要的作用。
了解选择器的优先级和层叠规则对于开发人员来说是非常重要的，因为它们决定了哪些样式将应用于特定的HTML元素。
本文将深入探讨CSS选择器的优先级和层叠规则，并解析它们的用法和应用。
一、CSS选择器的优先级在CSS中，当多个选择器应用于同一个HTML元素时，将根据选择器的优先级来确定使用哪个选择器的样式。
CSS选择器的优先级通过权重进行计算。
下面是计算CSS选择器优先级的规则：1. 内联样式（Inline styles）：在元素的style属性中定义的样式具有最高的优先级。
例如：```html<div style="color: red;">这是一个红色的文本</div>```2. ID选择器（ID selectors）：使用id属性定义的选择器具有次高的优先级。
例如：```css#myElement {color: blue;```3. 类选择器、属性选择器和伪类选择器（Class selectors, attribute selectors, and pseudo-class selectors）：这些选择器具有相同的优先级。
例如：```css.myClass {color: green;}[type="text"] {font-size: 16px;}a:hover {color: purple;}```4. 元素选择器和伪元素选择器（Element selectors and pseudo-element selectors）：这些选择器具有最低的优先级。
例如：```cssfont-weight: bold;}::after {content: "这是段落的伪元素";}```当使用多个选择器应用于同一个HTML元素时，根据以上规则，权重较高的选择器的样式将被应用。
CSS样式书写顺序及规范
CSS样式书写顺序及规范作者:WangMin格⾔:努⼒做好⾃⼰喜欢的每⼀件事在项⽬中，⼤部分前端程序员都没有按照良好的CSS书写规范来写CSS代码，每次写css样式都是⽤到什么就在样式表后添加什么，完全没有考虑到样式属性的书写顺序对⽹页加载代码的影响。
后来逐渐才知道正确的样式顺序不仅易于查看，并且也属于css样式优化的⼀种⽅式。
下⾯就开始学习吧！！各种类型属性的书写顺序及作⽤书写顺序优先级第⼀定位属性：position display float left top right bottom overflow clear z-index优先级第⼆⾃⾝属性：width height padding border margin background优先级第三⽂字样式：font-family font-size font-style font-weight font-varient color优先级第四⽂本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow line-height优先级第五css3中新增属性：content box-shadow border-radius transform……书写顺序的作⽤减少浏览器reflow（回流），提升浏览器渲染dom的性能。
解析html构建dom树，解析css构建css树：将html解析成树形的数据结构，将css解析成树形的数据结构构建render树：DOM树和CSS树合并之后形成的render树。
布局render树：有了render树，浏览器已经知道那些⽹页中有哪些节点，各个节点的css定义和以及它们的从属关系，从⽽计算出每个节点在屏幕中的位置。
css属性大全
字体属性：(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;(表格标题)方框属性： (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(/; /*图片式符号*/?list-style-position: outside; /*凸排*/?list-style-position:inside; /*缩进*/?四、CSS背景样式：background-color:#F5E2EC; /*背景颜色*/??background:transparent; /*透视背景*/?background-image : url(/image/; /*背景图片*/?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|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}?3 段首空格?? {text-indent:数值|inherit}?4 水平对齐 {text-align:left|right|center|justify}??5 垂直对齐{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|su per}??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|groov e}?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-alph a|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-resiz e|se-resize|sw-resize}。