CSS默写标准文档(1.2)全

CSS命名规范参考及书写注意事项

CSS命名规范参考及书写注意事项，这里整理的比较全，web前端开发的朋友非常值得参考下。

CSS书写顺序*{/*显示属性*/displaypositionfloatclearcursor…/*盒模型*/marginpaddingwidthheight/*排版*/vertical-alignwhite-spacetext-decorationtext-align…/*文字*/colorfontcontent/*边框背景为什么要把boder和background放在最后的原因是修改的频率会较之前的频繁，放在最后查看起来方便，哈哈。

*/borderbackground}下表顺序为从上到下，从左到右：========================display || visibilitylist-style : list-style-type || list-style-position || list-style-imagepositiontop || right || bottom || leftz-indexclearfloatwidthmax-width || min-widthheightmax-height || min-heightoverflow || clipmargin : margin-top || margin-right || margin-bottom || margin-leftpadding : padding-top || padding-right || padding-bottom || padding-leftoutline : outline-color || outline-style || outline-widthborderbackground : background-color || background-image || background-repeat || background-attachment || background-positioncolorfont : font-style || font-variant || font-weight || font-size || line-height || font-familyfont : caption | icon | menu | message-box | small-caption | status-bartext-overflowtext-aligntext-indentline-heightwhite-spacevertical-aligncursorCSS命名规则：一．文件命名规范全局样式：global.css；框架布局：layout.css；字体样式：font.css；链接样式：link.css；打印样式：print.css；主要的master.css专栏columns.css主题themes.css主要的master.css模块module.css基本共用base.css表单forms.css补丁mend.css二．页面结构容器: container页头：header内容：content页面主体：main页尾：footer栏目：column页面外围控制整体布局宽度：wrapper 左右中：left right center三．导航导航：nav主导航：mainbav子导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar菜单：menu子菜单：submenu摘要: summary四．功能标志：logo广告：banner登陆：login登录条：loginbar注册：regsiter搜索：search功能区：shop标题：title加入：joinus状态：status按钮：btn滚动：scroll标签页：tab文章列表：list提示信息：msg当前的: current小技巧：tips图标: icon注释：note指南：guild服务：service热点：hot新闻：news下载：download投票：vote合作伙伴：partner友情链接：link版权：copyrightContainer div#container容器Layout#layout布局Header or banner div#head, #header页头部分Footer div#foot, #footer页脚部分Navigation list#nav主导航Sub-navigation list#subNav二级导航Menu#menu菜单Sub Menu#submenu子菜单Left or right side columns #sidebar_a, #sidebar_b左边栏或右边栏Main div#main页面主体Tag#tag标签Message#msg #message提示信息Tips#tips小技巧V ote#voteFriend Link#friendlink友情连接Title#title标题Summary#summary摘要Search input#searchInput搜索输入框Search output#search_output搜索输出和搜索结果相似Search#search搜索Search bar#searchBar搜索条Search results#search_results搜索结果Copyright information#copyright版权信息brand#branding商标branding-logo#logoLOGOSite information#siteinfo网站信息Copyright information etc. #siteinfoLegal法律声明Designer or other credits #siteinfoCredits信誉Join us加入我们Partnership opportunities #partner合作伙伴Services#service服务Regsiter#regsiter注册Arrowarr/arrow箭头Little#little标题Website map#sitemap网站地图List#list列表Home page#homepage首页Sub pagesubpage二级页面子页面Toolbar#tool, #toolbar工具条Next pulls#drop下拉Next pulls menu#dorpmenu下拉菜单Status#status状态Container div#container容器Header or banner div#header页头部分Main or global navigation div #mainNav主导航Menu#menu菜单Sub Menu#submenu子菜单Left or right side columns#sidebarA, #sidebarB左边栏或右边栏Main div#main页面主体Content div#content内容部分The main content area#contentMain主要内容区域Footer div#footer页脚部分Tag#tag标签Message#msg #message提示信息Tips#tips小技巧V ote#vote投票Friend Link#friendlink友情连接Title#titleSummary#summary摘要Sub-navigation list#subNav二级导航Search input#searchInput搜索输入框Search output#searchOutput搜索输出和搜索结果相似Search#search搜索Search results#searchResults搜索结果Copyright information#copyright版权信息brand#branding商标branding-logo#brandingLogoLOGOSite information#siteinfo网站信息Copyright information etc. #siteinfoLegal法律声明Designer or other credits #siteinfoCredits信誉Join us#joinus加入我们Partnership opportunities #partner合作伙伴Services服务Regsiter#regsiter注册Status#status状态Products.products产品Products prices.productsPrices产品价格Products description .productsDescription 产品描述Products review.productsReview产品评论Editor’s review.editorReview编辑评论New release.newsRelease最新产品Publisher.publisher生产商Screen shot.screenshot缩略图FAQ.faqs常见问题Keyword.keyword关键词Blog.blog博客Forum.forum论坛五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 { }XHTML-CSS写作建议1. 所有的xhtml代码小写2. 属性的值一定要用双引号(“”)括起来，且一定要有值3. 每个标签都要有开始和结束，且要有正确的层次4. 空元素要有结束的tag或于开始的tag后加上“/”5. 表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border 等6. <h1>到<h5>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。

