前端学习——CSS初学__5 CSS引入方式、新闻页面案例及Chrome调试工具

一、CSS引入方式

按照CSS书写的位置（或者引入方式）的不同，CSS样式表可以分为三类：

1.行内样式表（行内式）

行内样式表是在元素标签内部的style属性中设定CSS样式，适用于修改简单样式。

2.内部样式表（嵌入式）

内部样式表是写在html页面内部，将所有CSS代码提出来，放在<style>标签中。style标签通常放在<head>中，可以控制整个页面样式。前面4节的学习都是使用的内部样式表。

3.外部样式表（链接式）

实际开发都是使用的外部样式表，即在样式很多的时候，将样式单独写在CSS文件中，之后将CSS文件引入到HTML页面使用。

引入外部样式表步骤：

首先新建一个后缀名为.css的样式文件，把所有CSS代码放入此文件

然后在HTML页面中通过<link>标签引入这个CSS文件

link语法规范：

<link rel="stylesheet" href="css文件路径">

rel：定义当前文档与被链接文档的关系，这里需要指定为"stylesheet"，表示为样式表文件。

二、综合案例——新闻界面

制作页面整体分为：1.搭建HTML结构页面 2.修改CSS样式

直接上代码：HTML结构页面：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>新闻案例</title><style>body {font: 16px/28px 'Microsoft Yahei';}</style><link rel="stylesheet" href="style.css">
</head>
<body><h1>龙龙求复合文案</h1><div class="gray">00：06：35 来源：<a href="#">龙龙非主流写</a><input type="text" value="请输入查询内容" class="search"><button class="btn">搜索</button></div>  <hr>
<p>抱歉，可能是晚上容易想很多，也可能是真的不甘心，明知道只会继续消磨你最后一点的心情还是给你发了这条短信，也不知道你那里能不能收到。我有些自私吧， 在你说的那么肯定的情况下，还是不想放开你。我这段时间时不时的还是再回想在一起这一个月经历的一些点滴，我感觉那时候真的很开心，也很抱歉可能没有带给你想要的感觉。可能最开始在一起的时候没有很喜欢上你什么，但是我在一直给你加分，对你的喜欢确实是一直增加的，我也想努力让自己变有趣，想给你分享我经历的事情，其实那天跟你聊天最让我难过的事情就有你告诉我你对我没有分享欲了，害，其实还是想听一听你怎么想的，也想知道我做的哪些事情下头了让你讨厌了哈哈哈哈。
</p>
<h4>我好想你啊</h4>
<p>
怎么说呢，我感觉我是也让你开心过的，哈哈哈哈，去找你的时候我想着也许有些事情当面说一说就能说开了，也没想到你没见我，那会儿我确实很冲动，很害怕啊，因为离开后可能真的就是朋友也不会做长久。emmm，其实我还是忍不住幻想哪天你就加我了，哪天你就回来了，那一定开心到起飞。真的，我感觉时间过得很快啊，其实就在一起了三十多天左右，我也没有怎么懂你这个该死的学妹！然后就分了也快三十天了，说实话，我静不下来，每天都在想，我真的很希望很希望我跟茹茹能有一个重新开始的机会！我想了很多在一起这三十天我没有把你带进去，有些事情上我没有考虑你，我脚步太快了，我那会儿恨不得让所有人知道你是我对象恨不得天天在你身边哈哈，可能给你造成了些不舒适，但是怎么说呢，其实从跟你在一起的时候我就害怕，你会不喜欢我，不习惯我，会有一天就走了。
</p>
<h4>真的好想你</h4>
<p class="pic"><img src="第一次放烟花.png">
</p>
<p>
笑死，最开始跟郑明涛说我跟一个学妹王会茹谈了还是满不在乎的样子，后来我真的越来越不想跟你分开唉。也不知道你个清纯可爱小学妹这段时间会不会想到我，会不会再想我在干什么，我再想什么，其实我每天都有在想你在干什么哈哈。你老是给我说你在想你弟，也不知道他有没有好好吃饭，你别说，现在好羡慕，真希望我也能成为你想的那个人。其实啊，我这个人可简单，我愿意去对我想要付出的人好，也想把自己最小孩的一面展现给你因为我觉得我们可以走下去，我想让你带给我安心，我也想给你带去安心，害，只是没做到，真的好烦啊！其实，我感觉吧，我对你也很有细心，耐心的，呜呜，可是纯情老六最后还是封心跑路了。
</p>
<p>
我真的很希望我能拥有茹茹的每一个早安晚安，因为那样我会知道她还在我身边，我不想跟你在一起也要小心翼翼的去试探维护，但是我更不想从此是陌生人。你其实也懂我些的吧。我就是那种你对我好一点我就会开心好久，因为我超级乐观啊！害，傻狗，你再想想呗！再考虑一下，在学校你还答应过我暑假一起去玩，开学第一个见我呢！再说我们还没有一起看过一场电影，一起去旅行，好多好多事情我们都没有做，唔，那多可惜啊！那天你朋友说一个月后发现我们不合适，emm，但是我还是想说也才一个月我们肯定不会磨合的那么好吧，青春就是那样该冲就冲，我还是希望你跟我都能互相再试试，再坚持坚持。我也给你说过，我向往的爱情就是双向奔赴的爱情，不用每天缠绵随时保持联络，嘿嘿，但是我没有做到，因为我真的好害怕你跑路知道吧！我希望我们能和好，我还是希望你不要把我往外推，什么事情憋在心里，在心里给我默默减分。我有做的不对的，我也知道我没有慢慢来，确实慢慢来的都是诚意，我希望我们都可以再试试，再坚持坚持，你既然曾经愿意答应我，那证明对我还是有好感的（自信脸）！所以啊，王会茹，如果你能看见这条短信的话，我希望你再想一想，我真的很想跟你在一起的。傻狗，我知道你可能还是做不好身边多一个人的准备吧，但是我想你再试试，我也想那个人是我。嘿嘿，就这样了，我希望你能回复我，我们好好再聊聊可以吗，不要冷漠脸。
</p>
<p class="footer">本文来源：龙龙手机短信 责任主编：龙龙</p>
</body>
</html>

CSS样式文件：

/* 这个文件里只有样式没有标签 */
h1 {/* 文字不加粗 */font-weight: 400;/* 水平居中对齐 */text-align: center;
}
.gray {/* 字体颜色设置成灰色 */color: #888888;text-align: center;font-size: 12px;
}
a {/* 链接取消下划线 */text-decoration: none;
}
.search {color: #666;width: 170px;height: 13px;
}
.btn {font-weight: 700;font-size: 12px;height: fit-content;
}
p {text-indent: 2em;
}
.pic {/* 想要图片居中对齐，应让他的父亲标签p添加居中 */text-align: center;
}
.footer {color: #888888;font-size: 12px;text-align:right;
}
h4 {text-align: center;
}

运行结果可以自己试着运行，我就不粘贴啦！

三、Chrome调试工具

谷歌浏览器提供了很好用的调试工具调试我们的html结构和css样式。

1.打开调试工具：

打开谷歌后，F12或者右键页面空白页选择检查

2.使用调试工具

① ctrl＋滚轮放大缩小代码

②左边（上面）是html元素结构，右边（下面）是CSS样式

③CSS样式可以改动数值

④ctrl＋0复原浏览器大小

⑤点击元素右侧没有样式引入，可能类名或者格式出错

⑥样式前有黄色感叹号则代表属性书写错误

好啦今天学习结束，再插播一下题外话总是给前对象发短信是不是只会让她更烦我啊？