陈力：传智播客古代珍宝币泡泡龙游戏开发第八讲：DIV+CSS中类选择器、id选择器和html选择器介绍

zhenbaobe

于 2015-07-19 15:55:17 发布

阅读量588

点赞数

本文链接：https://blog.csdn.net/zhenbaobe/article/details/46955433

版权

陈力：传智播客古代珍宝币泡泡龙游戏开发第八讲：DIV+CSS中类选择器、id选择器和html选择器介绍

陈力：传智播客古代珍宝币泡泡龙游戏开发第七讲：DIV+CSS入门。在贵阳网站建设中，经常需要进行网站建设的布局，传统的通过Tabel来布局的存在显示和样式在一起的问题，DIV+CSS将显示和数据分离，极大的提供了网站建设布局的灵活性，本节对DIV+CSS中类选择器、id选择器和html选择器进行介绍。

什么是DIV+CSS?

DIV+CSS是目前比较流行的网页布局技术，DIV元素是用来为HTML文档内大块的内容提供结构和背景的元素。
DIV是用于存放内容（文字、图片、元素）的容器。
CSS是Cascading style sheets(层叠样式表)用于指定放在DIV中的内容如何显示，包括这些内容的位置和外观。

[更多]

掌握DIV+CSS要深入理解标准流、盒子模型、浮动、定位等内容。理解块级元素和行内元素。
为何要学习DIV+CSS：可以很好的统一网站建设的显示风格，可以使用滤镜技术。
案例分析：

软件设计,PHP教程,贵阳网站建设

要实现上面界面，其程序设计代码如下：

<html>

<link rel="stylesheet" type="text/css" href="css2.css"/>
<body>

栏目一:软件设计
栏目二:网站建设
栏目三:毕业设计
栏目四:网站优化
栏目五:毕业论文
</body>
</html>

CSS文件程序设计代码如下：

/*.s1 用术语类选择器*/
.ss1{
color: blue; /*字体颜色*/
font-size: 30px; /*通过像素来指定*/

/*text-decoration:underline;*/
}
.ss2{
color:yellow;
font-size:12px;
}
.ss3{
color:blue;
font-style:italic; /*italic:斜体。*/
}
.ss4{
color:green;
font-weight:bold;/*粗体 */
}
.ss5{
color:#9C3131;
}

滤镜技术：

滤镜前的显示如下：

软件设计,PHP教程,网站建设

滤镜后的显示如下：

软件设计,贵阳网站建设

实现当鼠标称动到上面时显示彩色。
实现的代码如下：

<html>
<head>

<style type="text/css">
a:link img{
filter:gray;
}
a:hover img{/*鼠标称上时不显示恢色*/
filter:"";
}
</style>
</head>
<body>
<a href="3"><img src="2.jpg"/></a>
<a href="3"><img src="3.jpg"/></a>
<a href="3"><img src="4.jpg"/></a>
<a href="3"><img src="cat1.jpg"/></a>
</body>
</html>

 Css中常用的四种选择器：
1. 类选择器(class选择器)

类选择器用"."开头，也叫class选择器。
.类选择器{
属性名: 属性值;
….
}
比如.ss1{ color:green; font-weight:bold;/*粗体 */}

2. id选择器
类选择器用"#"开头
#id选择器{
属性名: 属性值;
….
}
案例:
/*id选择器的使用*/
#id1{ background-color:silver; font-size:40px;}
#page_bottom { margin-top:10px;}

3. html元素选择器

如何软件设计人员希望网页中的默认字体为橙色，此时网站建设时就要用到html选择器。

某个html元素{
属性名:属性值;
…
}

可以在新闻一前加了一个北京你好。默认时是黑色的，现在我们要设置为橙色。

如果用body{color:orange;}此时的html选择器，所在的字体都变成橙色。

Table{}
P{}
Button{}
//对html元素样式分类
P:cls{}
引用

4. 通配符选择器

以*开头的选择器,可以用到所有的选择器中，其优先级最低。
css 文件可以使用在各种文件(php,html,jsp,asp…)
*{}
/*通配符选择器*/
*{
margin-top:40px;
margin-left:20px;
}
margin写法：
检索或设置对象四边的外补丁。默认值为 0 0。如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。如果只提供一个，将用于全部的四边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
margin:0px;padding:0px;清零。可以让所有html元素的外边距和内边距都默认为0，有时特别有用
新闻列表例子:

软件设计,贵阳网站建设

案例:

在贵阳网站建设中，软件设计人员希望所有的超链接
(1)默认样式是黑色，24px,没有下划线
(2)当鼠标移动到超链接时，自动出现下划线
(3)点击后,超链接变成红色。在PHP教程中这又该怎么用实现呢?
软件设计,贵阳网站建设,PHP教程
相关代码如下：
<a href="">连接到贵阳网站建设</a> 
<a href="">连接到贵阳软件设计</a> 
<a href="">连接到网站优化</a> 

CSS程序设计代码：
body{
color:orange;
}
a{
color:black;
text-decoration:none;
font-size:24px;
}
a:hover{
text-decoration:underline;
font-size:20px;
color:green;
}
a:visited{
color:red;
}

选择器优先级：Id选择器> class选择器> html选择器> 通配符选则器

父子选择器：

#id1{background-color:gray; fong-size:40px; color:black;}

/*父子选择器*/
#id1 span{color:red;font-style:italic;}
#id1 span span{color:green;}
#id1 span span a{color:blue;}
html文件中引用：
这是一则非常重要<a href="">连接到百优网络</a>的新闻

总之，在网站建设的php布局中，类选择器和id选择器都可以有父子选择器。当引用的层叠关系完全和父子选择器一致，引用就会被修饰限制。选择器优先级：Id选择器> class选择器> html选择器> 通配符选则器。贵阳网站建设的朋友们，如果要想设置一个科学合理的企业网站，必须先学好DIV+CSS，才能更好的进行网站建设布局设计。本节对DIV+CSS中类选择器、id选择器和html选择器进行介绍到此结束，希望对读者有一定帮助。

【推荐阅读】