css基础知识总结

css基础知识总结CSS基础知识总结CSS（Cascading Style Sheets）是一种用于描述网页上元素样式的标记语言。

它与HTML结合使用，可以控制网页的布局、颜色、字体、大小等方面的样式。

本文将对CSS的基础知识进行总结，包括选择器、属性、值、盒模型和布局等内容。

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

常见的选择器包括标签选择器、类选择器、ID选择器、伪类选择器和伪元素选择器等。

标签选择器通过HTML标签名选中元素，类选择器通过元素的class属性选中元素，ID选择器通过元素的id属性选中元素，伪类选择器通过元素的特殊状态选中元素，伪元素选择器用来选中元素的特定部分。

二、属性和值CSS的属性用于描述元素的样式特征，值则用于定义属性的具体取值。

常见的属性包括color（颜色）、font-size（字体大小）、background（背景）、margin（外边距）、padding（内边距）等。

每个属性都有一组可选的值，如颜色可以是具体的颜色值（如红色、蓝色），字体大小可以是像素值或百分比等。

三、盒模型盒模型是CSS中用来描述元素在页面中所占空间的模型。

每个元素都被看作是一个矩形的盒子，包括内容区域、内边距、边框和外边距。

内容区域包含了实际的内容，内边距是内容区域与边框之间的距离，边框是一个可见的线条，外边距是盒子与其他盒子之间的距离。

四、布局布局是指网页中元素的排列方式和位置。

CSS提供了多种布局方式，包括流动布局、浮动布局、定位布局和弹性布局等。

流动布局是默认的布局方式，元素按照其在HTML中的顺序从上到下依次排列。

浮动布局通过将元素从正常的文档流中取出，并使其向左或向右浮动，以实现元素的排列。

定位布局通过指定元素的位置属性和偏移量来确定元素的位置。

弹性布局是一种响应式的布局方式，可以根据屏幕大小自动调整元素的排列。

五、其他常用属性除了上述基础知识外，CSS还有一些其他常用的属性。

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 概述1.CSS 的定义2.CSS 的作用3.CSS 与HTML 的关系二、CSS 的基本语法与选择器1.基本语法2.选择器类型a.元素选择器b.类选择器c.ID 选择器d.属性选择器三、CSS 常用属性1.文本属性a.字体b.字号c.颜色d.行高e.字间距2.背景属性a.背景颜色b.背景图片c.背景重复d.背景位置3.边框属性a.边框宽度b.边框样式c.边框颜色d.圆角边框4.布局属性a.定位方式i.静态定位ii.相对定位iii.绝对定位iv.固定定位b.浮动c.清除浮动d.定位与浮动的结合使用5.列表属性a.列表样式b.列表符号四、CSS 的盒模型1.盒模型的组成2.内容区3.内边距4.边框5.外边距五、CSS 的响应式布局1.媒体查询2.百分比单位3.弹性布局正文：【CSS 相关笔记】CSS 是一种用于描述HTML 或XML（包括SVG，MathML 等）文档样式的样式表语言。

CSS 不仅可以应用于网页设计，还可以应用于其他领域，如桌面应用程序、移动应用程序等。

CSS 的作用是使开发者可以将样式与内容分离，方便统一管理和修改样式。

CSS 与HTML 的关系非常密切。

HTML 负责文档的结构，而CSS 负责文档的样式。

通常，我们在HTML 文档中通过`<style>`标签或者外部样式表引入CSS 代码。

CSS 的基本语法主要包括选择器、属性以及属性的值。

选择器用于选取需要设置样式的元素，例如元素选择器、类选择器、ID 选择器和属性选择器等。

属性用于设置元素的样式，例如字体、字号、颜色、背景、边框等。

属性的值则决定了元素的样式效果。

CSS 有很多常用的属性，例如文本属性、背景属性、边框属性和布局属性等。

文本属性用于设置文本的样式，如字体、字号和颜色等；背景属性用于设置元素的背景颜色或图片等；边框属性用于设置元素的边框宽度、样式和颜色等；布局属性则用于设置元素的位置、浮动和布局方式等。

