第5课 文字与图像(上)
以前面介绍的盒子模型以及布局属性,在这节课中我们来演示一下关于文字和图像的CSS排版。
本节课时长14分5秒,下载文件20.9兆字节。下载的视频文件为FLV格式,推荐使用“Riva Flv Player”软件播放,点击这里下载。
以下为本课的讲义,供大家参考。
![]() |
![]() |
![]() |
![]() |
![]() |
![]() 了解详细说明 |
以前面介绍的盒子模型以及布局属性,在这节课中我们来演示一下关于文字和图像的CSS排版。
本节课时长14分5秒,下载文件20.9兆字节。下载的视频文件为FLV格式,推荐使用“Riva Flv Player”软件播放,点击这里下载。
以下为本课的讲义,供大家参考。
![]() |
![]() |
![]() |
![]() |
这篇文章发表于 2007年11月27日 星期二 7:00 am,并被分类于深入CSS盒子模型。 您可以通过订阅 RSS 2.0 跟踪对这篇文章的评论。 您可以对这篇文章发表一条评论,或者在您自己的网站中引用 (Trackback) 它。
前沿视频教室的内容版权属于北京前沿科技,http://www.artech.cn。Copyright 2006-2011
本网站使用了 WordPress
2.2
中文版 。






您好,CSS设计彻底研究这本书中的第114页里样式的后面加中括号且里面放个id是什么意思?静候佳音!
老师你好·!为什么有些视频看不了啊看了一半就卡住了·!这是什么问题啊
没有想到你的视频这么的好!!!
太棒了!!!!!!
真的,你讲的真好!!
老师你好!关于长度单位em和ex我不是很懂,有没用具体的通俗点的讲法!书面的意思我不能够彻底的明白
峰峰 ,
ex基本不会用到,em有时候还是用到,你基本上理解为一个字的宽度就可以了,比如说,对于中文,通常要让一个段落(p)的首行缩进两个字的距离,这时用噩梦就很方便:
p
{
text-indent : 2em ;
}
这个你可以去gg上搜索一下,上面有很详细的说法。自己再琢磨一下就行了^!^
很早就开始看你们的教程了 真的很不错 留个言 表示下感谢
无敌歪歪 ,
谢谢您的鼓励,欢迎常来这里交流!
hello,teacher!
question:在此课时中首字下沉的CSS一句:line-height:1.5;中1.5怎么理解啊??不有指定单位时.我没有听
懂??想请教望老师回答!!谢谢!!
strive ,
没有单位表示倍数,就是文字高度的1.5倍。
抱歉没有及时回复,我们最近很忙,下半年我们会拿出更多时间增加新内容的,欢迎来交流!
这个视频教程真的不错,多谢老师
没昵称 ,
谢谢您的鼓励,欢迎您常来这里交流。
温老师讲的很好,赞~~
支持前沿,已经在当当买了2本书《CSS设计彻底研究》《精通Javascript+jquery》
希望在这里学到知识的同学都支持前沿,买书吧!这样的决定可是双赢哦!
hello ,
谢谢您的鼓励和支持!希望您的学得又快又好!
欢迎您常来这里交流。
温老师你好,我想问下line-height到底是用来控制什么的,有人说是一行的高度,有人说是行的间距,我好像见过用这个属性,能让文字居中显示,具体还请你给我说一下,谢谢。
sky,
严格来说应该叫做“行距”或“行高”,而不应该叫“行间距”。
比如有相邻两行,那么line-height的值设定的是,上一行的最高点,到下一行的最高点 之间的距离。
————–
文字
————–
文字
————–
line-height 就是上图中相邻两条虚线之间的距离。
好高兴, 谢谢老师
我学到了很多
我有个问题 我在做过渡背景上面水平平铺 为什么会像条状, 看的出平铺了多少次的那种
ll,
如果你能把网页放在网上,把地址贴到这里,如果不行,就把你做的图片发到我们的论坛,我帮你看一下,论坛地址:
http://talking.artech.cn
谢谢老师啊,还有一个问题.就在我在做博客模板的时候,中间部份是由左右两块,左边是一些常规栏目,右边是日志主体部份。有时候因为日志里图片的原因可能使得右边盒子被撑大,结果右边那一部份就跑左边部份的下边了,这个如何避免啊?没有图片的话就很正常。
那你就注意不要让图片太大,即使你想出某种方式,使得侧边拦不会被顶到下面,图片太大的话,也会盖住侧边拦的一部分,那也不好好看啊。
老师你好,我想问一下,首字放大效果,在我们这个教程里,是给首字一个专门的css定义,可是我看到有的网站,他并没有给首字特别的定义,就是同在P标记下,可那个首字也显示的比其他字大,这是怎么做到的呢?
月儿,
是的,如果不用专门重新定义一个span,用于首字母特殊样式,还可以用伪元素实现,在CSS2种定义了一些伪元素,但是由于各种浏览器支持的不是很完善,所以我们的教程中没有详细介绍。
在你问到的这个具体的例子中,可以使用 “:firstletter”伪元素,这样就不用给首字一个专门的span了。
例如在样式定义部分这样定义:
p:first-letter {
color: #ff0000;
font-size:xx-large;
float:left;
}
这样,正文段落的第一个字母就会以红色、大字体、下沉显示了,你可以试试看效果如何。注意 p:first-letter与{之间要有一个空格,否则,IE不会正确显示。
这估计是我见过最好的网站了,免费下载好东西,呵呵,每天都来,再接再厉,做更多的东西呀
楚易,
只要我们时间和其他条件允许,会不断制作更多的内容的!
温老师~~弱弱的问个文字控制方面的问题,为什么在一个不加任何css的div里,中文会随div宽度和显示器大小而自动换行,而一段不加空格和标点英文字母就会跑到div外面去呢?
还有关于css的display属性和她的属性值,我一直都很不理解,可以帮我解答一下吗?
1:英文单词是不会从中间断开换行的,英文一定在单词与单词之间的空格处换行,因此,如果连续写了一长串字母,中间没有空格,就不会换行。
2:关于display属性的作用非常重要,在前面讲盒子模型的视频里简单介绍了三个重要的属性: block、inline和none,实际上它还有很多其他属性,但都不是很常用。至于具体的用法,最好通过具体的例子,才能深刻体会到,空着说很难真正想清楚。
这套教程里有很多很多例子都用到这一点,用多了自然就会了。就好像学英语,不真正说英语,仅仅抽象讲语法规则还是很难真正理解。
温老师~~我刚刚把 深入理解盒子模型(上下)视频 都再看了两遍,都好象没有看到有关display属性的深入简介?
请看“第4课 浮动与定位(下)”的最后部分。
谢谢温老师解答~~~~~~~
温老师~~~~~您的这本新书什么时候出啊!我的求知欲已经超过你您发布视频教程的速度了,您可以每天多讲一点吗,以前也看过其它一些类似的书籍,但是就的没有您讲的清楚~~期待您的新书!
ivy,你好!
出版社的编辑正在加紧工作中,他们对文字等各个方面很严格的,如果一切顺利,应该在元旦前可以面世!只能请您耐心了~~您先看一看这些教程,有书以后,你就可以把他们彻底搞懂了。
我最近在整理一些比较好的网站提供给大家。不过中文网站讲得好的似乎很少,都是只言片语,没头没尾,东抄西抄。如果大家英文能凑合的话,网上有很多特别棒的英文网站。
国内这方面的内容与国外的差距太大了,我们会尽量把一些比较容易读的资料介绍过来。我们在书里也把一些方法的出处和原创者的网站都列在文中了,如果有兴趣的读者可以追根溯源地找一找,会有更多收获。
呵呵~~~有空白就有需要!既然国内这方面的内容欠缺,那这个空白就可以您来填补啊,一不小心,你的教程就会影响国内的一大批网页设计者,一不小心您的付出就会推动国内网页标准化的发展,再一个不小心,您就会成为国内这方面的权威~~~~呵呵,期待着你更好的教程!
ivy来了~温老师早上7:00 就开始工作了~~~~~~~~坐前排,嘻嘻!