你不曾领略的CSS——【牛腩新闻发布系统】

浏览数：36 / 时间：2015年06月09日

一、背景：

　　随着互联网的发展，网页对个性化要求也不断的提高。HTML,HyperTextMarkupLanguage，超文本标记语言，原来就是一说明文，但是用户需要更多的标签和属性，然后就就一个劲的添HTML标签和属性，造成网页内容和样式混乱，不容易维护。所以，就在这个时候CSS横空出世，实现了网页内容和样式的分离，极大的提高了编写、修改页面的效率！

二、CSS是什么？

CSS（CasCading Style Sheets）,层叠样式表，就是样式、内容像汉堡包一样，一层一层叠起来，夹心的~

三、CSS选择器是什么？

要使用CSS对HTML页面中的元素实现一对一(ID)、一对多(class)、或者多对一(标签)的控制，需要用到CSS选择器。其实它就是一媒婆，给css和html牵线搭桥的。

ID选择器就像身份证一样，一人一个，更具针对性；类选择器在easyUI里面很常用，例如把easyUI里面控件中的class设置成easyUI-datagrid,表格样式就能得到很好的统一，个人觉得如果做附带不少子系统的大系统，class选择器有一统江湖的好本领；标签选择器，不管你的脑袋（head）,还是胳膊腿（body）的,都在标签的控制范围内~

CSS选择器的种类和优先级：

ID选择器>class选择器>HTML标签选择器

下面通过一个小DEMO来验证一下选择器的优先级：

1.首先在客户端创建一个CSS样式表，代码如下，
/*
*创建人：王美
*创建时间：2015年2月23日16:14:53
*/

/*css样式*/

/*标签选择器*/
body {
 color:#f0f;/*粉红色*/
}


/*类选择器*/
.menu {
 color:#f00; /*红色*/
}

.title { /*新闻标题样式*/
 color:#00f; /*蓝色*/
}

/*ID选择器*/
#special {
 font-weight:bold ;/*粗体*/
 color:#0f0;/*绿色*/
}
2.建立一个HTML页面：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>css测试</title>

 <link href="css/StyleSheet.css" rel="stylesheet" />
</head>
<body>
 栏目四
 栏目五
 栏目六
 这是 一条新闻标题
 434434343434346464
</body>
</html>
3.运行后显示结果：

4.综上所述，栏目四的ID是special,类是menu,special在css中颜色为绿色，menu的字体颜色为红色，栏目四为绿色，证明优先级 ID选择器>class选择器；body HTML标签里面，有class的为红色，默认bodyHTML标签格式为粉红色，证明优先级 class选择器>HTML标签选择器