CSS帮助手册

CSS帮助手册2篇CSS帮助手册（上）CSS（层叠样式表）是一种用于描述网页中元素的样式和布局的标记语言。

它通过为HTML元素添加样式，实现了网页的美化和个性化。

本篇文章将为大家介绍CSS的基本语法、选择器和常用样式属性。

一、CSS基本语法CSS的语法由选择器和声明块组成。

选择器用于选择需要添加样式的HTML元素，而声明块则包含了一系列样式属性和值。

1. 选择器选择器是CSS中最重要的部分，它用于指定需要应用样式的HTML元素。

常见的选择器有：- 元素选择器：通过HTML元素的标签名选择元素，如`p`表示所有`<p>`元素。

- 类选择器：通过HTML元素的`class`属性选择元素，如`.red`表示所有`class`为red的元素。

- ID选择器：通过HTML元素的`id`属性选择元素，如`#header`表示`id`为header的元素。

- 属性选择器：通过HTML元素的属性选择元素，如`[type="text"]`表示所有`type`属性为text的元素。

- 伪类选择器：通过HTML元素的特殊状态选择元素，如`:hover`表示鼠标悬停时的元素。

2. 声明块声明块由一对花括号`{}`包裹，每个声明由属性和值构成。

属性用于指定需要修改的样式，值用于指定属性的具体取值。

例如，下面的CSS代码将为所有`<p>`元素设置红色字体:```cssp {color: red;}```二、常用的CSS样式属性CSS提供了众多样式属性，可以用来修改HTML元素的外观和布局。

以下是常用的样式属性及其作用：1. 字体样式- `color`：用于设置文本颜色，值可以是颜色名称或RGB值。

- `font-size`：用于设置字体大小，值可以是像素、百分比或者其他单位。

- `font-family`：用于设置字体样式，值可以是字体名称或者字体族名称。

2. 边框样式- `border`：用于设置边框样式，属性值由边框宽度、边框样式和边框颜色组成。

css技术文档

<div id="content2">这里是要应用换行的内容</div><script language="javascript">toBreakWord(60, "content2");</script>
注：把应用的JS写在</div>后面，其中60表示一行要显示多少字字符，注意多个调用时ID的相应变化，不能同一个ID名称，应用上面的方法后IE也会是按设定的字符数换行，但是IE里面支持自动换行，所以只要判断一下是否为IE，如果不是IE就不要输出。
----------------------------------------------------------------------------------------------
IE下CSS溢出隐藏失败(IE overflow:hidden失效)
解决方法：父节点定位relative、子节点定位absolute 可解决
解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。
例：上面可改成如下所示
<div id="box">
<div style="overflow:hidden;height:0px;"></div>
table中cellspacing、cellpadding的css替代写法
table{border:0;margin:0;border-collapse:collapse;border-spacing :0;}/*控制cellspacing*/

css参考手册(完美整理版)

CSS 背景属性（Background）属性描述CSS background在一个声明中设置所有的背景属性。

1 background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。

1 background-color设置元素的背景颜色。

1 background-image设置元素的背景图像。

1 background-position设置背景图像的开始位置。

1 background-repeat设置是否及如何重复背景图像。

1CSS 边框属性（Border 和Outline）属性描述CSS border在一个声明中设置所有的边框属性。

1 border-bottom在一个声明中设置所有的下边框属性。

1 border-bottom-color设置下边框的颜色。

2 border-bottom-style设置下边框的样式。

2 border-bottom-width设置下边框的宽度。

1 border-color设置四条边框的颜色。

1 border-left在一个声明中设置所有的左边框属性。

1 border-left-color设置左边框的颜色。

2 border-left-style设置左边框的样式。

2 border-left-width设置左边框的宽度。

1 border-right在一个声明中设置所有的右边框属性。

1 border-right-color设置右边框的颜色。

2 border-right-style设置右边框的样式。

2 border-right-width设置右边框的宽度。

1 border-style设置四条边框的样式。

1 border-top在一个声明中设置所有的上边框属性。

1 border-top-color设置上边框的颜色。

2 border-top-style设置上边框的样式。

2 border-top-width设置上边框的宽度。

CSS书写规范及方法

CSS书写规范及方法一. 常规书写规范及方法1. 选择DOCTYPE：XHTML 1.0 提供了三种DTD声明可供选择：过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。

完整代码如下：<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”“/TR/xhtml1/DTD/xhtml1-transitional.dtd“>严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>。

完整代码如下：<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”“/TR/xhtml1/DTD/xhtml1-strict.dtd“>框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。

完整代码如下：<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”“/TR/xhtml1/DTD/xhtml1-frameset.dtd“>理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站，使用的也是过渡型DTD)。

