你的位置:首页 > 网页设计

[网页设计]CSS3秘笈第三版涵盖HTML5学习笔记6~8章


第二部分----CSS实用技术

第6章,文本格式化

指定备用字体:
font-family:Arial,Helvetica,sans-serif;
当访问者没有安装第一种字体时,浏览器会在列表中继续往下搜寻,直到找到备用字体。
若字体名称中包含多个单词,则必须用双引号将它们括起来
font-family:"Times New Roman",Times,serif;

sans-serif字体

sans-serif字体看起来干净而简洁,所以常被用于标题。sans-serif字体包括Arial、Helvetica、Verdana
注:自己的审美观才是好的指导。

monospaced字体

monospaced(等宽)字体经常用于显示计算机代码。

其他字体

Arial Black、Arial Narrow、Impact字体,特别注意:Arial Black、Impact字体只有一种形式,没有斜体,在使用这些字体时一定要将font-weight和font-style设为normal,不然浏览器会绞尽脑汁去想这些文字应该是啥样的。

使用Web字体

指令较多,后续补充
Web字体的CSS部分十分简单,只需要两个命令:
1、@font-face指令负责告诉浏览器字体名称以及到哪里下载
2、@font-family定义Web字体的方式,与使用已安装字体是一样的
Font Squirrel提供了一个非常好用的在线工具,可以生成所需的字体格式,www.fontsquirrel.com/fontface/generator,不仅可以生成适当的字体,还能提供一个范例HTML文件,以及一个基础的CSS样式表
语法:

@font-face{   font-family:"League Gothic";   src:url('fonts/League_Gothic-webfont.ttf');}

用CSS设定文本尺寸的3种方法:keyword、percentage、em
CSS提供了7种keyword:xx-small(9px)、x-small(10px)、small(13px)、medium、large(18px)、x-large(24px)、xx-large(32px),在没有调整过浏览器基准字号时,关键字基本等于括号中的字号

格式化词语和字母


斜体粗体

font-style:italic;     斜体
font-style:normal;     非斜体
font-style:oblique;     斜体
font-weight:bole;     粗体
font-weight:normal;     非粗体

大写化

text-transform:uppercase;     将所有字母大写
text-transform:lowercase;     将所有字母小写
text-transform:capitalize;     每个单词首字母大写
text-transform:none;          不改变文本大小写

小型大写字母

font-variant:small-caps;     将字母设置为大写,但大小与小写字母一样

文本修饰

text-decoration --> underline、overline、line-through、blink、none

字母间距和字词间距

letter-spacing:字母间距,正数增加,负数减少
word-spacing:字词间距,正数增加,负数减少

文本阴影

text-shadow  -->  水平偏移量(离文本左侧或右侧距离)、垂直偏移量(离文本上方或下方距离)、阴影模糊度、阴影颜色
text-shadow: -4px 4px 3px #999;
第一个-4px表示将阴影放在文本左侧4px处(正数表示放右边),第二个4px表示将阴影放在文本下方4px处(负值表示上方),第三个3px定义阴影模糊度,0px完全不模糊,产生一个清晰的阴影,值越大越模糊,第四个值表示颜色
可以定义多个阴影,用逗号(,)分开
text-shadow:-4px 4px 3px #999,1px -1px 2px #888;

格式化段落

行间距

line-height,可以使用pixel、em、percentage表示,还可以使用数字表示行间距
使用百分比的行高,百分比不会被继承,计算出的值才会被继承。假设网页字号设为10px,行高为150%,则所有标签将继承15px行高,而不是150%,如果更改字号,则会使文本出现混乱。使用数字则会使所有标签都使用同一个基本比例式高。

对齐文本

text-align   -->   left、right、justify、center

首行缩进并去除边距

text-indent(文本缩进),margin(边距)
text-indent也可以使用百分比,不过不是根据字号,而是根据包含该段落的元素的宽度相关。
margin控制段落之间的距离,也可以使用百分比,不过与text-indent使用百分比结果一样

格式化段落首字母或首行

使用伪元素:first-letter(首字母)和:first-line(首行),从技术上讲,这些都不是CSS属性,而是决定CSS属性要用于段落哪一部分的一种选择器。

列表样式

列表类型,参看:HTML5与CSS3基础教程第八版学习笔记11-15章,第十五章
(1)disc(实心圆点)
(2)circle(空心圆圈)
(3)square(实心方块)
(4)decimal(数字1、2、。。。)
(5)decimal-leading-zero(数字01、02、03。。。有前导0,比HTML5与CSS3基础教程第八版学习笔记11-15章新增)
(6)upper-alhpa(大写字母A、B、。。。)
(7)lower-alpha(小写字母a、b、。。。)
(8)upper-roman(大写罗马数字I、II、III。。。)
(9)lower-roman(小写罗马数字i、ii、iii。。。)
可以使用list-style-type控制。

