avaScript开发基础——CSS知识

使用CSS技术可以对文档进行精细的页面美化，CSS不仅可以对单个页面进行格式化，还可以对多个页面使用相同的样式进行修饰，以达到统一的效果。

CSS的相关概念

CSS是英文Cascading Style Sheets（层叠样式表单）的缩写，通常又称为风格样式表（Style Sheet）或级联样式表，它是用来进行网页风格设计的。给网页添加CSS，最大的优势就是在后期维护中只需要修改代码即可。

CSS能做什么

通过在网页中添加CSS样式表，只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者不同网页的外观和格式。具体来讲，CSS的作用有以下几个方面。

在几乎所有的浏览器上都可以使用。

以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。

使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。

用户可以轻松地控制页面的布局。

用户可以将许多网页的风格、格式同时更新，不用再一页一页地更新了。

用户可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。

浏览器与CSS

CSS制定完成之后，具有了很多新功能，即新样式。但这些新样式在浏览器中不能获得完全支持，主要在于各个浏览器对CSS的很多细节处理上存在差异。例如，一个标签的某个属性被一种浏览器支持，而另外一种浏览器则不支持，或者两个浏览器都支持，但其显示效果不一样。

各主流浏览器为了自己产品的利益和推广，定义了很多私有属性，以便加强页面显示样式和效果，导致现在每个浏览器都存在大量的私有属性。虽然使用私有属性可以快速构建效果，但是对网页设计者来说这是一个大麻烦，设计一个页面需要考虑在不同浏览器上的显示效果，一个不注意就会导致同一个页面在不同浏览器上显示效果不一致，甚至有的浏览器不同版本之间也具有不同的属性。

如果所有浏览器都支持CSS样式，那么网页设计者只需要使用一种统一标签，就会在不同浏览器上显示统一样式效果。

当CSS被所有浏览器接受和支持的时候，整个网页设计将会变得非常容易，其布局更加合理，样式更加美观，到那个时候，整个Web页面显示会焕然一新。虽然现在CSS还没有完全普及，各个浏览器对CSS的支持还处于发展阶段，但CSS是一个新的、具有发展潜力很高的技术，在样式修饰方面，是其他技术无可替代的。学习CSS技术，

CSS的局限性

CSS的局限性主要体现在定位属性上的局限性以及不同浏览器之间的限制。在使用绝对定位属性的时候，由于元素的位置已经确定，并独立于文档之外，所以当元素中的内容发生变化时，其他元素无法根据绝对定位元素的变化而做出相应的调整，最终将会导致页面中内容重叠或者产生空白。

在使用相对定位属性的时候，由于页面中会保留元素原来占有的位置，所以会在原有位置上产生空白区域，同时，由于相对定位的优先级高于普通元素，所以也可能造成元素内容的重叠。

浏览器支持的不一致性。浏览器的漏洞或缺乏支持的CSS功能，导致不同的浏览器显示出不同的CSS版面编排效果。例如，在微软IE 6.0的旧版本，执行了许多自己的CSS2.0属性，曲解了很多重要的属性，例如width、height和float。

CSS没有父层选择器，CSS选择器无法提供元素的父层或继承性，以符合某种程度上的标准。先进的选择器（例如XPath）有助于进行复杂的样式设计。

不能明确地指定继承性样式的继承性，建立在浏览器中DOM元素的层级和具体的规则上。垂直控制的局限元素的水平放置普遍地易于控制，垂直控制则是非凭直觉性的、较迂回的，甚至是不可能的。

CSS的优缺点

CSS通过控制页面结构的风格，进而控制整个页面的风格，那么使用CSS控制网页风格有什么优点与缺点呢？

使用CSS的优点如下。

（1）加速用户的开发。CSS可以帮助用户做好基础工作，因此可以更快地开始开发。例如，如果两个开发团队一起工作，那么就可以共享彼此的CSS代码，从而提高团队的工作效果。

（2）可以使用跨浏览器功能。CSS已经编写成跨浏览器兼容了，所以用户可以专注于自定义和创建内容而不是调整基础的样式，更好的是CSS还会消除浏览器特定的bug。

（3）给用户干净和对称的布局。基于网格的CSS建立了一个预定义宽度的多列布局，所以用户可以专注于创建内容而不是排列文本块。

