- 1、本文档共23页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
第四章通过CSS控制字体样式;“文本编辑”在网页设计中占了很大的比重,因为网页是用来传递信息的,而最经典最直接的信息传递方式就是文字。
通过CSS的本文编辑的标记语言,我们能设置文字的样式、颜色和粗细等属性,在这个章节里,我们将讲述如下的重点:
CSS控制文字样式的方法
CSS控制边距与段落的方法
通过CSS定义样式表的方法;4.1通过CSS控制文本样式
文字是网页设计里不可缺少的元素,但如果把大段文字不加任何修饰就堆积到网页上,那么会让人产生枯燥的感觉,换句话说,如果我们通过CSS样式代码把网页上的文字装饰得美轮美奂,就能很好地留住访问者。;4.1.1定义文字颜色
在HTML页面里,为了定义文字的颜色,首先要用HTML标签(tag)把文字包含起来,如下样式:
b这是一个粗体/b
我们知道,任何HTML标签(比如b)都可以做为CSS的选择器,所以,我们可以把定义文字颜色的代码写到修饰文字的CSS选择器里,就像下面一样。
bstyle=”color:rgb(0,0,255)”这是一个蓝色的粗体文字/b
这里是用CSS把文字定义成蓝色,由于是作用在b这个标签里的,所以文字同时会加粗,效果如下图所示。;4.1.2通过CSS设置字体
字体是指字的各种不同的形状,也可以理解成笔画的姿态。
我们可以通过如下的语法,定义字体的样式。
{
font:font-stylefont-variantfont-weightfont-sizefont-family
}
其中在font后面,是定义字体样式的诸多属性,其中,有两个属性和“CSS字体控制”有关。;4.1.3字体粗细与斜体
通过设置字体的粗细程度,我们能让文字有不同的外观,我们可以通过font-weight属性来设置字体的粗细程度,具体的语法是:
{
font-weight:100-900|bold|bolder|lighter|normal;
}
在设置字体的粗细时,可以直接输入粗细数值,取值范围从100~900,浏览器默认的字体粗细为400,另外也可以通过参数lighter和bolder使得字体在原有基础上显得更细或更粗些。;4.1.4定义字体大小和行高
在一个网站里,文字的大小往往会影响访问者浏览的进度,同时,如果合理地设置行高,也能提升文字的整体外观。下面我们就来依次说明一下定义文字大小和行高的语法。;1.???义字体大小
我们可以通过font-size的属性来定义字体的大小,具体的语法是:
{
font-size:数值|inherit|medium|large|larger|x-large|xx-large|small|smaller|x-small|xx-small
}
其中,可以通过数值和其它一些参数来定义字体的大小,在诸多参数里,small相对于large是小的,相对于x-small而言则是大字体。;xx-small:用这个参数定义的字体,是所有相对大小取值中最小的。
x-small:用这个参数定义的字体,仅大于xx-small的字体。
small:用这个参数定义的字体,在文字大小的相对大小值中默认为小字体。
medium:默认值。也是7种字体大小中的中字体。
large:用这个参数定义的字体,在大小值中默认为大字体。
x-large:用这个参数定义的字体,在相对大小值中仅小于xx-large的字体。
xx-large:用这个参数定义的字体,是所有相对大小值中最大的字体。
用上述参数设置出的字体大小之间是有固定比例的,比如x-small是xx-small的1.5倍,small是x-small的1.5倍,medium是small的1.5倍,large又是medium的1.5倍。依此类推就可以。;2.定义行高
在CSS里,是通过如下的语法来定义行高:
{
line-height:数值|normal;
}
在这里,可以用数值来设定行高,也能通过把参数值设置为“normal”,指定行高是“默认数值”。
在实际的应用里,“行高”这个CSS样式的使用频率还是比较多的;4.1.5下划线、顶划线、删除线
在文本编辑中有的需要突出重点,这时往往就会添加下划线,此外,针对文字,还会有顶划线和删除线效果,要为文本添加下划线、删除线与顶划线,可以通过如下的语法实现:
{
text-decoration:inherit|none|underline|overline|line-through|blink
}
其中,CSS里的text-decoration属性是用于控制文本的“下划线等”的效果。;4.2用CSS控制字间距和对齐方式
文本间的间距虽然不起眼,但如果不好好设置,就会出现“过于紧密”或者是“过于松散”的外观。
“对齐方式”也是比较重要的,通过
您可能关注的文档
- 羊肚菌产业调研支队.pptx
- 章环境与多样性周学习目标schermerhorm chapter 3击剑者.pptx
- 说明综合腰鼓.pptx
- o新星节前训练营通用卖点手机.pptx
- 2.3伴性遗传教学设计-2023-2024学年高一下学期生物人教版必修二.docx
- 第13课 即时通信真便捷(教学设计)四年级上册信息技术人教版.docx
- 3.2金属材料物质的量在化学方程式计算中的应用 教学设计2024-2025学年高一上学期化学人教版(2019)必修第一册.docx
- 3.3.2运输的器官教学设计2023--2024学年济南版七年级生物下册.docx
- 第二单元《比一比》(教学设计)-2023-2024学年一年级上册数学苏教版.docx
- 科学是什么教学设计 -2023-2024学年牛津上海版六年级上册科学.docx
- 辽师大版八下信息技术 1.1动画工场--初识Flash 教学设计.docx
- 安徽省长丰县高中地理 中国区域地理 第五讲 中国的自然资源教案 新人教版.docx
- 江苏省高邮市车逻镇七年级历史上册 第6课 动荡的春秋时期教案 新人教版.docx
- 第一课 让我们从观察开始第二课时(教学设计)2023-2024学年湘科版一年级上册科学.docx
- 期末自主测评(2)(配套教学设计)2023-2024学年一年级下册数学同步练习(人教版).docx
- 2024-2025学年八年级物理下册 第七章 力 第3节 重力教案 (新版)新人教版.docx
- 4.3.1 探究平面镜成像的特点 教学设计- 2024-2025学年人教版八年级上册物理.docx
- 2024届高考语文写作指导:考场高分作文语言范式 教学设计.docx
- 小商品 大学问 活动一 红领巾文具店开张(教学设计)蒙沪版四年级上册综合实践活动.docx
- 分拆为乘与加(教学设计)-2023-2024学年二年级上册数学沪教版.docx
文档评论(0)