转行学前端的第 14 天 : 了解 CSS 开发规范和知识点补漏

1,149 阅读36分钟

我是小又又,住在武汉,做了两年新媒体,准备用 6 个月时间转行前端。

今日学习目标

按照昨天的基于创客贴的模板做了基础实现,今天主要就是基于实现,再补充学习基础页面需要了解的规范,加油,小又又!!!!


今日学习概要

了解规范

  • 了解项目通用开发流程。昨天在实现页面的时候,我是按照我做图习惯,先设计,然后从整体块到局部块进行实现的,不知道这样对不对。
  • 了解页面标签中通用使用的标签结构中idclass的使用场景。昨天这边主要是想了解两个类型选择器的效果,两种情况都写了,不清楚实际项目中,一般推荐的优先级是怎样的,通用的标签命名是怎样的?
  • 了解相关默认的浏览器样式清除通用 CSS 片段。

CSS 知识点补漏

  • 了解 CSS 单位相关知识点
  • 了解 CSS 字体相关知识点

项目开发流程规范

项目需求分析

这个环节是由项目经理完成,项目经理首先和客户进行交流,了解客户的需求,然后分析项目的可行性,如果项目可以被实现,项目经理写出项目需求文档交给设计师完成后续的开发。


页面设计

这个环节主要是 UI 设计师参与,UI 设计师根据产品需求分析文档,对产品的整体美术风格、交互设计、界面结构、操作流程等做出设计。负责项目中各种交互界面、图标、LOGO、按钮等相关元素的设计与制作。


编码

这个部分由程序员来实现。(程序员分为 WEB 前端开发工程师和后台开发工程师。前端开发人员主要做我们可以在网页上看的见的页面,后台就做一些我们看不见的管理系统以及功能的实现。)程序员根据 UI 设计师的设计,用编码来完成整个项目的各个功能。


测试

这部分由程序测试员来完成。程序测试员主要就是测试寻找程序还存在的 bug,一般来说刚编码完成的程序都是存在问题的,就需要测试人员反复不断的测试并将存在问题的测试结果交给编码人员进行 bug 的修复。等到几乎所有 bug 修复完成,这个项目差不多就可以上线了。


维护

程序的维护是整个项目的最后一个阶段,但也是耗时最多,成本最高最高的的一个阶段。程序的维护包括程序上线后后续 bug 的修复和程序版本的更新。

其他版本

有一个图片说明的很详细,但是我感觉不太符合基础开发项目,希望之后能再理解一下。


CSS 规范 - 分类方法

CSS 文件的分类和引用顺序

通常,一个项目我们只引用一个 CSS,但是对于较大的项目,我们需要把 CSS 文件进行分类。

我们按照CSS的性质和用途,将CSS文件分成公共型样式特殊型样式皮肤型样式,并以此顺序引用(按需求决定是否添加版本号)。

  • 公共型样式:包括了以下几个部分:“标签的重置和设置默认值”、“统一调用背景图和清除浮动或其他需统一处理的长样式”、“网站通用布局”、“通用模块和其扩展”、“元件和其扩展”、“功能类样式”、“皮肤类样式”。
  • 特殊型样式:当某个栏目或页面的样式与网站整体差异较大或者维护率较高时,可以独立引用一个样式:“特殊的布局、模块和元件及扩展”、“特殊的功能、颜色和背景”,也可以是某个大型控件或模块的独立样式。
  • 皮肤型样式:如果产品需要换肤功能,那么我们需要将颜色背景等抽离出来放在这里。
<link href="assets/css/global.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/index.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/skin.css" rel="stylesheet" type="text/css"/>

CSS 内部的分类及其顺序

  • 重置(reset)和默认(base)(tags):消除默认样式和浏览器差异,并设置部分标签的初始样式,以减少后面的重复劳动!你可以根据你的网站需求设置!
  • 统一处理:建议在这个位置统一调用背景图(这里指多个布局或模块或元件共用的图)和清除浮动(这里指通用性较高的布局、模块、元件内的清除)等统一设置处理的样式!
  • 布局(grid)(.g-):将页面分割为几个大块,通常有头部、主体、主栏、侧栏、尾部等!
  • 模块(module)(.m-):通常是一个语义化的可以重复使用的较大的整体!比如导航、登录、注册、各种列表、评论、搜索等!
  • 元件(unit)(.u-):通常是一个不可再分的较为小巧的个体,通常被重复用于各种模块中!比如按钮、输入框、loading、图标等!
  • 功能(function)(.f-):为方便一些常用样式的使用,我们将这些使用率较高的样式剥离出来,按需使用,通常这些选择器具有固定样式表现,比如清除浮动等!不可滥用!
  • 皮肤(skin)(.s-):如果你需要把皮肤型的样式抽离出来,通常为文字色、背景色(图)、边框色等,非换肤型网站通常只提取文字色!非换肤型网站不可滥用此类!
  • 状态(.z-):为状态类样式加入前缀,统一标识,方便识别,她只能组合使用或作为后代出现(.u-ipt.z-dis{}.m-list li.z-sel{})。