因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。

2. 指定语言及字符集：为文档指定语言：<html xmlns=”/1999/xhtml” lang=”en”>为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言；如：常用的语言定义：<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />标准的XML文档语言定义：<?xml version=”1.0″ encoding=” utf-8″?>针对老版本的浏览器的语言定义：<meta http-equi v=”Content-Language” content=” utf-8″ />为提高字符集，建议采用“utf-8”。

Css知识点归纳总结

Css 知识点总结Css 知识点总结 (1)基本格式： (3)1、派生选择器 (3)2、id 选择器（选择器以"#" 来定义）： (3)如何插入样式表 (4)1、外部样式表 (4)2、内部样式表 (4)3、内联样式 (4)4、多重样式 (4)css背景 (5)1、背景色 (5)2、背景图像 (5)3、背景重复 (6)4、背景定位 (6)5、背景关联 (6)css文本 (7)1、文本颜色：text-indent 属性： (7)2、水平对齐：text-algin属性： (7)3、字间隔：word-spacing 属性 (8)5、字符转换text-transform 属性 (8)6、文本装饰 (8)7、direction 属性规定文本的方向/ 书写方向。

(8)CSS 字体 (9)1、font 属性 (9)2、font-family 属性 (9)3、font-style 属性 (10)4、font-variant 属性 (10)5、font-weight 属性 (10)6、font-size 属性 (11)7、line-height 属性 (11)CSS 列表 (12)1、设置所有的列表属性 (12)2、list-style-type 属性 (12)3、list-style-position 属性 (13)4、list-style-image 属性 (13)CSS 表格 (14)1、border-collapse 属性 (14)2、border-spacing 属性 (14)3、caption-side 属性 (15)4、empty-cells 属性 (15)5、table-layout 属性 (15)CSS 框模型概述 (16)CSS 内边距 (16)CSS 边框 (17)1、border 简写 (17)2、4个边框分别设置 (18)CSS 外边距 (18)1、margin 属性 (18)基本格式：三种格式：（CSS 语法由三部分构成：选择器、属性和值）例：body {color: blue}1、派生选择器例：Css部分：strong {color: red;}h2 {color: red;}h2 strong {color: blue;}Html文件部分:<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p> <h2>This subhead is also red.</h2><h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2> 2、id 选择器（选择器以"#" 来定义）：例：Css部分：#red {color:red;}#green {color:green;}Html 文本：<p id="red">这个段落是红色。

必须要背诵的css属性

需要背诵的属性,没有提到的可以不用管了。

这些都是严格的浏览器兼容的css属性，请务必背诵，同时可以放心使用。

没有提到的一般有浏览器兼容问题，可以不用管。

用这些提到的属性基本上足够用了。

字体Font▪font▪color▪font-family▪font-size▪font-style▪font-weight▪text-decoration▪text-transform▪line-height▪letter-spacing▪word-spacing伪类Pseudo-Classeso:linko:hovero:activeo:visited▪文本Text▪text-indent▪vertical-align▪text-align▪Whites-pace背景Background▪background▪background-color▪background-image▪background-position▪background-repeat定位Positioning▪position属性规定元素的定位类型。

▪top上▪right右▪bottom下▪left左尺寸Dimensions▪height高度▪width宽度布局Layout▪clear clear:none属性规定元素的哪一侧不允许其他浮动元素▪float float:left float:right属性定义元素在哪个方向浮动overflow-x overflow-x： visible | auto | hidden | scroll ∙检索或设置当对象的内容超过其指定宽度时如何管理内容。

▪∙overflow-y检索或设置当对象的内容超过其指定高度时如何管理内容。

overflow-y： visible | auto | hidden | scroll相关属性：overflow , overflow-x取值：visible：不剪切内容也不添加滚动条。

CSS规范_10

CSS规范1.0版2009-10-10一、总则 (2)1.1目的及效力 (2)1.2 CSS书写原则 (2)二、样式重置 (2)2.1重置代码 (2)2.2注意事项 (3)三、CSS书写顺序 (3)3.1样式 (3)3.2注意事项 (3)四、CSS Hack (4)4.1样式 (4)4.2书写顺序 (4)4.3注意事项 (4)按住CTRL并单击目录可直接定位一、总则1.1目的及效力1.制订本规范的目的：使css样式表文件标准化，具有较高的可读性，便于后期自己或他人阅读、修改，使之开发效率提高。

2.页面制作人员必须严格遵守此规范。

3.本规范应用于2009年11月1日以后制作的项目中，不溯及以往。

4.本规范随时根据需要修订，请注意版本号的变化。

当前为1.0版。