给项目符号和项目序号定位

使用list-style-position控制项目符号的位置。可以让它显示在文本之外(list-style-position:outside;),或显示在文本内(list-style-position:inside;)
利用padding-left属性可以调整项目符号与其文本之间的距离,使用该属性时,要创建一个应用于<li>标签的样式,这种方法只有list-style-position设为outside才有效
网络上免费的图标和项目符号:www.cssjuice.com/38-free-icon-checkpoints/
.testClass{  list-style-image:url(image/bullet.gif);   /* 不需要使用引号将路径包含 */}


第7章,margin、padding和border

对浏览器而言,任何标签都是里面装有东西的盒子

盒模型

参看:HTML5与CSS3基础教程第八版学习笔记11-15章,第十一章
padding指内容与其边框线之间的空间
border指盒子周边的直线
background-color用来填充边框内部空间的,包括padding区域
margin指一个标签和另一个标签之间的间隔
margin、padding在使用percentage时,浏览器是以外围元素的宽度为基础计算空间量的。

边距冲突

当元素的bottom margin碰到另一个元素的top margin时,浏览器会应用他们之间较大的一个值,而不是将两个值相加。
例:一个无序列表的bottom margin为20px,与列表相连的段落top margin为30px,最终浏览器使用30px来分隔,而不是50px

行内盒子、块级盒子及其他显示设置

对于行内盒子,浏览器不能对其进行top/bottom margin、top/bottom padding的设置
使用display属性改变元素盒子
display:inline;     使块级元素像行内元素
display:block;     使行内元素像块级元素
display有无数种可能选项,大部分在所有浏览器都不起作用,inline-block值在当前浏览器中有效

添加边框

border通过三个属性进行控制:color(颜色)、width(宽度)、style(样式)
可以统一设置所有方向的边框,也可以单独设置单方向上的边框,使用border-top、border-bottom、border-right、border-left
还可以单独设置单方向上的单个属性,例:border-top-color、border-top-width、border-top-style,其三个方向也有类似属性
还能够设置多方向的单属性,例:border-color:green yellow red blue,其他两个属性也有类似用法

设置背景色

.testClass{  background-color:rgb(109,218,63);}


创建圆角

使用border-radius属性
CSS3允许你给任何元素都设计圆角,一定要确保该元素有背景色或者边框,否则将看不到任何圆角
border-radius:0 30px 10px 5px;     第一个值左上角,第二个值右上角,第三个值右下角,第四个值左下角
border-radius也可以接受一个值,两个值,三个值,接受的值将会作为半径,在元素对应角画圆。
还可以创建椭圆角:border-radius:20px/40px;     第一个是从轨迹中心点到左边或右边的半径,第二个是从轨迹中心点到上边或下边的距离
还可以混合使用圆角和椭圆角
还可以单独设置:border-top-left-redius:10px;
注:IE8及更早不支持border-radius属性,iOS的Safari3.2和Android Browser2.1需要提供厂商前缀-webkit-
供应商前缀
1、-webkit-:用于Chrome、Safari以及其他基于WebKit的浏览器
2、-moz-:用于Mozilla Firefox
3、-o-:用于Opera
4、-ms-:用于IE

添加阴影

box-shadow任何现代浏览器都支持,包括IE9,只是画出的阴影比其他浏览器细,IE8及更早版本会完全忽略
box-shadow:-4px 6px 8px #999;
第一个值表示水平偏移量,正值阴影移右边,负值阴影移左边,第二个表示垂直偏移量,正值阴影在下方,负值在上方,第三个是阴影半径,决定阴影的模糊度和宽度,值为0完全不模糊,值越大越模糊且更宽,第四个是颜色值,grba值看起来更好。
box-shadow包括两个可选值,inset关键字和阴影尺寸(spead)。inset告诉浏览器阴影画在方框内。还可以添加阴影尺寸作为第4个值(在阴影半径和阴影颜色之间)
box-shadow与text-shadow一样可以设置多个阴影,方法与text-shadow类似

确定高度和宽度

使用百分比值都是以样式外围元素为基准
利用box-sizing属性调整盒子的宽度
box-sizing属性提供了以下3个选项:
1、content-box是浏览器定义元素的屏幕宽度和高度的一种方法。这是默认行为,不需要为content-box定义任何值
2、padding-box告诉浏览器当在一个样式中设置了width或height时,应该包含padding作为该值的一部分。例:假设一个元素的left/right padding为20px,width为100px,实际上内容区域的宽度将只有60px
3、border-box值包含了padding厚度和border厚度
注:IE8及更新版本支持box-sizing,IE7不支持