功能类皮肤类样式为表现化的样式,请不要滥用!!!以上顺序可以按需求适当调整。

/* 重置 */
div,p,ul,ol,li{margin:0;padding:0;}
/* 默认 */
strong,em{font-style:normal;font-weight:bold;}
/* 统一调用背景图 */
.m-logo a,.m-nav a,.m-nav em{background:url(images/sprite.png) no-repeat 9999px 9999px;}
/* 统一清除浮动 */
.g-bdc:after,.m-dimg ul:after,.u-tab:after{display:block;visibility:hidden;clear:both;height:0;overflow:hidden;content:'.';}
.g-bdc,.m-dimg ul,.u-tab{zoom:1;}
/* 布局 */
.g-sd{float:left;width:300px;}
/* 模块 */
.m-logo{width:200px;height:50px;}
/* 元件 */
.u-btn{height:20px;border:1px solid #333;}
/* 功能 */
.f-tac{text-align:center;}
/* 皮肤 */
.s-fc,a.s-fc:hover{color:#fff;}

CSS 规范 - 命名规则

使用类选择器,放弃ID选择器

ID在一个页面中的唯一性导致了,如果以ID为选择器来写CSS,就无法重用。


NEC特殊字符:"-"连字符

-在本规范中并不表示连字符的含义。

它只表示两种含义:分类前缀分隔符扩展分隔符,详见以下具体规则。


分类的命名方法

使用单个字母+-为前缀

  • 布局(grid)(.g-);
  • 模块(module)(.m-);
  • 元件(unit)(.u-);
  • 功能(function)(.f-);
  • 皮肤(skin)(.s-);
  • 状态(.z-)。

对以上的解释详情参见上一个小节。

注:在你样式中的选择器总是要以上面前五类开头,然后在里面使用后代选择器

如果这五类不能满足你的需求,你可以另外定义一个或多个大类,但必须符合单个字母+-为前缀的命名规则,即 .x- 的格式。 特殊:.j-将被专用于JS获取节点,请勿使用.j-定义样式。

后代选择器命名

  • 约定不以单个字母+-为前缀,且长度大于等于2的类选择器为后代选择器,如:.itemm-list模块里的每一个项,.textm-list模块里的文本部分:.m-list .item{}.m-list .text{}
  • 一个语义化的标签也可以是后代选择器,比如:.m-list li{}
  • 不允许单个字母的类选择器出现,原因详见下面的“模块和元件的后代选择器的扩展类”。

通过使用后代选择器的方法,你不需要考虑他的命名是否已被使用,因为他只在当前模块或元件中生效,同样的样式名可以在不同的模块或元件中重复使用,互不干扰;在多人协作或者分模块协作的时候效果尤为明显!

后代选择器不需要完整表现结构树层级,尽量能短则短

注:后代选择器不要在页面布局中使用,因为污染的可能性较大;

/* 这里的.itm和.cnt只在.m-list中有效 */
.m-list{margin:0;padding:0;}
.m-list .itm{margin:1px;padding:1px;}
.m-list .cnt{margin-left:100px;}
/* 这里的.cnt和.num只在.m-page中有效 */
.m-page{height:20px;}
.m-page .cnt{text-align:center;}
.m-page .num{border:1px solid #ddd;}

命名应简约而不失语义

/* 反对:表现化的或没有语义的命名 */
.m-abc .green2{}
.g-left2{}
/* 推荐:使用有语义的简短的命名 */
.m-list .wrap2{}
.g-side2{}

相同语义的不同类命名

方法:直接加数字或字母区分即可(如:.m-list.m-list2.m-list3等,都是列表模块,但是是完全不一样的模块)。

其他举例:.f-fw0.f-fw1.s-fc0.s-fc1.m-logo2.m-logo3.u-btn.u-btn2等等。


模块和元件的扩展类的命名方法

当 A、B、C、...它们类型相同且外形相似区别不大,那么就以它们中出现率最高的做成基类,其他做成基类的扩展。

方法:+-+数字或字母(如:.m-list的扩展类为.m-list-1.m-list-2等)。

补充:基类自身可以独立使用(如:class="m-list"即可),扩展类必须基于基类使用(如:class="m-list m-list-2")。

如果你的扩展类是表示不同状态,那么你可以这样命名:u-btn-disu-btn-hovm-box-selm-box-hov等等,然后像这样使用:class="u-btn u-btn-dis"

如果你的网站可以不兼容 IE6 等浏览器,那么你标识状态的方法也可以采取独立状态分类(.z-)方法:.u-btn.z-dis.m-box.z-sel,然后像这样使用:class="u-btn z-dis"


模块和元件的后代选择器的扩展类

有时候模块内会有些类似的东西,如果你没有把它们做成元件和扩展,那么也可以使用后代选择器和扩展。

后代选择器:.m-login .btn{}

后代选择器扩展:.m-login .btn-1{},.m-login .btn-dis{}

同样也可以采取独立状态分类(.z-)方法:.m-login .btn.z-dis{},然后像这样使用:class="btn z-dis"

注:此方法用于类选择器,直接使用标签做为选择器的则不需要使用此命名方法。

注:为防止后代选择器的扩展类和大类命名规范冲突,后代选择器不允许使用单个字母。

比如:.m-list .a{}是不允许的,因为当这个.a需要扩展的时候就会变成.a-bb,这样就和大类的命名规范冲突。


分组选择器有时可以代替扩展方法

有时候虽然两个同类型的模块很相似,但是你希望他们之间不要有依赖关系,也就是说你不希望使用扩展的方法,那么你可以通过合并选择器来设置共性的样式。

使用本方法的前提是:相同类型、功能和外观都相似,写在同一片代码区域方便维护。

/* 两个元件共性的样式 */
.u-tip1,.u-tip2{}
.u-tip1 .itm,.u-tip2 .itm{}
/* 在分别是两个元件各自的样式 */
/* tip1 */
.u-tip1{}
.u-tip1 .itm{}
/* tip2 */
.u-tip2{}
.u-tip2 .itm{}

防止污染和被污染

当模块或元件之间互相嵌套,且使用了相同的标签选择器或其他后代选择器,那么里面的选择器就会被外面相同的选择器所影响。

所以,如果你的模块或元件可能嵌套或被嵌套于其他模块或元件,那么要慎用标签选择器,必要时采用类选择器,并注意命名方式,可以采用.m-layer .layerxxx.m-list2 .list2xxx的形式来降低后代选择器的污染性。


CSS 规范 - 代码格式

选择器、属性和值都使用小写

xhtml标准中规定了所有标签、属性和值都小写,CSS也是如此。


单行写完一个选择器定义

便于选择器的寻找和阅读,也便于插入新选择器和编辑,便于模块等的识别。去除多余空格,使代码紧凑减少换行。

如果有嵌套定义,可以采取内部单行的形式。

/* 单行定义一个选择器 */
.m-list li,.m-list h3{width:100px;padding:10px;border:1px solid #ddd;}
/* 这是一个有嵌套定义的选择器 */
@media all and (max-width:600px){
    .m-class1 .itm{height:17px;line-height:17px;font-size:12px;}
    .m-class2 .itm{width:100px;overflow:hidden;}
}
@-webkit-keyframes showitm{
    0%{height:0;opacity:0;}
    100%{height:100px;opacity:1;}
}

最后一个值也以分号结尾

通常在大括号结束前的值可以省略分号,但是这样做会对修改、添加和维护工作带来不必要的失误和麻烦。


省略值为 0 时的单位

为节省不必要的字节同时也使阅读方便,我们将0px0em0%等值缩写为0

.m-box{margin:0 10px;background-position:50% 0;}

使用单引号

省略url引用中的引号,其他需要引号的地方使用单引号。

.m-box{background:url(bg.png);}
.m-box:after{content:'.';}

使用 16 进制表示颜色值

除非你需要透明度而使用rgba,否则都使用#f0f0f0这样的表示方法,并尽量缩写。

.m-box{color:#f00;background:rgba(0,0,0,0.5);}

根据属性的重要性按顺序书写

只遵循横向顺序即可,先显示定位布局类属性,后盒模型等自身属性,最后是文本类及修饰类属性。

显示属性 自身属性 文本属性和其他修饰
display width font
visibility height text-align
position margin text-decoration
float padding vertical-align
clear border white-space
list-style overflow color
top min-width background
.m-box{position:relative;width:600px;margin:0 auto 10px;text-align:center;color:#000;}

如果属性间存在关联性,则不要隔开写。

/* 这里的height和line-height有关联性 */
.m-box{position:relative;height:20px;line-height:20px;padding:5px;color:#000;}

私有在前,标准在后

先写带有浏览器私有标志的,后写 W3C 标准的。

.m-box{-webkit-box-shadow:0 0 0 #000;-moz-box-shadow:0 0 0 #000;box-shadow:0 0 0 #000;}

注释格式:/_ 注释文字 _/

对选择器的注释统一写在被注释对象的上一行,对属性及值的注释写于分号后。

注释内容两端需空格,已确保即使在编码错误的情况下也可以正确解析样式。

在必要的情况下,可以使用块状注释,块状注释保持统一的缩进对齐。

原则上每个系列的样式都需要有一个注释,言简意赅的表明名称、用途、注意事项等。

/* 块状注释文字
 * 块状注释文字
 * 块状注释文字
 */

.m-list{width:500px;}
.m-list li{height:20px;line-height:20px;/* 这里是对line-height的一个注释 */overflow:hidden;}
.m-list li a{color:#333;}
/* 单行注释文字 */
.m-list li em{color:#666;}

原则上不允许使用Hack

很多不兼容问题可以通过改变方法和思路来解决,并非一定需要 Hack,根据经验你完全可以绕过某些兼容问题。

一种合理的结构和合理的样式,是极少会碰到兼容问题的。

由于浏览器自身缺陷,我们无法避开的时候,可以允许使用适当的 Hack。


统一Hack方法

统一使用“*”和“_”分别对 IE7 和 6 进行 Hack。如下代码所示:

/* IE7会显示灰色#888,IE6会显示白色#fff,其他浏览器显示黑色#000 */
.m-list{color:#000;*color:#888;_color:#fff;}

建议并适当缩写值

“建议并适当”是因为缩写总是会包含一系列的值,而有时候我们并不希望设置某一值,反而造成了麻烦,那么这时候你可以不缩写,而是分开写。

当然,在一切可以缩写的情况下,请务必缩写,它最大的好处就是节省了字节,便于维护,并使阅读更加一目了然。


选择器顺序

请综合考虑以下顺序依据:

  • 从大到小(以选择器的范围为准)
  • 从低到高(以等级上的高低为准)
  • 从先到后(以结构上的先后为准)
  • 从父到子(以结构上的嵌套为准)

以下仅为简单示范:

/* 从大到小 */
.m-list p{margin:0;padding:0;}
.m-list p.part{margin:1px;padding:1px;}
/* 从低到高 */
.m-logo a{color:#f00;}
.m-logo a:hover{color:#fff;}
/* 从先到后 */
.g-hd{height:60px;}
.g-bd{height:60px;}
.g-ft{height:60px;}
/* 从父到子 */
.m-list{width:300px;}
.m-list .itm{float:left;}

选择器等级

a = 行内样式 style。

b = ID 选择器的数量。

c = 类、伪类和属性选择器的数量。

d = 类型选择器和伪元素选择器的数量。

选择器 等级(a,b,c,d)
style=”” 1,0,0,0
#wrapper #content {} 0,2,0,0
#content .dateposted {} 0,1,1,0
div#content {} 0,1,0,1
#content p {} 0,1,0,1
#content {} 0,1,0,0
p.comment .dateposted {} 0,0,2,1
div.comment p {} 0,0,1,2
.comment p {} 0,0,1,1
p.comment {} 0,0,1,1
.comment {} 0,0,1,0
div p {}
p {} 0,0,0,1

CSS 规范 - 最佳实践

最佳选择器写法(模块)

/* 这是某个模块 */
.m-nav{}/* 模块容器 */
.m-nav li,.m-nav a{}/* 先共性  优化组合 */
.m-nav li{}/* 后个性  语义化标签选择器 */
.m-nav a{}/* 后个性中的共性 按结构顺序 */
.m-nav a.a1{}/* 后个性中的个性 */
.m-nav a.a2{}/* 后个性中的个性 */
.m-nav .z-crt a{}/* 交互状态变化 */
.m-nav .z-crt a.a1{}
.m-nav .z-crt a.a2{}
.m-nav .btn{}/* 典型后代选择器 */
.m-nav .btn-1{}/* 典型后代选择器扩展 */
.m-nav .btn-dis{}/* 典型后代选择器扩展(状态) */
.m-nav .btn.z-dis{}/* 作用同上,请二选一(如果可以不兼容IE6时使用) */
.m-nav .m-sch{}/* 控制内部其他模块位置 */
.m-nav .u-sel{}/* 控制内部其他元件位置 */
.m-nav-1{}/* 模块扩展 */
.m-nav-1 li{}
.m-nav-dis{}/* 模块扩展(状态) */
.m-nav.z-dis{}/* 作用同上,请二选一(如果可以不兼容IE6时使用) */

统一语义理解和命名

布局(.g-)

语义 命名 简写
文档 doc dc
头部 head d
主体 body d
尾部 foot t
主栏 main n
主栏子容器 mainc mc
侧栏 side d
侧栏子容器 sidec sc
盒容器 wrap/box wrap/bx

模块(.m-)、元件(.u-)

语义 命名 简写
导航 nav nav
子导航 subnav snav
面包屑 crumb crm
菜单 menu menu
选项卡 tab tab
标题区 head/title hd/tt
内容区 body/content bd/ct
列表 list lst
表格 table tb
表单 form fm
热点 hot hot
排行 top top
登录 login log
标志 logo logo
广告 advertise ad
搜索 search sch
幻灯 slide sld
提示 tips tips
帮助 help help
新闻 news news
下载 download dld
注册 regist reg
投票 vote vote
版权 copyright cprt
结果 result rst
标题 title tt
按钮 button btn
输入 input ipt

功能(.f-)

语义 命名 简写
浮动清除 clearboth cb
向左浮动 floatleft fl
向右浮动 floatright fr
内联块级 inlineblock ib
文本居中 textaligncenter tac
文本居右 textalignright tar
文本居左 textalignleft tal
垂直居中 verticalalignmiddle vam
溢出隐藏 overflowhidden oh
完全消失 displaynone dn
字体大小 fontsize fs
字体粗细 fontweight fw

皮肤(.s-)

语义 命名 简写
字体颜色 fontcolor fc
背景 background bg
背景颜色 backgroundcolor bgc
背景图片 backgroundimage bgi
背景定位 backgroundposition bgp
边框颜色 bordercolor bdc

状态(.z-)

语义 命名 简写
选中 selected sel
当前 current crt
显示 show show
隐藏 hide hide
打开 open open
关闭 close close
出错 error err
不可用 disabled dis

CSS 浏览器样式清除

通过css 浏览器样式清除进行搜索,发现的默认通用清除 CSS 片段~~~

搜索结果中排名最靠前的竟然是 2011 写的,看了几篇文章中,找的最长的样式清除片段进行了记录。

@charset "utf-8";
/*!
 * @名称:base.css
 * @功能:1、重设浏览器默认样式
 *       2、设置通用原子类
 */

/* 防止用户自定义背景颜色对网页的影响,添加让用户可以自定义字体 */
html {
    background:white;
    color:black;
}
/* 内外边距通常让各个浏览器样式的表现位置不同 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    margin:0;
    padding:0;
}
/* 要注意表单元素并不继承父级 font 的问题 */
body,button,input,select,textarea {
    font:12px \5b8b\4f53,arial,sans-serif;
}
input,select,textarea {
    font-size:100%;
}
/* 去掉 table cell 的边距并让其边重合 */
table {
    border-collapse:collapse;
    border-spacing:0;
}
/* ie bug:th 不继承 text-align */
th {
    text-align:inherit;
}
/* 去除默认边框 */
fieldset,img {
    border:none;
}
/* ie6 7 8(q) bug 显示为行内表现 */
iframe {
    display:block;
}
/* 去掉 firefox 下此元素的边框 */
abbr,acronym {
    border:none;
    font-variant:normal;
}
/* 一致的 del 样式 */
del {
    text-decoration:line-through;
}
address,caption,cite,code,dfn,em,th,var {
    font-style:normal;
    font-weight:500;
}
/* 去掉列表前的标识,li 会继承 */
ol,ul {
    list-style:none;
}
/* 对齐是排版最重要的因素,别让什么都居中 */
caption,th {
    text-align:left;
}
/* 来自yahoo,让标题都自定义,适应多个系统应用 */
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:500;
}
q:before,q:after {
    content:'';
}
/* 统一上标和下标 */
sub,sup {
    font-size:75%;
    line-height:0;
    position:relative;
    vertical-align:baseline;
}
sup {
    top:-0.5em;
}
sub {
    bottom:-0.25em;
}
/* 让链接在 hover 状态下显示下划线 */
a:hover {
    text-decoration:underline;
}
/* 默认不显示下划线,保持页面简洁 */
ins,a {
    text-decoration:none;
}
/* 去除 ie6 & ie7 焦点点状线 */
a:focus,*:focus {
    outline:none;
}
/* 清除浮动 */
.clearfix:before,.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
    overflow:hidden;
}
.clearfix {
    zoom:1/* for ie6 & ie7 */
}
.clear {
    clear:both;
    display:block;
    font-size:0;
    height:0;
    line-height:0;
    overflow:hidden;
}
/* 设置显示和隐藏,通常用来与 js 配合 */
.hide {
    display:none;
}
.show{
    display:block;
}
/* 设置浮动,减少浮动带来的 bug */
.fl,.fr {
    display:inline;
}
.fl {
    float:left;
}
.fr {
    float:right;
}


CSS 单位相关知识点

4.19 在基础实践的时候,发现有很多案例中使用的单位不同,然后想整体的了解一下。

老师这边建议我之后可以在 MDN,然后我在MDN中搜索CSS UNIT,进入了CSS 像素

然后,跳转到了absolute-lengths,文档内容是英文的,看上去内容很多,感觉应该种类很齐全,幸好浏览器自带翻译功能~~~

然后还了解到了一个网址https://github.com/w3c/csswg-drafts/issues,感觉之后可以再看看具体怎么使用。

主要是从页面中以 Units 为关键词,学习单位相关知识点,不过,在页面使用中文翻译之后,页面上有很多繁琐的说明,我只记录我看的懂的~~~


基于字体相关单位

unit 描述
em 等于使用它的元素的font-size属性的计算值。
ex 等于第一个可用字体 [CSS3-FONTS]的使用 x 高度。之所以称它为 x 高度,是因为它通常等于小写字母“x”的高度。
ch 等于在用于渲染它的字体中找到的“0”(零,U + 0030)字形的高级度量。(字形的超前度量是其超前宽度或高度,以元素的内联轴中的任一个为准。)
rem 等于根元素上font-size的计算值。如果在根元素的font-size属性中或在没有根元素的文档中使用,则1rem等于font-size属性的初始值。
h1 { line-height: 1.2em }
表示h1元素的行高将比h1元素的字体大20%。另一方面:

h1 {font-size:1.2em} 表示h1元素的字体大小将比h1元素继承的计算的字体大小大20%。


视口百分比单位

unit 描述
vw 等于初始包含块的宽度的1%
vh 等于初始包含块的高度的1%
vmin 等于vwvh中的较小者。
vmax 等于vwvh中的较大者。
在下面的示例中,如果视口的宽度为200mm,则h1元素的字体大小将为16mm(即(8×200mm)/ 100)。

h1 { font-size: 8vw }


绝对长度单位

绝对长度单位是固定在相对于彼此并固定到一些物理测量。当已知输出环境时,它们主要有用。绝对单位由物理单位(incmmmptpcQ)和视角单位组成(px):

unit name 翻译 equivalence
cm centimeters 厘米 1cm = 96px/2.54
mm millimeters 毫米 1mm = 1/10th of 1cm
Q quarter-millimeters 四分之一毫米 1Q = 1/40th of 1cm
in inches 英寸 1in = 2.54cm = 96px
pc picas 皮卡斯 1pc = 1/6th of 1in
pt points 点数 1pt = 1/72th of 1in
px pixels 像素 1px = 1/96th of 1in

h1 { margin0.5in }      /* inches  */
h2 { line-height3cm }   /* centimeters */
h3 { word-spacing4mm }  /* millimeters */
h3 { letter-spacing1Q } /* quarter-millimeters */
h4 { font-size12pt }    /* points */
h4 { font-size1pc }     /* picas */
p  { font-size12px }    /* px */
  • 对于典型观看距离的打印介质,固定单元应为标准物理单元之一(英寸厘米等)。
  • 对于屏幕媒体(包括高分辨率设备),低分辨率设备和具有异常观看距离的设备,建议改为将锚点单元设为像素单元。对于此类设备,建议像素单位引用最接近参考像素的设备像素总数

注意:值不区分大小写,并且序列化为小写,例如1Q序列化为1q


角度单位

unit 描述
deg 度。一圈有 360 度。
grad Gradians,也称为“ gons”或“ grades”。一个完整的圈子中有 400 个梯度。
rad 弧度。一圈有 2π 弧度。
turn 转弯。一圈有 1 圈。

例如,直角是90deg100grad0.25turn或大约1.57rad

所有<angle>单位都是兼容的,deg是其规范单位。

在学习 linear-gradient()的时候就很好奇这个角度单位~~~~


CSS 字体相关知识点

用于样式文本的 CSS 属性通常可以分为两类

  • 字体样式: 作用于字体的属性,会直接应用到文本中,比如使用哪种字体,字体的大小是怎样的,字体是粗体还是斜体,等等。
  • 文本布局风格: 作用于文本的间距以及其他布局功能的属性,比如,允许操纵行与字之间的空间,以及在内容框中,文本如何对齐。

注意: 请记住,包含在元素中的文本是作为一个单一的实体。你不能将文字其中一部分选中或添加样式,如果你要这么做,那么你必须要用适合的元素来包装它们,比如 ( 或者), 或者使用伪元素,像::first-letter (选中元素文本的第一个字母), ::first-line (选中元素文本的第一行), 或者 ::selection (当前光标双击选中的文本)

  • color 字体颜色
  • font-family 字体种类
  • font-size 字体大小
  • font-style 字体样式
  • font-weight 字体粗细
  • text-transform 文本转换
  • text-decoration 文本装饰
  • text-shadow 文字阴影
  • text-align 文本对齐
  • line-height 行高
  • letter-spacing 字母间距
  • word-spacing 单词间距

Font 样式:

  • font-variant: 在小型大写字母和普通文本选项之间切换。
  • font-kerning: 开启或关闭字体间距选项。
  • font-feature-settings: 开启或关闭不同的 OpenType 字体特性。
  • font-variant-alternates: 控制给定的自定义字体的替代字形的使用。
  • font-variant-caps: 控制大写字母替代字形的使用。
  • font-variant-east-asian: 控制东亚文字替代字形的使用, 像日语和汉语。
  • font-variant-ligatures: 控制文本中使用的连写和上下文形式。
  • font-variant-numeric: 控制数字,分式和序标的替代字形的使用。
  • font-variant-position: 控制位于上标或下标处,字号更小的替代字形的使用。
  • font-size-adjust: 独立于字体的实际大小尺寸,调整其可视大小尺寸。
  • font-stretch: 在给定字体的可选拉伸版本中切换。
  • text-underline-position: 指定下划线的排版位置,通过使用 text-decoration-line 属性的 underline 值。
  • text-rendering: 尝试执行一些文本渲染优化。

文本布局样式:

  • text-indent: 指定文本内容的第一行前面应该留出多少的水平空间。
  • text-overflow: 定义如何向用户表示存在被隐藏的溢出内容。
  • white-space: 定义如何处理元素内部的空白和换行。
  • word-break: 指定是否能在单词内部换行。
  • direction: 定义文本的方向 (这取决于语言,并且通常最好让 HTML 来处理这部分,因为它是和文本内容相关联的。)
  • hyphens: 为支持的语言开启或关闭连字符。
  • line-break: 对东亚语言采用更强或更弱的换行规则。
  • text-align-last: 定义一个块或行的最后一行,恰好位于一个强制换行前时,如何对齐。
  • text-orientation: 定义行内文本的方向。
  • word-wrap: 指定浏览器是否可以在单词内换行以避免超出范围。
  • writing-mode: 定义文本行布局为水平还是垂直,以及后继文本流的方向。

字体相关的知识点好多,感觉先具体了解一下我很兴趣的吧,这里就是当作记录了,之后可以来回顾~~~


字体种类

要在文本上设置一个不同的字体,可以使用font-family 属性,这个允许为浏览器指定一个字体 (或者一个字体的列表),然后浏览器可以将这种字体应用到选中的元素上。

浏览器只会把在当前机器上可用的字体应用到当前正在访问的网站上;如果字体不可用,那么就会用浏览器默认的字体代替 default font

p {
  font-family: arial;
}

这段语句使所有在页面上的段落都采用 arial 字体,这个字体可在任何电脑上找到。

网页安全字体

说到字体可用性,只有某几个字体通常可以应用到所有系统,因此可以毫无顾忌地使用。这些都是所谓的 网页安全字体

字体名称 泛型 注意
Arial sans-serif 通常认为最佳做法还是添加 Helvetica 作为 Arial 的首选替代品,尽管它们的字体面几乎相同,但 Helvetica 被认为具有更好的形状,即使 Arial 更广泛地可用。
Courier New monospace 某些操作系统有一个 Courier New 字体的替代(可能较旧的)版本叫 Courier。使用 Courier New 作为 Courier 的首选替代方案,被认为是最佳做法。
Georgia serif
Times New Roman serif 某些操作系统有一个 Times New Roman 字体的替代(可能较旧的)版本叫 Times。使用 Times 作为 Times New Roman 的首选替代方案,被认为是最佳做法。
Trebuchet MS sans-serif 应该小心使用这种字体——它在移动操作系统上并不广泛。
Verdana sans-serif

注意: 在各种资源中,cssfontstack.com 网站维护了一个可用在 WindowsMac 操作系统上使用的网页安全字体的列表,这可以帮助决策网站的安全性。


字体粗细

指定了字体的粗细程度。 一些字体只提供 normalbold 两种值。

正式的语法

<font-weight-absolute> | bolder | lighter
where
<font-weight-absolute> = normal | bold | <number>

  • normal

正常粗细。与 400 等值。

  • bold

加粗。 与 700 等值。

  • lighter

比从父元素继承来的值更细(处在字体可行的粗细值范围内)。

  • bolder

比从父元素继承来的值更粗 (处在字体可行的粗细值范围内)。

  • <number>

一个介于 1 和 1000 (包含) 之间的 类型值。更大的数值代表字体重量粗于更小的数值 (或一样粗)。一些常用的数值对应于通用的字体重量名称,如章节常见粗细值名称和数值对应所描述。

/* Keyword values */
font-weightnormal;
font-weightbold;

/* Keyword values relative to the parent */
font-weightlighter;
font-weightbolder;

/* Numeric keyword values */
font-weight: 1
font-weight: 100;
font-weight: 100.6;
font-weight: 123;
font-weight: 200;
font-weight: 300;
font-weight: 321;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;
font-weight: 1000;

/* Global values */
font-weightinherit;
font-weightinitial;
font-weightunset;

浏览器兼容性


文字阴影

为文字添加阴影。可以为文字与 text-decorations 添加多个阴影,阴影值之间用逗号隔开。每个阴影值由元素在XY方向的偏移量、模糊半径和颜色值组成。


正式的语法

none | <shadow-t>#
where
<shadow-t> = [ <length>{2,3} && <color>? ]

where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? ) <rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? ) <hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? ) <hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )

where <alpha-value> = <number> | <percentage> <hue> = <number> | <angle>


  • <color>

可选。可以在偏移量之前或之后指定。如果没有指定颜色,则使用 UA(用户代理)自行选择的颜色。

  • <offset-x> <offset-y>

必选。这些长度值指定阴影相对文字的偏移量。<offset-x> 指定水平偏移量,若是负值则阴影位于文字左边。 <offset-y>指定垂直偏移量,若是负值则阴影位于文字上面。如果两者均为 0,则阴影位于文字正后方(如果设置了<blur-radius> 则会产生模糊效果)。 可用单位请查看 <length>

  • <blur-radius>

可选。这是 <length> 值。如果没有指定,则默认为0。值越大,模糊半径越大,阴影也就越大越淡(wider and lighter)。

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;

/* color | offset-x | offset-y | blur-radius */
text-shadow#fc0 1px 0 10px;

/* offset-x | offset-y | color */
text-shadow: 5px 5px #558abb;

/* color | offset-x | offset-y */
text-shadowwhite 2px 5px;

/* offset-x | offset-y
/* Use defaults for color and blur-radius */

text-shadow: 5px 10px;

/* Global values */
text-shadowinherit;
text-shadowinitial;
text-shadowunset;

浏览器兼容性


今日学习新名词

名称 名词解析
UI UI设计(或称界面设计)是指对软件的人机交互、操作逻辑、界面美观的整体设计。UI设计分为实体UI虚拟UI,互联网常用的UI设计虚拟UIUI``即User Interface(用户界面)的简称。好的UI设计不仅是让软件变得有个性有品位,还要让软件的操作变得舒适简单、自由,充分体现软件的定位和特点。
程序测试 程序测试(program testing)是指对一个完成了全部或部分功能、模块的计算机程序在正式使用前的检测,以确保该程序能按预定的方式正确地运行。软件的正确性尚未得到根本的解决,软件测试仍是发现软件错误和缺陷的主要手段。为了发现系统中的错误,应竭力设计能暴露错误的测试用例。测试用例是由测试数据和预期结果构成的。一个好的测试用例是极有可能发现至今为止尚未发现的错误的测试用例。
bug bug是计算机领域专业术语,意思是漏洞,原因是系统安全策略上存在的缺陷,有攻击者能够在未授权的情况下访问的危害。
MDN MDN Web Docs 是一个提供 Web 技术和促进 Web 技术软件的不断发展的学习平台,包括:
Web 标准(例如:CSSHTMLJavaScript
开放 Web 应用开发
Firefox 附加组件开发
字体栈 (font stack) 只需包含一个font-family属性,其值由几个用逗号分离的字体名称组成。font-family: "Trebuchet MS", Verdana, sans-serif;
在这种情况下,浏览器从列表的第一个开始,然后查看在当前机器中,这个字体是否可用。如果可用,就把这个字体应用到选中的元素中。如果不可用,它就移到列表中的下一个字体,然后再检查。
网页安全字体 说到字体可用性,只有某几个字体通常可以应用到所有系统,因此可以毫无顾忌地使用。这些都是所谓的 网页安全字体。

MDN 历史

Mozilla 开发者网络(亦称作 Mozilla 开发者中心(MDC)或 Devmo)在 2005 年年初启动。那时 Mozilla 基金会 从 AOL 获得了许可协议,得以使用原创的 DevEdge 内容。DevEdge 内容的引入具有抛砖引玉之效,因此在那不久在社区志愿者的努力下它被迁移到了这个更易于更新与维护的 wiki

此后,这个项目不断发展,现在已经成为所有与关于 Mozilla 项目和开放网络技术的文档的核心一环。在 2010 年,该项目更名为Mozilla开发者网络(Mozilla Developer Network)。2011 年,又添加了供web开发者分享与展示代码的 Demo Studio 与提供教程的 Learning 页面。(MDC 现在表示了"MDN文档中心MDN Doc Center)")现在,Mozilla开发者网络正向着成为供 Web 设计师、应用开发者、以及拓展、主题制作者们时常参考的资源的方向发展。


今日学习总结

发现现有实际前端开发流程步骤还是比较多,希望之后自己也可以理解那些多步骤的流程图~~~~

还有 CSS 单位和字体相关样式好多啊~~~~


今日心情

今天进掘金发现,昨天写的文章阅读量一下多了很多,然后,评论区也有很多小伙伴,给出了自己的相关建议,小又又很感谢这些建议,也欢迎大家在评论区~~~~~

不过,个人习惯是学习过程要有总结产出,方便之后回顾。

在掘金上写文章,主要就是记录自己的学习过程,文章中会有些不够好的地方,也可能有后面看起来感觉很傻的提问。

但是,我觉得老师这边说的对,一定要先养成自己的结构化思考习惯,不能说因为所处阶段不同,就用了不同的策略,而且这个结构化规范的过程,也是需要慢慢摸索的,我现在处于初步学习阶段,有些东西不用太急。

今天主要就是基于昨天的实践,了解了一些基础规范,有些细节估计要在我项目具体实践时再具体领悟了,不过,了解规范会让我更放心一些,就怕开始就养成了错误的习惯。

原本是准备今天要对 css 知识点进行补漏的,但是学习规范之后,我发现时间有些不够,希望明天能更好对知识点补漏一下~~~~

原本准备放到 4.21 的知识点补漏,后面想了很多,还是在早上这边补充了,希望 4.21 的页面实现能够更快一些~~~

本文使用 mdnice 排版