1.2 CSS样式书写总规范1.普通企业网站样式表文件统一命名为“main.css”，对于门户型网站或大型企业网站根据实际情况进行命名、细分。

2.由于页面采用utf-8编码所以必须在样式表文件顶部加上“@charset "utf-8";”。

3.书写样式时必须先进行样式重置。

4.书写样式时必须按照规定的顺序。

5.不同浏览器对于CSS解析认识不一样，为保证页面在各个浏览器下基本一致需要针对不同浏览器去写不同的CSS。

6.书写样式时可以缩写的样式推荐使用缩写。

二、样式重置2.1重置代码/* 样式重置*/body { margin:0; padding:0; font-size:12px; font-family:Arial,"宋体"; }form,ul,li,p,h1,h2,h3,h4,h5,h6 { margin:0; padding:0; }img { border:0; vertical-align:absbottom; }ul,li { list-style-type:none; }input, select, textarea { font-size:12px; font-family:Arial; vertical-align:absmiddle; } /* 常用功能样式*/.clear { height:0px; font-size:0px; line-height:0px; overflow:hidden; clear:both; } .overflow { overflow:auto; }.nobg { background:none!important; }/* 默认文字链接样式*/a { color:#333; text-decoration:none; }a:hover { color:#285898; text-decoration:underline; }2.2注意事项1.尽量不要采用* { margin:0; padding:0; }2.样式重置代码中已经包含常见情况，后期如有添加请按照CSS书写顺序添加。

css100个必背知识点

css100个必背知识点CSS（层叠样式表）是一种用于描述网页样式的语言，它可以控制网页的布局、字体、颜色、背景等各个方面。

对于前端开发者来说，掌握CSS的基本知识是非常重要的。

下面是100个必背的CSS知识点，希望对大家有所帮助。

1. CSS是一种样式表语言，用于描述网页的外观和样式。

2. CSS可以通过选择器来选择HTML元素，并为其应用样式。

3. CSS样式可以通过内联样式、内部样式表和外部样式表来定义。

4. 内联样式是直接在HTML元素的style属性中定义的样式。

5. 内部样式表是在HTML文档的head部分中定义的样式。

6. 外部样式表是一个独立的CSS文件，通过link标签引入到HTML 文档中。

7. CSS选择器可以根据元素的标签名、类名、ID等属性来选择元素。

8. 标签选择器可以选择指定标签名的所有元素。

9. 类选择器可以选择具有指定类名的元素。

10. ID选择器可以选择具有指定ID的元素。

11. 后代选择器可以选择指定元素的后代元素。

12. 子元素选择器可以选择指定元素的直接子元素。

13. 相邻兄弟选择器可以选择指定元素的下一个兄弟元素。

14. 伪类选择器可以选择元素的特定状态或位置。

15. 伪元素选择器可以选择元素的特定部分。

16. CSS样式可以通过属性和值来定义。

17. 属性是用于描述元素的特性，如颜色、字体、边框等。

18. 值是属性的具体取值，如红色、宋体、1px等。

19. CSS样式可以通过简写属性来定义，如font、border等。

20. CSS样式可以通过继承来应用到子元素。

21. CSS样式可以通过层叠来决定最终的样式。

22. CSS样式可以通过优先级来决定应用的顺序。

23. 内联样式的优先级最高，其次是ID选择器、类选择器和标签选择器。

24. 伪类选择器的优先级比类选择器和标签选择器高。

25. 伪元素选择器的优先级比伪类选择器高。

26. !important关键字可以提高样式的优先级。

CSS用户手册中英文对照版规范手册

34.float
35.使得元素向左或向右浮动
36.font
37.设置font-style, font-variant, font-weight, font-size, line-height 和font-family的缩写
a)font-family设置一个有优先权的字体列表，用来显示文本
b)font-size设置字体大小
i.border-right-color设置元素右边框的颜色
ii.border-right-style设置元素右边框的线条样式
iii.border-right-width设置元素右边框的宽度
e)border-spacing设置两个单元格之间的距离
f)border-style设置元素四个边框的线条样式
为了更好的了解网页浏览器是如何通过CSS显示页面，请查阅【盒模型】这篇文章。
当中有“注：”的是翻译者做的注释。
必须知道的清单
1.margin
2.padding
3.border
4.background-color
5.color
6.font-family
7.font-size
8.float
完整列表
1.azimuth
5.border
6.设置border-width, border-style 和所有四个边框的border-color的缩写。
a)border-bottom设置border-bottom-width, border-bottom-style 和 border-bottom-color的缩写。
i.border-bottom-color设置元素下边框的颜色
g)border-top设置border-top-width, border-top-style 和 border-top-color的缩写