用overflow属性控制溢出

visible,浏览器通常的做法
scroll,添加滚动条,无论是否需要都会添加
auto,与scroll一样,不过,只会在需要的时候出现
hidden,隐藏任何超出的内容

高度和宽度的最大化和最小化

max-height,最大高度
max-width,最大宽度
min-width,最小宽度
min-height,最小高度

用浮动元素包围内容

使用float属性可以把元素移到左边或右边,元素下方的内容会上移,包围浮动元素。
3种选项:left、right、none
background-color、border不能像其他网页元素一样浮动。假设让一个元素附到右边,侧边栏下方的内容通常应该上移将它包围起来。但若内容设置了背景或边框,背景或边框就会出现在浮动侧边栏的下方。可以对浮动元素下方的背景或边框添加overflow:hidden规则。

停止浮动

使用clear属性可以指示元素不要包围浮动项目。
接受以下选项:
left、样式将落至左浮动元素下方,但扔将环绕右浮动对象
right、样式将落至右浮动元素下方,但仍将环绕左浮动元素
both、样式将落至浮动样式下方
none、关闭清除,让项目包围左右浮动元素

第8章,给网页添加图片

添加背景图片

background-image属性是使网站看起来美观的关键
以下三种格式都是可以的:
.testClass{  background-image:url(image/example.gif);  background-image:url("image/example.gif");  background-image:url('image/example.gif');}


可以使用相对路径,相对路径是相对于样式表的路径,而不是相对于要设置的HTML页面的路径

控制重复

使用background-repeat属性指定图片如何平铺
1、repeat是默认设置,将背景图从左到右、从上到下平铺,直到填满整个空间
2、no-repeat只显示图片一次
3、repeat-x是沿着X轴水平重复某一张图
4、repeat-y是沿着Y轴垂直地重复某一张图

定位背景图片

background-position属性,可使用多种方式来精确控制图片位置。可通过3种不同方法来设定,keyword、精确值、percentage

关键字

left、fight、center控制水平
top、center、bottom控制垂直

精确值

可以用pixel或em值来定位背景图片。使用两个值:一个值指明图片左侧和容器左侧之间的距离,另一个指明图片顶边和样式顶边之间的距离(第一个控制水平方向,第二个控制垂直方向)

percentage百分比值

以百分比时要讲究技巧,如果能够使用关键字或精确值达到效果,建议不要使用百分比
使用百分比一样要提供两个值:一个值指明水平方向的定位,一个指明垂直方向的定位。
百分比值是被格式化的元素百分比
可以与精确值混用
background-position: 5px 50%;

固定图片

background-attachment属性有两个选项:scroll和fixed

background-origin和background-clip属性

background-origin属性可以调整图片起点。有三个选项:
1、border-box将图片放在border的左上角
2、padding-box将图片放在padding区域的左上角
3、content-box将图片放在内容区域的左上角
通常来说,背景图片会铺满某个元素的整个区域,包括border和padding区域的背面,但是,利用background-clip来定义图片显示位置,有以下选项:
1、border-box让图片显示在内容区域的后面,包括border区域的背后
2、padding-box所有背景图片都只能显示到元素的padding区域和内容区域
3、content-box限制背景图片只显示在内容区域

缩放背景图片

CSS3还可以调整背景图片尺寸,background-size属性,可以利用值或关键字来设置这个尺寸:
1、用一个高度值和宽度值来设置图片尺寸
.testClass{  background-size:100px 200px;  background-size:100px auto;  background-size:100% 100%;   /* 使用百分比值,让图片缩放完全适应背景 */}


