FCC学习记录–1

h 标题 h1 主标题 h2副标题 以此类推.
p 段落

注释有两个功能:
1、想让某一段代码不起作用,但你又不想删除这一段代码。
2、就是给代码添加一些说明,方便团队合作或日后自己查看,但又不想影响代码本身。

注释的开始标记是

<!--  结束标记是 -->

Web开发者通常用lorem ipsum text来做占位符,占位符就是占着位置的一些文字,没有实际意义。
为什么叫lorem ipsum text呢?
是因为lorem ipsum是古罗马西塞罗谚语的前两个单词。

通过修改元素的style(样式)来达到目的。例如:

<h1 style="color:red>xxx</h1>

样式的属性多达几千个,但别担心,按照80-20原则,常用的也就几十个,你完全可以掌握它。

<h2 style="color: red">CatPhotoApp</h2>

,为inline style(内联样式)。

内联样式是为元素添加样式的最简单有效的方式,但是更易于维护的方式是使用层叠样式表CSS(Cascading Style Sheets)。

    <style>
</style>

在这个style元素内, 你可以为所有的h2元素创建一个元素选择器。比如,如果你想要将所有的h2元素设置为红色, 你的代码应该看起来像这样:

<style>
  选择器 {属性名称: 属性值;}
  h2 {color: red;}
</style>

注意:一定要在属性值的后面加上分号;。

类选择器:

<style>
  .blue-text {
    color: blue;
  }
</style>

上面的代码在 <style> 标记中声明了一个叫做 blue-text 的类样式。
然后在h2元素上应用我们声明的类选择器:
<h2 class=”blue-text”>CatPhotoApp</h2>
注意:在CSS中,类选择器应该添加.为前缀。
而在HTML中,class属性不能添加.为前缀。
这是因为在CSS中如果类选择器前不添加. 浏览器就会误认为类选择器是一个元素选择器。

字号是由样式属性font-size来控制的, :
h1 {
  font-size: 30px;
}

style=font-size:30px

用font-family属性来设置元素的字体。
如果你想把副标题的字体设置为Sans-serif,你可以使用下面的CSS:

h2 {
  font-family: Sans-serif;
}

现在,让我们来导入谷歌字体。
首先,你需要用link标签来引入谷歌Lobster字体。
复制下面的代码片断并将其粘贴到你的代码编辑器的顶部:
<link href=”https://fonts.gdgdocs.org/css?family=Lobster” rel=”stylesheet” type=”text/css”>
现在你可以将Lobster作为 font-family属性 的值应用到你的h2元素上了。

有几种默认的字体是所有浏览器都可用的,包括Monospace、Serif和Sans-Serif。
当某种字体不可用时,你可以让浏览器自动降级到另一种字体。
例如,如果你想让段落的字体为Helvetica,但你同时想在Helvetica字体不可用时自动降级使用Sans-Serif字体,你可以使用如下CSS样式:

p {
  font-family: Helvetica, Sans-Serif;
}

使用img元素来为你的网站添加图片,使用src属性指向一个图片的具体地址。

<img src="https://xxx.com/xxx.jpg">

注意:img元素是自关闭元素,不需要结束标记。

Reply