标梵互动
标梵互动
  • 发布:2020-11-19 14:23
  • 更新:2020-11-19 14:23
  • 阅读:718

山东标梵互动 CSS高级知识培养

分类:ASK社区
css

其实CSS远比我们想象的复杂,有可能CSS的任何一点都可以拿出来写一篇很大篇幅的文章,这一点经常可以看到。所以CSS并不局限于他的名字,级联样式表,更像是一个世界,一个网页不可缺少的重要组成部分。
围绕着上面的CSS系统,当然上图可能不够全面,但也可以说明CSS的主要组成部分。先简单说一下一些未知的隐藏属性,先留下一个大概的印象,扩展一下我们的CSS学习体系,然后再慢慢深入。
本文也是作者结合《CSS世界》《CSS权威指南》《CSS秘密》第一、二卷对一些自己平时忽略或者根本不知道的地方的总结,来源于在浏览器中轻敲代码的实践。
本文也是前端知识体系建设的一部分。详见github:https://github.com/qiugu/the-road-to-front-end-learning。
文字排版。

先说字体。声明字体很简单,font-family语句就完成了,但有时我们可能会看到这样的语句:
h1{
font-family:-apple-system,system-ui,SegoeUI,Roboto,Ubuntu,Cantarell,NotoSans,sans-serif,BlinkMacSystemFont,HelveticaNeue,PingFangSC,HiraginoSansGB,MicrosoftYaHei,Arial
{}
这么大的弦有什么含义?事实上,只有知道这个font-faimly属性中有两种类型的值,一种是字体名称,另一种称为字体系列,您才能理解它。顾名思义,字体族是所有字体的分类。在CSS世界中,一般有以下字体系列:
衬线字体。意思是笔画的开始和结束都有额外的修饰,笔画粗细不同。
无衬线字体。就是没装修,笔画粗细都一样。
等宽字体。字形的宽度相等。
草书字体。模仿人类笔迹的字体。
幻想字体。没有属于以上四种字体的其他字体。
因此,上述声明中的无衬线和Helvetica指的是字体系列,前者是衬线字体,后者是无衬线字体。然后意思就很清楚了。如果系统中有前置字体,使用前置字体;如果没有,尽量使用背面衬线字体;如果没有,继续在back语句中搜索可用的字体。
继承。
一般文本类的属性是可以继承的,比如颜色、字号、字体系列等等。
有些属性是不能继承的,比如边框、填充、边距、背景等。其实很容易理解为什么这些属性不能继承,因为一旦这些属性可以继承,整个布局都会受到影响。例如,我们在父元素上添加了边框,但是它的子元素和子元素都继承了边框,所以我们必须编写更多的代码来消除继承的影响。这个结果肯定不是CSS设计的初衷。
行高.
首先,需要明确的是行高适用于内联元素或内联块级元素。我们声明块级框上的行高实际上适用于块级框的内容,因此通常可以看到它是这样使用的:
本文来源:标梵互动(https://www.biaofun.com/)

0 关注 分享

要回复文章请先登录注册