Khóa học IT CSS Cơ bản 026_Hiển thị, Khả năng hiển thị, Hiệu ứng

1
Ẩn phần tử, làm cho nó không nhìn thấy được trên trang và không chiếm không gian, không ảnh hưởng đến bố cục. Phần tử sẽ không hiển thị trên trang.

1
    .example{
2
        display: none;
3
    }

1
    <div class="example">Văn bản kiểm tra</div>ABC123

1
Hiển thị phần tử như một phần tử cấp khối. Nó sẽ được hiển thị như một khối trên trang, với chiều rộng mặc định là 100% của container cha.
2
Phần tử khối là một phần tử chiếm toàn bộ chiều rộng, có ngắt dòng trước và sau.

1
  .base{
2
      background-color: deepskyblue;
3
  }
4
  .example{
5
    display: block;
6
  }

1
    <a class="base example" href="">Kiểm tra siêu liên kết</a>
2
    <br>
3
    <a class="base" href="">Kiểm tra siêu liên kết</a>

1
Hiển thị phần tử như một phần tử inline. Các phần tử được hiển thị trên cùng một dòng, không chiếm một dòng riêng, và chiều rộng được xác định bởi nội dung.
2
Các phần tử inline chỉ yêu cầu chiều rộng cần thiết và không bắt buộc ngắt dòng.

1
  .base{
2
        background-color: aquamarine;
3
  }
4
  .example{
5
    display: inline;
6
  }

1
    <p class="base example">Kiểm tra đoạn văn</p>
2
    <p class="base">Kiểm tra đoạn văn</p>

1
Hiển thị phần tử như một phần tử inline-block. Các phần tử được hiển thị trên cùng một dòng, nhưng có thể đặt chiều rộng, chiều cao và các thuộc tính phần tử cấp khối khác.

1
  .example1{
2
      display: inline-block;
3
      width: 100px;
4
      height: 100px;
5
      background-color: cornflowerblue;
6
  }
7
  .example2{
8
      background-color: cornflowerblue;
9
  }

1
    <p class="example1">Kiểm tra đoạn văn</p>
2
    <p class="example1">Kiểm tra đoạn văn</p>
3
    <p class="example2">Kiểm tra đoạn văn</p>

1
Đặt phần tử là có thể nhìn thấy.

1
  .example{
2
      visibility: visible;
3
  }

1
  <div class="example">Văn bản kiểm tra</div>ABC123

1
Đặt phần tử là không nhìn thấy, nhưng phần tử ẩn vẫn chiếm cùng không gian như trước khi bị ẩn. Nói cách khác, mặc dù phần tử bị ẩn, nó vẫn ảnh hưởng đến bố cục.

1
  .example{
2
      visibility: hidden;
3
  }

1
  <div class="example">Văn bản kiểm tra</div>ABC123

1
.base{
2
    width: 200px;
3
    height: 200px;
4
    background-color: #3498db;
5
}
6
.example{
7
    opacity: 0.5;
8
    /* 50% độ trong suốt */
9
}

1
    <div class="base"></div>
2
    <br>
3
    <div class="base example"></div>

1
    .example{
2
        text-shadow: 5px 5px 10px rgba(243, 40, 40, 0.8);
3
        /* 2px offset ngang, 5px offset dọc, 5px bán kính mờ, màu rgba(243, 40, 40, 0.8) */
4
        font-size: 100px;
5
    }

1
    <div class="example">Văn bản kiểm tra</div>

1
    .example{
2
        background: linear-gradient(to bottom, red, blue);
3
        /* Gradient từ trên xuống dưới, đỏ sang xanh */
4
        height: 100px;
5
    }

1
    <div class="example"></div>

1
    .example{
2
        background: radial-gradient(circle, red, blue);
3
        /* Gradient hình tròn, đỏ sang xanh */
4
        height: 100px;
5
    }

1
    <div class="example"></div>

1
.base {
2
    height: 100px;
3
    width: 100px;
4
    background-color: lightblue;
5
}
6
.example1 {
7
    transform: translate(50px, 20px);
8
    /* Di chuyển 50px theo chiều ngang, 20px theo chiều dọc */
9
}
10
.example2 {
11
  transform: scale(0.5);
12
  /* Co giãn phần tử thành 1.5 lần ban đầu */
13
}
14
.example3 {
15
    transform: rotate(45deg);
16
    /* Xoay 45 độ theo chiều kim đồng hồ */
17
}
18
.example4 {
19
    transform: skew(50deg, 20deg);
20
    /* Nghiêng 30 độ theo chiều ngang, 20 độ theo chiều dọc */
21
}
22
.example5 {
23
    transform: translate(50px, 60px) rotate(45deg) scale(1.5);
24
}

1
    <div class="base example1"></div>
2
    <div class="base example2"></div>
3
    <div class="base example3"></div>
4
    <div class="base example4"></div>
5
    <div class="base example5"></div>