当前位置：文档之家 › 【最新推荐】css规则-优秀word范文 (18页)

【最新推荐】css规则-优秀word范文 (18页)

  • 格式：docx
  • 大小：20.67 KB
  • 文档页数：18

本文部分内容来自网络整理，本司不为其真实性负责，如有异议或侵权请及时联系，本司将立即删除！== 本文为word格式，下载后可方便编辑和修改！ ==css规则篇一：CSS规则CSS规则说明添加方式：① 链接式：⑴ <link href="*.css" rel="stylesheet" type="text/css" />⑵ @import url (*.css) ② 直接添加到HTML：在<head><style type="text/css">…… </style></head>中直接添加规则。

规则：类别选择符：类别选择符让你对给定的类别应用CSS。

如果我们有下面这条CSS规则：p.bold { font-weight:bold;} 对应下面的HTML：<p class=”bold”>…… </p>ID选择符：ID选择符有点像类别选择符，只不过每一夜只能用在一个元素上。

如果给定以下CSS规则： P#bold { font-weight:bold;} 对应下面的HTML：<p id=”bold”>…… </p>群选择符：可以同时为多个选择符应用同一套规则： p,h1,h2 { text-align:left;}每个选择符之间用逗号隔开。

甚至还可以在群选择符中参杂ID类别等： p.navigation,h1#title { font-weight:bold;}CSS Color 属性：在CSS中，可以用颜色属性来指定任意元素的颜色： P {color: red; }5种定义颜色的方法：color: rgb(rrr,ggg,bbb)背景颜色属性：与颜色属性规则类似： P {background-color: red; }其定义颜色方法与颜色属性相同。

The Box Model (4个关系)指定RGB三原色的数值(0-255)Margin (边界距)边框宽度：border-weight:5pxborder-weight:1em以下是设置元素边框宽度的规则：Property Value border-weight thin border-weight medium border-weight thick border-weight<length> border-top-weight <length> border-right-weight <length> border-bottom-weight <length>border-left-weight <length>边框颜色：边框颜色属性的指定方式与其他颜色属性一样：Description 默认边框宽度用具体数值来指定设置上边框设置右边框设置下边框设置左边框border-color:redborder-color:#00FF00border-color:rgb(10%,80%,0)规则如下：创建一个带风格的边框，可以直接通过风格的名称来指定：Property Value border-style: none border-style: hidden border-style: dotted border-style: dashed border-style: solid border-style: double border-style: groove border-style: ridge border-style: inset border-style: outset边界距：边界距属性是用来指定两个元素边框之间的距离：margin-bottom:margin-left:margin:<length> <length><top><right><bottom><left>设置下边界距设置左边界距设置每个边界距填充属性：填充属性用来控制元素边框内空间的大小：padding-bottom:<length> 设置下填充背景图片：在CSS中，可以对任何元素指定背景图片：篇二：CSS规则定义英汉对照表CSS规则定义英汉对照表一、类型font-family：字体font-size ：字体大小font-weight：字体浓淡font-style ：字体风格如：斜体、正常等font-variant ：字体变量（用来设定字体是正常显示，还是以小型大写字母显示）line-height ：行高（用来设定字行间距）text-transform：文本转换（用来设定字体的大小写转换）text-decoration(字体装饰)：underline下划线overline 上划线line-through 线-穿过blink闪光none 无二、背景background-color(C) ：背景颜色background-image(I) ：背景图片background-repeat(R) ：背景重复background-attachment(T) ：背景附着（用来设定背景图片是否随文档滚动）background-position(X) ：背景位置Xbackground-position(Y)：背景位置Yword-spacing ：词间距letter-spacing ：字符间距vertical-align ：垂直对齐text-aline ：水平对齐text-indent ：文本缩进white-space：空白dispaly ：显示四、方框width：宽度height：高度float：漂浮clear：规定元素的哪一侧不允许出现其他浮动元素padding：间隙（设定间隙的宽度）margin ：边距（用来设定边距的宽度）五、边框style：样式（如：虚线等等）width：宽度color：颜色六、列表list-style-type：列表样式类型（用来设定列表项标记（list-item marker）的类型）list-style-image ：列表样式图片（用来设定列表样式图片标记的地址）list-style-position：列表样式位置（用来设定列表样式标记的位置）position：位置width：宽度height ：高度visibility ：规定元素是否可见（即使不可见，但仍占用空间，建议使用display来创建不占页面空间的元素）Z-index：设置元素的堆叠顺序（该属性设置一个定位元素沿z轴的位置，z 轴定义为垂直延伸到显示区的轴。

