前端学习笔记4-CSS入门二

前言：虽然做了几个前端项目，但是属于项目组的赶鸭上架。我的前端基础还是非常薄弱，在网上找了一些网站，用于空闲时间学习。在此做下学习笔记，以做复习使用。

网站的课程讲的很好，很适合像我这样零基础的人学习，非常感谢网站的维护者，推荐下：绿叶学习网

1.控制字体的有，font-family（字体类型）、font-size（字体大小）、color（字体颜色）、font-weight（字体粗细）、font-style（字体斜体）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style type="text/css">
    /*font-family，字体类型，可写多个，中间逗号隔开，顺序匹配电脑上安装的字体*/
    #f1{
      font-family: 宋体;
    }
    #f2{
      font-family: 微软雅黑,SansSerif,宋体;
    }
    /*font-size，字体大小，一般用px控制*/
    #f3{
      font-size: 24px;
    }
    /*color，字体颜色*/
    #f4{
      color: red;
    }
    /*font-weight，字体粗细，可用100-900，bold，normal*/
    #f5{
      font-weight: 400;
    }
    /*font-style，字体斜体，可用italic，normal*/
    #f6{
      font-style: italic;
    }
  </style>
</head>
<body>
    <p id="f1">我是宋体</p>
    <p id="f2">我是雅黑</p>
    <p id="f3">24px就这么大</p>
    <p id="f4">我是红色</p>
    <p id="f5">400粗</p>
    <p id="f6">斜了，斜了</p>
</body>
</html>

展示效果：

2.CSS段落属性包含：

---text-indent，缩进文本首行

---text-decoration，下划线、删除线、顶划线

---text-transform，转换文本的大小写

---line-height，控制行高

---text-align，控制文本水平方向的对齐方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
      div,span{font-size: 16px;}
      #f2{text-indent: 32px;}
      #f3father #f3son1{text-decoration: underline;}
      #f3father #f3son2{text-decoration: line-through;}
      #f3father #f3son3{text-decoration: overline;}
      #f4father #f4son1{text-transform: uppercase;}
      #f4father #f4son2{text-transform: lowercase;}
      #f5father #f5son1{text-align: left;}
      #f5father #f5son2{text-align: center;}
      #f5father #f5son3{text-align: right;}
      #f5father{border: 1px dashed blue;}
    </style>
</head>
<body>
    <div id="f1">CSS段落属性包含：</div>
    <div id="f2">
      text-indent，缩进文本首行；
      <span id="f3father">text-decoration，控制字体
        <span id="f3son1">下划线、</span>
        <span id="f3son2">删除线、</span>
        <span id="f3son3">顶划线；</span>
      </span>
      <span id="f4father">
        text-transform，转换英文的大（<span id="f4son1">uppercase</span>）小（<span id="f4son2">lowercase</span>）写；
      </span>
      line-height，控制行高以及控制文本水平方向的text-align。
    </div>
    <div id="f5father">
      <p id="f5son1">小黑靠左</p>
      <p id="f5son2">小炮居中</p>
      <p id="f5son3">一姐靠右</p>
    </div>
</body>
</html>

效果展示：

3.border，控制边框。一般使用简洁写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style type="text/css">
    #d1{
      width: 200px;
      height: 100px;
      /*border，控制边框，一般用简洁写法，第一个值表示边框粗细，第二个值表示虚实，第三个值表示颜色*/
      border: 3px dashed red;
    }
  </style>
</head>
<body>
    <div id="d1"></div>
</body>
</html>

效果展示：

来源：CSDN

作者：JustDI-CM

链接：https://blog.csdn.net/JustDI0209/article/details/104018708

标签

前端入门

前端