css代码怎么写？css代码大全

编程之家2026-06-011099次浏览

大家好，今天小编来为大家解答css代码怎么写这个问题，css代码大全很多人还不知道，现在让我们一起来看看吧！

网页开发的CSS代码怎么写

随着Internet编程技术的不断发展，越来越多的大学毕业生加入了Web开发行业中，我们都知道Web开发需要使用css进行定位和布局。下面，昌平镇北大青鸟带大家来看看如何编写css代码。

前端系统的变化可以描述为每天都在变化。在短短的一年时间里，理论，框架，构建工具甚至开发语言都发生了巨大的变化。随着新项目即将开始，我花时间审查了上一个项目的前端架构。我已经产生了很多想法，我将尽可能地记录它们以准备新的框架。

一、OOCSS(面向对象的CSS)

OOCSS的使用主要有两个原则，一种是分离结构和外观，其中主要包括分离容器和内容。OOCSS主要基于对象的编程方法，OOCSS的目的主要是支持代码的复用，最终保证样式能很好的进行添加和维护。OOCSS也存在一些缺点，它主要适合大型网站的开发项目，因为大型网站的可重用性组件非常多，在运行小项目的时候没有非常好的才、效果，所有在选择的时候应该根据项目的情况进行选择。

二、BEM(块元素修饰符)

BEM是一个名为命名约定的CSS。它不涉及如何编写CSS的结构。在进行电脑培训的过程中，电脑培训建议仅为每个元素添加具有以下内容的CSS类名称。在BEM模式下，它看起来很麻烦且冗余，但每个CSS类名称都能够很好地描述出它的作用。与LESS或SASS结合使用时，会降低其写入复杂度。

三、规则文档

很多人更加倾向于关注大方面并忘记了细节，一份定义明确的规则文档能够提醒我们根据需要进行编写代码。一份好的规则文件应遵循以下规范：其中需要包含不可变规则，而不是一般描述需要始终将规则细化为最简单的表达式，首先解释规则是什么，然后说“如果没有，那会发生什么？并且昌平镇昌平镇北大青鸟认为每条规则必须包含以下单词之一-始终，从不，仅，每个，不需要。

四、综合方案

就如开头的介绍，BEM的简单使用并没有解决我们在项目中遇到的问题，反而还会产生其他的新的问题，但这不是BEM的责任。IT培训认为作为前端架构的重要组成部分，CSS主要是需要为项目选择出合适的解决方案，而不是因为它在业界很受欢迎而使用它。

怎么编CSS代码啊

CSS之入门篇——推荐新手

关于CSS样式表

一.在学习css之前你应该掌握哪些基础知识

1.什么是网页，什么是超文本语言（html）。

2.会使用Dreamweaver等常用的网页编辑器。

Dreamweaver是现今最好的专家工具之一，而Dreamweaver8增加的对CSS的支持更是你容易得来使用CSS，用它来给制作网页的CSS样式表会更简单、更方便。本教程教你如何利用Dreamweaver8在页面中加入CSS，你不用死记硬背的记代码标记，也不用去看很厚的CSS手册，你就可以轻松自如的在网页中运用CSS。不过首先你要对CSS有一定的了解。因此，本教程的前面4章为CSS理论知识，主要是对CSS的全面介绍，希望读者看后对CSS的语法、结构、应用有一个全面的了解；后面4章为DW实战，主要是教你如何利用Dreamweaver8灵活运用CSS在网页中。阅读此文前，你需要对HTML有一定的了解，并会使用Dreamweaver。

二.认识CSS

CSS就是Cascading Style Sheets，中文翻译为“层叠样式表”，简称样式表，它是一种制作网页的新技术。

网页设计最初是用HTML标记来定义页面文档及格式，例如标题<h1>、段落<p>、表格<table>、链接<a>等，但这些标记不能满足更多的文档样式需求，为了解决这个问题，在1997年W3C(The World Wide Web Consortium)颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1,自CSS1的版本之后，又在1998年5月发布了CSS2版本，样式表得到了更多的充实。W3C把DHTML(Dynamic HTML)分为三个部分来实现：脚本语言(包括JavaScript、Vbscript等)、支持动态效果的浏览器(包括Internet Explorer、Netscape Navigator等)和CSS样式表。

注意：CSS需要IE4(Internet Explorer 4.0)和NC4(Netscape 4.0)以上的浏览器支持，有些效果需要更高版本的浏览器支持。

