网页制作基础教程（四）-css语法

在前三章网页制作基础的教程中，我们简单的了解html标签，以及html表单的应用。并且会用简单的html标签制作一个简单的网页，但是你们有没有发现？做出来的网页看上去很别捏，总感觉少了点什么。是不是缺少一件衣服呢？一件为网页搭配颜色的衣服！这就是CSS的作用。很多小白们都不知道什么是CSS，简单的理解就是对网站的修饰。如果说Html是一个人的话，那么CSS就是一件衣服，一件很好看的衣服。想必大家对html和CSS的关系理解了吧！

下面就跟大家一起学习下CSS的基础语法：

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

一．标签选择器

h1 {width:300px;height:100px;color:red; font-size:14px;}

PS：根据上图所示，这就是标签选择器，表示的含义是，h1标签的字体颜色为红色，字体为14像素。

二.ID选择器

#banner{width:950px;height:450px;border:1px solid red;color:red;}
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

   PS：以“#”开头的选择器称为ID选择器。含义：ID为banner的盒子，宽度为950像素，高度为450像素，1像素红色的边框线，字体颜色为红色。id 属性只能在每个 HTML 文档中出现一次。

三.Class（类）选择器

.content{width:950px;height:450px;border:1px solid red;}

PS:以“.”开头的选择器称为Class（类）选择器。含义：.content的盒子，宽度为950像素，高度为450像素，1像素红色的边框线。

Class选择器于ID选择器的区别：Class选择器可以存在多次，重复使用，而ID不能。

   那么又有同学问了，我在网页只用两个相同的ID值，没有出现什么错误。那么为什么就不能用呢？前面我说了，ID选择器一般是用于大框架。或者特殊的地方才用的，为什么这样说呢？第一：JS得识别，如果说你网页中存在“两个’相同的ID选择器的话，那么JS怎么会判别你要哪个实现特效呢？第一个还是第二个？还是都用？第二：同样的道理，你做web前端，想必就会跟后台打交道。如果你网页出现很多相同的ID值的话。那么后台做程序的就难做了，不知道怎么去实现。说不定会骂：“你他娘的，是谁写的狗逼代码呀！写的这么差”。当然不会当着你的面骂，可能别人早在心里骂了你一万遍。

选择器的分组选择

h1,h2,h3,h4,h5,h6 {
  color : red;
}

注：表示h1到h6标签的颜色都是红色。

CSS注释

/* 注释内容 */

四.CSS几种链接链接样式

1.内嵌样式

<style type="text/css">
.top{width:985px;height:260px;background:#FFCC66;}
</style>

2.Link样式表式

 <link rel=”stylesheet” type=”text/css” href=”my.css”>   

3.Html式

 <style type="text/css">@import url("css.css");></style>

4.行内样式

<div style="color:red;font-size:12px;"></div>

总结：弄清楚ID选择器于Class选择器的区别，以及CSS的样式链接有哪几种，CSS的注释。

   本文出自：段亮个人博客。如需转载请注明出处！

   本文出处： https://www.duanliang920.com/learn/web/213.html