CSS基础_Day02

2021-06-12 09:29:24 阅读：173 来源： 互联网

标签：Day02 基础边框字体 radius font border CSS

CSS基础

一、字体

1.更改元素的字体大小

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

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

2.设置元素的字体家族

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

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

3.引入谷歌字体

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 则不需要。

4.字体如何优雅降级

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

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

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

二、图形图像

1.调整图像大小

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

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

2.在元素周围添加边框

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">

3.用 border-radius 添加圆角边框

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

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

4.用 border-radius 制作圆形图片

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

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

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

标签：Day02,基础,边框,字体,radius,font,border,CSS
来源： https://blog.csdn.net/weixin_50246370/article/details/117837227

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9