三.怎样使用CSS

如果你使用的是Dreamweaver MX 2004以上的版本，在定义文字字体、颜色、大小等属性的时候，查看一下代码你会发现有这样的一部分在head区域：

<!--

.STYLE2{

font-size: 16pt;

font-family:"Courier New", Courier, monospace;

font-weight: bold;

color:#FF3300;

}

-->

</style>

那么恭喜你，你已经使用了CSS设计网页。

那么除了这种调用CSS的方法外，还有别的吗？回答是“当然有了”，下面是系统介绍

标记加注法(in-line)：

如果只有一个HTML标记需要设定样式，则可在该标记内，加上属性

style=""

以个别修订样式。

页面内嵌法：

外部调用法：

双表法调用样式表：

1.基本语法

CSS的定义是由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）。

基本格式如下：

selector{property: value}

（选择符{属性：值}）

选择符是可以是多种形式，一般是你要定义样式的HTML标记，例如BODY、P、TABLE……，你可以通过此方法定义它的属性和值，属性和值要用冒号隔开：

body{color: black}

选择符body是指页面主体部分，color是控制文字颜色的属性，black是颜色的值，此例的效果是使页面中的文字为黑色。

如果属性的值是多个单词组成，必须在值上加引号，比如字体的名称经常是几个单词的组合：

p{font-family:"sans serif"}

（定义段落字体为sans serif）

如果需要对一个选择符指定多个属性时，我们使用分号将所有的属性和值分开：

p{text-align: center; color: red}

（段落居中排列；并且段落中的文字为红色）

为了使你定义的样式表方便阅读，你可以采用分行的书写格式：

{

text-align: center;

color: black;

font-family: arial

}

（段落排列居中，段落中文字为黑色，字体是arial）

2.选择符组

你可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义：

h1, h2, h3, h4, h5, h6{ color: green}

（这个组里包括所有的标题元素，每个标题元素的文字都为绿色）

p, table{ font-size: 9pt}

（段落和表格里的文字尺寸为9号字）

效果完全等效于：

p{ font-size: 9pt}

table{ font-size: 9pt}

3.类选择符

用类选择符你能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。假如你想要两个不同的段落，一个段落向右对齐，一个段落居中，你可以先定义两个类：

p.right{text-align: right}

p.center{text-align: center}

然后用不在不同的段落里，只要在HTML标记里加入你定义的class参数：

<p class="right">这个段落向右对齐的

</p>

这个段落是居中排列的

</p>

<p class="right">这个段落向右对齐的

</p>

这个段落是居中排列的

</p>

注意：类的名称可以是任意英文单词或以英文开头与数字的组合，一般以其功能和效果简要命名。

类选择符还有一种用法，在选择符中省略HTML标记名，这样可以把几个不同的元素定义成相同的样式：

.center{text-align: center}

（定义.center的类选择符为文字居中排列）

这样的类可以被应用到任何元素上。下面我们使h1元素（标题1）和p元素（段落）都归为“center”类，这使两个元素的样式都跟随“.center”这个类选择符：

这个标题是居中排列的

</h1>

这个段落也是居中排列的

</p>

注意：这种省略HTML标记的类选择符是我们经后最常用的CSS方法，使用这种方法，我们可以很方便的在任意元素上套用预先定义好的类样式。

4. ID选择符

在HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式。

ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。将上例中类用ID替代：

这个段落向右对齐

</p>

定义ID选择符要在ID名称前加上一个“#”号。和类选择符相同，定义ID选择符的属性也有两种方法。下面这个例子，ID属性将匹配所有id="intro"的元素：

#intro

{

font-size:110%;

font-weight:bold;

color:#0000ff;

background-color:transparent

}

（字体尺寸为默认尺寸的110%；粗体；蓝色；背景颜色透明）

下面这个例子，ID属性只匹配id="intro"的段落元素：

p#intro

{

font-size:110%;

font-weight:bold;

color:#0000ff;

background-color:transparent

}

注意：ID选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。

5.包含选择符

可以单独对某种元素包含关系定义的样式表，元素1里包含元素2，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义，例如：

table a

{

font-size: 12px

}

在表格内的链接改变了样式，文字大小为12象素，而表格外的链接的文字仍为默认大小。

6.样式表的层叠性

