CSS基础_Day02

2024-01-08 09:25:40

CSS基础

字体大小由font-size属性控制。

<style>
  p{
    font-size:16px;
  }
  //设置p元素字体大小为16px
</style>

通过font-family属性，可以设置元素里面的字体样式。

<style>
  p {
    font-family:monospace;
  }
  //设置p字体样式为monspace
</style>

Google 字体库是一个免费的 Web 字体库，我们只需要在 CSS 里设置字体的 URL 即可使用。
要引入 Google Font，你需要从 Google Fonts 上复制字体的 URL，并粘贴到你的 HTML 里面。放到代码编辑器顶部，即放到 style 标签之前。

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

使用具体字体：

font-family: FAMILY_NAME, GENERIC_NAME;
//FAMILY_NAME是要使用的字体
//GENERIC_NAME是其他字体不可用时的后备字体

字体名区分大小写，并且如果字体名含有空格，则在声明时需要用引号包起来。例如，使用 “Open Sans” 字体需要添加引号，而 Lobster 则不需要。

所有浏览器都有几种默认字体，包括 monospace、serif 和 sans-serif。
降级：如果你想将一个元素的字体设置成 Helvetica，但当 Helvetica 不可用时，降级使用 sans-serif 字体，那么可以这样写：

p {
  font-family: Helvetica, sans-serif;
}

通用字体名不区分大小写。同时，也不需要使用引号，因为它们是 CSS 中的关键字。

CSS 的 width 属性可以控制元素的宽度。和设置文本字号一样，我们会以 px（像素）为单位来设置图片的宽度。
创建一个class选择器控制 HTML 元素的宽度为 500px：

<style>
  .larger-image {
    width: 500px;
  }
</style>

CSS 边框具有 style、color、width 属性。
假如我们要将一个 HTML 元素边框设置为 5px 的红色实线边框：

<style>
  .thin-red-border {
    border-color: red;//边框颜色
    border-width: 5px;//边框宽度
    border-style: solid;//边框样式
  }
</style>

在一个元素上可以同时应用多个 class，使用空格来分隔不同 class 即可.

<img class="class1 class2">

图片的四个角看起来很尖锐，我们可以使用 border-radius 属性来让它变得圆润。border-radius 的属性值单位可以是 px（像素）。

.thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius:10px;//圆角边框
  }

除像素外，也可以使用百分比来指定 border-radius 的值。

.thick-green-border {
  border-color: green;
  border-width: 10px;
  border-style: solid;
  border-radius: 50%;
}

谢谢你的坚持阅读ovo哟，让我们一起加油吖