CSS基本语法与核心概念 - CSS基本知识 - 第2课
本节课时长14分54秒,下载文件11.9兆字节。下载的视频文件为FLV格式,推荐使用“Riva Flv Player”软件播放,点击这里下载。
上一课对CSS如何引入HTML页面进行了介绍,本课重点介绍CSS如何控制页面中的各个标记。从控制HTML标记的不同方法入手,介绍各种选择器的概念,以及选择器的声明等,最后介绍CSS继承在实际设计中的运用。
CSS选择器
选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。用户只需要通过选择器对不同的HTML标签进行控制,并赋予各种样式声明,即可实现各种效果。希望大家能够掌握以下几个方面的内容:
- 标记选择器
- 类别选择器
- ID选择器
选择器声明
在利用CSS选择器控制HTML标记时,除了每个选择器的属性可以一次声明多个,选择器本身也可以同时声明多个,并且任何形式的选择器包括标记选择器、class类别选择器、ID选择器等都是合法的。我们在这里主要介绍选择器集体声明的各种方法,以及选择器之间的嵌套关系。希望大家能够掌握以下两个方面的内容:
- 集体声明
- 选择器的嵌套
的继承
学习过面向对象语言的用户,对于继承(Inheritance)的概念一定不会陌生。在CSS语言中继承并没有C++、Java等语言中的那么复杂,简单的说就是将各个HTML标记看作一个个容器,其中被包含的小容器会继承所包含它的大容器的风格样式。我们在这里从页面各个标记的父子关系出发,详细的讲解CSS的继承。希望大家能够掌握以下两个方面的内容:
- 父子关系
- CSS继承的运用





