HTML网页制作：[16]如何在HTML中使用CSS

来源：互联网 2023-03-16 19:19:44 382

上一篇经验介绍了什么是CSS，这一篇将介绍如何在HTML中使用CSS以及CSS的基本语法。

工具/原料

一台电脑
txt\dw等

方法/步骤

CSS是由选择器加声明组成的。

比如：

h1{color:red;}

h1就是选择器，意思是只要遇到h1，就使用该CSS的规则

color：red; :这个事声明

color:这个是属性

red:这个是值

HTML网页制作：[16]如何在HTML中使用CSS

1本页面未经授权抓取自百度经验

OK，我们先来分析选择器。

一.选择器

选择器的种类很多，各有各的作用。我们来一一讲解。

标签选择器

class选择器

id选择器

全局选择器

组合选择器

伪类选择器

标签选择器

顾名思义，HTML中有许多标签，而标签选择器就是用来给标签直接申明样式的，简单、实用、常用。

举例：

p{color:red;}

只要是p标签，其P标签内部的颜色，都是红色。

如图代码

head>meta http-equiv="Content-Type" content="text/html; charset=utf-8" />title>无标题文档/title>style>p{ color:red;}/style>/head>body>嘿嘿哦嘿嘿呀哦嘿嘿哦//body>

其中，style>标签是样式标签，请将CSS放在其中

（这部分内容后续会介绍，这里只是先提一下）

HTML网页制作：[16]如何在HTML中使用CSS

看网页效果

HTML网页制作：[16]如何在HTML中使用CSS

class选择器

也叫做类选择器，直接说概念估计你也不明白，直接上例子吧。

举例：

.alsp{color:red;}

这就是一个class选择器，意思是有一种CSS的样式，其名字是alsp，谁想用谁用。

看代码：

head>meta http-equiv="Content-Type" content="text/html; charset=utf-8" />title>无标题文档/title>style type="text/css">.alsp{color:red;}/style>/head>body>p class="alsp">嘿嘿哦嘿嘿呀哦嘿嘿哦/ol class="alsp">li>嘿啥嘿/li>li>我想嘿嘿/li>li>专制各种不服/li>/ol>世界为亡，死不投降//body>

HTML网页制作：[16]如何在HTML中使用CSS

看网页效果

通过.alsp定义一个class选择器。

在后面的代码中，哪个标签想用，就用class="alsp"去调用，就可以使用这件“衣服”来修饰自己了

HTML网页制作：[16]如何在HTML中使用CSS

ID选择器

ID和class很像，但是和class有一个区别。class像姓名，两个人是可以同名的，但是id像身份证，只有一个人可以使用。

例如：

#alsp{color:red;}

OK，上代码：

#alsp{color:red;}/style>/head>body>p id="alsp">嘿嘿哦嘿嘿呀哦嘿嘿哦/ol>li>嘿啥嘿/li>li>我想嘿嘿/li>li>专制各种不服/li>/ol>世界为亡，死不投降//body>

HTML网页制作：[16]如何在HTML中使用CSS

看网页效果

只能有一个标签使用该id，或者说该标签专属ID

HTML网页制作：[16]如何在HTML中使用CSS

全局选择器

*{margin:0; padding:0;}

这个很简单，前面用个*来表示，整个网页都会使用。这句话也是网页基本都要添加的，什么意思呢？自己试试看吧。

组合选择器

组合选择，小编是非常喜欢使用的，原因无他，懒而已。他可以减少代码量，并且方便、易读。

不过组合选择器的组合方式比较多，但也多很好理解。

1）群模式

比如：

h1{color:red; font-size:14px;}

p{color:red; font-size:14px;}

a{color:red; font-size:14px;}

这三个虽然标签不同，但是样式是一模一样的，所以，可以这样写：

h1,p,a,{color:red; font-size:14px;}

2）继承模式

比如：

.alsp li{color:red;}

ul class=".alsp">

li>fdf/li>

/ul>

li是在ul之中的，算是ul的后代。通过.alsp li确定li是属于调用alsp类选择器里的li标签，其他的li标签并不会使用该样式。

3）群模式（多元素并列选择器）

其实也是一种特殊的群模式

p.alsp{color:red;}

p class="alsp">p.alsp/

a class="alsp">a.alsp/

alsp仍然是一种class选择器，但是他只有在p的标签下被使用才生效。

所以，第一行生效，p.alsp字样变红，第二行不生效

伪类选择器

“伪”字暴露了他的本质，伪类选择器并不像其他选择器直接做用在标签上，但是他偏偏又是在标签上进行使用，所以称为“伪类选择器”。

伪类的作用，是作用在状态上。

一般情况正常运行，只有当达成条件的时候触发，才会执行伪类选择器所代表是css样式。

伪类选择器很多，但许多都是我们这辈子估计都用不到的。

OK，伪类选择器后续我会专门写一篇经验介绍，有点小多，这里也就不多说了。

二.在HTML中调用CSS

调用CSS的常用方法有3中

内样式

外样式

行间样式

内样式

直接看代码，如图所示

在head>/head>中，加入style>/style>,并将相关的CSS样式放在其中

HTML网页制作：[16]如何在HTML中使用CSS

外样式

直接看代码，如图所示：

link rel="stylesheet" type="text/css" href="index.css">

这里，href为css的路径。

意思是，你专门创建一个index.css的文件，里面放上CSS样式，和内样式的语法一模一样，只是专门找了一个文件存放而已。

HTML网页制作：[16]如何在HTML中使用CSS

行间样式

行间样式直接写在元素里面

例如：p style="color:#900">嘿嘿哦嘿嘿呀哦嘿嘿哦/

直接在标签后面加上style

一般不要用，不过可以用来调试使用

HTML网页制作：[16]如何在HTML中使用CSS

总结

到这里，这篇经验就算完结了。你也应该知道如何去写CSS样式，如何在HTML里添加CSS样式了。

后面我会继续写CSS的声明部分。

有什么问题，请留言。如果感觉小编写的还不错，请点击投票。

什么是CSS样式表|下一篇：

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： HTML

上一篇：HTML中怎么用代码敲出圆的图形下一篇：最简单强大的html5海报制作工具MAKA使用教程

HTML网页制作：[16]如何在HTML中使用CSS

工具/原料

方法/步骤

一.选择器

二.在HTML中调用CSS

总结

热门文章

标签列表