在 CSS 文件中,样式属性名是 font-size
类似的,组合词组时,单词之间使用中划线连接。
其它时候使用的变量名,我们建议的风格是 lower_word_again
这种类型。这在本课程的第一部分内容已经阐述过原因。
如果有自己的偏好,或者遵从某个编码规范,也无妨,按照自己的偏好对应即可。
HTML 是页面的骨架。
一般来说,HTML 构建的 DOM 元素分为两种类型,block(块级) 与 inline(行内),block 可以简单理解为一个容器
的存在,在其前后都会自动换行。一般我们会将 DIV 作为常用的 DOM 元素,它是 block 类型的;而像 SPAN 则是 inline 类型,比如多个 SPAN 连在一起,其前后是不产生换行的。
但事无绝对,block 还是 inline,只是不同 DOM 元素的默认属性而已,我们可以设定其样式属性 display: block
或 display: inline
进行改变。
<div id="my_dom" class="my_class_1" style="color:red"> Hello World.</div>
<div id="my_dom_2" class="my_class_1 my_class_2" style="color:red"> Hello World Again.</div>
一个 HTML 的 DOM 元素经常会用到的属性:
1,id: ID 应该是当前页面内唯一的。
2,class: 一个 DOM 可以有多个 class (空格隔开),它对应的是 CSS 上的规则名。
3,style: 其实就是 CSS 的样式规则。样式一般不直接写在 HTML 中,而是单独写到 CSS 文件中,这样容易管理,代码也会整洁很多;但临时对应、或者局部微调,也可以直接写到 HTML 源码中,它的样式优先级一般是最高的。
其它属性,常用或者不常用,以后自己慢慢接触下去,自然会明白的。
回顾一下,我们在最开始的时候介绍过 HTML 源码的基本结构,我们用 Jade 语法重写一遍,这样看起来更加简洁一些:
html
head
body
div.here_is_real_body
body 内的源码,才是真正核心的内容呈现,由各种 DOM 元素按需嵌套起来。
DIV 是最常用的 DOM 元素。
有时候一个 DIV 包裹另一个 DIV,共同作为一个局部的结构,以方便完成视觉上的布局。
<div class="wrap">
<div class="content">
<p> hello world. </p>
</div>
<div>
H1~H6,是 1~6 级的标题。
P 表示段落
,一般是有大段文字时使用,当然这里用 DIV 也没有问题。而 SPAN 更像算是(同一行内)一些文字的拼接,其本身不产生换行与段落。
IMG 是图片元素,但有些时候,我们呈现图片元素的时候,并不用 IMG,而是用 DIV,给它一个 backgroud-image
的样式属性。相信在未来实践的过程中,使用 background 的样式来呈现图片的场景,你会遇到不少次,多见几次面,就熟悉了。
我们利用各种类型的 DOM 元素,进行组合、嵌套,来实现页面的基本结构,在没有任何 CSS 样式之前,骨架应该看起来是清晰的,并且赋予 DOM 合适的 class、id,接下来再写具体 CSS 样式的时候,就会便利很多。
本段只做简单介绍,不特别展开,有更多疑问,多使用搜索引擎就可以了。
font-size: 文字大小
color: 文字颜色
font-family: 文字字体,可由多个组成,,
分割
line-height: 行高
letter-spacing: 字间距
background: 背景(可以是背景色、背景图),具体的写法参考往上的文档
display: inline/block/hidden
一般情况,一个 DOM 元素在实现自动布局时,基本且主要的属性是 margin
& padding
了。 margin 和 padding 都是由 上、右、下、左
四个维度组成的,所以会有 padding: 10px 20px 10px 20px
这样空格分开四个数值的语法。
拿出笔,在纸上画一个长方形 A,然后长方形外面再画一个长方形 B 完全包住 A,那么 B 与 A 边框间的距离就是 padding 了。此时,A+B 是一个 DOM 元素。
这里有意思的是会引入一个 盒子模型
的概念,就是画的 A、B 两个长方形(组合在一起)代表了(同)一个 DOM 元素,这个 DOM 元素的 content-size(真实内容尺寸) 算 A 的尺寸还是 B 的尺寸呢?
我们再在 B 这个长方形上描边,这就是 border
(边框)了,border 可以是很粗的,也可以只有 1px
(1 像素)的尺寸。这个时候,border 的尺寸算不算当前 DOM (A) 的 content-size 呢?
然后,我们继续在 B 的外围再画一个长方形虚线框,就叫它 C,它能完全包裹住 B。这个时候,B 与 C 之间的边距,就叫 margin 了。此时可以肯定的是,C 肯定不会影响到当前 DOM 的 content-size,border 也不会绘制到 C 的边缘上;padding 则会干扰到 content-size 以及 border,这也就是 margin 和 padding 的区别了。
对了,不要思维定势,B 包住 A,C 包住 B 的时候,不需左右完全对称,可以不对称。
还有,margin 的值也能是负数,比如 margin: 0 -20px
或 margin-bottom: -30px
,可以用来缩减上下段(block)之间排版的空隙。
当一个元素的 display
是 inline
时,相当于当前元素是没有换行的,此时,它垂直方向的 margin 不生效,这也符合(自然)逻辑。
至于盒子模型
,简单来说,就是 CSS 的属性 box-sizing
这个属性是取 content-box
(A 代表的 content-size) 还是 border-box
(B 代表的 content-size),具体的自己再了解,也可以就此听闻便罢了,不是大的问题。
但如果立志成为前端开发者的,请务必进一步了解,这是基础知识。
值 | 描述 |
---|---|
absolute | 绝对定位,相对于 static 定位以外的第一个父元素进行定位。 |
relative | 相对定位,相对于其正常位置进行定位。 |
fixed | 绝对定位,相对于浏览器窗口进行定位。一般少用 |
static | 默认值,不做定位,忽略 top, bottom, left, right 或者 z-index 声明; 一般不用,因为是默认值了。 |
inherit | 规定应该从父元素继承 position 属性的值。 一般不用。 |
如果在某个局部进行绝对的布局 (也就是手工设定 top、left 这类属性),一般来说,将这个局部的 DOM,其 position: relative
,然后内部的子元素采用 position:absolute
的方式进行布局。
在采用绝对布局的时候,z-index
(整数)这个属性就会起到作用,比如两个 DOM 的位置刚好堆叠在一起,肯定有一个上面,一个下面,这时候,z-index
值 (可以是负数) 越高的,就堆叠在越上面。
绝对布局时候,一般我们会声明 top
& left
两个属性,top
相当于 Y 轴的坐标(垂直方向),left
相当于 X 轴的坐标(水平方向)。当然,如果右对齐的,要用 right
+ top
或者 right
+ bottom
,具体视情况而定。
有一个值 auto
,在特定场合下,也是蛮有用的。
比如我们一般会限定页面的最大宽度,然后,在这个宽度内,左右两边均匀的产生边距。
比如下图:
一般的 CSS 规则如下所示,先确定一个最大的宽度, 然后 margin: 0 auto
,也就是 margin: 0 auto 0 auto
的意思,意思为: 顶部不margin, 右边自动margin,底部不margin,左侧自动margin
。
body{
max-width: 960px;
margin: 0 auto;
}
题外话,我们在前面讲到过 padding、marging 的写法,它们完整的 4 个值,实际上是从顶部开始顺时针给定的值;我忘记因为是什么技术栈留下的痕迹,对这个坐标系总是弄混掉。如何克服?有时直接在 Debug 里,重新看下 margin 的逻辑;还有就是记住 margin:0 auto
的效果,然后反推这个坐标系,也就不用另外特别记忆了。不比少年,东西多了,记不住,如非必要真懒得去记这些枯燥的事情了。
DOM 元素都是有自己默认样式属性的, 默认值并不总是我们期望的,这里有会产生一个 重置 (reset) 的逻辑,比如对 body 的 padding、margin 进行一次重置:
body {
padding: 0;
margin: 0;
}
还有比如超级链接默认是有下划线的,大多数情况下是需要重写这个样式规则,一定程度上也算 reset,这部分 reset 算是 CSS 全局性的,所以一般也会放在 CSS 文件的头部,类似:
body { /*具体样式规则*/}
div { /*具体样式规则*/ }
a { /*链接相关的具体样式规则*/ }
搜索引擎,搜 html a 下划线
,或者 html 超级链接 下划线
……
这些知识,不需要特别说明,大量的基础知识,存在于互联网之中。