还不错啊。。。。。。。。。
这个教程讲得太好了
第一讲,讲的很好~顶个
这教程太棒啦,我的站现在看着吓人,学好div+css可以改得简洁些,更方便!
太棒了,这下我终于可以告别table了!
我买了CSS设计彻底研究这本书,想和视频一起看学习的,可是你这里的教程打不开呀,只有基础知识第一课能打开看,想重新看一次的时候,又打不开看了?
您好 问下
type=text/css 或 type=/ 这个是什么? 加不加有什么区别?
type=text/css 表示类型是CSS文档,type=/ 就是没指定,对于一般的浏览器来说,都能自动识别,写不写都没多大关系。
讲得很好
讲得很好,学习一下,对自己做网站很有帮助
谢了,网站做的很好。
sam,
谢谢您的鼓励!欢迎常来这里交流!
请问 ID的目的就是要选择页面中唯一的元素。
是不是就是指一个页面中只能使用一个ID元素啊
可以列举几个例子吗
谢谢
Somuns ,
应该说:同一个ID在一个页面中出现一次。
请问:
我用的是 Flash 8.0
你们的Riva FLV Player 我也下载了,视频怎么 不能 播放啊?
谢谢
小洋人,
可以到网上找一找任何能够播放 .flv 格式视频的播放软件爱你都可以,比如“风雷影音”,这个不错。
想问下怎么不能下啊,
只下了一个,下完了就不能下了,,,
xudong ,
您现在再试试看,如果下不了,可能是你使用了一些特殊的下载工具,会大量发出下载命令。
我们之所以对下载采取一些限制措施的原因: http://learning.artech.cn/20090410.thinking-on-site-load.html
chance,第二课第6个页面里面的CSS代码:
h2.special, .special, #one{ /* 集体声明 */
text-decoration:underline; /* 下划线 */
h2.special 这个是标记选择器吗?
.special 这个是类别选择器
蜥蜴 ,
名称不重要,重要的事你知道他们分别选中了那些元素即可。
h2.special 可以被称为复合选择器。
请问老师,在使用id选择器时,如果定义好一个ID选择器后想要把该ID选择器应用的多个DIV上,此时,就会与中要求ID具有唯一性的规则产生冲突,请问应该怎么解决该问题?是限制一个ID选择器上只能应用的一个DIV上还是有别的解决方法,或者是我对ID选择器的使用方法理解有错误,请老师解答。。。。。
大龙虾,
如果用使多个元素使用某相同的CSS样式,就不要使用ID选择器,而要使用类别选择器。ID的目的就是要选择页面中唯一的元素。
还有一个问题,就是为什么CSS代码都被注释掉呢?例如
好像在教程里面没有讲哦!!!
飞飞 ,
这是为了和很古老的浏览器兼容的语法,
现在的浏览器都支持CSS了,所不用这样做了,不需要写在注释里了。
chance,第二课第6个页面里面的CSS代码:
h2.special, .special, #one{ /* 集体声明 */
text-decoration:underline; /* 下划线 */
}
我认为h2.special,是多余的,可以去掉,而且效果确实一样,不知道去掉后是否有语法错误?请指教!
去掉后应改为:
.special, #one{ /* 集体声明 */
text-decoration:underline; /* 下划线 */
}
飞飞 ,
这里是为了演示 选择器的语法, 并不完全是为了做出某个效果。主要是告诉读者 h2.special 这样一种写法的含义。
请问观看时怎么没有倒回去的按钮?有时一句话没听明白想倒回一点听该怎么控制?谢谢
aa ,
播放窗口下侧有播放控制条,可以控制播放进度的哦,如果实在不行,可以下载到硬盘上,然后找一个flv文件的播放器,再播放。
这么好的东西现在才看到。。老师这个是基础吗。您估计几年后会被新的技术所取代呢?
怕瓦落地,
这个东西在可见的未来,不会过时的,这是标准技术,非常稳定的。
哦,我明白了
你们的书在书店可以买到吗?
我们公司下面就是西北书城。要不我去买本
或者是网上购买吗?
冰缘,
谢谢您的支持~
我们只是作者,所以哪个地面书店可以买到,我们无法得到相关信息。这里建议您网上购买,价格便宜,还方便,可以参考:
http://learning.artech.cn/20070802.css-div-buy-book-online.html
你好,素材可以下载吗?我在学习。但是没你们的素材。
冰缘,
抱歉,这部分素材是图书的一部分,由于合出版社有合约,所以不能提供下载了。如果喜欢这本书的内容,不妨买一本,即可以支持为本书付出了努力的很多人,也可以使你学习起来更快捷。
再次感谢!
素材能下载不?
可以
牛牛,
抱歉,这部分素材是图书的一部分,由于合出版社有合约,所以不能提供下载了。如果喜欢这本书的内容,不妨买一本,即可以支持为本书付出了努力的很多人,也可以使你学习起来更快捷。
再次感谢!
[…] 第2课 CSS基本语法与核心概念 […]
我很想请教一个问题。就是例如腾讯的http://tech.qq.com/a/20071222/000024.htm评论提交板块,我在源代码中怎么查不到它的代码部分呢。。
我对他评论提交区域的“腾讯网”Logo挺感兴趣的,不知道怎么写在里面的
我没有仔细研究它的具体实现方法,不过我想可能是为了避免垃圾留言,用Javascript动态生成的一段代码,在页面源代码中看不到,这是不难实现的,如果对JS和DOM比较熟悉,做到这个不困难。
第二个你是说得浅灰色的背景图像吗?那个应该用CSS的背景图像(background属性)就可以实现了,我觉得应该也不困难。
请问右上角的搜索如何设计呀
mumakiss ,你好:
这是使用google提供的“custom search engin”即“定制搜索引擎”功能实现的,您的网站也可以实现的。您可以访问Google的网页: http://google.com/coop/cse/。
Tom你好,管理员的回答对于你的问题是不对的,他是说他这站是DIV CSS,而不是所有站都是DIV CSS,还有TABLE的。呵呵。
ShgHnn,你好!
呵呵,你说得有道理,我当时理解的是Tom问的是这个网站是不是CSS DIV做的,如果对于所有网站来说,那就多了,有很多方法了,谢谢你提出来的补充说明!
请问是不是所有的网站前台界面都是用CSS DIV设计的。
Tom,你好!
没错,这个网站的页面正是用CSS DIV布局的。