（4）强制使用好的网页设计习惯。CSS强制使用好的习惯，如引入打印样式表。它还提供了一系列的选择器，用户可以在所有使用框架的网站或Web应用中使用，这使得网页设计具有一致性。

使用CSS的缺点如下。

（1）限制开发自由。因为CSS有标准的网格、选择器和其他代码，所以限制了用户可以设计的东西，如布局大小、网格宽度、按键类型、样式等。

（2）添加额外代码。CSS不可避免地有一些用户不需要的代码，因此需要被迫接受一些额外的代码。

（3）强迫用户使用语法。通过使用CSS，用户需要被迫接受语法的变化，特别是在使用非标准命名模式的情况下。

CSS的基础语法

在网页中加入CSS样式的目的是将网页结构代码与网页格式风格代码分离开来，从而使网页设计者可以对网页的布局进行更多的控制。

CSS构造规则

构造CSS的规则由3部分组成，分别是选择符（selector）、属性（property）和属性值（value）

CSS注释语句

CSS注释可以帮助用户对自己写的CSS文件进行说明，如说明某段CSS代码所作用的地方、功能、样式等。

CSS的编写方法

CSS文件是纯文本格式文件，在编写CSS时，常用的编写方法有两种：一种是使用简单纯文本编辑工具，如记事本；另一种是使用专业的CSS编辑工具，如Dreamweaver。

使用记事本编写CSS

使用记事本编写CSS，首先打开记事本，然后输入相应CSS代码。具体步骤如下。

第一步：打开记事本，输入HTML网页代码。

输入HTML网页代码

第二步：添加CSS代码。

第三步：运行网页文件。

使用Dreamweaver编写CSS

Dreamweaver的CSS编辑器具有提示和自动创建CSS功能，深受开发人员喜爱。使用Dreamweaver创建CSS

理解CSS选择器

选择器是CSS中很重要的概念，所有HTML中的标签都是通过不同的CSS选择器进行控制的。用户只需要通过选择器对不同的HTML标签进行控制，赋予各种样式声明，即可实现各种效果。

将自己进大厂前花5w买的内部python培训课程，整整400集，现在拿出来分享给大家，手把手教学，轻松就业不是梦，_哔哩哔哩_bilibili

eb开发是一个很依赖经验的领域，然而这对初学者很不友好。

知识一旦脱离了应用场景就会变得晦涩、空洞，且知识本身也满足“二八定律”，“抓大放小”是提高学习效率的关键。

下文向大家介绍了HTML和CSS之间的关系。内容选自《HTML 5与CSS 3核心技法（全彩）》一书。本书主线清晰，讲解简洁，并提供在线效果演示效果，非常适合小白上手！

1 HTML是骨架

很难想象一个人在桌前对着一块砧板坐一夜，隔一会儿就噼里啪啦敲几下，一会儿哭一会儿笑，是一种什么景象。事实上，在猫眼中我们就是这样的。只不过我们面对的是一块会发光的“砧板”而已。但为什么这块“板子”如此吸引人？“上网”到底是在做什么？

获取信息。

重点在“信息”，一种看不见摸不着却真实存在的东西。无论“1 + 1=2”这段字符显示得多么粗糙，都不会影响它传递了完整的信息，以及这条信息的内在逻辑是正确的，不是吗？HTML就是用来盛放最核心的内容——信息。

所以，在CSS和JavaScript出现之前，HTML就出现了。这是必然的，因为如果连最核心的信息都无法有效传递，那围绕着它的一切装饰物和附属品都是毫无意义的。

除满足承载核心信息的需求外，HTML还解决了一个重要的问题——将信息结构化。

试想有这样一篇文章：

背影

我说道：“爸爸，你走吧。”他望车外看了看，说：“我买几个橘子去。你就在此地，不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台，须穿过铁道，须跳下去又爬上去。父亲是一个胖子，走过去自然要费事些。我本来要去的，他不肯，只好让他去。我看见他戴着黑布小帽，穿着黑布大马褂，深青布棉袍，蹒跚地走到铁道边，慢慢探身下去，尚不大难。可是他穿过铁道，要爬上那边月台，就不容易了。他用两手攀着上面，两脚再向上缩；他肥胖的身子向左微倾，显出努力的样子。

评论

王花花 大概，天底下的父亲，老去的样子都有些共同的特质吧

