「HTML」从零开始学网页制作-05
myzbx 2024-12-09 15:30 23 浏览
今天要学习的是CSS，CSS是什么？
CSS指的是层叠样式表，它和HTML是一对好朋友，可以对HTML网页进行修饰。
为什么要学CSS？
要想让浏览器显示以下内容：
以我们所学的知识，就需要一个一个的去添加 font 样式：
非常麻烦，一个网页可能有几百个样式要设置，难道一个一个的去添加吗？即使你很有耐心，这么多的样式全写在一个页面（CSS会新建一个专门存放样式的页面），别说别人了，自己看了都觉得乱。
为了省时省力、简洁易改、维护方便、增强网页……
所以，引入CSS样式表，就是为了解决这些问题。
第一步
在盘符下面建立一个文件夹，在文件夹里面建立两个文档：
例如，我在C盘下面建立了文件夹 new_20200831，在这个文件夹里面在建立两个文本文档，并修改扩展名：new.html 和 newcss.css
之所以放在同一个文件夹里面，是为了更好管理和方便链接，下面的 [1] 会解释为什么方便链接。
打开new.html ，输入基础html代码：
在<head></head>中写入下方代码：
<link href="css 文件的路径" type="text/css" rel="stylesheet" /><link/> 标签定义文档与外部资源的关系，也就是你想链接CSS样式表，就要用到<link/>标签。
<link/>标签需要放在<head>头部标记中，并且指定3个必需属性：
href：规定被链接文档的位置。 [1]
type：规定被链接文档的类型。这里指定为 “text/css” 表示链接的外部文件为CSS样式表。
rel：规定当前文档与被链接文档之间的关系。这里指定为 “stylesheet” 表示链接的文档是一个样式表文件
——————————————————————————————
[1] 我来解释一下为什么放在同一个文件夹会方便链接：
引用的路径分为两种：
绝对路径：完整描述文件路径
相对路径：相对于当前文件的路径，不带有盘符。(推荐）
相对路径分为以下3种：
· 文件和html文件位于同一文件夹；只需输入文件名即可，如<link href="new.css" />
· 文件位于html文件的下一级文件夹；输入文件夹和文件名，之间用 / 隔开，如 <link href="new_20200831/new.css" />
· 文件位于html文件的上一级文件夹；在文件名之前输入 ../ ，如果是上两级，则需要用 ../../ 以此类推，如 <link href="../new.css" />
例如，上面我输入href="new.css" 就是相对路径的第1种情况，我放在同一个文件夹，所以只要输入文件名 new.css 即可，而不是输入绝对路径 C/new_20200831/new.css ,明显后者麻烦多了。
未完待续~
相关推荐
- 荒野大镖客2游戏壁纸图片
-
...
- 巫师3:狂猎游戏壁纸图片
-
...
- 腾讯混元发布游戏视觉生成平台
-
5月20日，腾讯正式发布混元游戏视觉生成平台（简称“混元游戏”），这是依托混元大模型打造的首个工业级AIGC游戏内容生产引擎，大幅优化游戏资产生成与游戏制作流程。其面向游戏工业级内容生产，为游戏美术设...
- 腾讯混元游戏视觉生成平台发布，首个工业级AIGC游戏内容生产引擎
-
IT之家5月20日消息，腾讯混元团队刚刚宣布：腾讯混元游戏视觉生成平台（以下简称“混元游戏”）正式发布。这是首个工业级AIGC游戏内容生产引擎，大幅优化了游戏资产生成与游戏制作流程。据官方...
- 巫师3:狂猎 游戏壁纸图片
-
点个“关注”，我们一起看世界。...
- 【防诈宣传】检察官提醒您:警惕高考“分数游戏”，守护学子未来梦想!
-
亲爱的考生和家长们：随着高考的结束，相信每一位考生都期待着那激动人心的成绩公布时刻。然而，在这个特殊的时期，一些不法分子也趁机而动，利用考生和家长们的急切心理，炮制出各种“提前查分”“花钱改分”“低分...
- 让轻薄本也能玩转3A游戏和AI 当前主流核显到底什么水平
-
集成显卡和入门级独立显卡在过去的一段时间内可以说是拼的你死我活，但随着英特尔锐炬、AMDRadeonM的出现，以N卡为主的入门级独显被逐渐淘汰掉，其中最知名的莫过于MX350、MX450等，而现在...
- 通俗解读段位六合一 -游戏资讯-和平精英
-
我来个逗啊~新赛季冲战神的策略和玩法变了，刚刚和平精英官方发布了最新的段位和加分模式，很多同学们看的是一头雾水，今天学友哥一分钟帮大伙们通俗解读段位新赛季段位六合一，新加分机制和匹配模式对玩家的影响；...
- 永久死亡游戏哪些人气高 最新永久死亡游戏排行榜
-
探索游戏世界最炙手可热的秘境！最新永久死亡游戏排行榜揭示玩家心水之选。从生存挑战到硬核策略，这些人气之作带你领略不死不休的冒险体验。一窥究竟，哪款游戏能在生死边缘激起你的无尽热情？继续阅读，揭晓年度最...
- 第三十一篇 七巧板游戏
-
昨晚和爱人聊天，她说到他们学校培训部门开发了适合他们集团特色的七巧板拓展训练，让我回想起我们曾经也在一次拓展训练中进行过一次七巧板游戏，给我留下了极深印象，特别是随着这几年的复盘，我认为它超越我曾经参...
- 玩家愤怒源于期待落差!诛仙世界是创新还是换皮?
-
嘿，亲爱的小伙伴们，诛仙世界，你玩了吗?就算没玩过，这几天，我想你应该也听过这游戏的名字，无论是夸的还是喷的......好吧，大多数都是喷的。但不管怎么看，作为2024年问世的唯一一款纯PC端游，在这...
- 从3岁到99岁都能玩!扑克牌「天花板级」玩法攻略，速藏!
-
扑克牌的玩法种类繁多，不同地区和文化衍生出各具特色的规则。以下是一些常见且有趣的扑克玩法分类整理，供你参考：一、经典传统玩法1.斗地主-3人游戏，1位地主对抗2位农民，通过出牌速度和策略取胜。2....
- 小学成绩到底有没有实际意义?别让分数蒙住你的眼
-
家人们！刷到这条先别划走！今天咱必须唠唠这个让无数家长抓头发、学生心里打鼓的世纪难题——小学成绩到底有没有实际意义？有人拍着胸脯说“小学那点知识，到中学努努力就补回来了”，也有人愁得直叹气“孩子小学成...
- 游戏玩家吵了10年的问题，终于被我们测出了答案!
-
友友们大家来啦!今天来和大家一起分享精彩话题老规矩先点赞再看文！1.4090这显卡，贵得我心疼，但专业领域它就是王！2.3060和A3000L，比比看，谁才是视频编辑的王者？3.游戏画质这么高，黑...
- 3分钟玩转国服新实装的职阶星图分值系统 建议无脑强化狂阶打手
-
fgo国服这次的系统大规模的更新，引入了全新的系统，也就是所谓的职阶星图分值系统。对于这个系统，估计不少玩家没整明白到底是怎么回事，这次就来手把手的说明和解释一下，方便玩转这个新系统，包括该系统带来的...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 选择器 (30)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)