2、关键字contain会迫使图片进行尺寸调整,以保持图片的长宽比
background-size:contain
3、关键字cover会迫使图片的宽度或高度进行调整,以便适应元素的宽度或高度
background-size是修改背景图片尺寸的唯一方法。IE8不支持
background快捷方式可以使用较新的CSS background属性,但由于IE8不支持一些新属性,如果都用一个background设置,会导致其他有效属性也变得无效,而且目前尚未有浏览器能够在一个声明中同时处理background-position和background-size值,为此,最好用正常的、可接受的快捷属性创建一个声明,再在快捷声明之后单独添加CSS3新属性声明
免费图片网站
www.morguefile.com、www.sxc.hu、http://openphoto.net、http://search.creativecommons.org、www.flickr.com/creativecommons、http://picasaweb.google.com
项目符号或导航栏增色图标
Some Random Dude网站免费提供了一套图标:www.somerandomdude.com/work/sanscons/
趣味的平铺图案
ColourLovers.com网站(www.colourlovers.com/patterns)、Pattern4u网站(www.kollermedia.at/pattern4u)、Squidfingers网站(http://squidfingers.com/patterns)
图案生成器
BgPatterns网站(http://bgpatterns.com)、StripeGenerator2.0网站(www.stripegenerator.com)、PatternCooler网站(www.patterncooler.com)

使用多张背景图片

使用
.testClass{  background-image:url(scrollTop.jpg),           url(scrollBottom.jpg),           url(scrollMiddle.jpg);}


可以放一行,不过格式最好有
由于背景一般会平铺,为此还需要包含一个background-repeat属性:
.testClass{  background-repeat:no-repeat,           no-repeat,           repeat-y;}


值都是一一对应的,不过,太麻烦,容易混乱,为此使用快捷方法:
.testClass{  background:url(scrollTop.jpg) center top no-repeat,        url(scrollBottom.jpg) center bottom no-repeat,        url(scrollMiddle.jpg) center top repeat-y;}


在IE8中可以使用:before和:after伪类来实现上述功能

使用渐变色背景

线性渐变

使用关键字:
.testClass{  background-image:linear-gradient(left,black,white);/* 从元素左边以黑色开始,渐变到元素右边以白色结束 */  background-image:linear-gradient(top left,black,white);/* 从元素左上角开始到元素右下角,黑色开始白色结束 */}


还可以使用程度值:0~360

使用方法:
.testClass{  background-image:linear-gradient(45deg,rgb(0,0,0),rgb(204,204,204));}


颜色站

渐变使用的颜色不只是两种,可以为其添加多种颜色:
.testClass{  background-image:linear-gradient(45deg,black,white,black);  background-image:linear-gradient(left,#900,#FC0 10%,#FC0 90%,#900);}


10%应用到第二种颜色,告诉浏览器,需要让颜色到达元素宽度10%位置处,同样地,90%告诉浏览器需要一直保持橘黄色到元素宽度90%处然后在转变。
注:许多浏览器需要提供供应商前缀才能使用CSS新属性,IE9及更早版本还不支持渐变
不只可以使用百分比,还可以使用pixel和em,不过百分比更灵活

重复线性渐变

在这里,pixel更有用。
用指定颜色站定义一种渐变,然后重复模式,将它平铺到背景中。
.testClass{  background-image:repeating-linear-gradient(bottom left,#900 20px,#FC0 30px,#900 40px);}


效果:

非常棒哦。。。。

径向渐变

最简单语法:
.testClass{  background-image:radial-gradient(red,blue);/* 创建了一个适合颜色高度和宽度的椭圆形,渐变中心处于元素中心 */}


添加关键字"circle"还可以创建圆形渐变:
.testClass{  background-image:radial-gradient(circle,red,blue);}


浏览器一般是从元素中心点开始绘制径向渐变的中心,但可以利用与background-position属性相同的关键字和值来定位渐变中心点。
.testClass{  background-image:radial-gradient(20% 40%,circle,red,blue);/* 从元素左边20%处以及元素上方40%处开始 */}


为了指明渐变尺寸,可以使用以下4个关键字之一:
1、closest-side告诉浏览器,渐变从中心点一直延伸到离中心点最近的那一边。
.testClass{  background-image:radial-gradient(20% 40%,circle closest-side,red,blue);}


2、closest-corner用于测量渐变宽度,指的是从它中心点到最近元素角的距离
.testClass{  background-image:radial-gradient(20% 40%,circle closest-corner,red,blue);}


3、farthest-side用于测量圆形半径,即从它中间点到元素最远那一边的距离
.testClass{  background-image:radial-gradient(20% 40%,circle farthest-side,red,blue);}


4、farthest-corner用于测量圆形半径,即从它中间点到元素最远角的距离
.testClass{  background-image:radial-gradient(20% 40%,circle farthest-corner,red,blue);}


与线性渐变一样,可以使用颜色站,一样需要供应商前缀

重复径向渐变

.testClass{  background-image:repeating-radial-gradient(circle,red 20px,orange 30px,yellow 40px,red 50px);}


注:为了创建看起来比较自然的渐变,终止色应该与起始色相同。

用Colorzilla轻松创建渐变

使用CSS渐变生成器(www.colorzilla.com/gradient-editor/)帮助轻松创建出大多数类型的渐变(重复渐变除外)