位置: 编程技术 - 正文

美化html段落文本 Ⅰ(html文字美化)

编辑:rootadmin

上篇已经说了在第五篇会开始讲CSS,刚开始讲不能讲得复杂,我们还是由浅入深,一步步来。还是那句话:先用起来,然后再去研究。即然我们第一篇讲的是段落,那我们这篇初讲CSS当然也还是要从段落开始,让我们的段落先漂亮起来。

在没有讲CSS之前我们先去想一下什么样的段落才看起来才是最舒服的?如果大家一时还没有什么想法或是还不清楚如何去分析这个问题不妨先看一下《网页设计技巧系列之一 浅谈文本排版》。不论如何至少我们的小学老师告诉我们每一段的第一行应该空两个字。这可能是我们接受到的第一个关于如何划分段落的方法。并且可能更多人已经产生了思维定式,认为段落必需要首行空两格。而我则认为区分段落的首要素同段距,其次才能是段落首行的处理。而首行的处理是否只有缩进两字呢?我个人认为不是,因为我们还可以用“首字下沉”、“首行突出两字”等来表现。有人会说:“首字下沉我就见过,比如作者的博客就用了这个效果,但是首行突出两字似乎有点奇怪。”然而事实上首行突出两字必不是作者发明的,在中国古代的奏本上就常采用这种格式,不同的是因为他们常需要在行首写上一些颂语,而要表达这种颂语就需要抬高其地位,比如“君”“圣上”等字眼,所以才会突出两字,久之则形成了一种特别的排版形式,这种形式现在的文体是用得少了,不过大家可以多多了解一下,方便以后表达不同的文体时可以用得着。

推荐整理分享美化html段落文本 Ⅰ(html文字美化),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:html文字美化,html怎么用css美化,html table美化,html编辑框美化,html怎么用css美化,html美化字体,html怎么美化,html美化字体,内容如对您有帮助,希望把文章链接给更多的朋友!

美化html段落文本 Ⅰ(html文字美化)

即然段距是段落区分的第一要素,那么我们就先来解决这个段距的的样式问题。即然是一段一段的那么我们每一段都是由一组<p></p>组合而成的,而我们的CSS只要通过对这个段落标签的描述就可以实现我们所需要的效果了。那么基本形式是:

p {这里是样式描述内容}

我们注意到了,在CSS中这个段落标签是不需要加尖括号的,只需要一个"p"即可以了。所有的标签都是如此处理。那么我们需要给每个段落设个段距,这里我们有两个描述属性,一个是padding,另一个是margin,这两个表现的效果看起来有点像,但是却有着本质上的区别,如果我们把段落表示成盒子,在这个盒子里装着一些东西,padding就是这些东西与盒子内侧边的距离,而margin则是盒子与盒子之间的距离。这里很显然,我们里应该是使用margin。写法是:margin:1em 0;这是一种简写的方法,如果写全了应该是:margin-top:1em; margin-right:0; margin-bottom:1em; margin-left:0; 这很明显太冗余了,所以一般我们通常是写成:margin:1em 0 1em 0; 这里的顺序是上右下左,由于上下的数值是一样的,左右的数值是一样的,那么就可以再缩写成:margin:1em 0; 这里的em是指相对长度单位,相对于当前对象内文本的字体尺寸。有关于单位的知识请查阅沈苏小雨编制的《CSS2.0中文手册》。那为什么要用em而不用px或是pt呢,这是因为我们现在的流览器大多都有字体放大的功能,这也是方便读者的能看得更清楚文字内容,那么如果我们用px来设定段距那么当字体放大时段距却不会变动,那么当放大到一定数值时这个段距的特性也就不存在了。所以我们使用em这个单位,也就是希望当字体变大时段距也跟着相应变大,方便识别。

这里值得注意的是,当我们使用margin的时候两个段落之间的margin会有重叠,那么看上图中右侧的图我们可以发现在两段之间的margin是被重叠了原本应该是两个高度相加的结果还是一个高度,但是上图中间的示意padding却没有重叠他们的高度是相加的,这点大家要注意到,这不是什么BUG,而是一种特性。那么我们就写一句CSS来设定我们的段落:

p {margin:1em 0;}

说了段距自然就会说到行距,有看过《网页设计技巧系列之一 浅谈文本排版》的朋友就会明白行距的重要性,那么你是否有给自己的页面设置行距呢,是如何设置的? 设置行距有一个专门的属性:line-height,这个应该称之为行高。因为我们要设定的是一行的高度,而不是行与行之间的距离。这也就是为什么我们总发现Photoshop里设置行距的数据与做网页设置的数值不一样的原因了。但是行距依然是可以通过我们设定的行高最终产生,所以方法不同,但是目标是一致的。一般我们的行高一定是要超过字体高度的,否则行与行之间就会重叠,当然我们不排除使用这种式做一些特别的效果,但是至少在阅读文本上我们需要行行清楚。行距不宜太大,太大了阅读效率不高,如果太小了又容易读错行。所以一般行高不应超过两个字的高度。振之最常用的是1.6em~1.8em之间,如果宽度很大,我们就需要加大行距不然我们很容易读错行,如果宽度小的时候行距过大则失去了阅读的效率。那么我们把刚才的段落的CSS做一下增加,标注一下我们的行距:

p {margin:1em 0; line-height:1.6em; }

