01-CSS编写样式、属性的学习

一. 邂逅CSS

1.1. 认识CSS

• CSS的概念

  CSS表示层叠样式表（Cascading Style Sheet，简称：CSS，又称为又称串样式列表、级联样式表、串接样式表、阶层式样式表）

• 作用: 美化网页

  • 方式一: 添加各种样式;
  • 方式二: 布局

• 历史:

  • CSS3 -> Modules

1.2. CSS规则

属性名: 属性值

1.3. 三种编写规则

• 内联样式

  <div style="color: red; font-size: 30px;">我是div元素</div>
  <h1 style="font-size: 100px">我是标题</h1>
  

• 内部样式

  <style>
      /* 找到class为.div-one的元素 */
      .div-one {
        color: red; 
        font-size: 30px; 
        background-color: orange;
      }
  </style>
  ​
  <div class="div-one">我是div元素</div>
  <div>我也是div元素</div>
  

• 外部样式

  • link
  • @import

  index.css
  /* 可以通过@import引入其他的css资源 */
  @import url(./style.css);
  @import url(./test.css);
  ​
  style.css
  <style>
     .title {
       font-size: 30px;
       color: red;
       background-color: purple;
     }
  </style>
   
    <!-- link元素是用来引入资源 -->
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/style.css">
    <div class="title">我是01中的title</div>
  

1.4. CSS中的注释

/* 注释内容 */

1.5. 常见的CSS属性

• 最常见的CSS

  • font-size
  • color
  • background-color
  • width
  • height

 <style>
    .title {
      font-size: 24px;
      color: chocolate;
      background-color: black;
      width: 200px;
      height: 200px;
    }
  </style>
​
 <div class="title">Hello World</div>

二. 知识点补充

2.1. link元素

• link链接 站点图标
• dns-prefetch(了解)

  <!-- 引入css -->
  <link rel="stylesheet" href="./css/style.css">
  <!-- 引入icon(站点的图标) -->
  <link rel="icon" href="../images/favicon.ico">

2.2. 进制

• 人类 十进制
• 计算机: 二进制/八进制/十六进制

2.3. 颜色表示方法

• color keywords(颜色关键字)

• RGB

  • 十六进制: #aabbcc;
  • 缩写: #abc
  • 函数: rgb(0255, 0255, 0~255)

2.4. Chrome调试工具

• 打开Chrome调试工具

  方式一：右键 – 检查

  方式二：快捷键 – F12

快捷键：ctrl+ 可以调整页面或者调试工具的字体大小；

可以通过删除某些元素来查看网页结构;

可以通过增删css来调试网页样式;

2.5. 浏览器的渲染流程