网页制作中神一样的CSS层的样式表

速优网络（10年经验），服务数万家企业，固定透明报价。域名注册、主机/服务器、网站源码一站式服务。实体公司，专业团队，值得选择！建站业务：企业网站建设、公司官网制作、外贸网站建设、网站仿制、网站复制、仿站、外贸建站、单页扒站客服微信【suyoufuwu】

神一样的 CSS ，本来网页制作世界是一片黑暗的，后来 CSS 给了他色彩。css叫做层叠样式表（英语：Cascading Style Sheets，简写CSS），这是我刚从维基百科上抄下来的（嘻嘻）。干他那么多呢，反正 CSS 就是主管样式的，什么是样式？除了内容就是样式。比如说：您好！这是内容，那么您好用什么字体，多大字号，显示在什么位置，什么颜色，什么背景色……这些就是样式。

这个神一样的对手（混熟了就是神一样的朋友）究竟能做什么我们需要随着学习慢慢去了解。这节课我们先说说要把 CSS写在哪里。

第一种：写在 Html 标签里

这种很直接，优先级也最高，但是不简洁，想象我要是给一个元素设置十几个属性，然后整个页面的代码会乱成什么样子啊。而且也不能重用，下一个元素跟这个完全一样的样式，但是我还得复制一遍过去，而且将来修改了还要挨个去修改，简直更混乱了！

第二种：写在 head 里

Document

……

上面代码中 style 标签中的部分便是。这种方法把 css 代码集中在一起便于查找和管理，只是页面文件会比较大，也有人说可能不利于 SEO （搜索引擎优化）。当然在我看来最大的麻烦是不方便我编辑。因为我要在下面的 html 代码里写网页结构，在上面的 css 里设置样式这样上面下面来回找一会就晕了。

第三种：写在 css 文件里

Document

……

跟第二种方法比较，就是把 style 标签换掉，换作一个 link 标签去引用另外一个文件，然后我们把 css 代码写在被应用的文件（style.css）里，当然这个被引用的文件的名字和位置你是可以根据自己的需要随意设置的。

然后我们说说 css 选择器的基础内容。什么事选择器呢？就是你要给某个元素设置样式，那么是哪个元素呢？我们去描述是哪个元素这件事就是用选择器来描述。

p { css 代码 }

这是针对标签的代码，p 就是一个选择器，他说的是 html 里的段落标签

这是一个段落

看到了，上面的 css 就会对下面的 html 结构产生作用。那么要是这里有很多个段落呢？那么既然都是 p 标签，便全部产生作用，咦，这个太好了！我想设置全部的段落文字样式也只写一次 css 就搞定了。

那么前面我们还讲了class 和 id ，说他们就是用来区分 html 元素的，那么他们的选择器怎么写呢？

#topbox { css 代码 }
.box { css 代码 }

对下面的 html 结构起作用

这样就很明白了，前边是井号（#）的就是说的 id ，前边是点（.）的就是说 class。然后放一个完整的网页代码大家试试看。

Document

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, delectus, quas, sapiente, hic vero quos

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, totam neque non quam reiciendis itaque distinctio

Eum, placeat, illum, nobis at doloremque ut perspiciatis dolor vel perferendis debitis commodi voluptatibus a

效果如下

以上就是速优网络和大家分享的"网页制作中神一样的CSS层的样式表 ",非常感谢您有耐心的读完这篇文章，我们将为您提供更多参考使用或学习交流的信息。我们还可为您提供：企业网站建设、网站仿制、网站复制、仿站、外贸网站建设、外贸建站、公司官网制作等服务，本公司以“诚信、专业、务实、创新”的服务理念服务于客户。如您需要合作，请扫码咨询，我们将诚挚为您服务。

TAG标签：网页制作

上一篇：如何让网站制作代码真的活起来？

下一篇：友情连接的现实作用与对于搜索引擎排名的意