天天动态:零基础学CSS -代码书写方式
2023-01-23 20:58:46    哔哩哔哩

幕布链接:

嵌入式:

将 CSS 代码嵌入到 HTML 文件中,嵌入式是通过 HTML 中的 <style> 标签将 CSS  代码嵌入到 HTML 网页中!将 CSS 代码嵌入到 HTML 文件中,嵌入式是通过 HTML 中的 <style> 标签将 CSS  代码嵌入到 HTML 网页中!


(资料图片)

例子:

注意:<style></style> 它可以出现在 HTML 中的任何地方,但是一般情况我们只会将它放置在 head 标签里面

外联式:

外链式是指单独写一个以 .css 为扩展名的文件,然后在 <head></head> 标签中使用 <link/>标签,将这个 css 文件链接到 html 文件中。

注意:Css 文件不能单独的运行,它必须要依赖于 HTML 文件!

1先建立一个txt文件

2后缀名改成.css的文件

3 在html文件的<head>标签内,链接到当前的文件(css文件不能单独存在,只能依赖于html文件)

文件目录如下

4 在css文件中编辑

5 在html文件中链接当前文件

注意:一定要确保css文件被引入成功:

第一步:在当前页面点击鼠标右键,选择“检查

第二步:找到 “Network” 选项卡

第三步:刷新当前网页

第四步:查找 networkd 选择卡中的 status ,状态如果是“成功”就表示文件已经被加载

如果是“失败"就表示文件没有加载。

Link 标签可以有多个,一个 HTML 页面可以同时的引入多个单独的 CSS 文件。

在html中引用和使用<div>标签查看效果

行内式

将 Css 代码书写在 HTML 标签的 style 属性中

style 是一个通用属性,即每一个标签里面都拥有这个属性!

语法格式:

直接在每一个标签里面写:

总结:

·使用嵌入式的方式来书写 CSS 代码,它只能作用于当前的 HTML 文件

·使用外链式的方式来书写 CSS 代码,它可以作用于多个 HTML 文件

关键词: html HEAD STYLE INDEX LINK

下一篇:
上一篇: