关于文字排版和相关操作的总结

想到什么写什么的总结帖:

1. 段落首行空两格:text-indent: 2em;

这个属性直接写长度几乎所有现代浏览器都能支持,但是关键字就不一定了。
https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-indent
https://caniuse.com/#search=text-indent

2. 首字大小:::first-letter { font-size: 130%; }

相似的伪元素还有:::first-line,可以改变第一行的文字效果。

3. 英文大小写:text-transform: uppercase;

https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-transform
一般常用的就是uppercase | lowercase,另外none可以禁止改变大小写。

4. 段落之间空行:直接用margin-bottom。

5. 加粗和斜体:不要将样式寄希望于标签!建议老老实实用span+class,或者可以在css中加一句:

p b { font-weight: bolder; }
p i { font-style: italic; }

6. 关于语义化标签:

自从HTML5开始语义化了之后,有些标签的含义发生了变化。

  • :表示文本十分重要,一般用粗体;
  • :提醒注意(Bring Attention To),虽然一般浏览器依然把它显示为粗体,但是不要把它当成粗体。
  • :着重元素 () 标记出需要用户着重阅读的内容, 元素是可以嵌套的,嵌套层次越深,则其包含的内容被认定为越需要着重阅读。
  • :用于表现因某些原因需要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等,它的内容通常以斜体显示。(现在很多地方会把解释为icon)
  • , , :引用。块级引用、行内引用、引用( Citation)。引用标签也可以嵌套。cite可能会显示为斜体。

再次强调:不要将样式寄希望于标签,因为浏览器的默认样式可能不一样。如果真的懒,请使用normalize.css。

7. 光标选中文字样式:还有一个伪类选择器叫做::selection

例如:

::selection { background: #009a61;color:#fff; }  
::-moz-selection { background: #009a61;color:#fff; }  
::-webkit-selection { background: #009a61;color:#fff; }

不过::selection只支持backgroundcolor这两个属性。原因很简单:如果每次选中文字都要引起回流和重绘,那浏览器的开销也太大了些。

8. 想要保留滚动行为但是不想显示滚动条?

webkit内核中还有个伪类-webkit-scrollbar,不过看前缀就知道仅支持webkit内核的浏览器。

/* 禁止显示滚动条,但不影响滚动行为 */
.container::-webkit-scrollbar {
  display: none;
}

类似的css属性还有:

  • ::-webkit-scrollbar — 整个滚动条.
  • ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
  • ::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
  • ::-webkit-scrollbar-track — 滚动条轨道.
  • ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
  • ::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
  • ::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

参考资料:

  • ::-webkit-scrollbar --- MDN
  • Styling Scrollbars

IE还是放弃吧,早期IE的滚动条只能改颜色,IE10+用webkit属性也是可以的。

9. 禁止复制(伪)

  1. JS和HTML属性的方式:
  1. CSS属性:user-select
  user-select: none; 
// -webkit-user-select已弃用
// 这是一个实验中的功能
  • 参考文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/user-select
  • 参考文档:https://caniuse.com/#search=user-select
  • 伪? 因为是治标不治本的方法,其实直接打开console平台还是可以复制到文字的。前端是开放的,如果有很重要的信息,请不要交给前端,至少不要使用明文。

你可能感兴趣的:(关于文字排版和相关操作的总结)