如果为正数，则离用户更近，为负数则表示离用户更远）overflow：规定当内容溢出元素框时发生的事情placement：放置clip：裁剪绝对定位元素八、扩展分页：page-break-before page-break-after视觉效果：cursor 规定要显示的光标的类型（鼠标放在指定位置鼠标的形状）filter注：请尽量少的使用分页属性，并且避免在表格、浮动元素、带有边框的元素中使用分页属性篇三：CSS规则定义CSS规则定义一、类型Font-family：字体font-size：字体大小：xx-small最小x-small 较小medium 正常（默认值）large大x-large 较大xx-large最大larger 相对于父元素中字体尺寸进行相对增大值 px(像素) pt (点数)in (英寸)cm (厘米)mm (毫米)pc (十二点活字，1 pc＝ 12pt)em: 2em相当于当前字体的2倍大小%（百分比）font-weight：字体粗细normal缺省值。

字体正常显示。

bold 粗体bolder比粗体更加粗lighter 比正常字体细100特细200较细300细400正常，相当于normal500变粗600较粗700粗体，相当于bold800更粗900特粗font-style：字体风格normalitalic正常（默认值）斜体oblique让没有斜体属性的文字倾斜font-variant：字体变量normal正常（默认值）small-caps小型大写字母的字体显示文本line-height：行高normal值正常（默认值）text-transform：文本大小写转换capitalize首字大写uppercase 英文大写lowercase 英文小写none 无text-decoration：(字体装饰)underline 下划线overline上划线line-through 删除线（线从字体中间穿过）blink闪光、闪烁（一般不用）none 无二、背景background-color：背景颜色background-image：背景图片background-repeat：背景重复repeat 背景图像将在垂直方向和水平方向重复（默认）repeat-x 背景图像将在水平方向重复repeat-y 背景图像将在垂直方向重复no-repeat 背景图像将仅显示一次。

background-attachment：背景附着scrollfixed 背景图像会随着页面文档的滚动而滚动（默认）背景图像不随着页面文档滚动background-position X：X轴背景位置left居左center 居中right 居右值距离左边框的值（px）background-position Y：Y背景位置top 置顶部center 居中bottom 置底部值距离顶部边框的值（px）三、区块word-spacing：词间距normal值normal值正常（默认值） letter-spacing：字符间距正常（默认值）vertical-align：垂直对齐baseline 元素放置在父元素的基线上（默认）sub 垂直对齐文本的下标。

super 垂直对齐文本的上标top 把元素的顶端与行中最高元素的顶端对齐text-top 把元素的顶端与父元素字体的顶端对齐middle 把此元素放置在父元素的中部bottom 把元素的顶端与行中最低元素的顶端对齐text-bottom把元素的底端与父元素字体的底端对齐值text-aline：水平对齐left左边对齐（默认值：由浏览器决定）right 右边对齐center 中间对齐justify 两端对齐text-indent：文本缩进值 pixels（像素）points (点数)in (英寸)cm (厘米)mm (毫米)picas (十二点活字，1 pc＝ 12pt)emx（字体高），2em相当于当前字体的2倍大小exs（字母X的高）%（父元素的百分比）white-space空白normal 空白会被浏览器忽略（默认）pre 空白会被浏览器保留，其行为方式类似 HTML中的 <pre> 标签nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。

合集下载

css选择器规则

css选择器规则

CSS选择器规则CSS（层叠样式表）是一种用于描述网页中元素样式的语言。

选择器是CSS中用来选择要应用样式的HTML元素的一种方式。

选择器规则是由选择器和一组样式声明组成的。

选择器的基本概念选择器是用来选择要应用样式的HTML元素的模式。

选择器可以根据元素的标签名、类名、ID等属性进行选择。

元素选择器元素选择器是最基本的选择器，它通过元素的标签名来选择元素。

例如，p选择器可以选择所有的<p>元素。

