htmlcss网页设计入门（Web前端网页设计CSS样式表语言从入门到精通）

htmlcss网页设计入门（Web前端网页设计CSS样式表语言从入门到精通）(1)

哈喽，大家好前面一篇给大家分享了网页设计中， HTML标签语言的内容分享，今天接着分享css，层叠样式表的知识内容。

htmlcss网页设计入门（Web前端网页设计CSS样式表语言从入门到精通）(2)

一、CSS简介：

CSS是什么？CSS，即“Cascading Style Sheet（层叠样式表）”，是用来控制网页的外观的一门技术。

我们知道，HTML、CSS和JavaScript是前端技术中最核心的三个元素。HTML控制网页的结构，CSS控制网页的外观，而JavaScript控制网页的行为。我们已经在HTML入门教程中的前端技术简介这一节详细讲解了这三者的区别，大家可以回去查看一下，下面有文字链接。

Web网页设计，HTML语言最全知识点总结（超级详解）图文并茂

htmlcss网页设计入门（Web前端网页设计CSS样式表语言从入门到精通）(3)

HTML、CSS和JavaScript的关系如下：

“HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为。”

htmlcss网页设计入门（Web前端网页设计CSS样式表语言从入门到精通）(4)

二、CSS内容：

1.css的引入方式

在HTML中引入CSS共有3种方式：

（1）外部样式表；（2）内部样式表；（3）内联样式表；

下面我们详细为大家介绍这3种CSS引入方式。

一、CSS的3种引用方式

1、外部样式表

外部样式表是最理想的CSS引用方式，在实际开发当中，为了提升网站的性能和维护性，一般都是使用外部样式表。所谓的“外部样式表”，就是把CSS代码和HTML代码都单独放在不同文件中，然后在HTML文档中使用link标签来引用CSS样式表。当样式需要被应用到多个页面时，外部样式表是最理想的选择。使用样式表，你就可以通过更改一个CSS文件来改变整个网站的外观。外部样式表在单独文件中定义，并且在标签对中使用link标签来引用。举例：

htmlcss网页设计入门（Web前端网页设计CSS样式表语言从入门到精通）(5)

【说明】：外部样式表都是在head标签内使用link标签来引用的。

2、内部样式表

内部样式，指的就是把CSS代码和HTML代码放在同一个文件中，其中CSS代码放在标签对是放在标签对内的。举例：

htmlcss网页设计入门（Web前端网页设计CSS样式表语言从入门到精通）(6)

浏览器预览效果如下：用记事本输入的代码呈现的效果如下

<!DOCTYPE html>

<head>

p{color:Red;}

</style>

</head>

<body>

<p>智能化弱电工程</p>

</body>

<html>

htmlcss网页设计入门（Web前端网页设计CSS样式表语言从入门到精通）(7)

【说明】：

对于内部样式表，CSS样式在<style>标签内定义，而<style>标签必须放在<head>标签内。

3.内联样式表

内联样式表，也是把CSS代码和HTML代码放在同一个文件中，但是跟内部样式表不同，CSS样式不是在<style></style>标签对中定义，而是在标签的style属性中定义。

【举例】：代码如下：

<!DOCTYPE html>

<head>

</head>

<body>

<p style="color:Red; ">智能化弱点工程分享</p>

</body>

<html>

编辑代码后呈现的效果如下：

htmlcss网页设计入门（Web前端网页设计CSS样式表语言从入门到精通）(8)

2.元素的id和class

id和class是HTML元素中两个最基本的公共属性。

一、元素的id属性

id属性被赋予了标识页面元素的唯一身份。如果一个页面出现了多个相同id属性取值，CSS选择器或者JavaScript就会因为无法分辨要控制的元素而最终报错。

【举例】：代码如下

——————————————————

<!DOCTYPE html>

<head>

</head>

<body>

<div id="first">智能化弱点工程分享</div>

<p id="first">智能化弱点工程分享</p>

</body>

</html>

————————————————

【说明】：

上面HTML代码是错误的，因为在同一个HTML页面中，不允许出现两个相同的id。不过要注意一下，在不同页面是可以出现相同id的元素。

二、元素的class属性

class，顾名思义，就是“类”。它采用的思想跟其他C、Java等编程语言的“类”相似。我们可以为同一个页面的相同元素或者不同元素设置相同的class，然后使得相同的class具有相同的CSS样式。