CSS-通用笔记文档

1.CSS1.1.行内元素、块级元素1.1.1.元素得类型CSS中将元素分为行内元素与块级元素，她们都各自有各自得特点与行为习惯。

div、h1 或 p 元素常常被称为块级元素。

这意味着这些元素显示为一块内容，即“块框”，也称为块级元素。

在布局页面时，块级元素独占一行。

与之相反，span 与 strong 等元素称为“行内元素”，这就是因为它们得内容显示在行中，即“行内框”，也称为行内元素。

在布局页面时，行内元素不会独占一行。

同时垂直内边距、边框与外边距不影响行内框得高度。

可以通过display属性修改框得类型。

1.2.CSS概述1.2.1.C SS就是什么CSS就是层叠样式表（Cascading Style Sheets）用来定义网页得显示效果。

可以解决html代码对样式定义得重复，提高了后期样式代码得可维护性，并增强了网页得显示效果功能。

简单一句话：CSS将网页内容与显示样式进行分离，提高了显示功能。

1.2.2.组织网页得两种常用方式组织网页结构主要有两种方式：表格嵌套表格DIV+CSS早期得网页都就是表格套表格得方式实现得，这种方式对于比较简单得页面效果尚可，一旦页面稍微复杂一些，使用起来就十分得麻烦，现阶段得大部分网页都主要使用DIV+CSS 得方式，只在局部使用表格嵌套方式1.3.引入CSS得四种方式1.3.1.S tyle属性方式利用标签中style属性来改变每个标签得显示样式。

例：<p style="background-color:#FF0000; color:#FFFFFF">p标签段落内容。

</p>该方式比较灵活，但就是对于多个相同标签得同一样式定义比较麻烦，适合局部修改。

1.3.2.S tyle标签方式在head标签中加入style标签，对多个标签进行统一修改。