p {color: red;}上述代码将选择所有的<p>元素，并将它们的文本颜色设置为红色。

类选择器类选择器通过元素的class属性来选择元素。

类选择器以.开头，后面跟着类名。

例如，.red选择器可以选择所有具有class="red"的元素。

.red {color: red;}上述代码将选择所有具有class="red"的元素，并将它们的文本颜色设置为红色。

ID选择器ID选择器通过元素的id属性来选择元素。

ID选择器以#开头，后面跟着ID名。

例如，#title选择器可以选择具有id="title"的元素。

#title {font-size: 24px;}上述代码将选择具有id="title"的元素，并将它们的字体大小设置为24像素。

属性选择器属性选择器通过元素的属性来选择元素。

属性选择器以[属性名=属性值]的形式出现。

例如，[type="text"]选择器可以选择所有type属性值为text的元素。

[type="text"] {border: 1px solid gray;}上述代码将选择所有type属性值为text的元素，并将它们的边框样式设置为1像素的灰色实线。

后代选择器后代选择器用于选择某个元素的后代元素。

后代选择器使用空格分隔两个选择器。

例如，div p选择器可以选择所有在<div>元素内部的<p>元素。

CSS书写规范、顺序和命名规则

CSS书写规范、顺序和命名规则

CSS书写规范、顺序和命名规则这些是参考了国外⼀些⽂章以及我的个⼈经验总结出来，我想对写CSS的前端⽤户来说是值得学习的。

⼀、CSS书写顺序1.位置属性(position, top, right, z-index, display, float等)2.⼤⼩(width, height, padding, margin)3.⽂字系列(font, line-height, letter-spacing, color- text-align等)4.背景(background, border等)5.其他(animation, transition等)⼆、CSS书写规范1.使⽤CSS缩写属性CSS有些属性是可以缩写的，⽐如padding,margin,font等等，这样精简代码同时⼜能提⾼⽤户的阅读体验。

2.去掉⼩数点前的“0”3.简写命名很多⽤户都喜欢简写类名，但前提是要让⼈看懂你的命名才能简写哦！4.16进制颜⾊代码缩写有些颜⾊代码是可以缩写的，我们就尽量缩写吧，提⾼⽤户体验为主。

5连字符CSS选择器命名规范1）.长名称或词组可以使⽤中横线来为选择器命名。

2）.不建议使⽤“_”下划线来命名CSS选择器，为什么呢？输⼊的时候少按⼀个shift键；浏览器兼容问题（⽐如使⽤_tips的选择器命名，在IE6是⽆效的）能良好区分JavaScript变量命名（JS变量命名是⽤“_”）6.不要随意使⽤idid在JS是唯⼀的，不能多次使⽤，⽽使⽤class类选择器却可以重复使⽤，另外id的优先级优先与class，所以id应该按需使⽤，⽽不能滥⽤。

7.为选择器添加状态前缀有时候可以给选择器添加⼀个表⽰状态的前缀，让语义更明了，⽐如下图是添加了“.is-”前缀。

三、CSS命名规范（规则）常⽤的CSS命名规则头：header内容：content/container尾：footer导航：nav侧栏：sidebar栏⽬：column页⾯外围控制整体佈局宽度：wrapper左右中：left right center登录条：loginbar标志：logo⼴告：banner页⾯主体：main热点：hot新闻：news下载：download⼦导航：subnav菜单：menu⼦菜单：submenu搜索：search友情链接：friendlink页脚：footer版权：copyright滚动：scroll内容：content标签：tags⽂章列表：list提⽰信息：msg⼩技巧：tips栏⽬标题：title加⼊：joinus服务：service注册：regsiter状态：status投票：vote合作伙伴：partner注释的写法:/* Header */内容区/* End Header */id的命名:1)页⾯结构容器: container页头：header内容：content/container页⾯主体：main页尾：footer导航：nav侧栏：sidebar栏⽬：column页⾯外围控制整体佈局宽度：wrapper 左右中：left right center(2)导航导航：nav主导航：mainnav⼦导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar菜单：menu⼦菜单：submenu标题: title摘要: summary(3)功能标志：logo⼴告：banner登陆：login登录条：loginbar注册：register搜索：search功能区：shop标题：title加⼊：joinus状态：status按钮：btn滚动：scroll标籤页：tab⽂章列表：list提⽰信息：msg当前的: current⼩技巧：tips图标: icon注释：note指南：guild热点：hot新闻：news下载：download投票：vote合作伙伴：partner友情链接：link版权：copyright四、注意事项::1.⼀律⼩写;2.尽量⽤英⽂;3.不加中槓和下划线;4.尽量不缩写，除⾮⼀看就明⽩的单词。