如果你要为两个元素或者两个以上元素定义相同的样式，建议使用class属性。

【举例】：

————————————————

<!DOCTYPE html>

<head>

</head>

<body>

<div class="first">智能化弱点工程分享</div>

<p class="first">智能化弱点工程分享</p>

</body>

</html>

————————————————

说明：

这段HTML代码是正确的，因为在同一个HTML页面中，允许相同的元素或者不同的元素设置相同的class属性，以便我们可以统一对具有相同的class属性的元素定义相同的CSS样式。

id和class就像你的身份证号和姓名，身份证号是全国唯一的，id号也就是唯一的，class（类名）就是姓名，两个人的姓名就有可能一样。

此外，还需要注意一下：

（1）一个标签可以同时定义多个class；

（2）id也可以写成name，区别在于name是HTML中的标准，而id是XHTML中的标准，现在网页的标准都是使用id，所以大家尽量不要用name属性；

3、CSS选择器

我们先看一段代码：

————————————————

<!DOCTYPE html>

<head>

<title>什么叫CSS选择器？</title>

</head>

<body>

<div>智能化弱点工程分享</div>

</body>

</html>

————————————————

浏览器预览效果如下：

htmlcss网页设计入门（Web前端网页设计CSS样式表语言从入门到精通）(9)

如果我们只想要第二个div文本颜色为红色，怎么办呢？我们必须通过一种方式来“选中”第二个div（因为其他的div不能选中），然后把它的CSS属性颜色color改为红色，这样才行。像这种把某一个你想要的标签选中的方式就是所谓的“选择器”，也就是说选择器就是一种选择元素的方式。

选择器，说白了就是用一种方式把你想要的那一个标签选中！把它选中了，你才能操作这个标签的CSS样式。这样够简单了吧。CSS有很多把你所需要的标签选中的方式，这些不同的方式就是不同的选择器。

选择器的不同，在于它选择方式不同，但是他们的目的都是相同的，那就是把你需要的标签选中，然后让你定义该标签的CSS样式。当然，你也有可能会用某一种选择器代替另一种选择器，这仅仅是由于选择方式不一样罢了，目的还是一样的。

CSS选择器的格式：代如下

————————————————

选择器

{

样式属性1:取值1;

样式属性2:取值2;

……

}

一、基本选择器

1、元素选择器

元素选择器，就是“选中”相同的元素，然后对相同的元素设置同一个CSS样式。

【基本语法格式】：

htmlcss网页设计入门（Web前端网页设计CSS样式表语言从入门到精通）(10)

————————————————————

<!DOCTYPE html>

<head>

div{color:red;}

</style>

</head>

<body>

<div>智能化弱点工程分享</div>

<p>智能化弱点工程分享</p>

<span>智能化弱点工程分享</span>

<div>智能化弱点工程分享</div>

</body>

</html>

在浏览器预览效果如下：

————————————————

htmlcss网页设计入门（Web前端网页设计CSS样式表语言从入门到精通）(11)

【分析】：

“div{color:red}”表示把页面所有的div元素选中，然后为所有的div元素设置颜色color为红色。

在这里我们可以看出，元素选择器就是选择相同的元素，而不会选择其他元素，例如这段代码中的p元素和span元素就没有被选中，因此它们的内容就没有变成红色。

2、id选择器

我们可以为元素设置一个id，然后针对这个id的元素进行CSS样式操作。注意，在同一个页面中，不允许出现两个相同的id，这个就像没有哪两个人的身份证号是相同的道理一样。

【基本语法格式】：

htmlcss网页设计入门（Web前端网页设计CSS样式表语言从入门到精通）(12)

【说明】：

id名前面必须要加上前缀“#”，否则该选择器无法生效。id名前面加上“#”，表明这是一个id选择器。

【举例】：

————————————————

<!DOCTYPE html>

<head>

#lvye{color:red;}

</style>

</head>

<body>

<div>智能化弱电分享</div>

<div id="lvye">智能化弱电分享</div>

<div>智能化弱电分享</div>

</body>

</html>

————————————————

【分析】：

“#lvye{color:red;}”表示选中id为lvye的元素，然后为这个元素设置CSS属性“color:red;”。

选择器为我们提供了一种选择方式。如果我们不使用选择器，就没办法把第二个div选中。

3、class选择器

class选择器，也就是“类选择器”。我们可以对“相同的元素”或者“不同的元素”设置一个class（类名），然后针对这个class的元素进行CSS样式操作。

