css网页模板-html 网站模板免费

对于企业或者个人来说，创建一个原创网站需要花费大量的时间。 首先使用Photoshop进行网页设计，然后使用DIV+CSS编写并编译HTML代码，最后可能需要程序开发来完成。 不仅时间长，每次的成本也比较高。 如果您缺乏设计或后端技能，但又想快速完成一个网站，那么我们建议您直接选择网站模板，比如一些静态html网站模板免费网站模板，使用它们可以节省设计和前端的工作，并且程序开发是可选的，只有需要背景时才需要编写程序，如果不需要，可以直接替换模板的文字和图片。

域名频道条纹云建站系统是域名频道推出的全新的基于云计算技术的PC网站+wap网站+微信+APP+微信小程序五合一智能自助建站系统。 有近3000套精美网站建设模板，无论制作企业网站模板，还是其他类型的网站建设、个人网站等。提供大量免费模板css网页模板，可适应各行各业。 自己选择合适的网站模板，即使不懂设计也能制作出漂亮的网站。 系统拥有文章、产品、营销、统计等丰富功能，满足您的所有需求； 五个站点来源相同css网页模板，网站数据统一管理； 一次性制作，多终端适配，让您轻松制作网站，让更多人聆听到您的网站，实时预览网站建设效果！ 所见即所得的操作方式，无需专业技能，无需解码，可自由添加组件，拖拽操作，随心所欲搭建！点击全能云建站链接查看

域名通道云自助建站系统让您创建自己的网站，省时、省力、省钱。

域名频道云建站拥有海量精美建站模板，适合各行各业，即使不懂设计也能打造出漂亮的网站。

95%的虚拟主机都附带数据库，一般不需要单独订购。

小丑云轻松构建智能小程序新生态，功能强大，选择放心，还有海量精美模板。 详情请点击：//www.dns110.com/web/xcx.asp

元素背景为蓝色，如图1-3所示：

div, span::-webkit-whatever {
  background: gray;
}

图1-3 div背景为灰色

不仅是IE浏览器，其他浏览器都支持（Firefox63及以上支持）来识别这个-webkit-invalid伪元素的特性。 因此，我们可以灵活利用这些特性来帮助完成实际的开发。 例如要准确区分IE浏览器和其他浏览器：

/* IE浏览器 */
.example {
  background: black;
}
/* 其他浏览器 */
.example, ::-webkit-whatever {
  background: gray;
}

事实上，里面无效的伪类会导致整个行选择器失败，这一点也可以用来区分浏览器。

第 2 章 CSS 选择器优先级

几乎所有CSS样式冲突、样式覆盖等问题都与CSS声明的优先级错位有关。 为此，在详细讨论CSS选择器的优先级规则之前，我们先快速了解一下所有CSS的优先级规则。

2.1 CSS优先级规则概述

CSS优先级有一个明显难以逾越的层次结构，我将其定义为从0到5的6个级别，其中前4个级别由CSS选择器决定，后2个级别由书写方法和具体句型决定。 下面我将分别解释这6个级别。

(1) 0级：通配符选择器、选择器和逻辑组合的伪类。 其中，通配符选择器写为星号（*）。 示例如下：

