有三种方法可以在站点网页上使用样式表(CSS):
外联式Linking(也叫外部样式):将网页链接到外部样式表。
嵌入式Embedding(也叫内页样式):在网页上创建嵌入的样式表。
内联式Inline(也叫行内样式):应用内嵌样式到各个网页元素。
其中,优先级:内联式 >嵌入式 >外联式
外部样式表
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。
<head><link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部样式表
当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过 <style>标签定义内部样式表。
<head><style type="text/css">
body {background-color: red}
p {margin-left: 20px}</style>
</head>
内联样式
当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style="color: red margin-left: 20px">This is a paragraph
</p>
1、首先打开Dreamweaver CC2018软件新建一个html文件,在右上角点击CSS设计器,并在下方点击加号,然后选择创建新的CSS文件:
2、在创建窗口中,点击浏览按钮。
3、然后选择站点创建好CSS文件夹,然后输入创建的CSS的名字,点击保存插件文件:
4、然后把添加为设置成链接,点击确定按钮:
5、添加完成后就可以在右侧的站点中的CSS文件夹下看到刚创建好的CSS样式表文件了:
6、此时在html文件中的head标签中,就多了一行链接到CSS文件的代码。在顶部tab标签中也可以看到链接的样式表:
7、接下来在html网页编辑页面,在body标签中输入一个div:
8、然后在顶部tab标签中选择刚才创建的CSS样式表,并在样式表中写一个样式,命名为aaa,并按下快捷键Ctrl+S保存样式表:
9、最后回到html编辑页面,在div标签中引入class,输入刚才写的样式的名称aaa并保存网页:
10、最后点击顶部的设计按钮,就可以看到实时效果了,此时css文件就成功链接进去了:
很简单有站点了
运用 dreamweaver 查找替换功能
查找范围: 整个站点
搜索:原文件
查找:
</title>
替换:
</title>
<link href="css文件相对路径" rel="stylesheet" type="text/css" />
全部替换
运用原理:使得所有文件源代码<title>标记的结尾部分添加上一个CSS外部调用连接。
注意:要把CSS 文件 拷贝到每个文件夹正确位置。因为文件深度得不同,这样可以解决所由相对错误得问题
也可以把连接设置成绝对路径。
先把CSS 文件上传,得到对应的HTTP地址,然后
替换:
</title>
<link href="得到的HTTP地址" rel="stylesheet" type="text/css" />
2重方法各有各的好处,
第一重调用的时候速度稍微快点。