CSS编码规范【推荐】

CSS编码规范【推荐】

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进行标识的时候，最自然的想法就是使用可以描述元素所在页面位置的词汇来对其命名。

CSS的规范

CSS的规范

(一)xhtml的规范：1、所有的xhtml代码英文小写2、属性的值一定要用双引号("")括起来，且一定要有值3、每个标签都要有开始和结束，且要有正确的层次4、表现与结构完全分离，代码中尽量不涉及任何的表现元素，如style、font、bgColor、border等5、<h1>到<h5>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询6、给重要的区块加上注释7、图片要加alt注释(二)CSS的规范：1、id和class命名采用该版块的英文单词或组合命名，并第一个单词小写，第二个单词首个字母大写，如:newRelease（最新产品/new+Release) ,或者用下划线链接new_Release.2、CSS样式表各区块用注释说明注释的写法:/* Footer */内容区/* End Footer */3、尽量使用英文命名原则，尽量不缩写，除非一看就明白的单词class的命名:(1)颜色:使用颜色的名称或者16进制代码,如.red { color: red; }.f60 { color: #f60; }.ff8600 { color: #ff8600; }(2)字体大小,直接使用"font+字体大小"作为名称,如.font12px { font-size: 12px; }.font9pt {font-size: 9pt; }(3)对齐样式,使用对齐目标的英文名称,如.left { float:left; }.bottom { float:bottom; }(4)标题栏样式,使用"类别+功能"的方式命名,如.barnews { }.barproduct { }(5)页面结构容器：#container布局：#layout头部：#head、#header尾部：#foot、#footer侧栏：#sidebar左边栏：#sidebarLeft右边栏：#sidebarRight页面主体：#main栏目：#column包装/外套：#wrapper、wrap内容：#content(6)导航导航：#nav主导航：#mainNav顶导航：#topNav左导航：leftNav右导航：rightNav下导航：bottomNav二级导航：#subNav菜单：#menu二级菜单：#subMenu下拉：.drop下拉菜单：.dropMenu(7)功能标签：.tab、.tag提示信息：.msg、.message小技巧：.tips注释：.note热点：.hot摘要：.summary帮助：.help投票：.vote指南：.guild商标：.branding标签：.label工具条：.tool、.toolBar标题：.titleLOGO：.logo搜索：.search搜索条：.searchBar搜索框：.searchBox搜索输入框：.search_input搜索输出框：.search_output 搜索结果：.search_results注册：.register登录：.login登录条：.loginBar登录框：.loginBox友情链接：.friendLink、.link 广告/标语：.banner版权信息：.copyright加入我们：.joinUs合作伙伴：.partner服务：.service网站地图：.siteMap、.map缩略图：.screenShot产品：products产品价格：products_prices产品描述：products_description产品评论：products_review最新产品：new_products生产商：suppliers、publisher编辑：editor编辑评论：editor_review博客：blog论坛：forum新闻：news下载：download网站信息：.siteinfo法律声明：.legal信誉：.credits列表：.list(8)其他左中右：left、center、right上中下：top、middle、bottom按钮：btn面包屑：breadcrumb(即页面所处位置导航提示) 滚动：scroll当前：current图标：icon箭头：arrow首页：homePage、home二级页面：subPage状态：status常见问题：faqs、questions关键词：keyword(三)CSS文件名称顶部：top.css底部：bottom.css共享 share.css基本共用 base.css布局，版面 layout.css主要的 master.css模块 module.css主题 themes.css专栏 columns.css文字 font.css表单 forms.css补丁 mend.css打印 print.css行或排：row1th,row2th,row3th,row4th...列或纵：col1th,col2th,col3th,col4th...(四)页面图片等的遵循以下几条规范页面图片用gif和jpg，在不失真前提下，越小越好。