可以使用的css规则一般都有哪些，以及这些规则都具有哪些方面的作用.北外

2023-04-24 19:55:01html-css025

可以使用的css规则一般都有哪些，以及这些规则都具有哪些方面的作用.北外,第1张

DIV+CSS规则整理

一、善用css缩写规则

/*注意上、右、下、左的书写顺序*/

1. 关于边距（4边）：

1px 2px 3px 4px (上、右、下、左)

1px 2px 3px （省略的左等于右）

1px 2px (省略的上等于下)

1px （四边都相同）

2. 简化所有：

*/ body{margin:0}------------表示网页内所有元素的margin为0

#menu{ margin:0}------------表示menu盒子下的所有元素的margin为0

3. 缩写（border）特定样式：

Border:1px solid #ffffff

Border-width:0 1px 2px 3px

4. 关于文字的缩写规则：

Font-style:italic斜体形式

Font-variant:small-caps/normal变体样式：小型大写字母/正常

Font-weight:bold

Font-size:12px

Line-height:1.2em(120%)/1.5em(150%)

Font-family:arrial,sans-serif,verdana

缩写成：

Font:italic small-caps bold 12px/1.5emarrial,sans-serif

注意：Font-size和Line-height用斜杠组合在一起不能分开写。

5. 关于背景图片的：

Background:#FFF url(log.gif) no-repeatfixed top left

6. 关于列表：

List-style-type:square/none

List-style-position:inside

List-style-image:url(filename.gif)

缩写成：

List-style:none inside url(filename.gif)

二、运用4种方法来引入CSS样式

1.link

rel 关系

type 数据类型,有多种

href 路径

部分浏览器支持候选样式,关键字:alternate:

2.内部样式块

<style>

<!–

h1{color:red}

–>

</style>

3.@import

@import url{a.css}

注意:此指令必须放在<style>容器中,并且在所有样式之前

建议放在一个html注释中,<!– –>浏览器会不显示注释内的内容,而import等css代码能正常工作

4.内联样式

选择器是css的一个基本概念，基本规则如下：

1.规则结构：

h1 {color:red}

选择器 {属性:值}

这类是元素选择器，基本可以包括所有html的元素

属性值可以包括多个元素，如：border：1px solid red

常用语法

1)分组：

选择器和声明都可以分组:

h1,h2,h3{color:redbackground:#fff} ,选择器用“,”分割开,属性用””分割

2)类选择器,即通过class=”stylename”应用的声明

定义:

.stylename{color:red}

注意:

在html中可以使用多类选择:如class=”cn1 cn2 cn3″

3)ID选择器,即与id属性对应的样式

定义:

#a{color:red} ->这个定义对用id=”a”的元素

2.这部分都是我们常见的css语法，下面谈一下我们不常见的选择器语法

1)父子结构,跟文档结构图对应

如p span{border:1px solidred}对应的是<p>下面的<li>标签,这个很用用途,可以准确定位.

一些特殊应用(IE7支持):

(1) p >span{},匹配所有p下所有的span

(2) p + span{} ,匹配紧接着p元素后出现的第一个span标签,2者要有相同的父标签

2)属性选择器:(注意:属性选择器ie7才开始支持,以下版本并不支持,其他的浏览器基本可以)

语法:img[alt]{border:1pxsolid}

表示对应有alt属性的img标签,当然可以支持多个属性对应,如img[alt][title]{}表示这个2个属性都有的img标签,

也可以与具体值对应:如:img[alt=”摄影”]{}

属性选择器中的高级应用,特殊匹配:

(1)img[class~=”b”], ~= : 与属性中的一个值对应的,即与<img class=”a b c”>对应

(2)[class^=”a”],以a开头的

(3)[class$=”a”],以a结束的

(4)[class*=”a”],包含a的

(5)[class|=”a”],等于a或以a开头的

3)伪类和伪元素

日常使用中主要是<a>标签的几个伪类:link:hover:active:visited

以及:first-child:first:before:left:right:lang:focus:fist-line等等

注意:动态伪类可以应用到任何元素,如,input:focus{background:red}当input标签获得焦点时背景变红

以上语法组合使用,就能实现定位准确、简单间接的样式了。

三、选择器分类整合

优先级别遵循：行内样式 >ID >Class >标记