【基本语法格式】：

htmlcss网页设计入门（Web前端网页设计CSS样式表语言从入门到精通）(13)

【说明】：

class名前面必须要加上前缀“.”（英文点号），否则该选择器无法生效。类名前面加上“.”，表明这是一个class选择器。

【举例1】：

————————————————————

<!DOCTYPE html>

<head>

.lv{color:red;}

</style>

</head>

<body>

<div>智能化弱点分享</div>

<p class="lv">智能化弱点分享</p>

<span class="lv">智能化弱点分享</span>

<div>智能化弱点分享</div>

</body>

</html>

————————————————

【效果呈现如下】：

htmlcss网页设计入门（Web前端网页设计CSS样式表语言从入门到精通）(14)

【分析】：

“.lv{color:red;}”表示选中class为lv的所有元素，然后为这些元素设置CSS属性“color:red;”。

p元素和span元素是两个不同的元素，但是我们可以为这两个不同的元素设置相同的class，这样就可以同时为这两个不同的元素设置相同的CSS样式了。

【举例2】：

————————————————

<!DOCTYPE html>

<head>

.lv{color:red;}

</style>

</head>

<body>

<div class="lv">智能化学习</div>

<div>智能化学习</div>

</body>

</html>

————————————————

代码输入呈现效果如图：

htmlcss网页设计入门（Web前端网页设计CSS样式表语言从入门到精通）(15)

【分析】：

虽然这个HTML页面有3个div元素，但是我们为前两个div元素设置相同的class，然后设置相同class的元素颜色为红色。因此，第3个div层内容不会变成红色，因为它不属于class="lv"，它没有被“选中”。

4、子元素选择器

子元素选择器，就是选中某个元素下的子元素，然后对该子元素设置CSS样式。

【基本语法格式】：

htmlcss网页设计入门（Web前端网页设计CSS样式表语言从入门到精通）(16)

【说明】：

父元素与子元素必须用空格隔开，从而表示选中某个元素下的子元素。

【举例】：

————————————————

说明：

父元素与子元素必须用空格隔开，从而表示选中某个元素下的子元素。

举例：

——————————————————————

<!DOCTYPE html>

<head>

#father1 div{color:blue;}

#father2 #p1{color:red;}

</style>

</head>

<body>

<div>弱电智能化</div>

</div>

<p id="p1">智能化学习</p>

<p id="p2">智能化学习</p>

<span>智能化学习</span>

</div>

</body>

</html>

———————————————————————

在浏览器预览效果如下：

htmlcss网页设计入门（Web前端网页设计CSS样式表语言从入门到精通）(17)

————————————————

分析：

“#father1 div{…}”表示选择“id为father1的元素”下的所有div元素；

“#father2 #p1{…}”表示选择“id为father2的元素”下的子元素，其中子元素的id为#p1。因为“id为father2的元素”下的第2个p元素没有被选中，所以第2个p元素内容没有变成红色。

5、相邻选择器

相邻选择器，就是选中该元素的下一个兄弟元素，在这里注意一点，相邻选择器的操作对象是该元素的同级元素。

语法：

htmlcss网页设计入门（Web前端网页设计CSS样式表语言从入门到精通）(18)

举例：

————————————————

<!DOCTYPE html>

<head>

#lv div{color:red;}

</style>

</head>

<body>

<div>学习智能化</div>

<p>智能化学习</p>

</div>

<div>智能化学习</div>

</body>

</html>

————————————————

htmlcss网页设计入门（Web前端网页设计CSS样式表语言从入门到精通）(19)

分析：

“#lv div{…}”表示选择“id为lv的元素”的相邻的下一个兄弟元素div，也就是第3个div元素。

6、群组选择器

群组选择器，就是同时对几个选择器进行相同的操作。常常，我们的CSS 样式中会有好几个地方需要使用到相同的设定时，一个一个分开写会是一件满累人的工作，重覆性太高且显得冗长，更不好管理....在CSS 语法的基本设定中，就可以把这几个相同设定的选择器合并在一起，原本可能是写了7~8 行相同的语法，合在一起后就只要短短的一小行，怎么看都让人心旷神怡啊~

语法：

htmlcss网页设计入门（Web前端网页设计CSS样式表语言从入门到精通）(20)

说明：

对于群组选择器，两个选择器之间必须用“,”（英文逗号）隔开，不然群组选择器无法生效。

