css控制样式,css可以控制的显示样式

怎样做好CSS样式的管理呢

学习WEB标准的朋友一般都是从学习CSS开始，为什么呢？因为CSS是一种很有意思的语言，它能让我们的网页千变万化。也许我们一开始的接触只是因为链接的样式修改，然后慢慢发现CSS的强大而又简单，于是我们用它来控制整个网页的布局、排版、色彩、图片等等工作。学习了CSS之后我们又会发现XHTML的结构更为重要，一个好的XHTML结构可以让CSS少费很多事。同时也会避免网页在不同浏览器之间的差异。于是又开始学习了XHTML代码，并且不断的去摸索着XHTML的结构的特点。会写CSS了，也懂得XHTML结构的重要性并能灵活应用的时候，是不是就可以了呢。也许这时我们就会发现其实样式的管理同样非常的重要。

大家也许都已经有了自己的管理方式，因为所要应用的网页类型的不同可能管理的思路也不一样，这里我只是把我的样式管理做一个整理。算是给大家提供一个可以参考与研究的范例，给对于没有形成自己的管理方式的朋友们提供一个参照范本。

我的样式管理是针对于单一项目、单一的风格体系的网站，一般这样的网站都是中小型的网站，风格是上一致的。对于大型网站，或是风格差异很大的'网站体系是不适用的。我们在做样式之前首先要想到样式的易维护性。一旦需要修改就必需要快速方便，修改工作的成本是很高的，所以我们要尽量避免这样的工作所占用时间的扩大。那我们就有必要把样式与结构代码分开。下面看一下我的目录分配方法：

其中，[images] 是存放xHTML中出现的图片，[jonStyle]我统称之为主题包，在样式包中包括了[CSS]、、[js]分别存放CSS样式表、样式表中所引用的图片、网页中所用的JS。这里存放图片的与外面的[images]虽然都是存放图片的，但是这里的图片的性质却是不一样的。是CSS中所引用的图片，所有的图片的显示与否都与CSS样式有关，他的归属性是，里的图片是归属于CSS的，而不是XHTML的。而CSS是不会引用[images]中的图片。[images]中的图片只归属于xHTML，xHTML也不要直接使用中的图片。

这里把[js]也放在了[jonStyle]文件夹中也许会有人觉得不妥，我的考虑是这样的：行为与样式本都是使得这个XHTML的结构能多姿多彩。当我们需要更换皮肤的时候，也有可通这个行为也是需要更换的。比如：在第一套方案中，某个区块的内容是要上下滚动的，然而在第二套方案中，这个区块就需要左右滚动。那么这个行为也需要与样工一起更换。当然实际应用的时候不一定是这么简单理由。

基本上大的结构是这这样的。那么样式表的结构又是怎么样的呢？我是这样来划分的：样式包中有一个base.css（基本共用样式）module.css（模块样式）forms.css （表单样式）mend.css（补丁样式）print.css（打印样式）

其中base.css是一个基本的样式，也就是所有网页的共性样式，这个样式与module.css配合基本上可以显示正常的页面。表单的划分，也可以有利于对不同地方的表单的样式管理。WEB标准涉及兼容性，所以需要有样式补丁当然还有针对性的这里就不一一列举。最后一个的打印样式，是提供给打印设置使用的。

我通过这样的划分，在对于维护与网站的样工更新上，就显得非常的容易，基本上可以在不需要程序人员的参与下就可以完成对网站的皮肤的更换。如果一个网站同时具备很多个主题包，那么只要简单的在XHTML中更换主题包的名称就可以使用不同的样式。这与网站的程序相配合将可以做出非常好的，具有很强扩展性的应用网站来！

相关问答

Q1: css样式如何控制div到最顶层

1、新建一个html文件，命名为test.html

2、在test.html文件内，使用css设置页面所有的div宽度为300px，高度为300px，div的位置为绝对定位。

3、在test.html文件内，创建三个div，并用文字标识，分别为底层div、中层div、最顶层div。

