Most Detailed css styles (with practice)

All examples in this article are based on a custom page blog Park.
All forms content from W3CSchool.

Page background (background)

After the blog launched, many people must have been the first to do something to change the background of the page, or put a picture into your favorite color, this is the time to use the background property.

However, what use is it?

All html tags support this property. So, feel free to use.

We often see something like background: #fff;this use, if the background is a picture, it might see background: url('xxx.jpg');this use.

Even without the system studied css, just look at these two codes can know the former is setting the background color, the latter is set in the background image.

The actual picture do is to choose a background color or choose to do the background.

So now set about the background of the blog:

body {
 background: #FFE4C4;
}

Kazakhstan does change the color, the same way you can set the background image.

We examined elements (F12), can be seen in the browser background is actually a collection of attributes

。

For a simple background color, the series of properties usually ignore, for the background image, then set these on-demand content (usually postion, size, repeat, attachmentseveral of these).

The specific use of the property can be found through the manual, not described here.

After put a background image above, we use the phone open and found the image tiles (not set repeat), but closed this property, just mobile browser to display a centered image (on the phone can only see images part), it does not look good, which is clearly contrary to our original intention to change the style (we certainly are not trying to glorify blog).

Then how to solve it? This is a multi-terminal compatibility issues, can not be solved by the css. It can be addressed by responsive design.

Responsibly say, css can actually solve this problem, but simply to make some adaptations, personally think that this is not a good solution (on some occasions it may be sufficient, for example here), to solve the method used is @media queries.

@media only screen and (max-width : 480px) {
 body {
   background: #FFE4C4;
 }  
}  

Then open the mobile browser will no longer find background image, but a solid color. This can be previewed on the same computer.

Details of the properties attached background:

value	description	CSS standards support
background-color	It sets a background color to use.	1
background-position	规定背景图像的位置。	1
background-size	规定背景图片的尺寸。	3
background-repeat	规定如何重复背景图像。	1
background-origin	规定背景图片的定位区域。	3
background-clip	规定背景的绘制区域。	3
background-attachment	规定背景图像是否固定或者随着页面的其余部分滚动。	1
background-image	规定要使用的背景图像。	1
inherit	规定应该从父元素继承 background 属性的设置。	1

建议使用background属性，而不是使用表中的单条属性。

伪元素

注意，是伪元素，而不是伪类。
伪元素针对元素的特定内容进行操作，伪类则是选择元素当前的状态。
关于伪元素和伪类的区别，可参考寒月十八的文章

现在我想在公告栏加一段文字，应该怎么做，如果有js权限，那么可以通过：

var boardcast = document.getElementById('#blog-news');
boardcast.before = "something";
boardcast.after = 'something';

但是为了加个固定的内容去申请js权限，显然是大材小用了，我们完全可以通过伪元素:before和:after来实现。

css3的标准规定伪元素是以双冒号开头的，但是部分浏览器（如IE8）并不兼容，所以也依然支持单冒号的写法，为了向后兼容，咱也得写成单冒号开头的形式。在浏览器的控制台中，可以看到对应的标签后有一个::before。

具体为：

div#blog-news:before {
    content: "我是一名君子，但这并不影响我贪婪的本性;我对技术着迷，我喜欢数学，我贪婪的汲取着所有知识";
}

div#blog-news:after {
    content: "粉丝好少，我好伤心";
}

这样一波操作，显然更简单，而且你会发现一个附加功用（是好是坏得自己判断），这个内容在网页内是不可选中的，但依旧可以通过浏览器的控制台找到该内容。

比js操作更方便的是，通过css，我们可以直接对这个content设定样式。

div#blog-news:before {
    content: "我是一名君子，但这并不影响我贪婪的本性;我对技术着迷，我喜欢数学，我贪婪的汲取着所有知识";
    font-size: 16px;
    color: rebeccapurple;
}

这个还是有局限的，content中的内容只会被解析成字符串，即使有HTML标签，也会被当成字符串显示。
原因是，css并不能改变DOM树

这里列出几个比较常用的伪元素：

伪元素	描述	CSS标准支持
:before	在某个元素之前插入内容。	2
:after	在某个元素之后插入内容。	2

