众所周知,所有的document元素都会生成一个长方形的box来布局,称为元素box,而且这个box是具有排他性的,同一个区域是不允许有多个box交叠的。这就是前端最熟悉的盒模型:
一般来说,这里说的宽度和高度指的都是上面图中inner edge的宽和高。而这两个属性最重要的一点就是它们不作用于inline的不可替代元素。举例来说,
如果你给链接设置了宽高,那么浏览器就会忽略这些声明:
在盒模型中,从里到外的第2层就是padding:
该属性接受任何的长度值,包括百分比。例如:
从上图中我们发现,padding也是在背景的覆盖范围的。
默认来说,元素是没有padding的。但一般情况下我们还是希望有padding的,不然border有时候看起来就离内容太近了:
另外padding是由方向的设置顺序的,来看下:
而且每个方向上,你所用的长度单位都可以是不一样的,举个列子:
有时候你会碰到相同的padding数值,例如
这可以简化为:
这是怎么实现的呢?其实在CSS内部定义了一套规则:
换句话说,如果只给了三个值,那么第四个left就会拷贝right的值。如果只给定2个值,那么第三个拷贝第一个,第4个拷贝第二个。如果只给了一个值,那么所有值都从它身上拷贝。
这个属于大家非常熟悉的部分了:
百分比的计算核心在于标准的确定,在padding中,其标准就是父元素的内容区域的宽度。举个例子:
设置百分比的padding存在一个问题,就是当父元素未设置宽度,而且随着浏览器会变化宽度的情况,那么这个padding的宽度也会跟着一起变动。
如果对一个inline元素施加padding是不会改变元素的高度的,例如:
这是因为对于不可见的背景情况下,padding是被设置为透明的,所以上面的声明不会改变行高。但如果设置了背景,情况就不一样了:
上面我们看到了处理padding top和bottom的情况,但是left和right的padding有点不同。如果对inline元素设置了left和right的padding是有效果的:
那如果inline元素跨行了会怎么样呢?
很自然的,left作用于开头,而right作用于结尾。
我们还是拿图片来举例,试着为图片添加padding:
不管可替换元素是block的还是inline的,这一padding都会加上,如下图所示:
在padding外面一层的为border,默认来说,background的颜色的边界就是在border这层。而每个border都有三部分组成:宽度,厚度和样式。对于宽度来说,默认值为medium,一般来说是2px。但有没有发现平常我们很少注意到,每个元素的border宽度已经设置好了?那是因为border的样式默认设置为none,所以我们压根看不到。最后来说说border默认的颜色,就是它的前景色(foreground color)。
另外刚说了背景区域到border位置,但是到border的内边界还是外边界没说。其实按照CSS的标准定义,这个需要扩展到外边界,因为有些border是dotted的。
border的样式是最重要的,因为你不设置,它就压根不出来。
CSS中定义了10中不同的样式,包括默认的none,列举如下:
其中最难搞得就是double,border样式为两行,而其中的空白的宽度就是border-width的宽度。而且CSS标准中并没有规定两条线的粗细的标准,都依赖浏览器去实现。
下面来看看另外需要颜色的border类型:inset,outset,groove,ridge
默认来说,border的颜色是基于元素的颜色。但是颜色的变化又得完全依赖浏览器去实现,来看看不同的实现:
在border-style属性中是允许同时定义多种border的:
这样设置的结果是什么呢?那就是top border为solid,right border为dashed, bottom border为dotted ,left border为solid。就像之前定义的padding一样。
来看个具体的例子:
如果想要设置单侧的样式,可以使用下列的一系列属性:
来看个具体的例子,设置h1三边包围:
上面需要注意的是,针对第二种方案,必须将border-left-style样式放在后面,不然就会被后者替换。
设置完style后,接下来就需要设置宽度width:
对应的单侧的设置为:
总共有4种方式来设置border的宽度,可以是像4px这样的数值,也可以是另外3个关键词(thin,medium,thick)。但要注意这三个关键词没有对应具体的数值,按照CSS标准,只要层层加厚就可以,依赖于浏览器实现。
我们假定一个段落p有个背景色和border style
border的width默认为medium,我们将其修改下:
来玩个极限的,将宽度设置为50px:
当然也可以设置单侧的宽度:
想要去掉border非常简单:
哪怕设置了宽度,如果style被设置为了none,那么border也不会显示,那这是为什么呢?这是因为如果将style设置为none,那么CSS就会将其视为是不存在的,然后自动将其宽度设置为0,无论你自己定义了什么。就像一个杯子已经空了,那么再来描述他是半满的是没有任何意义的。
这一点为什么重要呢,因为很多人容易忘记来声明一个border的样式。例如:
来看个颜色的示例:
当然也可以为不同的side设置不同的颜色:
如果没有设置颜色,那么就会获取当前元素的前景色:
当然也可以设置单侧的border颜色:
就像我们上面提到的,如果border没有style,那么久没有宽度。那如果碰到需要设置宽度但是border又不可见的情况怎么办?答案是将颜色设置为transparent。例如:
试想下这种情况,如果要针对某一边添加widith,style和color。如果单独设置的话其实还是蛮麻烦的:
但如果可以简化的话,那就方便很多了:
针对每个side属性的简化顺序为:
完全可以按照上面的定义来设置更复杂的border设置:
而且这些值得顺序也是不用担心的,下面的规则和上面的是一样的:
另外值得注意的是,在简化版中避免重复的类型值,比如两个width等:
这会导致浏览器直接忽略这条规则。
现在我们回到border属性本身:
来看看怎么用的吧:
这个会自动应用到每个方向上:
inline元素之前已经讲了很多了,现在主要简单讲几个需要注意的点。
首先就是不论border设置的width多厚,inline元素的line height都不会改变:
top和bottom的border是不可以的,但是left和right都是可以的:
而对于可替换元素来说,border是会影响行高的:
为了支持圆角的边框,border引入了border-radius属性来设置:
如果想要实现边角的圆角过渡,可以如下设置:
如果给定的是一个百分比值,那么结果很可能就是一个椭圆,因为长宽的基准值不一样:
另外,跟其他元素一样,border-radius也可以设置多个值,位置从左上沿顺时针到底部左侧。
而参数个数为3个的时候也是一样的,第4个参考第2个:
而在上图中重点到不是边角,而在于内容区域的右下角也发生了圆滑过渡,这是因为内容区域的背景和padding的背景不同所致,我们将在后面一章中详细讨论。
border-radius在原理上修改的是border和background的渲染,而不是盒子模型本身,来具体看下:
刚刚我们看到了设置单个值得情况,那如果设置2个值会怎么样呢?如果我们想要在水平方向设置3英寸,而在垂直高度设置1英寸。我们不能直接这样写:
因为这样我们会将左上,右下对角线一个宽度,而右上和左下对角线有一个宽度。而是应该使用:
而这相当于下面的表达式:
下面是一个简单的例子:
接下来来个更复杂的:
不同的颜色和样式在角的位置的渲染效果是不同的:
上面第一个是简单的圆角,第二个在厚度上出现了变化。第三个颜色和厚度是一样的,但是角的曲线从solid变成了double。而且样式间的过渡被阻断了。第四个我们把厚度和样式做了改变。第5第6个开始出现颜色的变化,但是都是直接的改变而没有渐变。而第七种情况则是厚度相同,颜色发生渐变,但是可以看到,只有外侧发生了变化,而内侧还是直角,示例如下:
值得注意的是,这次是不同在水平和垂直方向加/的,来看下:
上面两个是一样的。
如果你想要使用一张图片来作为border,那么可以使用border-image-source:
让我们使用一张单个圆点的图片作为border背景:
这里需要注意几个地方,如果没有定义border:25px solid按照之前的说法,没有style,border其实默认是不显示的。另外就是border-width其实就是后面border图片的宽度。
那令人奇怪的是,为什么图片只出现在角落里,边上为什么没有,而这就需要用到下面这个属性了:
slice也是接收4个值,完全遵从top,right,bottom, right的CSS默认赋值流程,而且数值也是基于百分比的值。
我们就以3 x 3 的网格图为例来看下效果:
注意到中间的一块空了,这是因为css中自动把中间的内容设置为empty,具体会在后面讲解原理。
slice属性的不同百分比对应不同的边缘裁切效果:
这就是我们为什么选取3 x 3网格图的原因,可以清晰的看到裁剪后的边框效果。除了上面的百分比,我们也可以使用数字,一般对于栅格图来说就是像素值,来看个例子:
回到之前的中心空白问题,这其实可以通过fill来填充回来:
而且从效果上来说会覆盖到其他的背景元素之上,因此可以作为背景的替代。
同时之前我们看到的宽度都是相同的,而其实可以为border的4个方向设置不同的宽度,然后border-image会自动匹配到对应宽度:
如果想要自己来设置border图片的宽度,可以使用border-image-width:
border-image-width其实和border-image-slice差不多,而不同的是前者就是border box本身。为了更好理解这个意思,我们假定宽度设置为1em:
其示意图如下:
边框都是1em宽,那么如果来填充呢,这里涉及多个属性,由border-image-slice生成的图片要经过border-image-repeat的处理,然后显示在border-image-width定义的盒子里面。
第一步:在空文件夹中单击右键,选择“新建--文本文档”。然后这个空文件夹里立即多了一个名为“新建 文本文档.txt”的文件。将此文件后缀"txt"改名为"html"。例如:1.html这样,一个没有网页代码和内容的一个空网页就建成了。 哇噻,看见了吗?你的第一个网页。怎不令人激动和兴奋呢!所有的过程只是键入几个单词而已。也可以是相对的,相对于当前页面来说。所以,假设你有另外一个HTML文档“flyingmoss.html”,其中一行代码可以写成<a href="flyingmoss.html">The miracle of moss in flight</a>,诸如此类。连接不仅可以连接到其他的HTML文档,也可以连接到页面上的其他文件。连接还可以转到页面的其他部分。你可以给几乎所有的标签增加id属性,比如<h2 id="moss">Moss</h2>,然后连接到它,像是这样做:<a href="#moss">Go to moss</a>,点击这个连接会直接滚动到带有这个id的元素。注意a标签允许你为连接打开新窗口,而不是取代当前窗口,初听起来似乎是一个不错的主意,因为它不会让用户离开你的页面。但是,有很多理由证明,你不应该这样做。从易用性的观点来看,这种方法破坏导航。最常用的导航工具是浏览器上的“后退”,打开新窗口使这个功能失去了作用。更广泛地,还是从易用的观点来看,用户不需要到处都是弹出的新窗口。如果用户需要打开新窗口,他们有权利(是的,有权利。不要强行干涉别人意志,不是很好吗?在一般情况下,建议你尽量不要使用新窗口——译者注)让自己来控制。---------------------------------图像都是文本的话看起来让人感到乏味和无聊,自然,网页不应该仅仅是文本而已(呵呵,对于一些技术性的文档,我想,文本就已经严重足够了——译者注),它是多媒体的,最常见的形式就是图像。图像标签img用来为HTML添加图像,像下面这样改进你的代码:<img src="" />src属性告诉浏览器图像的地址。就像a标签一样,它可以是绝对的,如示范所示,但更多时候它是相对的。比如,你拥有自己的图像且已经另存为alienpie.jpg放置在images文件夹下,代码可以这样写<img src="images/alienpie.jpg"...长度属性width和高度属性height是必需的(Zeldman的“恶名昭著”的《Designing with Web Standards中说,width和height不是必须的,这可以节省带宽。平时做网页我也不喜欢用这两个属性。——译者注),因为浏览器在下载过程中能够计算出图像占据的空间,否则浏览器可能会产生一个页面的跳跃,因为事先并不知道图像要占用多少空间,以致于破坏页面布局。alt属性表示可替代的描述。这是为不能或者不选择图像显示的客户端着想(比如终端浏览器lynx,不能显示图片,但可显示alt中的文本。最坏的情况是,你写错了图片的文件名或者路径,即使在图形浏览器中图片显示不出,但仍可显示出alt中的文本,不会让访问者造成不必要的误解。什么情况下我们都推荐你,一定记得使用alt。——译者注)。在最新版本的HTML版本中,这是不可缺少的属性。注意给网页创做图像虽然不是本站的主题,但我们还是有一些对你有用的东西要说。经常被用到的图像格式是GIF和JPEG。他们都是压缩过的格式,有各自十分不同的用途。GIF图像不超过256色,但可以保持原有图像的色彩。色数越低,图像文件就越小。GIF应该用在有纯质颜色的图像上。JPEG使用十分精确的算法来压缩图像,对原图像有些微的改变。压缩程度越低,图像文件越大,从而图像更清晰。JPEG应该使用在要逼真描绘的诸如摄影的图像上。网页设计初学者需要处理的文件可能就是图像文件了,忽视图像过大是初学者常犯的错误。网页下载应该尽可能快,想想看,一个使用少于7kb每秒的Modem联网的人要用多少时间来下载你的整个页面。你必须在图像质量和图像文件大小之间作出选择。许多现代的图像处理软件允许用最佳方式压缩图像,但同样是一个冒险,或者产生错误。译者有话说:显然,现在还没有谁推荐PNG格式的图像,可能只因为IE对其糟糕的支持。GIF到目前为止还没有解决专利问题,使用它还是得冒侵权之危险。PNG很有潜力,同样也具有透明能力,色数也不止GIF的可怜的256色而已,却具有JPEG的高清晰、高保真度,这也是我,以个人的立场向你推荐的原因。---------------------------------------------表格漫步万维网世界,有多少HTML表格被用来布局页面,还一度被滥用。我们会在CSS高级指南中学习怎样不用表格布局页面。表格的正确用处应该是,展示表格式的数据。有很多标签可以用在表格中,在初级指南中教授表格是如何工作的确实是一件比较困难的事情,没有关系,我们一步一步来,先来看一个例子。例子什么时候都是学习的好方法。《CSS设计指南》([英] 史密斯)电子书网盘下载免费在线阅读
链接:https://pan.baidu.com/s/1Ijzchj8fWU240zvDwlRGzg
提取码:cjnl书名:CSS设计指南
作者:[英] 史密斯
译者:李松峰
豆瓣评分:8.8
出版社:人民邮电出版社
出版年份:2013-5
页数:288
内容简介:
《图灵程序设计丛书:CSS设计指南(第3版)》是一本面向初中级读者的经典设计指南。全书共分8章,前4章分别介绍了HTML标记和文档结构、CSS工作原理、定位元素、字体和文本,对规则、声明、层叠、特指度、选择符等基本概念进行了详细解读。随后4章介绍了页面布局、界面组件,CSS3圆角、阴影、渐变、多背景等视觉设计技巧,最后还对如何实现最前沿的响应式设计进行了通俗易懂的演示。
作者简介:
Charles Wyke-Smith
一直从事媒体相关工作。20世纪80年代中期,他与人在旧金山共同创办了PRINTZ Electronic Design,当时这可是一家全部工作都使用计算机处理的设计工作室。另外,他曾在富国银行、ESPN电子游戏担任领导和顾问,在Benefitfocus公司担任过用户体验总监。2009年,他与人合办了PeopleMatter公司,提供人力资源服务。目前,他是一家新的创业公司Bublish的CEO,这家公司提供图书策划等方面的服务。
Charles是一位乐手和多本Web开发图书的作者,除了本书,他还著有Codin' for the Web: A Designer's Guide to Developing Dynamic Web Sites、Scriptin' with JavaScript and AJAX: A Designer's Guide和Visual Stylin' with CSS3。他和妻子,还有两个女儿住在美国南卡罗来纳州查尔斯顿市。