李拴蛋 我们都不愿意承认他老了

刘备备 想吃橘子...

此时上面的信息基本没有结构，只能通过断行或缩进尽可能让内容更易读，编辑时的状态就是其最终的显示效果。

HTML就派上了用场，见下方的代码：

代码

<artcle>

<h1>背影</h1>

<p>

我说道：“爸爸，你走吧。”他望车外看了看，说：“我买几个橘子去。你就在此地，不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台，须穿过铁道，须跳下去又爬上去。父亲是一个胖子，走过去自然要费事些。我本来要去的，他不肯，只好让他去。我看见他戴着黑布小帽，穿着黑布大马褂，深青布棉袍，蹒跚地走到铁道边，慢慢探身下去，尚不大难。可是他穿过铁道，要爬上那边月台，就不容易了。他用两手攀着上面，两脚再向上缩；他肥胖的身子向左微倾，显出努力的样子。

</p>

</artcle>

<section id="comment-list">

<div class="title">评论</div>

<div class="comment">

<strong class="username">王花花</strong>

<span class="content">大概，天底下的父亲，老去的样子都有些共同的特质吧</span>

</div>

<divclass="comment">

<strong class="username">李拴蛋</strong>

<span class="content">我们都不愿意承认他老了</span>

</div>

<div class="comment">

<strong class="username">刘备备</strong>

<span class="content">想吃橘子...</span>

</div>

</section>

一头雾水没关系，后面我们会细说每一个部分。总之这段内容给人感觉反而更繁琐。但繁琐是代价，重要的是现在这段信息有结构了。这就意味着计算机可以通过结构的规律将其显示得更便于阅读（甚至是交互）。

以下是不加任何装饰性内容直接让浏览器呈现的结果：

效果

这是纯HTML在没有引入任何装饰时的显示效果。很明显，即便是这样也比纯文字状态易读了许多。但注意，HTML本身没有样式，字体大小和粗细有变化的原因是浏览器的默认样式起了作用，与HTML没有关系。而重点就在这里，这意味着我们可以基于这个结构设计自己的页面效果，见下方的示例。

代码

<style>

body { font-family: 'Microsoft YaHei', sans-serif; }

#comment-list { background: #f0f0f0; padding: 10px; border: 1px solid #ccc; margin-top: 25px; }

#comment-list .comment { margin-top: 10px; margin-bottom: 10px; }

#comment-list .title {

color: #777; font-size: 1.1rem; padding-bottom: 5px;

border-bottom: 1px solid #ccc;

}

</style>

<artcle>

<h1>背影</h1>

<p>

我说道：“爸爸，你走吧。”他望车外看了看，说：“我买几个橘子去。你就在此地，不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台，须穿过铁道，须跳下去又爬上去。父亲是一个胖子，走过去自然要费事些。我本来要去的，他不肯，只好让他去。我看见他戴着黑布小帽，穿着黑布大马褂，深青布棉袍，蹒跚地走到铁道边，慢慢探身下去，尚不大难。可是他穿过铁道，要爬上那边月台，就不容易了。他用两手攀着上面，两脚再向上缩；他肥胖的身子向左微倾，显出努力的样子。

</p>

</artcle>

<section id="comment-list">

<div class="title">评论</div>

<div class="comment">

<strong class="username">王花花</strong>

<span class="content">大概，天底下的父亲，老去的样子都有些共同的特质吧</span>

</div>

<div class="comment">

<strong class="username">李拴蛋</strong>

<span class="content">我们都不愿意承认他老了</span>

</div>

<div class="comment">

<strong class="username">刘备备</strong>

<span class="content">想吃橘子...</span>

</div>

</section>

效果

这里只是举了一个小示例。你可以轻而易举地让页面的风格千变万化，进而让用户体验有所差异（或差距）。“千变万化”因CSS灵活、强大，“轻而易举”因HTML简洁、有序。结构的力量！

CSS是皮肤

一个充满活力的生态是不满足于现状的。人们在适应了便利地浏览核心信息之后，就会想方设法改进浏览的体验。比如，让自己的博客以多栏显示，以便在视觉上区分不同板块；修改字体颜色，以便强调一些重要信息等。

起初的做法是——准备几种特殊的标签，专门用于样式的指定。涉及布局的地方，如果没有特殊标签就直接用表格布局。以下没有任何样式的状态（以下代码均不需要看懂）：

