从中学到的CSS
在看Bootstrap的教程的时候,发现很多css的知识都不知道,所以在要学好Bootstrap,还是先把这些基础记下来。
line-height
line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
一般用到line-height就只有把文本垂直居中,设置行高的像素和包含文本div的高度一样。却一直没用明白行高的含义。
当line-height的值为数字的时候,此数字会与当前的字体尺寸相乘来设置行间距。这是看到Bootsrap的Body默认样式
font-size: 14px;
line-height: 1.428571429;
才知道。这里行高为20px。
outline
outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
轮廓线不会占据空间,也不一定是矩形。
而且我这时候才知道
outline:#00FF00 dotted thick;
这里颜色,虚线,加厚。顺序是可以变化的,比如我一直写的boder的样式。
boder:1px sliod #00FF00;
这样也是可以的。
此外,一直记不住的就是怎样去掉input输入框点击时出现的蓝色外边框。
这样就行了:
outline:none
伪类与伪元素
如今才知道伪类与伪元是有区别的,
伪类
- :focus(被鼠标选中)
- :hover
- :link
- :first-child等
伪元素
- :before
- :after等
发现原来伪类是伴随着事件的,而元素就是元素而已。
实际上 css3 为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。但要考虑兼容性。
像这样
p:hover
p::after
属性contenteditable
contenteditable 属性规定是否可编辑元素的内容。属于html5。
<!DOCTYPE HTML>
<html>
<body>
<p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p>
</body>
</html>
这是一段可编辑的段落。请试着编辑该文本。
文章标题及格式
原来语文没学好,至今还不知道标题的格式。像h1,h2,h3,副标题,段落p这些在写网页的时候怎么用都不知道,都是看图看感觉,我觉得有必要记记。
副标题要在大标题第三个字下开始写破折号。
H1标签虽然权重高,但是不可以存在多个.
text-indent缩进
text-indent只用于div,p这样的元素上,像image、input、inline-block、inline元素绝对不用。