举例：

————————————————

<!DOCTYPE html>

<head>

h3,div,p,span{color:red;}

</style>

</head>

<body>

</body>

</html>

————————————————

分析：

“h3,div,p,span{color:red;}”表示选中所有的h3元素、div元素、p元素和span元素，然后设置这些元素的字体颜色为red。

————————————————————————————————

h3,div,p,span{color:red;}

</style>

————————————————————————————————

其实上面这段代码等价于以下代码：

————————————————————————————

h3{color:red;}

div{color:red;}

p{color:red;}

span{color:red;}

</style>

——————————————————————————

现在大家知道使用群组选择器的效率有多高了吧！

4、文本样式总结

htmlcss网页设计入门（Web前端网页设计CSS样式表语言从入门到精通）(21)

表1 CSS文字属性

htmlcss网页设计入门（Web前端网页设计CSS样式表语言从入门到精通）(22)

一、字体类型font-family

语法：

font-family:字体名;

说明：

字体名指的是“微软雅黑”、“宋体”、“Times New Roman”等。

举例：“font-family:微软雅黑;”

二、字体大小font-size

语法：

font-size:像素值;

说明：

初学者尽量使用像素来作为单位，因此我们不会在初学者阶段介绍太多的其他单位，比如百分比、em等。

举例：“font-size:15px;”

三、字体颜色color

语法：color:关键字/颜色值;

说明：

color共有2种取值，一种是关键字取值，例如“color:red;”；另外一种是十六进制颜色值，例如“color:#F1F1F1;”。对于十六进制颜色值，我们可以使用绿叶学习网的“在线调色板”选取你喜欢的颜色。

举例：“color:blue;”

四、字体粗细font-weight

语法：

font-weight:取值;

说明：

对于中文网页来说，font-weight属性一般仅用到bold、normal这两个属性值完全就可以了，粗细值不建议使用数值（100~900）。

举例：“font-weight:bold;”

五、字体斜体font-style

在CSS中，使用font-style属性来定义字体倾斜效果

语法：

font-style:取值;

说明：

font-style属性的取值如下表：

————————————————

htmlcss网页设计入门（Web前端网页设计CSS样式表语言从入门到精通）(23)

举例：“font-style:italic;”

六、CSS注释

语法：

/*注释的内容*/

说明：

“/*”表示注释的开始，“*/”表示注释的结束。

htmlcss网页设计入门（Web前端网页设计CSS样式表语言从入门到精通）(24)

1、border-width

语法：

border-width:像素值;

说明：

在CSS初学者阶段，我们都是建议采用像素做单位

2、border-style

border-style属性用于设置边框的外观，例如实线边框和虚线边框。

语法：

border-style:属性值;

说明：

虽然border-style属性值很多，但是大部分我们都用不上。一般情况下，我们用到solid和dashed这两个属性值就够了，别浪费时间去记忆其他属性值，不听老人言，吃亏在眼前呀！

3、border-color

border-color属性用来定义边框的颜色。

语法：

border-color:颜色值

说明：

对于颜色的取值，请使用前端神器“在线调色板”来选取。

二、边框属性简洁写法

设置一个元素的边框就要设置3个属性：border-width、border-style和border-color。如下：

htmlcss网页设计入门（Web前端网页设计CSS样式表语言从入门到精通）(25)

这种写法费时费力，导致代码量多。因此我们边框CSS样式有一个简洁的写法：

border:1px solid gray;

三、CSS边框局部样式

htmlcss网页设计入门（Web前端网页设计CSS样式表语言从入门到精通）(26)

1、上边框border-top

border-top-width:1px;

border-top-style:solid;

border-top-color:red;

简洁写法：border-top:1px solid red;

2、下边框border-bottom

border-bottom-width:1px;

border-bottom-style:solid;

border-bottom-color:orange;

3、左边框-left

border-left-width:1px;

border-left-style:solid;

border-left-color:blue;

简洁写法：border-left:1px solid blue;

4、右边框border-right

border-right-width:1px;

border-right-style:solid;

border-right-color:red;

简洁写法：border-right:1px solid red;

下期我们接着继续分享之后的内容，敬请期待中。。。。。。

htmlcss网页设计入门（Web前端网页设计CSS样式表语言从入门到精通）(27)

htmlcss网页设计入门（Web前端网页设计CSS样式表语言从入门到精通）

最新推荐

热门推荐