代码

<h1>标题</h1>

<p>

从前有座山，山里有个庙，庙里...

</p>

效果

此时的页面结构下。

如果想让标题居中，则需要给其添加元素<center>，见下方的示例。

代码

<center>

<h1>标题</h1>

</center>

<p>

从前有座山，山里有个庙，庙里...

</p>

效果

此时的页面结构如下。

居中标题的目的确实达到了，但是有一个很大的问题：如果我改变主意了，不想让其居中了，那么我还得再去将<center>元素去掉。这对于简单的页面确实可行，但如果是复杂的页面，这种做法的工作量就是噩梦，因为每个地方都得修改，无论是对齐方式、颜色、背景色，还是大的布局都必须通过修改结构才能完成。这种做法的最大问题是可维护性太差，很多时候为了一种样式要修改很多不必要的结构，枯燥、重复、削足适履的工作太多，基本上写一次就再也不想改了。

这个问题亟待解决，而且解决方案还要兼容现有规则。现有规则是什么？HTML的语法及结构。不过既然HTML已经有结构了，为什么不好好利用呢？

以前面示例中的文章页面为例，如果我们想更改标题，是否可以先统一选中所有标题，然后说明想要什么样式规则呢？就像下面这样：

所有h1 元素听着

对齐方式 居中。

字体颜色 黑色。

如果想将所有段落字体放大，则像下面这样：

所有p 元素听着

字体大小 150%。

这种方式的确很高效！同时这个规则与HTML语法无关，相当于另一种语言。这样结构和样式就不会互相影响，结构是结构，样式是样式，两者隔离开了。如果想修改样式，则完全不需要劳HTML大驾，只需要修改样式文件即可，更便于管理和维护。这就是CSS，只不过其语法更简洁。

下面以修改标题对齐方式为例：

h1 { /* 所有h1 元素听着 */

text-align: center; /* 对齐方式 居中 */

}

通过批量选择和处理，极大地提高了开发效率，降低了维护成本，四两拨千斤。

（完）

图书推荐

《HTML 5与CSS 3核心技法（全彩）》

表严肃 著

本书能够为自学Web开发初学者建立一套HTML与CSS的核心知识框架，同时借助丰富的示例让初学者有一个愉悦、轻松的学习过程。

想从事前端开发的，可将本书作为学习的起点。正从事前端开发的，可将本书作为速查的手册。

HTML从哪入手？

自学的话，首先要理解html的作用。html，hypertext markup language，超文本标记语言，用来展示网页中的内容。同时 HTML 也是我们学习前端开发的基础。随着 web 前端技术的飞速发展，HTML 和 CSS 也成为了编程者的必备技能。而要想做一个网页光会这一门语言是不够的，还需要自学css，JavaScript。其中html和css较JavaScript容易。

可以这样理解，HTML，是一个文件类型，可以被浏览器解析。如果不使用浏览器打开，我们看到的将是一行行代码，在浏览器中打开以后呢，就会出现一些静态效果了。下面介绍一下初步的一些HTML语法知识。

HTML 标签非常注重语义化，很多标签都是通俗易懂的，大大降低了我们学习的难度。这套 HTML 教程更是为了避免初学者走太多的弯路，指出了许多其它 HTML 教程中没有提到的学习误区，并且给初学者提供了一个具体的学习思路，除了注重 HTML 知识点的讲解，更加注重 web 前端开发技巧和思维。帮助大家快速入门，其中包含大量的实践经验，将知识系统化，浓缩为精华，用通俗易懂的语言直指网页设计初学者的痛点。

学海无涯，苦做舟，学习如同修行，只有潜心才可以领悟真谛。HTML 中的每一个小知识点都可以让页面发生不同的变化，现在就让我们行动起来，跟着 HTML 教程的步伐，让我们一起走进 HTML 的世界。

HTML语言特点

超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下：

● 简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。

● 可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。

● 平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。

● 通用性：另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

什么时候用HTML

B（Browser）/S（Server）架构方向，也是我们以后主攻方向

为什么要学HTML

