1.CSS选择器定义标签
inline style内联样式
<h2 style="color: red">CatPhotoApp</h2>
Cascading Style Sheets层叠样式表
<style>
选择器 {属性名称: 属性值;}
h2 {color: red;}
</style>
2.CSS选择器使不包含 red-text类的p元素都使用Monospace字体
p:not(.red-text){
font-family: Monospace;
}
3.引入外来字体
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
这里引入的是Google的字体
4.文字降级
h2 {
font-family: Lobster, Monospace;
}
5.添加图片
<img src="https://www.your-image-source.com/your-image.jpg" alt="your-image">
PS：alt属性就是在加载不出来的时候显示属性后面的引号内容
像下面这样
6.调整网页里图片大小
<style>
.larger-image {
width: 500px;
}
</style>
7.标签增加边框
<style>
.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
}
</style>
边框颜色为红色、边框宽度为5像素(px)、边框样式为实线(solid)
若要增加圆角边框
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius:10px;
}
或者
.smaller-image {
width: 100px;
border-radius:10px;
}
均可
只需要在img图片的class类中的css类属性中加上即可
效果是这样的
当然，圆角边框还可以这样
是这样写的，可以很清晰的看到，我们使用了百分比而不是像素值
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
8.设置链接锚元素外部页面
<p><a href="https://www.baidu.com">baidu.com</a></p>
我在试的时候，发现没有<p></p>也是可以的
那样的话就这样
<a href="https://www.baidu.com">baidu.com</a>
你能看到=后面被引的是目标地址，后面是锚文本，也就是a标签要显示的文本
那么，如果我想把纯文本和那个有超链接感觉的文本放一块呢？
这个时候要Nesting（嵌套），把a元素嵌套进p元素里面
<p>搜索引擎： <a href="https://www.baidu.com">baidu.com</a></p>
效果是这个样子的
看起来还不错吧！
让我再接着写点，满十个就结束。
9.为图片创建链接
还记着上面的小猫吗？
下面我们为它创建一个链接，创建之前是这个样子的：
<p>Click here for <a href="#">cat photos</a>.</p>
<img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg">
有的同学一看，不对呀，你前面写的的a标签后面的链接哪里去了呢？
可以看到，它成这样子了
<p>Click here for <a href="#">cat photos</a>.</p>
等号后面的链接变成了#，#是什么呢?
是这样的
有时你想要在你的网站上添加一个 a 元素，但你还不知道将它链接到哪里，这时你可以使用固定连接。
当你使用 jQuery 更改链接的行为时，这也很方便，以后我们会说到。
把 a 元素的 href 属性的值替换为一个 # （# 也称为哈希符号），可以将其转换为一个固定链接。
而我们的小猫可以通过嵌套在a元素中使其变为一个链接。
图片后面记得加alt属性嗷，这是一个好习惯。
不记得的话看看第五点。
要开会了，今天就只学这么多了，本来还想写够10条来着orz
今天写了这么多的结果在这里
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://www.w3cschool.cn/statics/codecamp/images/relaxing-cat.jpg" alt="A cute orange cat lying on its back"></a>
<p class="red-text">在大家心目中，也许编程是一件非常困难的事情，其实也是一件非常有乐趣的事情，只要掌握好编程入门的方法，就能慢慢进入一个全新的创造世界。</p>
<p class="red-text">可以学习的编程语言有很多，包括Html、css、Javascript、jquery、bootstrap等等前端编程实战课程</p>
