dw怎么把html和css链接起来

html-css027

dw怎么把html和css链接起来,第1张

1、在软件中先建立一个站点并在站点中新建一个CSS文件夹和一个html文件。（可以点击下方引用经验查看如何创建一个站点）

2、在右上角点击【CSS设计器】，并在下方点击【+号】，然后选择【创建新的CSS文件】。

3、在创建窗口中，点击【浏览】按钮。

4、然后选择站点中已经创建好的名字是CSS的文件夹，然后输入想创建的CSS的名字（要用英文哦），点击【保存】。

5、然后把添加为设置成【链接】，点击【确定】按钮。

6、添加完成后就可以在右侧的站点中的CSS文件夹下看到刚创建好的CSS样式表文件了。

7、在左侧的【head】标签中，就多了一行链接到CSS文件的代码。在顶部tab标签中也可以看到链 接的样式表。

8、接下来写一个简单的网页来看下CSS样式表是否链 接成功。打开html网页编辑页面，在【body】标签中输入一个div。如下图：

9、然后在顶部tab标签中选择刚才创建的CSS样式表，并在样式表中写一个样式，命名为【aaa】，并保存样式表【快捷键Ctrl+S】。

10、然后回到html编辑页面，在div标签中引入class，输入刚才写的样式的名称【aaa】并保存网页【快捷键Ctrl+S】。

11、点击顶部的设计按钮，就可以看到实时效果。

12、也可以按快捷键F12，直接用浏览器打开，可以看到真实的效果。证明我们的CSS链接到html中是没有问题。

CSS通过内联、外联等样式嵌入到HTML中。

1、使用样式表的处理指令语句

在HTML文档的开头部分写一个关于样式表的指令处理语句

复制代码

代码如下:

<?xml-stylesheet type="text/css" href="mystyle.css" ?>

<html>

指令语句

</html>

不过只有使用xml语法格式编写的html文档才支持使用该指令，大多数浏览器仅当被保存为xhtml或xml格式才有效，且JS不能处理这种CSS，所以不建议使用。

2、使用@import命令

在style元素之间使用@import命令导入外部的css文件

复制代码

代码如下:

<head>

<style type="text/css">

<!--下面两行代码效果一样

@import "mystyle.css"

@import url("mystyle.css")

-->

</style>

</head>

任何@import规则必须出现在所有规则之前。参数是一个css文件的URL地址。在一个css文件中也可以用@import指令将另一个css文件导入。

3、使用link元素

复制代码

代码如下:

<head>

<link rel="stylesheet" href="css的url" type="text/css" >

</head>

这也是最常用的方式。

4、使用HTTP消息报头链接到样式表

可以使用HTTP消息报头的link字段链接一个外部样式表。

复制代码

代码如下:

link:<mystyle.css>rel=stylesheet

//等同于<link rel="stylesheet" href="css的url" type="text/css" >

HTTP报头中可以使用多个link，从而链接多个样式表，且HTTP报头中的link比HTML文档中的link（head元素中）具有优先级。

加载css样式有以下四种

外部样式(外联样式)

内部样式(内嵌式)

行内样式

导入样式

如果css是一个外部文件，可以在你html文件的<head></head>里写上

<link

href="style.css"

rel="stylesheet"

type="text/css"

/>

href="style.css"这里可以写上你css文件的路径

这种形式是把css单独写到一个css文件内，然后在源代码中以link方式链接。它的好处是不但本页可以调用，其它页面也可以调用，是最常用的一种形式。

如果是内部样式，也可以在<head></head>里写上

<style

type="text/css">

h2

{

color:#f00}

</style>

它是以<style>和</style>结尾，写在源代码的head标签内。这样的样式表只能针对本页有效。不能作用于其它页面。

还可以在html标签上直接写css样式

<p

style="font-size:18px">内部样式</p>

这种在标签内以style标记的为行内样式，行内样式只针对标签内的元素有效，因其没有和内容相分离，所以不建议使用。

@import

url("public.css")

导入样式是以@import

url标记所链接的外部样式表，它一般常用在另一个样式表内部。如index.css为主页所用样式，那么我们可以把全局都需要用的公共样式放到一个public.css的文件中，然后在index.css中以@import

url("/public.css")的形式链接全局样式，这样就使代码达到很好的重用性。