关键词：PHP教程,贵阳网站建设,网站建设
《一步一步跟我学PHP》第八讲：DIV+CSS中类选择器、id选择器和html选择器介绍
作者：管理员
核心提示：在贵阳网站建设中，经常需要进行网站建设的布局，传统的通过Tabel来布局的存在显示和样式在一起的问题，DIV+CSS将显示和数据分离，极大的提供了网站建设布局的灵活性，本节对DIV+CSS中类选择器、id选择器和html选择器进行介绍。
已被点击次
服装连锁店ERP管理系统可以高效完成物流配送，考勤管理，工资管理，员工管理，报表管理，陈列管理等功能，是服装连锁企业理想的选择。
热点|热点|热点|热点|热点|
更新时间：14:08:37
---------------------------------------------
---------------------------------------------
点击排行分享排行收藏排行
1| 2| 3| 4| 5| 6| 7| 8|
1| 2| 3| 4| 5| 6| 7| 8|
1| 2| 3| 4| 5| 6| 7| 8|
《一步一步跟我学PHP》第八讲：DIV+CSS中类选择器、id选择器和html选择器介绍
&&& 在贵阳网站建设中，经常需要进行网站建设的布局，传统的通过Tabel来布局的存在显示和样式在一起的问题，DIV+CSS将显示和数据分离，极大的提供了网站建设布局的灵活性，本节对DIV+CSS中类选择器、id选择器和html选择器进行介绍。
&&&&什么是DIV+CSS?
&&& DIV+CSS是目前比较流行的网页布局技术，DIV元素是用来为HTML文档内大块的内容提供结构和背景的元素。&&& DIV是用于存放内容（文字、图片、元素）的容器。&&& CSS是Cascading style sheets(层叠样式表)用于指定放在DIV中的内容如何显示，包括这些内容的位置和外观。
&& &掌握DIV+CSS要深入理解标准流、盒子模型、浮动、定位等内容。理解块级元素和行内元素。&&& 为何要学习DIV+CSS：可以很好的统一网站建设的显示风格，可以使用滤镜技术。&&& 案例分析：
&&& 要实现上面界面，其代码如下：
&html&&!--css 部分可以单写一个CSS文件，然后引入这个文件，称为外联CSS;或者直接嵌入到该html文件,称为内联CSS--&&link rel="stylesheet" type="text/css" href="css2.css"/&&body&&!--span元素,是HTML中通常用于存放小块内容的元素--&&span class="ss1"&栏目一:&/span&&span class="ss2"&栏目二:&/span&&span class="ss3"&栏目三:&/span&&span class="ss4"&栏目四:&/span&&span class="ss5"&栏目五:毕业论文&/span&&/body&&/html&
CSS文件程序设计代码如下：
/*.s1 用术语 类选择器*/.ss1{&color:&&&&&&& /*字体颜色*/&font-size: 30&& /*通过像素来指定*/&&/*text-decoration:*/}.ss2{&color:&font-size:12}.ss3{&color:&font-style: /*italic:斜体。*/}.ss4{&color:&font-weight:/*粗体 */}.ss5{&color:#9C3131;}
滤镜技术：
滤镜前的显示如下：
滤镜后的显示如下：
screen.width-333)this.width=screen.width-333" style="HEIGHT: 118 WIDTH: 535px" border=0 alt=软件设计,贵阳网站建设 src="http://www./pic/_204631.jpg" width=607 height=118>
实现当鼠标称动到上面时显示彩色。实现的代码如下：
&html&&head&&!--如何把css直接嵌入到html文件(内联css)--&&style type="text/css"&&a:link img{&&filter:&}&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:&font-weight:/*粗体 */}
2.&id选择器类选择器用"#"开头#id选择器{&属性名: 属性值;&….}案例:/*id选择器的使用*/#id1{&background-color:&font-size:40}#page_bottom&{ margin-top:10}
<FONT color=#.&html元素选择器
如何软件设计人员希望网页中的默认字体为橙色，此时网站建设时就要用到html选择器。
某个html元素{&属性名:属性值;&…}
可以在新闻一前加了一个北京你好。默认时是黑色的，现在我们要设置为橙色。
如果用body{color:}此时的html选择器，所在的字体都变成橙色。
Table{}P{}Button{}//对html元素样式分类 P:cls{}引用&p class=”cls”&&/P&
<FONT color=#.&通配符选择器
以*开头的选择器,可以用到所有的选择器中，其优先级最低。css 文件可以使用在各种文件(php,html,jsp,asp…)*{}/*通配符选择器*/*{margin-top:40margin-left:20}margin写法：&&& 检索或设置对象四边的外补丁。默认值为 0 0。如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。如果只提供一个，将用于全部的四边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。 margin:0padding:0清零。可以让所有html元素的外边距和内边距都默认为0，有时特别有用新闻列表例子:
&(1) 24px,
screen.width-333)this.width=screen.width-333" style="HEIGHT: 187 WIDTH: 464px" border=0 alt=软件设计,贵阳网站建设,PHP教程 src="http://www./pic/_221311.jpg" width=544 height=295>
相关代码如下：
&a href=""&连接到贵阳网站建设&/a&&br/&&a href=""&连接到&/a&&br/&&a href=""&连接到网站优化&/a&&br/&
&CSS程序设计代码：body{& color:}a{color:text-decoration:font-size:24}a:hover{&text-decoration:&font-size:20&color:
}a:visited{color:}
选择器优先级：
&&& 总之，在网站建设的布局中，类选择器和id选择器都可以有父子选择器。贵阳网站建设的朋友们，如果要想设置一个科学合理的企业网站，必须先学好DIV+CSS，才能更好的进行网站建设布局设计。本节对DIV+CSS中类选择器、id选择器和html选择器进行介绍到此结束，希望对读者有一定帮助。
【推荐阅读】&&&&&&& & &
声明：本站内容凡注明"来源：百优资源网"的所有文字、图片等资料，版权均属百优资源网原创，任何媒体、网站或个人不得转载、链接、转贴或以其他方式复制发布/发表。本网站部分资源来源于网络，如果有侵犯你的权利，请联系本站删除。
请您先登录，再发表评论。
*网友评论仅供其表达个人看法
使用VC++加载图片技巧
在界面添加图片，在VB、delphi等软件设计语言中很简单，但是在VC++中是很难实现，这过程不但要对图片进行导入，还要显示，最后要清除内存。下面小编对这个方法进行了整理，直接复制就可以实现使用VC++加载图片技巧了。
SEO优化工具软件软件功能分析
在贵阳网站建设,经常要进行网站优化,这是为企业品牌推广优化的必须工作.本文对SEO优化工具软件软件功能分析进行介绍.
对贵州中药业发展的思考
中药产业是我省独具特色和优势的民族产业和战略产业，更是贵州发展的潜在支柱产业，也是本身医药发展之根本。本文对我省的中药业面临的问题进行探索，旨在对该产业的发展作出有益的贡献。CSS规则里的类、ID、标签、复合内容是什么意思？_百度知道
CSS规则里的类、ID、标签、复合内容是什么意思？
1. 类，class=&test& css，.test{}要是想使用类名，css的写法就是.+类名 2. id，id=&test&css，#test{}使用id的时候，就是#+id名 3. 标签，body,html,a,b,h1{}标签直接使用，什么都不要加 4. 选择器名字可以随便使用，你要是使用a也可以，但是到底是类名，还是id，还是标签，在css中是不一样的写法。虽然可以随便，但是最好还是使用有代表意义的名字
其他类似问题
为您推荐：
margin-right类就是classid不允许重复标签是指p、ul:30 margin-bottom:10px:20px:10px 20px 30px 40 }#id1{margin-left:40px、li等元素 复合内容是
还是实例说#id1{margin-top
其他1条回答
类就是class名字 可以在div里重复使用的 id不允许重复
标签指p、ul、li等等元素
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
> div id与div class什么意思？和用法有什么讲究呢？
在、、、等标签中看见id和class使用，id和class是非常常用的标签内属性。
&id=&header&&&class=&menu&&
div id与div class解析图
以上是我们常见看见id与class存在于内。&header&和&menu&是自定义的。(、）
一、id与class用法讲解
1、使用区别
id具有唯一性，在一个网页中同一个命名只能使用一次；
class命名的类可以在一个网页中使用无数次。
id在css代码中是以&#&井号符号开头命名的类
class在css代码中是以&.&小写句号符号命名开头的类
二、id与class什么意思
id和class都可以在网页中任何标签内使用。一般比较重要的部分、比较特别的盒子使用id，而小局部不重要的或小结构使用class。id调用css中以&#&井号命名的样式选择器，class调用css中以&.&英文半角小写句号命名的样式选择器。
相关教程：
5、如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials&#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; ()&#8226; &#8226; ()&#8226; ()&#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; 必备HTML基础教程 Essential HTML Tutorials &#8226;
&#8226; () &#8226; () &#8226; () &#8226;
&#8226; () &#8226;
&#8226; () &#8226;
&#8226; 如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 11:14
原创：本文 DIVCSS5版权所有。最新文章NEWS&#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; CSS EFFECTS相关文章RELATED&#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; 热点文章HOT
学习与资源分享平台css中id与class的区别_百度知道
css中id与class的区别
#是idid是唯一的,类是可以重用的.比如你有多个地方样式要求一样的话,就用类.这样就不用些多个#了..name{.....}&div class=&name&&&&#47;div&&div class=&name&&&&#47;div&
&#47;*就像这样.你多个地方都想要同一个样式就这样写.#Idname{.......}&div id=&Idname&&&&#47;div&
&#47;*id只有一个.
其他类似问题
为您推荐：
id应该是页面的唯一标识，你不写他的样式也没事的，就算混一起也没什么，而且id和class也不只是css用到的.标识，class是用在写样式的时候，id是用#标识，所以一个页面元素id不要重复，class就没所谓
没什么值得注意的，你只需要明白同时被ID和CLASS定义的元素，元素内容表达的是CLASS的规定；比如你的#a{COLOR:RED}
.b{COLOR:BLUE}&div id=&a& class=&b&&这里的内容显示的是蓝色&/div&
id在页面中只能出现一次，class可以无限次套用，在同一个div里同时出现ID和CLASS样式，ID更优先于CLASS。
一般id是唯一的，id的权重比class高
您可能关注的推广
class的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁css样式中ID，class，和标签属性style的区别
&共性我们可以用类选择符法定义，而个性就可以用id法来定义样式规则。
回顾css样式的标签属性style用法
我们之前已经初步学习了CSS样式使用方法，以及常用的一些样式规则。使用形式如下：
&标签名 style="规则:规制值;..." & ...
&标签名 style="规则:规制值;..." /&
我们这种CSS样式的用法虽然已经比传统的HTML标签来的更加优越，但还有许多时候还是存在缺点。譬如下面HTML内容：
&p style="font:12px
宋体;color:text-indent:2"&段落文字1
&p style="font:12px
宋体;color:text-indent:2"&段落文字2
&p style="font:12px
宋体;color:text-indent:2"&段落文字3
我们很明显可以看出段落的样式都定义了完全相同的规则，如此重复，就有些代码冗余，能不能可以再简练点呢？
--------------------------------------------------------------------------------
CSS样式定义规则的标签选择符法
为了可以使同样的样式规则定义到相同类型的HTML标签上，我们可以使用标签选择符来实现，在学习之前我们必须要学习一个HTML标签:
style。很熟悉是吧，我们之前这个style是标签的属性，但现在是HTML标签。如何使用呢？这个标签必须放在我们以前学过的head标签中，所以形式如下：
&style type="text/css"&
&!--我们要定义的样式规则在这里--&
标签style的type属性指定在style里面定义的文本类型的css内容，虽然可以缺省，但最好指定text/css。好了我们开始学习标签选择符的css样式规则定义法吧。
&style type="text/css"&
p { font:12px 宋体;color:text-indent:2 }
&p&段落文字1
&p&段落文字2
&p&段落文字3
通过以上法则，我们就可以使body中的三个p拥有相同的样式规则，不仅如此，以后再添加p标签都会拥有如此样式规则。
标签选择符法的语法规则：标签名 { 样式规则 }。 这里的标签名就是选择符。
--------------------------------------------------------------------------------
分组选择符法定义样式规则
那如何使不同的标签可以拥有相同的样式规则呢？
&head&&style
type="text/css"&
h1,h2,h3,h4,h5,h6 { color: }
&/head&&body&
&h1&h1标题&/h1&
&h2&h2标题&/h1&
&h3&h3标题&/h1&
&h4&h4标题&/h1&
&h5&h5标题&/h1&
&h6&h6标题&/h1&
显示结果：
通过分组选择符法，我们定义了6个标题标签h1-h6中内容的字体颜色为灰色(gray)。自从使用了选择法，我们看出，css样式规则定义在style标签中，使的body中的正文内容又显得更加简练了。好事情！
分组选择符法语法：选择符,选择符,... { 样式规则 }
--------------------------------------------------------------------------------
类选择符法定义样式规则
虽然前两种选择符法可以批量定义样式规则，但也存在缺点。譬如看以下代码：
&style type="text/css"&
p { font:12px 宋体;color:text-indent:2 }
h1,p { background: }
&p&段落文字1
style="background:"&段落文字2
&/p&&p&段落文字3
&h1&标题1&/h1&&h1
style="color:"&标题1&/h1&&h1&标题1&/h1&
显示结果：
可以看出如果要特定指定某个标签的样式规则，我们还是需要使用标签的style属性法。我们发现通过标签style属性定义规则会比其他两种规则定义法来的优先。所谓优先，就是指可以覆盖（覆盖就是Cascading
Style Sheets中Cascading的意思）其他规则定义法定义的样式规则。标签的style属性法
比标签选择符法和分组选择符法的优先级别都要高，并且是所有规则定义法中“最高的”。
我们来看看怎样类选择符法，一种新的样式规则定义法。首先我们要学习一个HTML标签的属性class，这个属性来定义标签的类名，我们可以通过类名来定义样式规则。
HTML内容：
&style type="text/css"&
.class1 { font:bold 16px 黑体; color: }
.class2 { font:normal 12px 宋体; color: }
&p class="class1"& class1的风格
&p class="class2"& class2的风格
&p class="class1"& class1的风格
&div class="class2"& class2的风格
显示结果：
我们发现属于同一类的具有相同样式风格，通过指定标签相同class的属性值，即使不是相同HTML标签。在一张网页中可能会用到许多各种各样的HTML标签，为了使你需要的标签符合同一种样式风格，我们可以使用类选择符定义法。
类选择符定义法语法： .类名 { 样式规则 }
--------------------------------------------------------------------------------
ID选择符法定义样式规则
所谓共性和个性，我们在生活中经常有这样的说法，譬如猫，狗，羊都是属于哺乳动物，都有哺乳动物的共性，但每种动物都有其个性特征，猫叫，狗叫，羊叫的声音都不一样。在HTML的css样式中也存在这种情况，共性我们可以用类选择符法定义，而个性就可以用id法来定义样式规则。
在这当中我们要学习使用HTML标签的id属性，id是英文单词identifier，意思标识号。单张网页中的HTML标签的id值只能指定一个唯一的名字。就如我们的身份证号码，是唯一标识一个人的。为了单独定义某个指定标签的样式规则，我们可以使用id选择符法。
HTML内容：
&style type="text/css"&
.class1 { font:bold 16px 宋体;background: color:}
#div1 { background: text-decoration: }
class="class1"&内容1&/div&
&div id="div1"
class="class1"&内容2&/div&
class="class1"&内容3&/div&
显示结果：
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。