Skip to main content
04. Text Properties
p {
  letter-spacing: 20px;
  word-spacing: 20px;
  font-size: 20px;
  font-style: normal;
  font-style: italic;
  font-style: oblique;
  font-family: "微软雅黑","华文彩云";
  font: 100px "华文彩云"; /* font size must be the last second one, and font family need to be the last one */
  font: bold italic 100px "华文彩云";
  text-indent: 80px;
  text-align: left; /* horizontal alignment: center right */
  vertical-align: top; /* bottom top baseline middle */
  line-height: 100px; /* normally set 1.5em ~ 2.0em */
}
HaiyueSeptember 24, 2024Less than 1 minuteCSSskills
03. Style Characteristics

Cascading

According to the selector priority to select the final style to visualize elements, for resolving style conflict.

Inherient

Definition: The style for one element, will be used on the descendants of the element.

<style>
p {
  color: red;
}
</style>

<p> 
  I'm a p element
  <span> I'm a span element inside p</span>
</p>
HaiyueNovember 11, 2023Less than 1 minuteCSSskills
04. Units
Unit meaning desc
px pixel
23% percentage the percentage of parent element
em font size calculate based on itself, the default value is 16
rem font size calculate based on the font size of the root element
HaiyueNovember 11, 2023Less than 1 minuteCSSskills
05. Document Flow

Web page has multiple layers, CSS can set style for each layer, only the content and style on the top layer could be visualized for users. The bottom layer is called document flow, all the elements are aligned in document flow by default.

HaiyueNovember 11, 2023Less than 1 minuteCSSskills
06. DIV
Block
Block
div {
  width: 800px;
  min-width: 800px;
  max-width: 1000px;
  height: 800px;
  min-height: 800px;
  max-height: 1000px;
}
HaiyueNovember 11, 2023About 4 minCSSskills
07. Float

Float

<!doctype html>
<html>
  <head>
    <style>
      .box1 {
        width: 200px;
        height: 200px;
        background-color: #bfa;
        float: right;
        /*
          通过浮动可以使得一个元素向其父元素的左侧或右侧移动使用
            使用float属性来设置元素的浮动
              可选值：
                none: 默认值，元素不浮动
                left: 元素向左浮动
                right: 元素向右浮动
            注意：元素设置浮动后，水平布局等式不需要强制成立
              元素设置浮动后，会完全从文档流中脱离，因此元素下面的在文档流中的元素会自动向左上移动
            
            浮动特点：
              1. 浮动元素会完全脱离文档流，不在占据文档流中的位置
              2. 设置浮动后，元素回想父元素的左侧或右侧移动
              3. 浮动元素默认不会从父元素中移出
              4. 浮动元素不会覆盖其他元素
              5. 若上面为没有浮动的块元素，则浮动元素无法上移
              6. 浮动元素不会超过他上面的浮动的兄弟元素，最多何其一样高
        */
      }
      
      .box2 {
        width: 200px;
        height: 200px;
        background-color: orangered;
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
  </body>
</html>
HaiyueNovember 11, 2023About 4 minCSSskills
08. Flex

Flex layout

HaiyueNovember 11, 2023About 2 minCSSskills
09. Postion

Position

  • 定位（position）
    • 定位式以各种更加高级的布局手段
    • 通过定位可以将元素摆放到页面的任意位置
    • 使用position属性来设置定位
      可选值：
      static 默认值，元素式静止的，没有开启定位
      relative 开启相对定位
      absolute 开启元素的绝对定位
      fixed 开启元素的固定定位
      sticky 开启元素的粘滞定位

Relative Position

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="./reset.css">
    <style>
      /*
      - 相对定位：
        - 当元素的position开哦其relative，开启相对定位
        - 特点：
          1. 若不设置偏移量，元素位置不会发生任何变化
          2. 相对定位式参考元素在文档流中的位置进行定位的
          3. 相对定位会提升元素的层级
          4. 相对定位不会使元素脱离文档流
          5. 相对定位不会改变元素的性质（块/行内）

        偏移量（offset）
          top
          bottom
          left
          right
      */

      .box1{
        width: 100px;
        height:100px;
        background-color: #bfa;
      }
      .box2{
        width: 100px;
        height: 100px;
        background-color: orange;
        position: relative;
        top: 50px;
        /* bottom: 100px; */
        left: 100px;
      }
      .box3{
        width: 100px;
        height: 100px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
  </body>
</html>
HaiyueNovember 11, 2023About 5 minCSSskills
10. Font & Background

Font

Abbreviation of font

font: 字体大小{/行高} 字体族
font-weight 字重 字体的加粗
  可选值
    normal 默认值 不加粗 
    bold 加粗
    100-900 九个级别
font-style 字体风格
    normal 正常的
    italic 斜体
HaiyueNovember 11, 2023About 5 minCSSskills
Email me if needed
Copyright © 2024 Haiyue