* { color: #000; }

选择器包括 +、>、~、空格和 ||。 有关选择器的更多信息，请参阅第 4 章。

逻辑组合的伪类有:not()、:is()、:where等。这个伪类本身并不影响CSS优先级，而是影响括号上面的选择器。

:not() {}

需要注意的是，只有逻辑组合伪类的优先级为0，其他伪类的优先级并非如此。

(2) 第 1 级：标签选择器。 示例如下：

body { color: #333; }

(3)第2级：类选择器、属性选择器和伪类。 示例如下：

.foo { color: #666; }
[foo] { color: #666; }
:hover { color: #333; }

(4) 第 3 级：ID 选择器。 示例如下：

#foo { color: #999; }

（5）4级：样式属性内联。 示例如下：

优先级

(6) 5 级：！重要。 示例如下：

.foo { color: #fff !important; }

!important 是最优先的，可以重置 JavaScript 设置的样式。 唯一推荐的方案是使 JavaScript 设置无效。 例如：

.foo[style*="color: #ccc"] { 
  color: #fff !important;
}

对于其他场景，没有理由使用它，请不要滥用它。

不难看出，CSS选择器的优先级（0级到3级）是CSS优先级的一部分，也是最重要、最复杂的部分。 学习CSS选择器的优先级就相当于学习完整的CSS优先级规则。

2.2 深入CSS选择器优先级

本节将让您深入了解 CSS 选择器优先级，包括评估规则、实用方法和一些奇怪有趣的功能。

2.2.1 CSS选择器优先级的估计规则

对于CSS选择器优先级的估计，业界广泛采用数值计数的方法。 具体如下：每个CSS语句的选择器可以对应一个特定的值。 值越大，优先级越高，里面的CSS语句会先渲染。 其中，出现一个0级选择器，优先级值+0； 出现1级选择器，优先级值+1； 出现2级选择器，优先级值+10； 出现 3 级选择器，优先级值 Value +100。

由此，估算结果如表2-1所示。

表 2-1 选择器优先级估计

选择器

估计的价值

预估法规

*{}

1 个 0 级通配符选择器，优先级值为 0

对话{}

1 个优先级值为 1 的 1 级标签选择器

ul>li{}

2个1级标签选择器，1个0级选择器，优先级值为1+0+1

li>ol+ol{}

3个1级标签选择器，2个0级选择器，优先级值为

1+0+1+0+1

.foo{}

10

1 个 2 级类名称选择器，优先级值为 10

a:not([rel=nofollow]){}

11

1个1级标签选择器css元素选择器，1个0级负伪类，1个2级属性选择器，优先级值为1+0+10

a：悬停{}

11

1个1级标签选择器，1个2级伪类，优先级值为1+10

奥利。 富{}

12

1个2级类名选择器，2个1级标签选择器，1个0级空间选择器，优先级值为1+0+1+10

li.foo.bar{}

21

2个2级类名选择器，1个1级标签选择器，优先级值为10×2+1

#foo{}

100

1 个 3 级 ID 选择器，优先级值为 100

#foo。 巴普{}

111

1个3级ID选择器，1个2级类名选择器，1个1级标签选择器，优先级值为100+10+11

趁热打铁，我来考考你一个小问题，元素的颜色是蓝色还是白色？

   颜色是？

body.foo:not([dir]) { color: red; }
html[lang] > .foo { color: blue; }

我们首先估计一下各自的优先级值。

第一个是body.foo:not([dir])，有标签选择器body，类名选择器.foo和负伪类：not，还有属性选择器[dir]，估计结果是1+ 10+0+10，即21。

然后出来了html[lang]>body.foo，出现了标签选择器html、属性选择器[lang]和类名选择器.foo，估计结果是1+10+10，也就是二十一。

这两个选择器的估计值是一样的，那么如何渲染呢？

这就引出了另一个重要的规则——“从后面”。 也就是说，当CSS选择器的优先级值相同时，后渲染选择器的优先级更高。 因此，上题最终的颜色是橙色（蓝色）。

具有较高渲染后优先级的规则是相对于整个页面文档的，而不仅仅是在单个 CSS 文件中。 例如：

body { color: red; }

a.css 中有：

body { color: yellow; }

在b.css中有：

body { color: blue; }

此时，正文的颜色为黑色，如图2-1所示，因为蓝色的CSS语句出现在文档的最后。

图2-1 浏览器中主体颜色的优先级

还有一个误解需要指出，那就是 CSS 选择器的优先级与 DOM 元素的层次位置无关。 例如：

body .foo { color: red; }
html .foo { color: blue; }

请问.foo的颜色是蓝色还是白色？

答案是红色的。 其实它是一个子元素，更接近.foo，而且选择器的优先级不考虑DOM的位置，所以前面的html.foo{}优先级更高。

1.降低CSS选择器优先级的技巧

在实际开发中，难免会遇到需要降低CSS选择器优先级的场景。 例如，您想要降低下面的 .foo 类名选择器的权重：

.foo { color: #333; }

很多人的做法是减少嵌套，比如：

.father .foo {}

或者删除标签选择器，例如：

div.foo {}

但这些都不是最好的方式，因为这种方式降低了耦合性，增加了可维护性，一旦父元素的类名改变了，或者标签改变了，样式不就失效了吗？ 这里有一个降低CSS选择器优先级的小方法，就是重复选择器本身。 例如，可以这样做，既增强了优先级，又不降低耦合性，确实是最好的选择：

.foo.foo {}

如果你确实不喜欢这些写法，使用不可避免的属性选择器也是一个好方法。 例如：

.foo[class] {}
#foo[id] {}

2.对数值表示法的评论

上面提到的CSS选择器优先级值的计数方法实际上是一种不精确的方法，因为1和10之间的差异太小，这意味着连续10个标签选择器的优先级与1个类名选择器齐平。 但事实并非如此，不同级别的选择器之间的差异是不可逾越的。 但因为在实际开发中，我们不会连续写最多10个选择器，所以不会影响我们在实际开发过程中对选择器优先级的估计。

而对于使用CSS选择器来说，你的写作习惯远比知识更重要。 即使你的理论知识再扎实，如果你平时的写作习惯不好，也无法避免CSS样式覆盖、样式冲突等问题。 我会在第三章详细阐述这个问题。因此，对于数值估计方法，我的心态是学一次就够了，没必要反复研究，综合性强。 只要你足够习惯，就不会遇到混乱的优先级问题。

对于 CSS 选择器来说，层次结构真的是一个不可逾越的鸿沟吗？ 虽然不是，但这里有一些你不知道的冷知识。

2.2.2256选择器越级现象

有以下 HTML：

颜色是？

以下CSS：

#foo { color: #000; background: #eee; }
.f { color: #fff; background: #333; }

事实上，文本的颜色是#000，即白色，因为ID选择器的级别比类名选择器的级别高一级。 而且，如果是下面的 CSS 呢？ 256 .f 类名适合：

#foo { padding: 10px 20px; color: #000; background: #eee; }
.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f { color: #fff; background: #333; }

在IE浏览器下，神奇的事情发生了，文字的颜色是红色，背景颜色是白色，如图2-2所示。

图2-2 类名在IE浏览器中具有更高的优先级

读者可以在IE浏览器下进入亲身体验、学习。

同样，256个标签选择器的优先级低于类名选择器的现象也存在。

事实上css元素选择器，过去在 Chrome 和 Firefox 浏览器中，这 256 个选择器的优先级都低于之前的选择器级别。 后来大概在2015年以后，Chrome浏览器和Firefox浏览器都改变了策略，无论有多少个选择器，选择器的优先级都不能超过之前的水平。 因此，目前的越级现象仅在IE浏览器中可见。

为什么会出现这些有趣的现象呢？ 早年查看火狐浏览器的源码，发现所有的类名都是以8个字节的字符串来存储的，而8个字节能容纳的最大值是255，所以当256个类名同时出现时，它必然会越过其边缘并溢出到ID区域。 如今，使用16字节字符串来存储，并且可以容纳的类型数量足够大，因此不会出现这些现象。

其实这个冷知识没有太大的实用价值，只是一个大概的了解。

2.3 为什么按钮：悬停会改变颜色

了解了CSS选择器的优先级之后，日常工作中遇到的很多问题就知道是怎么回事了。 给出一个按钮的反例：悬停改变颜色。

比如我们写一个蓝色背景、黄色文字的按钮，这样当键盘经过按钮时背景颜色就会改变：

.cs-button {
   background-color: darkblue;
   color: white;
}
.cs-button:hover {
   background-color: blue;
}
按钮

看代码没有问题，一刷新页面就出现问题。 当键盘经过按键时，文本变成了红色，而不是预期的红色！

哪里有问题？ 经过排查，这个问题原来是由CSSreset引起的。

实际开发中，我们必须设置全局链接颜色，例如按钮默认颜色为红色，键盘经过时变成深红色：

a { color: blue; }
a:hover { color: darkblue; }

按钮的颜色变化是由这里的a:hover引起的。 由于a:hover的优先级高于.cs-button（:hover伪类的优先级与类选择器的优先级相同），所以键盘经过按钮时显示按钮的颜色由 a:hover 深灰色设置。

一旦知道了原因，问题就很容易解决了。 常见的做法是重新设置键盘按键的颜色：

.cs-button:hover {
   color: white;
   background-color: blue;
}

或者使用具有更好语义的按钮标签，而不是传统的按钮 a 标签。