这样对于一个基本的段落设置就已经完成了,如果需要给这个段落加个首行缩进,还可以为这个段落设置一下字体,字大小,字样式,色彩等等:

p {margin:1em 0; text-indent:2em; font:normal normal px/1.6em "宋体"; color:#; }

这里关于字体的属性也是个缩写形式,顺序是:“font : font-style || font-variant || font-weight || font-size || line-height || font-family ”,这些知识在沈苏小雨的CSS2.0中文手册中都有讲述。我这里就不重复了。这里的color是文字的色彩,#后面的数值应该是6位,可以直接复制Photoshop拾色板里的数值。但是我们也常常会缩写。缩写方式是,奇数位与偶数位的值相同时即可合并为3位的色值。比如:#cc,可以缩写为#c,如果需要首突出,那么不光需要把text-indent的值设为负值,还需要修改padding的数值,因为突出去的也就是超出了内容区那么如果padding区没有空间那么这两个突出去的字就无法显示。那我们再给出一个首行突出两字的CSS

p {margin:1em 0; padding:0 0 0 2em; text-indent:-2em; font:normal normal px/1.6em "宋体"; color:#; }

有关美化段落文本的内容先讲到这里,下一篇讲解首字下沉的做法以及注意事项!

当标题不能显示完整的解决方法 其实建议用css控制超出隐藏显示也就是标题因为设计的宽度问题所以没有显示全,看样子是使用程序来截字的。我想很多网站都遇到这样的情况。为了

详解链接的rel与target区别 target="_blank"是否的存在是否有必要我想目前还有很多正处在一种盲区。我查阅了相关的文献,发现其实情况并非是我们所想的那样,事实上target="_blank"

html页面中图像格式的选用之我见第1/2页 下面我们先了解一下几种格式的比较正式的解释(注:以下内容源自百度知道):GIF意为GraphicsInterchangeformat(图形交换格式),GIF图片的扩展名是gif。现

标签: html文字美化

本文链接地址:https://www.jiuchutong.com/biancheng/375282.html 转载请保留说明!

上一篇:html链接与文本标签们(html中链接)

下一篇:当标题不能显示完整的解决方法(标题显示不出来)

  • 收到个税手续费退费会计分录
  • 自然人收缴税务客户端
  • 税负率的计算公式举例说明
  • 河北金税盘
  • 金税盘维护费应该计入什么科目
  • 公司的资本公积金可以用于弥补公司的亏损
  • 公司每年网络费计入什么会计科目
  • 辞退福利是指
  • 一次性支付一年房租怎么做账每月如何结转
  • 手工发票有没有期限
  • 进项税抵扣销项税怎么做账
  • 接受投资转入固定资产不影响现金流量变动
  • 其他综合收益转入留存收益还是投资收益
  • 结转无形资产账面价值
  • 高工资怎么说
  • 暂估入库发票差额怎么办
  • 公司注销后应收款能打到法人账户吗
  • 职工福利费计提比例一般是多少
  • 开票与实际收款不一致有什么风险
  • 福利费用交个人所得税吗
  • 财务怎么查询微信转账单号真假
  • 资产减值损失列示在利润表哪里
  • 一般纳税人预缴税款几个点
  • 其他法律依据
  • 逾期交房违约金怎么算
  • 车船税的会计分录怎么写
  • php写html
  • 投资性房地产出售
  • To install them, you can run: npm install --save core-js/modules/es.array.push.js
  • 最快的网络传输速率
  • php魔术方法的讲解与使用
  • vue如何学
  • 供电局销售电力产品
  • 出差补助需要发工资吗
  • 长期股权投资的核算方法
  • 人工智能机器人的好处
  • 应收票据有利息收入吗
  • 劳务费发票是不是专票
  • 织梦怎么建站
  • 帝国cms使用手册
  • 社保交费银行对账怎么办
  • 进项票和销项票是什么意思
  • 进项税额不得从销项税额中抵扣是什么意思
  • 税款差0.05是怎么处理
  • 小规模纳税人免增值税的账务处理
  • 接受劳务应付未付款费用
  • 企业管理理费包括哪些
  • 事业单位收到财政拨款会计分录
  • 材料合理损耗计入入账价值吗
  • 分期收款销售商品,收到本期贷款50万元
  • 公司收到现金货款怎么存银行
  • 5000以下的固定资产一次性计入费用
  • 支票有效期过期了怎么办
  • 原始凭证书写要求
  • 原始凭证的基本内容
  • mysql数据库备份与恢复的常用方法有几种
  • drop table select
  • mac显示所有窗口的快捷键
  • windows server 2012将计算机图标添加到桌面(图文教程)
  • 怎样禁用ie
  • hc off line什么意思
  • 电脑蓝屏0X0000007B
  • mac修改java版本
  • centos6.x下安装maven CentOS自动安装Maven的方法
  • window10如何设置访客权限
  • win10查看驱动
  • 如何选择适合你的颂钵
  • jquery设置滚动条
  • python 解析
  • python中的is和==的区别
  • sql命令语句
  • dom和javascript的关系
  • 安卓键盘软件
  • unity c++ dll
  • js实现表格动态合并单元格
  • 出口发票与报关单名称不一致影响退税吗
  • 教育附加费网上缴费
  • 浙江个体户开票软件
  • 3.0t交强险
  • 巾帼文明岗主题内容
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设