层叠性就是继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套的样式叠加在一起，除非另外更改。例如在DIV标记中嵌套P标记：

div{ color: red; font-size:9pt}

……

<div>

<p>

这个段落的文字为红色9号字

</p>

</div>

（P元素里的内容会继承DIV定义的属性）

注意：有些情况下内部选择符不继承周围选择符的值，但理论上这些都是特殊的。例如，上边界属性值是不会继承的，直觉上，一个段落不会同文档BODY一样的上边界值。

另外，当样式表继承遇到冲突时，总是以最后定义的样式为准。如果上例中定义了P的颜色：

div{ color: red; font-size:9pt}

p{color: blue}

……

<div>

<p>

这个段落的文字为蓝色9号字

</p>

</div>

我们可以看到段落里的文字大小为9号字是继承div属性的，而color属性则依照最后定义的。

不同的选择符定义相同的元素时，要考虑到不同的选择符之间的优先级。ID选择符，类选择符和HTML标记选择符，因为ID选择符是最后加上元素上的，所以优先级最高，其次是类选择符。如果想超越这三者之间的关系，可以用!important提升样式表的优先权，例如：

p{ color:#FF0000!important}

.blue{ color:#0000FF}

#id1{ color:#FFFF00}

我们同时对页面中的一个段落加上这三种样式，它最后会依照被!important申明的HTML标记选择符样式为红色文字。如果去掉!important，则依照优先权最高的ID选择符为黄色文字。

7.注释

你可以在CSS中插入注释来说明你代码的意思，注释有利于你或别人以后编辑和更改代码时理解代码的含义。在浏览器中，注释是不显示的。CSS注释以"/*"开头，以"*/"结尾，如下：

/*定义段落样式表*/

{

text-align: center;/*文本居中排列*/

color: black;/*文字为黑色*/

font-family: arial/*字体为arial*/

}

/*定义段落样式表*/

{

text-align: center;/*文本居中排列*/

color: black;/*文字为黑色*/

font-family: arial/*字体为arial*/

}

前面我们了解了CSS的语法，但要想在浏览器中显示出效果，就要让浏览器识别并调用。当浏览器读取样式表时，要依照文本格式来读，这里介绍四种在页面中插入样式表的方法：[u]链入外部样式表[/u]、[u]内部样式表[/u]、[u]导入外表样式表[/u]和[u]内嵌样式[/u]。

1.链入外部样式表

链入外部样式表是把样式表保存为一个样式表文件，然后在页面中用<link>标记链接到这个样式表文件，这个<link>标记必须放到页面的<head>区内，如下：

<head>

……

……

</head>

上面这个例子表示浏览器从mystyle.css文件中以文档格式读出定义的样式表。rel=”stylesheet”是指在页面中使用这个外部的样式表。type=”text/css”是指文件的类型是样式表文本。href=”mystyle.css”是文件所在的位置。media是选择媒体类型，这些媒体包括：屏幕，纸张，语音合成设备，盲文阅读设备等。

一个外部样式表文件可以应用于多个页面。当你改变这个样式表文件时，所有页面的样式都随之而改变。在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑，浏览时也减少了重复下载代码。

样式表文件可以用任何文本编辑器（例如：记事本）打开并编辑，一般样式表文件扩展名为.css。内容是定义的样式表，不包含HTML标记，mystyle.css这个文件的内容如下：

hr{color: sienna}

p{margin-left: 20px}

body{background-image: url("images/back40.gif")}

/*定义水平线的颜色为土黄；段落左边的空白边距为20象素；页面的背景图片为images目录下的back40.gif文件*/

2.内部样式表

内部样式表是把样式表放到页面的<head>区里，这些定义的样式就应用到页面中了，样式表是用<style>标记插入的，从下例中可以看出<style>标记的用法：

<head>

……

hr{color: sienna}

p{margin-left: 20px}

body{background-image: url("images/back40.gif")}

</style>

……

</head>

注意：有些低版本的浏览器不能识别style标记，这意味着低版本的浏览器会忽略style标记里的内容，并把style标记里的内容以文本直接显示到页面上。为了避免这样的情况发生，我们用加HTML注释的方式（）隐藏内容而不让它显示：

<head>

……

<!--

hr{color: sienna}

p{margin-left: 20px}

body{background-image: url("images/back40.gif")}

-->

</style>

……

</head>

3.导入外部样式表

导入外部样式表是指在内部样式表的<style>里导入一个外部样式表，导入时用@import，看下面这个实例：

<head>

……

<!--

@import“mystyle.css”

其他样式表的声明

-->

</style>

……

</head>

例中@import“mystyle.css”表示导入mystyle.css样式表，注意使用时外部样式表的路径。方法和链入样式表的方法很相似，但导入外部样式表输入方式更有优势。实质上它相当于存在内部样式表中的。

注意：导入外部样式表必须在样式表的开始部分，在其他内部样式表上面。

4.内嵌样式

内嵌样式是混合在HTML标记里使用的，用这种方法，可以很简单的对某个元素单独定义样式。内嵌样式的使用是直接将在HTML标记里加入style参数。而style参数的内容就是CSS的属性和值，如下例：

这是一个段落

</p>

在style参数后面的引号里的内容相当于在样式表大括号里的内容。

注意：style参数可以应用于任意BODY内的元素（包括BODY本身），除了BASEFONT、PARAM和SCRIPT。

5.多重样式表的叠加

上一章里我们已经提到样式表的层叠顺序，这里我们讨论插入样式表的这几种方法的叠加，如果在同一个选择器上使用几个不同的样式表时，这个属性值将会叠加几个样式表，遇到冲突的地方会以最后定义的为准。例如，我们首先链入一个外部样式表，其中定义了h3选择符的color、text-alig和font-size属性：

{

color: red;

text-align: left;

font-size: 8pt;

}

/*标题3的文字颜色为红色；向左对齐；文字尺寸为8号字*/

然后在内部样式表里也定义了h3选择符的text-align和font-size属性：

{

text-align: right;

font-size: 20pt;

}

/*标题3文字向右对齐；尺寸为20号字*/

那么这个页面叠加后的样式就是：

color: red;

text-align: right;

font-size: 20pt;

/*文字颜色为红色；向右对齐；尺寸为20号字*/

字体颜色从外部样式表里保留下来，而对齐方式和字体尺寸都有定义时，按照后定义的优先而依照内部样式表。

注意：依照后定义的优先，所以优先级最高的是[s]内嵌样式[/s]，[s]内部样式表[/s]高于[s]导入外部样式表[/s]，[s]链入的外部样式表[/s]和[s]内部样式表[/s]之间是最后定义的优先级高。

————————————————————————————————————————————

1.基本语法

CSS的定义是由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）。

基本格式如下：

selector{property: value}

（选择符{属性：值}）

选择符是可以是多种形式，一般是你要定义样式的HTML标记，例如BODY、P、TABLE……，你可以通过此方法定义它的属性和值，属性和值要用冒号隔开：

body{color: black}

选择符body是指页面主体部分，color是控制文字颜色的属性，black是颜色的值，此例的效果是使页面中的文字为黑色。

如果属性的值是多个单词组成，必须在值上加引号，比如字体的名称经常是几个单词的组合：

p{font-family:"sans serif"}

（定义段落字体为sans serif）

如果需要对一个选择符指定多个属性时，我们使用分号将所有的属性和值分开：

p{text-align: center; color: red}

（段落居中排列；并且段落中的文字为红色）

为了使你定义的样式表方便阅读，你可以采用分行的书写格式：

{

text-align: center;

color: black;

font-family: arial

}

（段落排列居中，段落中文字为黑色，字体是arial）

2.选择符组

你可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义：

h1, h2, h3, h4, h5, h6{ color: green}

（这个组里包括所有的标题元素，每个标题元素的文字都为绿色）

p, table{ font-size: 9pt}

（段落和表格里的文字尺寸为9号字）

效果完全等效于：

p{ font-size: 9pt}

table{ font-size: 9pt}

3.类选择符

p.right{text-align: right}

p.center{text-align: center}

然后用不在不同的段落里，只要在HTML标记里加入你定义的class参数：

<p class="right">这个段落向右对齐的

</p>

这个段落是居中排列的

</p>

<p class="right">这个段落向右对齐的

</p>

这个段落是居中排列的

</p>

注意：类的名称可以是任意英文单词或以英文开头与数字的组合，一般以其功能和效果简要命名。

类选择符还有一种用法，在选择符中省略HTML标记名，这样可以把几个不同的元素定义成相同的样式：

.center{text-align: center}

（定义.center的类选择符为文字居中排列）

这个标题是居中排列的

</h1>

这个段落也是居中排列的

</p>

注意：这种省略HTML标记的类选择符是我们经后最常用的CSS方法，使用这种方法，我们可以很方便的在任意元素上套用预先定义好的类样式。

4. ID选择符

在HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式。

ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。将上例中类用ID替代：

这个段落向右对齐

</p>

定义ID选择符要在ID名称前加上一个“#”号。和类选择符相同，定义ID选择符的属性也有两种方法。下面这个例子，ID属性将匹配所有id="intro"的元素：

#intro

{

font-size:110%;

font-weight:bold;

color:#0000ff;

background-color:transparent

}

（字体尺寸为默认尺寸的110%；粗体；蓝色；背景颜色透明）

下面这个例子，ID属性只匹配id="intro"的段落元素：

p#intro

{

font-size:110%;

font-weight:bold;

color:#0000ff;

background-color:transparent

}

注意：ID选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。

5.包含选择符

可以单独对某种元素包含关系定义的样式表，元素1里包含元素2，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义，例如：

table a

{

font-size: 12px

}

在表格内的链接改变了样式，文字大小为12象素，而表格外的链接的文字仍为默认大小。

6.样式表的层叠性

div{ color: red; font-size:9pt}

……

<div>

<p>

这个段落的文字为红色9号字

</p>

</div>

（P元素里的内容会继承DIV定义的属性）

另外，当样式表继承遇到冲突时，总是以最后定义的样式为准。如果上例中定义了P的颜色：

div{ color: red; font-size:9pt}

p{color: blue}

……

<div>

<p>

这个段落的文字为蓝色9号字

</p>

</div>

我们可以看到段落里的文字大小为9号字是继承div属性的，而color属性则依照最后定义的。

p{ color:#FF0000!important}

.blue{ color:#0000FF}

#id1{ color:#FFFF00}

7.注释

/*定义段落样式表*/

{

text-align: center;/*文本居中排列*/

color: black;/*文字为黑色*/

font-family: arial/*字体为arial*/

}

/*定义段落样式表*/

{

text-align: center;/*文本居中排列*/

color: black;/*文字为黑色*/

font-family: arial/*字体为arial*/

}

hr{color: sienna}

p{margin-left: 20px}

body{background-image: url("images/back40.gif")}

/*定义水平线的颜色为土黄；段落左边的空白边距为20象素；页面的背景图片为images目录下的back40.gif文件*/

/*定义段落样式表*/

{

text-align: center;/*文本居中排列*/

color: black;/*文字为黑色*/

font-family: arial/*字体为arial*/

}

<p class="right">这个段落向右对齐的

</p>

这个段落是居中排列的

</p>

如何写出较好的css

较好的css在于可读性、维护性、扩展性、复用性这几个方面。所以只要提高它们就能解决问题,虽然这么说，也不是如此简单的。

一、可读性

有人认为CSS不是程序，不需要可读性，有人认为CSS只要写出来就有可读性，因为很简单。抛开各种预处理器不说，原生CSS结构确实简单，没有需要编程的部分，但仍然可能导致混乱。原因有二，一是CSS可以层叠，其中涉及到了优先级和作用范围，如果写的不好，人很难读出其中的意义，二是CSS属性众多，加上CSS3引入了很多用法独特的属性，一个选择器可能包含几十个属性。比如下面这段我随便写的CSS代码：

span{

-webkit-box-shadow: 6px 4px 4px red;

-moz-box-shadow: 6px 4px 4px red;

box-shadow: 6px 4px 4px red;

}

div span{

border-width: 4px;

border-style: dotted;

border-color: blue;

}

#box{

border-left: 2px solid red;

border-bottom: 2px solid red;

}

乍一看也没什么，都是border，大致能看出来这段CSS只是为了添加一个红色的阴影让box看起来比较立体。但中间的部分似乎是捣乱的，你可能会说这太傻了，看不到吗。是的，当这3部分散落在上万行的CSS中时，肯定看不到。于是有人很自然的想起了我们可爱的浏览器，没错，在浏览器中可以快速找到作用于目标的CSS样式，但这也是万恶之源。首先我假设你不知道中间那部分东西是为了什么而写的，因为你是靠浏览器找到它的。然后剩下两种可能，不管三七二十一改了再说和看看它为什么存在。前者悲剧的可能性是100%，后者悲剧的可能性是90%，因为你已经掉坑里了，很快我们会发现要修改它还牵扯到了另外的地方，接着在浏览器中探索到另一个莫名其妙的样式，当你弄懂全部的时候，你应该已经把上万行的代码弄了个一清二楚了，也许最幸运的是，浪费了几个小时的时间发现只需要修改一行就能达到目的。

当然，我们可以天真的认为，只要把他们写在一起就可以了，这样找起来很简单。而我将继续顺着这样的思路来尝试曝露问题。

维护性

所谓物以类聚是很有道理的，人们习惯将事物归类，但问题是分类标准，样式并不关心业务，无论是什么文字内容，还是功能有何不同，它在乎的只是样式，比如文字的尺寸，间距和宽高，颜色等等。如果简单的将一个组件的样式放在一起，势必带来的就是小段代码的重复书写。不觉得有多严重？我来举个栗子。

aside{

box-shadow: 6px 4px 4px#AA3343;

}

nav{

box-shadow: 6px 4px 4px#AB3633;

}

.item{

box-shadow: 6px 4px 4px#AA3732;

}

.item.otherStatus{

box-shadow: 6px 4px 4px#AA3132;

}

继续说上面的例子，box需要阴影，但如果这个项目的UI统一风格，包括sidebar，navigator以及item都需要这样的阴影呢？再如果，明天客户或者UX一拍脑袋，这个阴影应该是灰色的不该是红色的呢？不要继续天真的认为全局替换是救命稻草。首先，没有几个网站会用red，blur做色调的，你用的应该是#AA3333，这样的代码，然后你发现sidebar用了#A43433，而navigator是#AB3633，等等，item有两个状态，而两个状态对应的颜色是不一样的。这怎么可能？但当你打开浏览器的时候你会发现本来就相差无几的颜色，在阴影中变得一模一样了，谁看的出来呢，当初使用的时候可能也不过是随意的在mockup中取的一个颜色。

大量的重复带来的不仅仅是代码的冗余，我们必须靠人力去同步它们，而人很难保证它们的修改是完全一致的，尤其是当它们中引入了一些不一致的独特的东西时。不要小看CSS，其后果就是进度和人力的压力，后面就是PM有没有读过《人月神话》的事了。

肯定有人在想，谁让你当初要写成这样呢。我们在读代码的时候最喜欢问，当初为什么要这么写？但慢慢的你会读出它的历史，有时候它是身不由己的。这就涉及到了下一个要讨论的内容。

二、扩展性

扩展性是一个具有欺骗性的东西，所谓的扩展性其实就是在现有基础上再次开发新东西的性能，但我认为它还必须有前提条件，那就是保持可读性与维护性。

简单的追求可维护性是自取灭亡，原因很简单，将新旧代码完全分离的时候扩展性最高，因为不必担心对以前的部分有影响，新的样式可以随意发挥。是不是很神奇，这样想的我们写下的代码，肯定就是前面我们追问的代码。所以自己回答自己吧，当初没考虑可读性和维护性，只想着快点增加新的样式，就这么写了。

那什么才是一个好的扩展性呢，简单来说，就是多功能产品。比如一个box，也许它的样式就时

三、复用性

似乎我一直在说的就是重复，那我们就来说说复用性，如何才能复用CSS代码是一个很大的问题，比如粒度，是一两个属性进行复用还是一大组选择器进行复用呢，再比如对象，是为了class复用属性，还是为了html复用class呢。这些选择不算太重要，但是带来的影响却很重大，可以说是整个CSS结构的改变。下面继续用box的阴影来讨论复用。

.shadow{

-webkit-box-shadow: 6px 4px 4px#A93334;

-moz-box-shadow: 6px 4px 4px#A93334;

box-shadow: 6px 4px 4px#A93334;

border-left: 2px solid#A93334\9;

border-bottom: 2px solid#A93334\9;

}

这样看起来我有了一个shadow的class可以给任意的目标加上这个阴影了，但这导致了一个复用的问题，和上面那段捣乱的CSS样式一样，如果item已有另外2个border了，那这个class是无法去除的。所以复用时不仅要考虑需要什么，还要考虑不需要什么。另外一些必须的属性比如display还有overflow等也是要考虑的，因为user agent的原因，很多属性是隐藏在element中的。

关于css代码怎么写的内容到此结束，希望对大家有所帮助。

java核心技术卷1？java核心技术卷一pdf暗月护符暗月护符瑟银零件