基本选择器标记选择器（eg:<p></p>）

类别选择器(eg:class)

ID选择器

复合选择器

“交集”复合选择器(eg:p.menu{color:red})必须是

标记+类别/ID组合

“并集”复合选择器(eg:h1,h2,h3{color:red})

“后代”复合选择器(eg: #menu.menulist{ ... })

“子”复合选择器(eg: #menu.menulist .selectit {... })

四、使用子选择器减少id和class的定义

示例结构：

<divclass="selectit">content</div>

</div>

示例CSS：

#menu { ... }

#menu .menulist { ... }

#menu .menulist .selectit { ... }

五、使用组选择器为不同元素应用相同的样式

如h1,h2,h3,div{font-size:16pxfont-weight:bold}

则h1,h2,h3,div元素的样式都为字体16像素，字体粗体

六、伪类和选择符的配合使用

将伪类和类组合起来用，就可以在同一个页面中做几组不同的链接效果了，例如，我们定义一组链接为红色，

访问后为蓝色；另一组为绿色，访问后为黄色：

a.red:link {color: #FF0000}

a.red:visited {color: #0000FF}

a.blue:link {color: #00FF00}

a.blue:visited {color: #FF00FF}

现在应用在不同的链接上：

<a class="red"href="...">这是第一组链接</a>

<a class="blue" href="...">这是第二组链接</a>

七、CSS的最近优先原则

/*如果对一个元素定义了多次样式，则以最近的一级优先，最近一级的样式将覆盖其他行内样式 >ID >Class>标记*/

以下是引用片段：

CSS:

p{color:red}

.blue{color:blue}

.yellow{color:yellow}

HTML:

<p>此处显示为红色</p>

<p class="blue">此处显示为蓝色</p>

<p class="blue"style="color:green">此处显示为绿色</p>

<p class="blue yellow">此处显示为黄色</p>

注意：

（1）注意样式的几个优先顺序(优先级由上至下递减，下面的样式覆盖上面的样式)：

--元素style设定

--head区<style></style>中的设定

--外部引用css文件

（2）优先级不是按访问顺序来设定的，而是又css中的声明顺序来设的。

如上例中<pclass="yellow blue">此处显示为黄色</p>也显示为黄色，因为在css定义中.yellow在.blue

的后面。

八、书写正确的链接样式

当用css定义链接的各种状态时，要注意书写的顺序即：:link :visited :hover :active利用首字母：L V H A，

你可以通过记忆LoVe,Hate,两个单词来记住其顺序。

:link --------链接的颜色

:visited -----鼠标点击后的颜色

:hover -------鼠标放上去未点的颜色（悬停）

:active-------鼠标点击瞬间的颜色

九、:hover的灵活运用

IE6不支持除a标签以外的:hover属性，我们了解:hover属性是鼠标悬停效果。在IE7和FF中，对几乎任意元素

都可以设置:hover属性效果。这对我们做不同的访问效果很好。

如：

p {

width : 360px

height : 80px

padding : 20px

margin : 50px auto 0 auto

border : 1px solid #ccc

line-height : 25px

background : #fff

}

p:hover {

border : 1px solid #000

background : #ddd

}

----------------此效果针对IE7和FF

p a {

color : #00f

text-decoration : none

font-size : 13px

}

p a:hover {

color : #036

text-decoration : underline

}

-----------------此效果针对IE6

十、定义A标签要注意的小问题

当我们定义a{color:red}时，它代表了A的四种状态的样式，如果此时要定义一个鼠标放上的状态只要定义

a:hover就可以了，其它三种状态就是A中所定义的样式。

只定义了一个a:link时，一定要记得把其它三种状态定义出来！

十一、禁止内容换行与强制内容换行

在表格或层中我们可能希望内容不换行或强制换行，我们可以通过一些css属性来达到这些要求。

禁止换行：white-space:nowrap

强制换行：word-break:break-allwhite-space: normal

十二、区别relative和absolute

Absolute---CSS中的写法是：position:absolute他的意思是绝对定位，他是参照浏览器的左上角，配合

TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为

原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行

定位，位置将由TRBL决定。

Relative---CSS中的写法是：position:relative他的意思是绝对相对定位，他是参照父级的原始点为原始点，

无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始

点则参照父级内容区的原始点进行定位。

十三、区别块级元素block和内联元素inline

块级---可定义宽高，另起独占一行（如：divul）

内联---不可定义宽高，如文本元素（如a span）

十四、区别display和visibility

display:none和visibility:hidden都可以隐藏一个元素,但visibility:hidden只是隐藏了元素的内容，但其使用的

位置空间仍然被保留。而display:none则相当把元素从页面中去除，其占用位置也将被删除。

十五、背景background的一些语法

background-image:url(背景图案.jpg,gif,bmp)

background-color:#FFFFFF（背景颜色）

background-color : transparent<--设定背景为透明色–>

background-repeat 改变背景图片的重复并排的设定

说明

repeat 背景图片并排

repeat-x 背景图片以X方向并排

repeat-y 背景图片以Y方向并排

no-repeat 背景图片不以并排的方式处理

background-attachment是否固定图片位置

说明

scroll 拉动卷轴时，背景图片会跟着移动（缺省值）

fixed 拉动卷轴时，背景图片不会跟着移动

以长度定位background-position:x y

使用百分比定位background-position: x% y%

说明

x% 往右移

y% 往下移

backgroud-position: 0% 0%左边上方

backgroud-position: 0% 50%左边中间

backgroud-position: 50% 0%中间上方

backgroud-position: 50% 50%正中间

backgroud-position:100% 0%右边上方

backgroud-position: 0% 100%左边下方

backgroud-position: 100% 50%右边中间

backgroud-position: 50% 100%中间下方

backgroud-position: 100% 100%右边下方

以关键字定位

关键字说明

top 上 ( y = 0 )

center 中 ( x = 50, y = 50 )

bottom 下 ( y = 100 )

left 左 ( x= 0 )

Exp:

background-position:center

图片在指定背景中央X=50% Y=50%位置

background-position: 200px 30px

十六、注释的写法

在Html中：

content

在CSS中：

/* ---------- header ----------------- */

Style

十七、CSS的命名规范

1. 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

搜索：search

功能区：shop

标题：title

加入：joinus

状态：status

2. 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 { }

注意事项::

u 一律小写

u 尽量用英文

u 不加中杠和下划线

u 2个组合的单词不用中杠和下划线可以将第二个单词的首字母大写（eg:mainContent）；

u 尽量不缩写，除非一看就明白的单词.

3. 主要的站点css文件

主要的 master.css

模块 module.css

基本共用 base.css（root.css）

布局，版面 layout.css

主题 themes.css

专栏 columns.css

文字 font.css

表单 forms.css

补丁 mend.css

打印 print.css

十八、Padding影响宽度问题

如果一组要嵌套的标签之间需要些间距的话，那就留给位于里面的标签的margin属性吧，而不要去定义位

于外面的标签的padding

十九、完美的单象素外框线表格

table{border-collapse:collapse}

td{border:1px solid #000}

二十、如果文字过长,则将过长的部分变成省略号显示

二十一、并不是所有样式都要简写

当样式表前定义了如p{padding:1px2px 3px 4px}时，在后续工程中又增加了一个样式上补白5px，下补白

6px。我们并不一定要写成p.style1{padding:5px 6px 3px 4px}。可以写成p.style1{paddingtop:5pxpadding-right:6px},你可能会感觉这样写还不如原来那样好，但你想没想过，你的那种写法重复定义

了样式，另外你可以不必去找原来的下补白与左补白的值是多少！如果以后前一个样式P变了话，你定义的

p.style1的样式也要变。(此种方法对后期修改样式很重要)

二十二、几个常用到的CSS细节处理上的样式

1）中文字两端对齐：text-align:justifytext-justify:inter-ideograph

2）固定宽度汉字截断：overflow:hiddentext-overflow:ellipsiswhite-space:nowrap(不让其换行，不过只能

处理文字在一行上的截断，不能处理多行。)（IE5以上）FF不能，它只隐藏。

***万能强制换行：white-space:normalword-break:break-all

禁止换行：white-space:nowrap

强制换行：word-wrap:break-wordword-break: normal

.AutoNewline

{

/*word-break: break-all方法一必须*/

/*word-wrap:break-wordoverflow:hidden方法二*/

/*word-wrap:break-wordword-break: normal方法三 */

word-wrap:break-wordword-break:break-all}

.NoNewline

{

/*word-break: keep-all方法一必须*/

white-space:nowrap

}

3）固定宽度汉字（词）折行：table-layout:fixedword-break:break-all（IE5以上）FF不能。

4）<acronym title=”输入要提示的文字”style=”cursor:help”>文字</acronym>用鼠标放在前面的文

字上看效果。这个效果在国外的很多网站都可以看到，而国内的少又少。

5）图片设为半透明：.halfalpha { background-color:#000000filter:Alpha(Opacity=50)}在IE6及IE5测试通

过，FF未通过，这是因为这个样式是IE私有的东西；

6）FLASH透明：选中swf,打开原代码窗口，在</object>前输入<paramname=”wmode”

value=”transparent”>以上是针对IE的代码。

针对FIREFOX 给<embed>标签也增加类似参数wmode=”transparent”

7）在做网页时常用到把鼠标放在图片上会出现图片变亮的效果，可以用图片替换的技巧，也可以用如下的滤

镜：

.pictures img {

filter: alpha(opacity=45)}

.pictures a:hover img {

filter: alpha(opacity=90)}

8）层在浏览器中居中对齐问题

body { text-align: center }

#content { text-align: leftwidth: 700pxmargin: 0 auto }

CSS 的出现，实现了网页的结构和样式分离。美容师！

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明

以内嵌式样式表为例

vs code快捷键： ctrl+/

CSS的英文可以大写，也可以小写

建议全部小写！

颜色名就是使用颜色的英文单词进行表示

更多的颜色名可以通过查询手册得到

颜色值指使用具体颜色的数值表示。包括： rgb 模式和十六进制模式写法

常用颜色的 rgb 色值：

常用颜色的十六进制色值：

注：十六进制颜色值简写模式：如果红、绿、蓝三个原色的色值每一个都是由重叠的数字组成，可以将重叠的数字简化成一个进行书写。如：红色 #f00

如果不设置字体属性，不同的浏览器有自己的默认字体

首选字体需要根据设计图确定，最后需要设置备用字体

缺点： id 选择器只能实现单选，不能帮我们完成多选的功能

原子类：在css中提前设置一些类名，每个类选择器后面只添加一条css样式属性，这些属性会在页面中常被使用，后期可以不需要多次书写属性，只要将对应的类名添加给需要的标签即可

实际工作中，通常我们有一个使用规律：类上样式(CSS)， id 上行为(JavaScript)

优点：减少 class 属性的使用，选择效率更高

继承性是一个很好的性质，可以将页面中出现最多的文字样式设置给一个较大的祖先级标签比如 <body>，后期所有的后代标签都可以从 <body>进行继承

一．文件命名规范

[b]样式文件命名[/b]

[quote]主要的 master.css

布局，版面 layout.css

专栏 columns.css

文字 font.css

打印样式 print.css

主题 themes.css [/quote]

[b]CSS ID 的命名[/b]

[quote]页头：header

登录条：loginbar

标志：logo

侧栏：sidebar

广告：banner

导航：nav

子导航：subnav

菜单：menu

子菜单：submenu

搜索：search

滚动：scroll

页面主体：main

内容：content

标签页：tab

文章列表：list

提示信息：msg

小技巧：tips

栏目标题：title

加入：joinus

指南：guild

服务：service

热点：hot

新闻：news

下载：download

状态：status

按钮：btn

投票：vote

合作伙伴：partner

友情链接：friendlink

页脚：footer

版权：copyright

外　套：wrap

主导航：mainnav

子导航：subnav

页　脚：footer

整个页面：　content

页　眉：header

页　脚：footer

商　标：label

标　题：title

主导航：mainbav（globalnav）

顶导航：topnav

边导航：sidebar

左导航：leftsidebar

右导航：rightsidebar

旗　志：logo

标　语：banner

菜单内容1： menu1content

菜单容量：　menucontainer

子菜单：submenu

边导航图标：sidebarIcon

注释：　note

面包屑：breadcrumb(即页面所处位置导航提示）

容器：　container

内容：　content

搜索：　search

登陆：　Login

功能区：shop(如购物车，收银台)

当前的　current[/quote]

[b]网站常用中英文对照表[/b]

[quote]网站导航 Site Map

公司简介 Profile or Company Profile or Company

公司设备 Equipment Equipment

公司荣誉 Glories Glories

企业文化 Culture Culture

产品展示 Product Product

资质认证 Quality Certification

企业规模 Scale Scale

营销网络 Sales Network

组织机构 organization organization

合作加盟 Join In Cooperation

技术力量 Technology Technology

经理致辞 Manager`s oration

发展历程 Development History

工程案例 Engineering Projects

业务范围 Business Scope

分支机构 Branches

供求信息 Supply &Demand

经营理念 Operation Principle

产品销售 Sales Sales

联系我们 Contact Us Contact Us

信息发布 Information Information

返回首页 Homepage Homepage

产品定购 order order

分类浏览 Browse By Category

电子商务 E-business

公司实力 Strength Strength

友情连结 Hot Link

应用领域 Application Fields

人力资源 Human Resource Hr

领导致辞 Leader`s oration

企业资质 Enterprise Qualification

行业新闻 Trade News

行业动态 Trends

客户留言 Customer Message

客户服务 Customer Service

新闻动态 News &Trends

公司名称 Company Name

销售热线 Sales Hot-Line

联系人 Contact Person

您的要求 Your Requirements

建设中 In Construction

证书 Certificate Certificate

地址 ADD Add

邮编 Postal Code Zipcode

电话 TEL Tel

传真 FAX Fax

产品名称 Product Name

产品说明 Description Description

价格 Price

品牌 Brand

规格 Specification

尺寸 Size

生产厂家 Manufacuturer Manufacturer

型号 Model

产品标号 Item No.

技术指标 Technique Data

产品描述 Description

产地 Production Place

销售信息 Sales Information

用途 Application

论坛 Forum

在线订购 On-line order

招商 Enterprise-establishing

招标 Bid Inviting

综述 General

业绩 Achievements

招聘 Join Us

求贤纳士 Join Us

大事 Great Event

动态 Trends

服务 Service

投资 Investment

行业 Industry

规划 Programming

环境 Environment

发送 Delivery

提交 Submit

重写 Reset

中国企业网技术支持 Powered By Ce.Net.Cn

社区 Community

业务介绍 Business Introduction

在线调查 Online Inquiry Inquiry

下载中心 Download

会员登陆 Member Entrance

意见反馈 Feedback

常见问题 FAQ

中心概况 General Profile

教育培训 Education &Training

游乐园 Amusement Park

在线交流 Online Communication

专题报道 Special Report[/quote]

常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。对于二级类/ID命名，则采用组合书写的模式，后一个单词的首字母应大写：诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为 “searchBtn”……

一. 常规书写规范及方法

1. 选择DOCTYPE：

XHTML 1.0 提供了三种DTD声明可供选择：

过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>。完整代码如下：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>

框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。完整代码如下：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“>

理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站，使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。

2. 指定语言及字符集：

为文档指定语言：

为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言；如：

常用的语言定义：

标准的XML文档语言定义：

<?xml version=”1.0″ encoding=” utf-8″?>

针对老版本的浏览器的语言定义：

为提高字符集，建议采用“utf-8”。

3. 调用样式表：

外部样式表调用：

页面内嵌法：就是将样式表直接写在页面代码的head区。如：

外部调用法：将样式表写在一个独立的.css文件中，然后在页面head区用类似以下代码调用。

在符合web标准的设计中，推荐使用外部调用法，可以不修改页面只修改.css文件而改变页面的样式。如果所有页面都调用同一个样式表文件，那么改一个样式表文件，可以改变所有文件的样式。

4、选用恰当的元素：

根据文档的结构来选择HTML元素，而不是根据HTML元素的样式来选择。例如，使用P元素来包含文字段落，而不是为了换行。如果在创建文档时找不到适当的元素，则可以考虑使用通用的div 或者是span；

避免过渡使用div和span。少量、适当的使用div和span元素可以使文档的结构更加清晰合理并且易于使用样式；

尽可能少地使用标签和结构嵌套，这样不但可以使文档结构清晰，同时也可以保持文件的小巧，在提高用户下载速度的同时，也易于浏览器对文档的解释及呈视；

5、派生选择器：

可以使用派生选择器给一个元素里的子元素定义样式，在简化命名的同时也使结构更加的清晰化，如：

.mainMenu ul li {background:url(images/bg.gif)}

6、辅助图片用背影图处理：

这里的”辅助图片”是指那些不是作为页面要表达的内容的一部分，而仅仅用于修饰、间隔、提醒的图片。将其做背影图处理，可以在不改动页面的情况下通过CSS样式来进行改动，如：

#logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom}

7、结构与样式分离：

在页面里只写入文档的结构，而将样式写于css文件中，通过外部调用CSS样式表来实现结构与样式的分离。

8、文档的结构化书写：

页面CSS文档都应采用结构化的书写方式，逻辑清晰易于阅读。如：

<ul>

</ul>

</div>

#mainMenu {

width:100%

height:30px

background:url(images/mainMenu_bg.jpg) repeat-x

}

#mainMenu ul li {

float:left

line-height:30px

margin-right:1px

cursor:pointer

}

*******************************************************************************************

命名参考(来源网络)

常用的CSS命名规则：

头：header

内容：content/container

尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：left right center

命名全部使用小写字母，如果需要多个单词，单词间使用“-”分隔，比如user-list

常用代码结构：

div：主要用于布局，分割页面的结构

ul/ol：用于无序/有序列表

span：没有特殊的意义，可以用作排版的辅助，

例如

<li><span>(4.23)</span>天幻网六周年天幻网六周年天幻网六周年天幻网六</li>

然后在css中定义span为右浮动，实现了日期和标题分两侧显示的效果

h1-h6：标题

h1-h6 根据重要性依次递减

h1位最重要的标题

label：为了使你的表单更有亲和力而且还能辅助表单排版的好东西，

例如：

fieldset &legend：fildset套在表单外，legend用于描述表单内容。

例如：<form>

<legend>title</legend>

</fieldset>

</form>

dl,dt,dd：当页面中出现第一行为类似标题/简述，然后下面为详细描述的内容时应该使用该标签，

例如<dl>

<dt>什么是CSS?</dt>

<dd>CSS就是一种叫做样式表（stylesheet）的技术。也有的人称之为层叠样式表（Cascading Stylesheet）。<dd>

<dt>什么是XHTML？</dt>

<dd>XHTML是一个基于XML的置标语言，看起来与HTML有些想像，只有一些小的但重要的区别。可以这样看，XHTML就是一个扮演着类似HTML的角色的XML。本质上说，XHTML是一个桥接（过渡）技术，结合了XML（有几分）的强大功能及HTML（大多数）的简单特性。</dd>

</dl>

C #content

S #subcol

M #maincol

X #xcol

这是纵向布局的XHTML结构，c-smx表示网页有三个纵栏, c-sm表示有两个纵栏, c-mx表示有两个纵栏其中一个是附属的, c-m表示一个纵栏。

其中在三纵栏的布局需要分为两层第一层是#subcol与#main第二层是#main中的#maincol与#xcol。

自定义命名：

根据w3c网站上给出的,最好是用意义命名

比如：是重要的新闻高亮显示（像红色）

有两种

.red{color:red}

.important-news{color:red}

很显然第二种传达的意义更加明确,所以尽量不要用意义不明确的作为自己自定义的名字

CSS命名规范

DIV CSS名称说明

网站公用相关

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 小技巧

Vote #vote 投票

Friend Link #friendlink 友情连接

Title #title 标题

Summary #summary 摘要

Sub-navigation list #subNav 二级导航

Search input #searchInput 搜索输入框

Search output #searchOutput 搜索输出和搜索结果相似

Search #search 搜索

Search results #searchResults 搜索结果

brand #branding 商标

branding-logo #brandingLogo LOGO

Site information #siteinfo 网站信息

Designer or other credits #siteinfoCredits 信誉

Join us #joinus 加入我们

Partnership opportunities #partner 合作伙伴

Services #service 服务

Regsiter #regsiter 注册

Status #status 状态

9、鼠标手势：

在XHTML标准中，hand只被IE识别，当需要将鼠标手势转换为“手形”时，则将“hand”换为“pointer”，即“cursor:pointer”

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：怎样用CSS样式在文字下面加下划线

# 下一篇：苹果笔记本电脑如何删除桌面的东西或者文件？

推荐阅读

热门文章

最新发布

标签列表

可以使用的css规则一般都有哪些，以及这些规则都具有哪些方面的作用.北外

给您推荐相同类型的内容：