<head><style type=”text/css”>p { color:#FF0000;}</style></head>该方式可以对单个页面得样式进行统一设置，但对于局部不够灵活。

css 规范

css 规范CSS（层叠样式表）是一种用来描述网页上元素样式的语言，在前端开发中扮演着非常重要的角色。

为了保持代码的可维护性和可读性，制定一套规范是至关重要的。

下面是一些常见的CSS规范，以帮助开发者编写优雅且易于理解的CSS代码。

1. 缩进和空格：- 使用2个空格进行缩进，而不是制表符。

- 在选择器与属性之间使用一个空格。

- 在属性名和属性值之间使用一个空格。

- 在选择器和大括号之间使用一个空格。

- 在属性之间使用一个空格。

2. 选择器：- 为选择器使用有意义的命名，以便于他人理解和维护。

- 避免使用id选择器，优先使用class选择器。

- 避免使用选择器的嵌套层级过多，不要超过3层。

- 避免使用通用选择器（*），除非特殊情况。

- 使用选择器应避免使用标签名，而是通过class选择器来实现样式。

3. 属性顺序：- 将相关的属性放在一起，例如布局属性、字体属性、背景属性等。

- 将字母顺序相同的属性放在一起。

- 将标准属性放在自定义属性之前。

4. 命名约定：- 为class和id使用有意义、描述性的命名。

- 使用短破折号分隔的命名方式（例如：main-container）。

- 避免使用驼峰命名法或下划线命名法。

5. 注释：- 使用注释来解释CSS代码的功能和目的。

- 在注释前使用双斜杠（//）或者多行注释（/* */）。

- 用适当的注释来分隔代码块。

6. 尺寸单位：- 使用相对单位（例如：em、rem）来定义尺寸，以便于响应式布局。

- 避免使用绝对单位（例如：px）来定义尺寸。

7. 清除浮动：- 在需要清除浮动的容器元素上添加clearfix类，以防止浮动元素影响其下方元素布局。

8. 不要滥用!important：- 避免频繁使用!important，它应该作为一种解决特殊情况的紧急措施。

9. 代码组织：- 按照代码功能和结构将样式代码分组。

- 使用嵌套而不是多个规则集，以保持代码的重用性和可读性。

css书写的基本格式

css书写的基本格式摘要：一、CSS简介1.CSS的作用2.CSS与HTML的关系二、CSS书写基本格式1.选择器2.属性3.值4.样式规则三、CSS的书写规范1.使用一致的命名规范2.合理利用注释3.缩进与换行4.避免使用过深的嵌套四、CSS的常见错误及解决方法1.错误：样式表与HTML文档分离2.错误：使用过长的选择器3.错误：样式表中存在语法错误4.错误：样式规则顺序混乱正文：一、CSS简介CSS（层叠样式表，Cascading Style Sheets）是一种用于描述HTML或XML文档样式的样式表语言。

通过使用CSS，我们可以对网页的布局、字体、颜色、边距等外观属性进行控制，实现网页的美观与易读。

CSS与HTML紧密相关，通常情况下，我们会将CSS样式规则嵌入到HTML文档的`<style>`标签中，或者将其单独保存在一个CSS文件中，通过`<link>`标签引入。

二、CSS书写基本格式CSS规则由选择器、属性和值组成，通常情况下，它们会按照以下格式书写：```选择器{属性: 值;属性: 值;...}```1.选择器：用于选取需要应用样式的HTML元素，例如：`p`表示所有段落元素，`.class-name`表示具有特定类名的元素，`#id-name`表示具有特定ID 的元素。

2.属性：用于描述元素的样式属性，例如：`color`、`font-size`、`background-color`等。

3.值：用于设置元素的样式属性值，例如：`red`、`16px`、`#FF0000`等。

4.样式规则：由一个或多个选择器、属性和值组成的规则，例如：```cssp {font-size: 16px;color: red;}```三、CSS的书写规范为了提高代码的可读性和可维护性，我们需要遵循一定的书写规范：1.使用一致的命名规范：例如，使用小写字母、短横线分隔符等。

2.合理利用注释：为代码添加注释，以提高代码的可读性。

css书写格式

在CSS（层叠样式表）中，有一些常见的书写格式和规范，这些规范有助于代码的可读性和维护性。

以下是一些建议的CSS 书写格式：1. 缩进：使用缩进使代码更易读。

一般来说，推荐使用2 或4 个空格的缩进。

/* 推荐的缩进*/selector {property: value;}2. 选择器与属性之间的空格：在选择器和属性之间添加空格，以提高可读性。

/* 推荐的选择器与属性之间的空格*/selector {property: value;}3. 每个声明单独一行：每个属性声明都应该单独一行，这有助于更清晰地看到每个属性。

/* 推荐的每个声明单独一行*/selector {property1: value1;property2: value2;}4. 属性声明顺序：保持属性声明的一致顺序，可以按照功能或字母顺序排列。

/* 推荐的属性声明顺序*/selector {display: block;margin: 10px;padding: 5px;color: #333;}5. 选择器嵌套：避免过度嵌套选择器，以避免样式复杂性和提高性能。

/* 避免过度嵌套选择器*/selector1 {property: value;}selector1 selector2 {property: value;}6. 颜色表示：使用缩写形式表示颜色，除非需要更具体地定义颜色。

/* 使用缩写形式*/color: #123;/* 避免缩写形式*/color: #112233;7. 注释：使用注释来解释代码块的作用，这有助于团队成员理解你的代码。

/* 这是一个注释*/selector {property: value; /* 这也是一个注释*/}8. 分号和大括号：分号应该位于每个属性声明的末尾，而左大括号应该与选择器在同一行。

/* 推荐的分号和大括号位置*/selector {property: value;}以上只是一些通用的CSS 书写格式建议，具体的规范可能会因项目或团队而有所不同。

CSS命名规范_电脑基础知识_IT计算机_专业资料.doc

css命名规范一、引言 (2)1.1目的 (2)1.2 CSS编写注意事项 (2)二、CSS命名规范 (2)2.1文件命名规范 (2)2.2公用样式申明： (2)2.3框架架样式类名命名规范 (3)2.4样式类别命名规范 (4)2.5模块或文档命名规则 (4)2.6色彩、字体、字号等命名规则 (5)三、代码规范 (5)3.1 HTML 代码 (5)3.2 CSS ............................................................................................. 错误！未定义书签。

按住CTRL并单击目录可直接定位引言1.1目的1. 制订本规范的目的是使CSS规范化、统一化。

2. 页面制作人员必须严格遵守此规范。

3. 木规范随时根据需要修订，请注意版木号的变化。

当前为1.0版°1.2 CSS编写注意事项1. 在编写html的时候同时带上class屈性；2. 无css样式时，可让css保留空白；当样式完成后，能直接看到效果，基本不用修改htmlo二、CSS命名规范2.1文件命名规范1. 当公用样式、框架样式内容不是很多时，整站全局样式、公共样式写在同一个css±, 命名为global.css （常用，一般都写一个上就ok）；2. 当公用样式、框架样式内容很多时，可以分为两个css文件，一个文档类的公用样式可以命名为doc.css；一个为框架样式为global.css;2.2公用样式申明：1. 公用样式需保留部分，当然可以进行适当修改使用（比如字体、文字大小、颜色等）:body{ margin :0px; padding :0px; borderzOpx; font-size :12px;font-family:”宋体”；backgroundbody, div, dl, dt, dd, ul, li, hi, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend,button, textarea, blockquote,p{ margin: 0; padding: 0; line-height:24px;）img（ borderzOpx;}a{ text-decoration:none; color:#333;}a:hover{ text-decorationzunderline; color:#fOO;}ul,dl{ list-style:none;}table { border-collapse: collapse; border-spacing: 0; border-collapsezcollapse;empty-cell:show;）备注：这里清楚一些本身所带的样式结构、统一样式；1）比如清除掉H标签的字体大小；2）a标签只在鼠标经过的时候才有下划线；3）图片边框为04）Table、p、button 标签没边距5）统一行高、字体大小、字体2.3框架架样式类名命名规范global.CSS公用样式，以下是线框结构颜色（红框为class为wrap）topheadernavleft middle right main mainLt rightleft mainRt footer1. top：顶部模块（顶部横条用于补充、快捷导航或说明文字，可有可无）2. header：头部模块（用于头部放logo等）3. nav:主导航4. wrap：主要内容容器5. left：主要内容左边模块6. middle：主要内容中间模块7. right：主要内容右侧模块8. main：主干模块9. mainleft：靠左主干模块10. mainright：靠右主干模块11. footer：底部模块2.4样式类别命名规范1. logo：网站logo2. nav：导航（只有一级菜单可用，有一级以上用下面规则）3. menu：菜单4. hidden：默认隐藏5. menu-con:菜单内容6. login：登录7. register：注册8. search:搜索9. keyword：搜索关键字10. range：搜索范围11. tag-title：标签标题12. tag-con：标签内容13. title：标题14. content：内容15. list：列表16. current：当前位置17. icon：图标18. comment：评论19. more：更多2.5模块或文档命名规则规则：［页面・］模块-具体内容，中间用短横线区分如1： college.css （未缩写）命名规则：1）college-lt （专家答疑左侧）2）college-md （专家答疑中问）3）college-rt （专家答疑右侧）如2： info.css （缩写）命名规则：info-left > info-left-list I A info-title如3： info-left-list 1 （资讯页面的左侧的第一个列表）2.6色彩、字体、字号等命名规则1. red、bull……用颜色名称直接定义2. cn、en 一般就区别中英文字体（一般也不怎么用到，按规定好的字体就可以了）3. fl4px、fl6px、fl8px ........... 字体为14px、16px、18px （一般默认字体12px 可在规定所有样式里面定义）4. fontbold：字体加粗5. fontitalic：斜体•2.7部分内容英文单词1. form表单（例：内容表单具体项content-form-address）2. contact联系人3. address 地址4. price 价格5. deta i I 明细6. i nformat i on 消息7. link链接8. dash横线9. remarks 备注10. browse 浏览11. source 来源12. check 查看三、代码规范3.1 HTML 代码1. 对页面添加class属性，样式都写在class属性上，id属性留个js 如：vdivclass=”content”>v/div>2. 如果有需要同时定义两个样式，中间用空格隔开如：<div class=,,content buir,x/div>。

CSS样式表复习参考模板

CSS样式表复习一、什么是CSSCSS是Cascading Style Sheets的英文缩写,即层叠样式表，用于布局与美化网页。

它是一种标记语言,因此不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)。

CSS文件是一个文本文件,它包含了一些CSS标记,CSS文件一般使用css为文件后缀名（也有用txt为文件名后缀的）。

二、怎样在HTML中加入CSS(一)内联样式1．定义样式（1）样式定义在<head>区内用<Style>标记对限定。

（2）样式内容：样式名后用大括号将各种格式描述为一个集合。

形如：样式名{格式名：值；格式名：值；格式名：值…} 例：.mycss1 {font-size:15pt;font-family:华文新魏;color:red}说明：①样式名用HTML标签的不加点“.”，自定义的前面要加点。

如html 标签：h1-h6，body，table，tr，td等前面不加“.”自定义的如：mycss1,a1，b1等前面要加点；②CSS样式表简单属性：color:green; font-size:30pt; font-family: "华文行楷";2．样式的引用（1）自定义样式名的样式引用<p class=”样式名”> 需要样式作用的文字</p>（2）HTML标签样式名的样式引用遇HTML标签样式名自动套用例如:p {font-size:20pt;font-family:华文新魏;color:green}遇<p > 需要样式作用的文字</p>自动对“需要样式作用的文字”套用样式。

内联样式一般只作用于本网页，可多次引用。

（二）外联样式样式文件存放在计算机内,类型名一般为css或txt。

相当于把外联文件加载到当前网页，样式的引用与内联样式相同。

外联方式:<link href="样式文件名" rel="stylesheet" type="text/css">联系超链教给学生学会记忆外联格式。