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

字体和颜色样式 教师 Tel 文本和字体 用font family属性定义网页中的字体body font family Verdana Geneva Arial sans serif 用font size属性控制字体大小body font size 14px 用color属性给文本添加颜色body color silver 用font weight属性设置字体的粗细body font weith bold 文本和字体 用text decoration属性给文本添加划线body text 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或百分数都无所谓 效果是一样的 例 body font size small h1 font size 150 h2 font 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种颜色 例 body background color silver 书上的颜色是印刷的页面反射光线形成的 在电脑上 光是屏幕发出的 所以这些颜色在网页中看起来会稍微有些不同 用红色 绿色和蓝色值定义颜色 用红色 绿色和蓝色各自比例定义颜色 例 body background color rgb 80 40 0 也可以用0 255之间的某个数值定义红色 绿色和蓝色的值 例 body background color rgb 204 102 0 问题 为什么有两种指定rgb值的不同方法呢 百分数看起来不是更直接一些吗 我看到大家都用 00fc9a这种颜色代码 用十六进制代码定义颜色 十六进制代码以 开头 各用两位数字来定义红色 绿色 蓝色 总结一下 CSS中可以用以下这些方法中的任意一种来指定各种颜色 body background color rgb 80 40 0 body background color rgb 204 102 0 body background color cc6600 如何确定Web颜色 问题 我还见过像 cb0这样的十六进制代码 它代表什么呢 要点 CSS提供许多属性控制字体外观 包括font family font weight font size和font style 访问者在你的网页上看到的字体格式取决于其电脑中安装的字体 用px em 或关键字定义font size 如果用像素 px 定义字体大小 就是告诉了浏览器字母高度为多少像素 em和 是相对字体大小 用相对字体大小可以使网页具有更强的通用性 用font weight属性可以将文本加粗 font style属性用来创建倾斜的字体 网页颜色是通过把不同数量的红色 绿色和蓝色相混合产生上的