知道这个之后，可能就会有人有些想法了，这个粉丝数啥的是不是也能改呢？嘿嘿。确实能改，有了js权限更好改，但是这完全就是欺骗自己，没啥必要的=。=

伪类

我发现SimpleMemory模板的标题动画不太合我的口味，我鼠标放上去不能向右移，我想让他放大，这得改改。

鼠标放上去，这是一个状态，在上一节提到，伪类是选择元素当前的状态。

那么，我就可以根据当前元素的状态来应用不同的样式了。

.postTitle a:hover {
    margin-left: 0px;
    color: #0f3647;
    text-decoration: underline;
    font-size: 25px;
}

但是这么做完之后，放大的速度有点慢，原因是什么？因为模板中设置了transition: all 0.1s linear 0s;，这是设置过渡效果的。

如果不设置这个属性，那么就不会有过渡效果。

transition属性属于css3标准，所以低版本浏览器（IE8）是不兼容的。

这里列出部分出现次数最多的伪类：

伪类	描述	CSS标准支持
:active	向被激活的元素添加样式。	1
:focus	向拥有键盘输入焦点的元素添加样式。	2
:hover	当鼠标悬浮在元素上方时，向元素添加样式。	1
:link	向未被访问的链接添加样式。	1
:visited	向已被访问的链接添加样式。	1

锚点、定位

博客主页看上去基本没啥要改的了，那点进博文看看。

不错不错，也挺好，不过貌似缺点儿啥？

是目录！

虽然内置的有目录，但是这并不酷，而且用处好少，往下翻翻，这个目录就没了。怎么才能像别的网站那样右下角一直有个目录呢？

申请js权限之前，让我先想想css能不能做，毕竟js建个目录也挺复杂的。

这时候就顺势想到博文中已存在的目录，能不能对它操作呢？

找到这个目录结点，设置如下样式：

div[class='toc'] {
  position: fixed;
  right: 0;
  bottom: 0;
}

发现目录出现在了右下角，而且是固定在这里，不乱跑的。

不过有点小问题，就是在手机之类的小屏幕上，这个目录可能就有点……但也可以通过上面提到过的@media来取消这里设定的样式。

这段css代码里面出现了一些以前没见过的东西，咱先看看position。

position有五种可能值，详细如下：

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

CSS3标准中新增了一个sticky:粘性定位

一般说定位的时候，都是在说前面三种

position: 绝对定位

relative: 相对定位

fixed: 固定定位

看完这张表可能也不能完全理解absolute和relative。

没有理解，其实主要是没懂文档流，上面表格的内容主要就是说文档流的问题，设置为absolute的元素会脱离文档流，设置为relative的元素不会脱离文档流，设置为fixed的元素会脱离文档流。

在float属性也有脱离文档流的说法。

接下来我们要回答下面的问题：

1. 文档流是什么？

标准的说法是，将网页划分成多行，每行从左到右排列html元素。

1. 脱离文档流去了哪里？

标准的说法是，在离开当前层次，放置在另一层上。

其实简单说来，我们可以以地面-天空两层模型来理解，当前网页的文档流是地面（脚踏实地），脱离文档流那就是上天了（飘了）。

This example is not good, but it is very easy to understand, when a layer layout model to understand when the document flow will have a better understanding, but this time you can choose bar notebook - sticky model to a page in a notebook as the current document stream (you're taking notes on this page), when do you think an article of notes should not be placed on the current page, and should not be placed on the next page, this time you will often convenient tore a page stick, stuck somewhere in the current page, this is out of the current document flow, its own internal layout. If the paste a sticky paste in this convenient, then this is relatively sticky parent element (on a post-it) positioning.

With this layer to see the content model, there will be obtained.

Back to the beginning of this section the following code, we set the elements of article directories where fixed position, so that it flows out of the current document, floating. But it was fixed in the lower right corner (the relative positioning of the browser window).

Like kite flying, kite though floating in the sky, but people are flying kites flying kites to keep holding the line.

These are contextual targeting.

Also appearing div[class='toc']is the content of the selector, matching, it must first div tag match, followed by the matching class for the toc tag, you can do an exact match.

About selector, said here does not expand, because the content on the selector, there have been a lot of good articles, and revisit, it is difficult to jump out of this circle.

Reminded that the content selectors, and priority must be content watching.