我们以后主要为企业内部提供解决方案，例如：企业内部的办公系统、供应链管理系统、客户关系管理系统等，而这些系统通常对界面的表现要求较低，对业务处理和数据处理要求较高，并且要求降低升级维护的成本，B/S架构可以更好的被企业接受，所以我们以后主要的方向是开发基于B/S架构的应用，B/S架构的开发通常又被叫做Web开发，Web开发通常包括Browser浏览器端的开发以及Server服务器端的开发。

虽然我们是学习Java后台服务器编程，但是前端页面编写要了解，能看懂，简单的页面效果可以实现即可；

怎么开发HTML

创建一个以 .html或 .htm 结尾的文件，用文本编辑器打开就可以开发

怎么运行HTML

用浏览器打开以.html或.htm的文件就可以自上而下解析执行，不需要编译

DTD：Document Type Definition

● <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

● DTD文件的作用

● 帮助你编写合法的代码

● 它让浏览器正确地显示器代码，或者说DTD只是写给检查器看的

HTML与W3C（World Wide Web:www）

HTML规范是由w3c负责制定的，W3C是世界万维网联盟（World Wide Web:www）

安装浏览器

FireFox、Google、IE

HTML元素

HTML标签

<>表示开始标记

</>表示结束标记

<html>开始标签

</html>结束标签

html为元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

HTML 元素语法

● HTML 元素以开始标签起始

● HTML 元素以结束标签终止

● 元素的内容是开始标签与结束标签之间的内容

● 某些 HTML 元素具有空内容（empty content）

● 空元素在开始标签中进行关闭（以开始标签的结束而结束）

● 大多数 HTML 元素可拥有属性

嵌套 HTML 元素

大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。

HTML 文档由嵌套的 HTML 元素构成。

HTML 文档实例

上面的例子包含三个 HTML 元素。

HTML 实例解释

● <p> 元素：

这个 <p> 元素定义了 HTML 文档中的一个段落。

这个元素拥有一个开始标签 <p>，以及一个结束标签 </p>。

元素内容是：This is my first paragraph。

● <body> 元素：

<body> 元素定义了 HTML 文档的主体。

这个元素拥有一个开始标签 <body>，以及一个结束标签 </body>。

元素内容是另一个 HTML 元素（p 元素）。

<html> 元素：

这个元素拥有一个开始标签 <html>，以及一个结束标签 </html>

元素内容是另一个 HTML 元素（body 元素）。

不要忘记结束标签

即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：

上面的例子在大多数浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。

注释：未来的 HTML 版本不允许省略结束标签。

空元素

有一些元素必须使用单个标签表示。这些被称为空元素。

一个这样的元素是 hr 。

hr 是一个分组元素，用于表示一个段落级别的内容。

您可以使用以下两种方式之一使用void元素 - 第一种方法是仅指定开始标记，如以下代码所示。

浏览器知道hr是一个void元素，因此不希望看到结束标记。

您可以使元素与空元素一致，如下面的代码所示。

HTML注释

注释是关于HTML元素的有用信息。注释使HTML文档更易读和可理解。

HTML中的注释以标签<！-- 开头，并以 --> 结尾。

浏览器将忽略您在这些标记中放置的任何内容。

以下代码具有HTML注释。

HTML标签

超文本标记语言（外国语简称：HTML）标记标签通常被称为HTML标签，HTML标签是HTML语言中最基本的单位，HTML标签是HTML（标准通用标记语言下的一个应用）最重要的组成部分。

HTML标签的大小写无关的，例如“主体”<body>跟<BODY>表示的意思是一样的，推荐使用小写。

实例

标签定义及使用说明

<html> 标签告知浏览器这是一个 HTML 文档。

<html> 标签是 HTML 文档中最外层的元素。

<html> 标签是所有其他 HTML 元素（除了 <!DOCTYPE> 标签）的容器。

浏览器支持

所有浏览器都支持 <html> 标签。

段落标签：<p></p>

定义：可以把 HTML 文档分割为若干段落

标题字：<h1></h1>至<h6></h6>

标题是通过 <h1> - <h6> 等标签进行定义的

<h1>定义最大标签，<h6>定义最小标签

换行：<br>

定义：<br> 可插入一个简单的换行符

<br> 标签是空标签，它没有结束标签

注释：<!-- 这是HTML注释 -->

水平线：<hr/>

预留格式<pre>内容</pre>

定义：页面中输入什么样式就显示什么样式

实例：< >

搭配视频效果更佳~~

https://www.ixigua.com/690746767030039398