CSS第二课-字体和颜色样式.ppt

,字体和颜色样式,教师：Tel：,文本和字体,用font-family属性定义网页中的字体bodyfont-family:Verdana,Geneva,Arial,sans-serif;用font-size属性控制字体大小bodyfont-size:14px;用color属性给文本添加颜色bodycolor:silver;用font-weight属性设置字体的粗细bodyfont-weith:bold;,文本和字体,用text-decoration属性给文本添加划线bodytext-decoration:underline;,每台电脑上可能有不同的字体,调整字体大小,可以用像素定义字体大小，用像素定义字体大小，就是告诉浏览器字母的高是多少像素。,在CSS中用一个数字紧跟“px”的方式定义像素，这表明font-size应该是14像素高。,从顶部到底部有14像素。,像素数字后必须紧跟px，中间不能有空格。,这是在body规则中定义font-size的方法。,调整字体大小,与像素精确地规定字体大小不同，百分数用与别的字体大小的相对值来定义字体大小。,这儿我们用像素定义body的字体大小，用百分数150%定义一号标题字。,表明字体大小应该是另一个字体大小的150%。然而，另一个字体大小指哪个父元素呢？因为font-size是一个从父元素继承下来的属性，定义字体大小为a%，是相对于父元素的。我们看一下它是如何工作的,调整字体大小,还可以用“em”定义字体大小，它跟百分数一样，是另一种相对测量单位。不过用em不是指定百分数，而是指定比例因数。,别把这跟em元素弄混了。,假如用这种测量法定义标题大小，标题就会是父元素字体大小的1.2倍，在这个例子中是14px的1.2倍，大约等于17px。,这表明字体大小应该按比例放大1.2倍。,实际上是16.8，但大多数浏览器会四舍五入到17。,这是1.2em指定的。,调整字体大小,另外还有一种定义字体大小的方法：关键字。可以把字体大小定义为：xx-small,x-small,small,medium,larger或者xx-larger。浏览器将这些关键字转换成默认的像素值。,在大多数浏览器中，这部分会将body元素显示为12像素。,这些是各种关键字互相比较的典型大小。每种尺寸都比前一种大20%，通常把small定义为12像素。需要注意的是，每个浏览器定义关键字的方式并不一定相同，如果用户需要也能自己定义。,用哪种方法定义字体的大小呢？,、选择一种关键字（推荐small或medium）定义body字体大小，也就是网页默认字体大小。、用em或百分数把别的字体大小指定为相对于body字体大小的字体尺寸（选em或百分数都无所谓，效果是一样的）。例：bodyfont-size:small;h1font-size:150%;h2font-size:120%;,问题：,在元素中定义字体大小，也就是定义了网页的默认字体大小，是吗？这是为什么？我喜欢用像素指定字体大小的方法，因为那样网页会精确地显示指定的字体大小。如果没有指定字体大小，就只能是默认字体大小吗？默认标题大小是多大？答：这取决于浏览器，一般说来：是body字体大小的200%，是150%,是120%,是100%,是90%,是60%。和要比body字体小一些。如果指定body字体大小时不用关键字而用em或%，能行吗？,Web颜色,网页颜色是根据红色、绿色和蓝色三原色以一定比例组成来指定的。可以把每种颜色指定为从0-100%的一个数，然后混合起来就组成了一种颜色。例如，如果把红色100%，绿色100%和蓝色100%混合起来，就得到白色。,这是把红、绿和蓝相混合，看一下中间就知道它们三者相混合是什么样了。,Web颜色,但是如果每种成分只有60%会得到什么结果呢？不够白是吗？换言之，得到的是灰色，因为我们只给屏幕加了相同数量的三种颜色，而没有足够的光。,Web颜色,把80%的红色和40%的绿色混合起来，就能得到你想要的桔红色。注意如果某一种颜色没有加进去，它就不会影响另外两种颜色。桔红色是因为没有把蓝光加进红色和绿色中而形成的。,红色80%绿色40%相混合就得到桔红色。,在电脑屏幕上，如果加0%的蓝色，蓝色就对产生的颜色没有任何影响。,Web颜色,如果混合红色0%、绿色0%和蓝色0%，会得到什么结果？那意味着没给屏幕加任何光，所以得到提黑色。,如何指定Web颜色？,、颜色名2、红、黄、蓝的相对百分比3、16进制代码,用名字定义颜色,CSS颜色名字不区分大小写，所以输入silver、Silver或SILVER都是一样的。这些是CSS中预先定义的17种颜色。,例：bodybackground-color:silver;,书上的颜色是印刷的页面反射光线形成的；在电脑上，光是屏幕发出的，所以这些颜色在网页中看起来会稍微有些不同。,用红色、绿色和蓝色值定义颜色,用红色、绿色和蓝色各自比例定义颜色。,例：bodybackground-color:rgb(80%,40%,0%);,也可以用0255之间的某个数值定义红色、绿色和蓝色的值。,例：bodybackground-color:rgb(204,102,0);,问题：,为什么有两种指定rgb值的不同方法呢？百分数看起来不是更直接一些吗？我看到大家都用#00fc9a这种颜色代码。,用十六进制代码定义颜色,十六进制代码以#开头,各用两位数字来定义红色、绿色、蓝色。,总结一下,CSS中可以用以下这些方法中的任意一种来指定各种颜色：bodybackground-color:rgb(80%,40%,0%);bodybackground-color:rgb(204,102,0);bodybackground-color:#cc6600;,如何确定Web颜色,问题：,我还见过像#cb0这样的十六进制代码，它代表什么呢？,要点：,CSS提供许多属性控制字体外观，包括font-family,font-weight,font-size和font-style。访问者在你的网页上看到的字体格式取决于其电脑中安装的字体。用px、em、%或关键字定义font-size。如果用像素（“p