4、在test.html文件内，分别给三个div设置class属性为one、two、three，用于下面对类名进行样式设置。

5、在css标签内，设置类名为one的div样式，设置其背景颜色为红色，距离页面左边缘为0，距离页面上边缘为0，同时使用z-index设置其层级为1。

6、在css标签内，设置类名为two的div样式，设置其背景颜色为黄色，距离页面左边缘为50px，距离页面上边缘为50px，同时使用z-index设置其层级为2，即在类名为one的div的上面。

7、在css标签内，设置类名为three的div样式，设置其背景颜色为粉红色，距离页面左边缘为100px，距离页面上边缘为100px，同时使用z-index设置其层级为3，即在页面三个div中的最顶层。

8、在浏览器打开test.html文件，查看实现的层级效果。

Q2: 怎样才能用css控制第一个li标签的样式，和其他li的样式不同

css控制第一个li标签的样式，和其他li的样式不同：给第一个li标签添加class或者id，然后编写css代码。

html：给第一个li元素添加一个class类名为“menu1”。

html：

ul

li class=“menu1”新闻一/li

li新闻二/li

li新闻三/li

/ul

css代码：

li{font-size：14px；} //4px大小的字体

.menu1{font-size:18px;font-weight：bold；} //字体样式：粗体18px字体

效果：

Q3: css控制ul标签下li样式

在ul标签下li的默认样式为一个实心圆（disc）   可忽略不写

li样式的改变是用 list-style:属性值 来改变的

我们给li设置css，去除默认样式（实心圆）

将li的样式设置为空心圆

将li的样式设置为实心正方形

其他：

 decimal   :  　CSS1　阿拉伯数字

  lower-roman   :  　CSS1　小写罗马数字  

  upper-roman   :  　CSS1　大写罗马数字  

  lower-alpha   :  　CSS1　小写英文字母  

  upper-alpha   :  　CSS1　大写英文字母  

  armenian   :  　CSS2　传统的亚美尼亚数字  

  cjk-ideographic   :  　CSS2　浅白的表意数字  

  georgian   :  　CSS2　传统的乔治数字  

  lower-greek   :  　CSS2　基本的希腊小写字母 

  hebrew   :  　CSS2　传统的希伯莱数字  

  hiragana   :  　CSS2　日文平假名字符  

  hiragana-iroha   :  　CSS2　日文平假名序号  

  katakana   :  　CSS2　日文片假名字符  

  katakana-iroha   :  　CSS2　日文片假名序号  

  lower-latin   :  　CSS2　小写拉丁字母  

upper-latin   : 　CSS2　大写拉丁字母 

Q4: 有哪些CSS选择器可以用来控制样式？

ID名选择器

#con {

    border: 1px solid red;

  }

代码解析：表示找到ID名为con的元素，并为元素设置1像素、实线、红色边框。

类名选择器

.con {

       border: 1px solid red;

   }

代码解析：表示找到类名为con的元素，并为元素设置1像素、实线、红色边框。

标签选择器

div {

    border: 1px solid red;

  }

代码解析：表示找到标签名为div的元素，并为元素设置1像素、实线、红色边框。

后代选择器

.con p {

    border: 1px solid red;

  }

代码解析：表示找到为类名为con里的所有p元素，并为元素设置1像素、实线、红色边框。需要注意的是不单单是子代受到影响，所有的后代均会受到影响。

子代选择器

.con  p {

    border: 1px solid red;

  }

代码解析：表示找到为类名为con里的子代p元素，并为元素设置1像素、实线、红色边框。需要注意的是只是子代受到影响，而非所有的后代均会受到影响。

群组选择器

.con p, .box {

    border: 1px solid red;

  }

代码解析：表示找到为类名为con里的所有p元素，并为元素设置1像素、实线、红色边框；找到类名为box的元素，并为元素设置1像素、实线、红色边框；

常见的CSS选择器如上，还有伪类、属性、通配符选择器以及CSS3新增的大量选择器，可以查看《CSS选择器以及选择器优先级》