1. Giới Thiệu CSS

2. Cấu Trúc CSS

            p {
              color: red;
              text-align: center;
            }

3. CSS Selector

4. Các Loại Cấu Hình CSS (3 Cách)

5. Comments CSS

          /* This is a single-line comment */
          p {
            color: red;
          }

6.Color CSS (Màu sắt CSS)

            #class1 {
              color: red;
              background-color: rgb(60, 179, 113);
              border: sloid 2px rgba(60,179,113,0.2);
              color: #ffff;
              color: hsl(10,10%,80%)
            }

7. Background CSS (Màu nền CSS)

            #div {
             background-color: red;                     /* Sét màu nền */
             background-image: url(./hinh1.png)         /* Sét hình nền */
             background-repeat: no-repeat              /* background có lặp lại không */
             background-attachment: fixed             /* background có cố định 1 chỗ không*/
             background-position :right top           /* bổ trợ cho background-attachment xác định vị ghí cố định*/
            }
            #div2 {
              background: #ffffff url("img_tree.png") no-repeat right top;  /* Viết tắt gộp các thuộc tính trên */
             }

8. Border CSS (Viền CSS)

            #div1 {
              border-style: sloid;    /* kiểu border */
              border-width: 5px;      /* độ rộng border */
              border-color: red;      /* màu sắt border */
              border-radius: 3px ;    /* làm tròn viền css */
            }
            #div1 {
              border: sloid 2px red;   /* viết tắt gộp từ các thuộc tính trên */
              border-radius: 3px ;  
            }
            #div1 {
              border-left: sloid 2px red;   /* chỉ định riêng border bên trái*/
              border-radius: 3px ;  
            }

9. Margin CSS (Khoản cách bên ngoài Border)

            #div {
              margin-top: 5px; 
              margin-bottom: 5px;
              margin-left: 5px;
              margin-right: 5px;
            }
            #div1 {
              margin:5px  /* 4 cạnh đều = 5*/       
            }
            #div2 {
              margin: 5px 10px 15px 20px; => Trên + phải + dưới + trái (kim đồng hồ)
            }

10. Padding CSS (Khoản cách bên trong từ content đến Border)

            #div {
              padding-top: 5px; 
              padding-bottom: 5px;
              padding-left: 5px;
              padding-right: 5px;
            }
            #div1 {
              padding:5px  /* 4 cạnh đều = 5*/       
            }
            #div2 {
              padding: 5px 10px 15px 20px; => Trên + phải + dưới + trái (kim đồng hồ)
            }

11. Width and Height CSS (Độ rộng và Chiều cao CSS)

            #div {
              width: 100%;       /* chiều rộng ban đầu là 100% */
              height: 300px;     /* chiều cao ban đầu là 300px */
              background-color: red;
              max-height: 600px; /* Chiều cao tối đa là 600px */
              min-width: 50%;     /* Chiều độ rộng tối thiểu là 50% so với màn hình */
            }

12. Box CSS

            #div2 {
              background-color: red;
              width: 320px ;
              height : 50px;
              padding: 20px;
              border: sloid 10px blue;
              margin: 0px;     
            }
            320px (width of content area)
            + 20px (left padding + right padding)
            + 10px (left border + right border)
            = 350px (total width)
            
              50px (height of content area)
            + 20px (top padding + bottom padding)
            + 10px (top border + bottom border)
            = 80px (total height)

13. Outline CSS (Độ dày Giữa margin với Border)

            #div {
              color: red;                /* Set màu outline*/
              outline-style: sloid;      /* Set kiểu outline*/
              outline-width: 10px;        /* Set độ dày outline*/
              outline_offset: 5px;        /* Set khoản trắng từ border đến outline*/
            }
            #div2 {
              outline: 5px solid yellow;
            }

14. Text CSS

            p {
              color: red;   /* màu chữ */ 
              text-align: center;   /* căn chữ  */ 
              text-decoration-line: overline;   /* kiểu chữ */ 
              text-transform: uppercase /* Viết hoa viết thường chữ */
            }

15. Font CSS

          p.a {
            font: 20px Arial, sans-serif;
          }
          
          p.b {
            font: italic small-caps bold 12px/30px Georgia, serif;
          }
          p.c {
            font-family : "Times New Roman", Times, serif;  
            font-style: normal; 
            font-size: 30px;
            font-weight: bold;
            font-variant: normal;
          }

16. Icon CSS

          <!DOCTYPE html>
            <html>
            <head>
            <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
            </head>
            <body>
  
            <i class="fas fa-cloud"></i>
            <i class="fas fa-heart"></i>
            <i class="fas fa-car"></i>
            <i class="fas fa-file"></i>
            <i class="fas fa-bars"></i>
  
            </body>
            </html>

17. Link CSS

          /* chưa làm gì link */
          a:link {
            color: red;
          }
          
          /* Đã nhấn link */
          a:visited {
            color: green;
          }
          
          /* Đưa chuột vào link */
          a:hover {
            color: hotpink;
          }
          
          /* Nhấn chuột vào link */
          a:active {
            color: blue;
          }

18. List CSS

          ul {
            list-style: square inside url("sqpurple.gif");
          }
          ol {
            list-style-type: circle;
            list-style-position : outside;
            list-style-image:url('sqpurple.gif');
          }

19. Table CSS

          table {
            border-collapse: collapse;
            text-aligin:center;
            with: 100%;
            vertical-align: center;
          }
          table:nth-child(even){
            background-color: coral;
          }

20. Display CSS

          span {
            display: block; 
          }
          li {
            display: inline;
          }
          h1.hidden {
            display: none;  /* ẩn mất luôn không gian */
          }
          h1.hidden {
            visibility:  /* ẩn nhưng vẫn chiếm không gian*/; 
          }

21. Width and Max Width + margin:auto CSS

Đây là width + margin auto 
          div.ex1 {
            width: 500px;
            margin: auto;
            border: 3px solid #73AD21;
          }
          
          div.ex2 {
            max-width: 500px;
            margin: auto;
            border: 3px solid #73AD21;
          }

22. Position CSS (Thiết lập vị trí của 1 Element nổi lên 1 Element khác)


            p {
              color: red;
              text-align: center;
            }

23. Z-Index CSS



           <style>
                  .container {
                    position: relative;
                  }
  
                  .black-box {
                    position: relative;
                    z-index: 1;
                    border: 2px solid black;
                    height: 100px;
                    margin: 30px;
                  }
  
                  .gray-box {
                    position: absolute;
                    z-index: 3;
                    background: lightgray;
                    height: 60px;
                    width: 70%;
                    left: 50px;
                    top: 50px;
                  }
  
                  .green-box {
                    position: absolute;
                    z-index: 2;
                    background: lightgreen;
                    width: 35%;
                    left: 270px;
                    top: -15px;
                    height: 100px;
                  }
          </style>

24. Overflow CSS (Xử lý ly nội dung vượt quá kích thước Element chứa nó)


            #div {
              overflow: visible;
            }
            #div1 {
              overflow: hidden;
            }
            #div2 {
              overflow: scroll;
            }
            #div3 {
              overflow: auto;
            }
            div {
              overflow-x: hidden; /* ẩn ngang */
              overflow-y: scroll; /* tạo croll dọc */
            }

25. Float CSS + Clear



          <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Float and Clear Example</title>
          <style>
              .box {      /* Box không muốn ảnh hưởng float */
                  width: 100px;
                  height: 100px;
                  margin: 10px;
                  background-color: lightblue;
              }  
              .float-left {
                  float: left;    /* Đưa box về bên trái */
              }
              .float-right {
                  float: right;    /* Đưa box về phải phải */
              }
              .clear-both {
                  clear: both;   /* Ngăn ảnh hưởng của 2 float trên */
              }
          </style>
      </head>
      <body>
          <div class="box float-left">Float Left</div>
          <div class="box float-right">Float Right</div>
          <div class="clear-both"></div>              /* Sau khi có clear */
          <div class="box">No Float</div>           /* Thẻ sau clear sẽ bình thường */
      </body>

26. Display:inline-block CSS


          <style>
          span.a {
            display: inline; /* the default for span */
            width: 100px;
            height: 100px;
            padding: 5px;
            border: 1px solid blue;  
            background-color: yellow; 
          }
          
          span.b {
            display: inline-block;
            width: 100px;
            height: 100px;
            padding: 5px;
            border: 1px solid blue;    
            background-color: yellow; 
          }
          
          span.c {
            display: block;
            width: 100px;
            height: 100px;
            padding: 5px;
            border: 1px solid blue;    
            background-color: yellow; 
          }
          </style>
          </head>
          <body>
          
          <h1>The display Property</h1>
          
          <h2>display: inline</h2>
          <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="a">Aliquam</span> <span class="a">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>
          
          <h2>display: inline-block</h2>
          <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="b">Aliquam</span> <span class="b">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>
          
          <h2>display: block</h2>
          <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="c">Aliquam</span> <span class="c">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>

27. Layout CSS (Căn Giữa + Trái Phải)

28. Combinators (kết Hợp Lấy Các Thẻ CSS) CSS

STT Cách Viết Mẫu Ghi Chú Code Result
1 element element div p Lấy tất cả thẻ p nằm trong thẻ div 
                  <body>

                      <div>
                        <p>Paragraph 1 nằm trong div.</p>
                        <p>Paragraph 2 nằm trong div</p>
                        <section><p>Paragraph 2 nằm trong div</p></section>
                      </div>

                      <p>Paragraph 4. Not in a div.</p>
                      <p>Paragraph 5. Not in a div.</p>

                  </body>
                   --------CSS ---------------- 

                  div p {
                    background-color: yellow;
                  }

2 element>element div > p Lấy tất cả thẻ p là con của thẻ div 
                  <body>

                        <h2>Child Selector</h2>

                        <p>The child selector (>) selects all elements that are the children of a specified element.</p>

                        <div>
                          <p>Paragraph 1 trong thẻ div.</p>
                          <p>Paragraph 2 trong thẻ div</p>
                          <section>
                            <!-- not Child but Descendant -->
                            <p>Paragraph 3 trong thẻ div (Con của thẻ session).</p>
                          </section>
                          <p>Paragraph 4 trong thẻ div.</p>
                        </div>

                        <p>Paragraph 5. không trong thẻ div.</p>
                        <p>Paragraph 6. không trong thẻ div</p>

                  </body>
                   --------CSS ---------------- 

                  div > p {
                    background-color: yellow;
                  }

3 element+element div + p Lấy thẻ p đầu tiên của div 
                  <body>

                          <div>
                          <p>Paragraph 1 in the div.</p>
                          <p>Paragraph 2 in the div.</p>
                        </div>
                        
                        <p>Paragraph 3. After a div.</p>
                        <p>Paragraph 4. After a div.</p>
                        
                        <div>
                          <p>Paragraph 5 in the div.</p>
                          <p>Paragraph 6 in the div.</p>
                        </div>
                        
                        <p>Paragraph 7. After a div.</p>
                        <p>Paragraph 8. After a div.</p>
                
      

                  </body>
                   --------CSS ---------------- 

                   div + p {
                    background-color: yellow;
                  }

4 element~element div ~ p Lấy thẻ p đứng trước thẻ div 
                  <body>

                        <p>Paragraph 1.</p>

                        <div>
                          <p>Paragraph 2.</p>
                        </div>
                        
                        <p>Paragraph 3.</p>
                        <code>Some code.</code>
                        <p>Paragraph 4.</p>
      
                  </body>
                   --------CSS ---------------- 

                   div ~ p {
                    background-color: yellow;
                  }

29. Pseudo Element (Các hành động thuộc tính hổ trợ CSS) CSS


            p {
              color: red;
              text-align: center;
            }

30. Opacity (Làm mờ )


          img {
            opacity: 0.5;
          }


31. Menu CSS

32. DropDown CSS (Làm menu đổ xuống)


Mouse over me

Menu 1

Menu 2

Menu 3

            <div class="menu-dropdown">
                <span>Mouse over me</span>
                <div class="sub-dropdown">
                       <p>Hello World!</p>
                </div>
           </div>
          
          .menu-dropdown {
            position: relative;
            border: solid 2px blueviolet;
            display: inline;
            padding: 5px;
            border-radius: 10px;
            background-color: #ffff;
          }
          .menu-dropdown:hover {
            cursor: pointer;
          }
          .menu-dropdown:hover .sub-dropdown {
            display: block;
          }
          .sub-dropdown {
            display: none;
            position: absolute;
            top: 30px;
            right: 0px;
            left: 0px;
            z-index: 1;
            background-color: #73ad21;
            width: 100%;
          }

33. Thư Viện Ảnh CSS

Thông Tin Hình Ảnh 1

Thông Tin Hình Ảnh 1

Thông Tin Hình Ảnh 1

            <div class="gallery-image">
                <div class="gallery-item">
                        <img src="./img/img1.jpg" alt="" srcset="">
                        <p class="des-image">Thông Tin Hình Ảnh 1</p>
                </div>
                <div class="gallery-item">
                        <img src="./img/img2.jpg" alt="" srcset="">
                        <p class="des-image">Thông Tin Hình Ảnh 1</p>
                </div>
                <div class="gallery-item">
                        <img src="./img/img3.jpg" alt="" srcset="">
                        <p class="des-image">Thông Tin Hình Ảnh 1</p>
                </div>
          </div>
          
          /* Gallery image */
              .gallery-image {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
              }
              .gallery-item > img {
                width: 100%;
                height: auto;
              }

              .gallery-item {
                margin: 0px 10px;
                border: solid 5px #73ad21;
                border-radius: 5px;
              }
              .gallery-item:hover img {
                opacity: 0.5;
              }
              .des-image {
                text-align: center;
                padding: 10px;
              }

34. CSS Sprites (Cắt ảnh nhỏ từ 1 ảnh lớn bằng cách di chuyển toạ độ)



          #sprites-instagram {
            width: 151px; // xác định 1 ô vuông có chiều dài
            height: 140px;  // Xác định 1 ổ vuôn có chiều rộng
            background: url("/img/spritesCSS.png") -24px -24px;  // toạ độ sẽ là góc trên bên trái với (X, Y) => Ô vuôn sẽ bắt đầu từ toạ độ này
          }
  
          #sprites-facebook {
            width: 151px;
            height: 170px;
            background: url("/img/spritesCSS.png") -230px 0;
          }

35. Attribute Selectors CSS (Dùng thuộc tính CSS để chọn thẻ HTML)

Các Cách Attribute Selected

Atribute Selector Mô tả Ví dụ CSS
[attribute~="value"] a [target="_blank"] Chọn thẻ a có targer là "_blank" 
                
                a[target="_blank"] {
                background-color: yellow;
                }
[attribute|="value"] [title~="flower"] Chọn tất cả các Atribute có title là "flower" 
                
                  [title~="flower"] {
                    border: 5px solid yellow;
                  }
[attribute|="value"] [class|="top"] Chọn tất cả các Atribute có class có từ là "top" 
                
                  [class|="top"] {
                    background: yellow;
                  }
                  <h1 class="top-header">Welcome</h1> OK
                  <p class="top-text">Hello world!</p> OK
                  <p class="topcontent">Are you learning CSS?</p> NotOK
[attribute^="value"] [class^="top"] Chọn tất cả các Atribute có class có từ là "top" 
                
                  [class^="top"] {
                    background: yellow;
                  }
                  <h1 class="top-header">Welcome</h1> OK
                  <p class="top-text">Hello world!</p> OK
                  <p class="topcontent">Are you learning CSS?</p> OK
[attribute$="value"] [class$="test"]
a[href$=".pdf"] 		Chọn tất cả các Atribute có class từ là "test" 
                
                  [class$="test"] {
                    background: yellow;
                  }
                  <div class="first_test">The first div element.</div>    OK
                  <div class="second">The second div element.</div> NotOK
                  <div class="my-test">The third div element.</div>   OK
                  <p class="mytest">This is some text in a paragraph.</p>  OK
[attribute*="value"] [class$="test"]
a[href*="w3schools"] 		Chọn tất cả các Atribute có class từ là "te" 
                
                  [class*="te"] {
                    background: yellow;
                  }
                  <div class="first_test">The first div element.</div>    OK
                  <div class="second">The second div element.</div>NotOK
                  <div class="my-test">The third div element.</div>   OK
                  <p class="mytest">This is some text in a paragraph.</p>  OK

36. Form CSS

           Tham Khảo Code Responsive

37. Counters CSS

            <div class="section">
              <h2>Section Title</h2>
                  <div class="sub-section">
                      <h3>Sub-section 1</h3>
                      <p>This is some text in sub-section 1.</p>
                  </div>
              <div class="sub-section">
                  <h3>Sub-section 2</h3>
                  <p>This is some text in sub-section 2.</p>
              </div>
              <div class="sub-section">
                  <h3>Sub-section 3</h3>
                  <p>This is some text in sub-section 3.</p>
              </div>
            </div>
          
          body {
              counter-reset: section;
          }
          
          .section {
              counter-reset: sub-section;
          }
          
          .section > h2::before {
              counter-increment: section;
              content: "Section " counter(section) ": ";
          }
          
          .sub-section > h3::before {
              counter-increment: sub-section;
              content: counter(section) "." counter(sub-section) " ";
          }
Giải Thích:
  • counter-reset: section; khởi tạo bộ đếm section cho toàn bộ tài liệu. Mỗi lần gặp .section, bộ đếm section sẽ được đặt lại.
  • counter-reset: sub-section; khởi tạo bộ đếm sub-section cho mỗi .section, đặt lại bộ đếm sub-section mỗi khi gặp .section
  • counter-increment: section; tăng giá trị của bộ đếm section mỗi khi gặp một h2 trong .section
  • content: "Section " counter(section) ": "; thêm tiền tố "Section" và giá trị của bộ đếm section vào trước nội dung của h2.
  • counter-increment: sub-section; tăng giá trị của bộ đếm sub-section mỗi khi gặp một h3 trong .sub-section.
  • content: counter(section) "." counter(sub-section) " "; thêm giá trị của bộ đếm section và sub-section theo định dạng "section.sub-section" vào trước nội dung của h3.

38. Website Layout CSS (Cấu trúc của 1 website)


            p {
              color: red;
              text-align: center;
            }

39. Đơn Vị Tính CSS

Đơn Vị Ví Dụ Giải thích ví dụ đơn vị
px (pixels) width: 100px; Chiều rộng của phần tử là 100 pixels.
em width: 2em; Chiều rộng của phần tử bằng 2 lần kích thước font của phần tử cha.
rem (root em) width: 2rem; Chiều rộng của phần tử bằng 2 lần kích thước font của phần tử gốc (thường là <html>).
% (percentage) width: 50%; Chiều rộng của phần tử bằng 50% chiều rộng của phần tử cha.
vw (viewport width) width: 50vw; Chiều rộng của phần tử bằng 50% chiều rộng của viewport.
vh (viewport height) height: 50vh; Chiều cao của phần tử bằng 50% chiều cao của viewport.
vmin width: 50vmin; Chiều rộng của phần tử bằng 50% của giá trị nhỏ hơn giữa chiều rộng và chiều cao viewport.
vmax width: 50vmax; Chiều rộng của phần tử bằng 50% của giá trị lớn hơn giữa chiều rộng và chiều cao viewport.
cm (centimeters) width: 10cm; Chiều rộng của phần tử là 10 centimeters.
mm (millimeters) width: 100mm; Chiều rộng của phần tử là 100 millimeters.
in (inches) width: 2in; Chiều rộng của phần tử là 2 inches.
pt (points) width: 12pt; Chiều rộng của phần tử là 12 points (1pt = 1/72 inch).
pc (picas) width: 1pc; Chiều rộng của phần tử là 1 pica (1pc = 12pt).
ch width: 10ch; Chiều rộng của phần tử bằng độ rộng của 10 ký tự "0" trong font hiện tại.
ex height: 5ex; Chiều cao của phần tử bằng 5 lần chiều cao của chữ cái "x" trong font hiện tại.
fr (fraction) grid-template-columns: 1fr 2fr; Định nghĩa lưới với cột đầu tiên chiếm 1 phần và cột thứ hai chiếm 2 phần. 
          width: 2em; /* 32px nếu kích thước font của phần tử cha là 16px */
          width: 2rem; /* 32px nếu kích thước font của html là 16px */
          width: 50%; /* 50% chiều rộng của phần tử cha */
          width: 50vw; /* 50% chiều rộng của viewport */
          height: 50vh; /* 50% chiều cao của viewport */
          width: 50vmin; /* 50% của giá trị nhỏ hơn giữa chiều rộng và chiều cao viewport */
          width: 50vmax; /* 50% của giá trị lớn hơn giữa chiều rộng và chiều cao viewport */

40. Mức Độ Ưu Tiên Tính Điểm CSS

          #myid {
            background-color: blue !important;  // áp dụng này vì có important
          }
          
          .myclass {
            background-color: gray !important; // áp dụng này vì có important
          }
          
          p {
            background-color: red !important;  // áp dụng này vì có important
          }


          <p>This is some text in a paragraph.</p>

          <p class="myclass">This is some text in a paragraph.</p>

          <p id="myid">This is some text in a paragraph.</p>

41. Math CSS


          #div1 {
            position: absolute;
            left: 50px;
            width: calc(100% - 100px);
            border: 1px solid black;
            background-color: yellow;
            padding: 5px;
          }
          #div1 {
            background-color: yellow;
            height: 100px;
            width: max(50%, 300px);
          }
          #div1 {
            background-color: yellow;
            height: 100px;
            width: min(50%, 300px);
          }

42. (CSS Nâng Cao) Bo Tròn Gốc


Thuộc tính Giải thích
border-radius Thuộc tính viết tắt để thiết lập tất cả bốn thuộc tính border-*-*-radius
border-top-left-radius Định nghĩa hình dạng của viền góc trên bên trái
border-top-right-radius Định nghĩa hình dạng của viền góc trên bên phải
border-bottom-right-radius Định nghĩa hình dạng của viền góc dưới bên phải
border-bottom-left-radius Định nghĩa hình dạng của viền góc dưới bên trái 
          #rcorners1 {
            border-radius: 15px 50px 30px 5px;
            background: #73AD21;
            padding: 20px;
            width: 200px;
            height: 150px;
          }
          
          #rcorners2 {
            border-radius: 15px 50px 30px;
            background: #73AD21;
            padding: 20px;
            width: 200px;
            height: 150px;
          }
          
          #rcorners3 {
            border-radius: 15px 50px;
            background: #73AD21;
            padding: 20px;
            width: 200px;
            height: 150px;
          }
          
          #rcorners4 {
            border-radius: 15px;
            background: #73AD21;
            padding: 20px;
            width: 200px;
            height: 150px;
          }

43. (CSS Nâng Cao) Border Image (Thêm Viền bằng ảnh)


Nội Dung của Border image

Thuộc tính Giải thích Ví dụ Code
border-image Thuộc tính viết tắt để thiết lập tất cả các thuộc tính border-image-* border-image: url('border-image.png') 30 round;
border-image-source Xác định đường dẫn tới hình ảnh được sử dụng làm viền border-image-source: url('border-image.png');
border-image-slice Xác định cách cắt hình ảnh viền border-image-slice: 30%;
border-image-width Xác định độ rộng của hình ảnh viền border-image-width: 10px;
border-image-outset Xác định mức độ mở rộng của vùng hình ảnh viền vượt ra ngoài hộp viền border-image-outset: 5px;
border-image-repeat Xác định liệu hình ảnh viền nên được lặp lại, làm tròn hay kéo dài border-image-repeat: round; 
          .border-img{
            border:solid 10px transparent;
            padding: 15px;
            border-image: url("./img/bordertemplate.png") 50 round;
          }
  • 50: Đây là giá trị cho thuộc tính border-image-slice, chỉ ra tỷ lệ phần trăm của hình ảnh được cắt để tạo ra viền. Trong trường hợp này, hình ảnh được cắt tại 50% từ mỗi cạnh của nó.
  • round: Đây là giá trị cho thuộc tính border-image-repeat, chỉ định cách hình ảnh viền sẽ được sử dụng. round có nghĩa là hình ảnh viền sẽ được lặp lại và làm tròn để vừa khít với kích thước của hộp viền.

44. (CSS Nâng Cao) CSS Multiple Backgrounds (1 Element có thể add nhiều backgroup trong cùng 1 thuộc tính)

44. (CSS Nâng Cao) CSS Color Keywords (Từ khoá màu bao gồm (transparent - trong suốt) - (currentcolor - Màu hiện tại) - (inherit - kế thừa) )

45. (CSS Nâng Cao) CSS Gradients - Màu garian - background: linear-gradient(direction, color-stop1, color-stop2, ...);

46. (CSS Nâng Cao) Shadow Effects (Đổ bóng)

47. (CSS Nâng Cao) Text Effects CSS Text Overflow, Word Wrap, Line Breaking Rules, and Writing Modes (Thuộc tính xủ lý text)

Thuộc tính Các giá trị của thuộc tính Giải thích Code mẫu Hình Ảnh
text-overflow
  • clip
  • ellipsis
 Quy định cách xử lý khi văn bản tràn ra ngoài khung chứa. 
div {
        white-space: nowrap;
        width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
                }

word-wrap
  • normal
  • break-word
 Cho phép từ dài bị ngắt dòng và chuyển sang dòng tiếp theo. 
div {
        word-wrap: break-word;
    }

word-break
  • normal
  • break-all
  • keep-all
 Quy định cách ngắt dòng cho văn bản khi từ quá dài hoặc không có dấu cách. 
div {
        word-break: break-all;
    }

writing-mode
  • horizontal-tb
  • vertical-rl
  • vertical-lr
 Quy định hướng viết của văn bản. 
div {
        writing-mode: vertical-rl;
    }
 


            p {
              color: red;
              text-align: center;
            }

48. (CSS Nâng Cao) Web Fonts (@font-face) Tạo 1 biến lưu font của bạn bằng file


              @font-face {
                font-family: 'MyCustomFont';
                src: url('mycustomfont.woff2') format('woff2'),
                    url('mycustomfont.woff') format('woff');
                font-weight: normal;
                font-style: normal;
              }
              
              body {
                  font-family: 'MyCustomFont', sans-serif;
              }
  • @font-face: Đây là quy tắc CSS để khai báo một phông chữ mới.
  • font-family: Tên của phông chữ sẽ được sử dụng trong CSS sau này (ví dụ: 'MyCustomFont').
  • src: Đường dẫn đến tệp phông chữ. Bạn có thể chỉ định nhiều định dạng phông chữ khác nhau để đảm bảo tương thích với nhiều trình duyệt (ví dụ: woff2, woff, ttf).
  • font-weight: (Tùy chọn) Định nghĩa độ đậm của phông chữ.
  • font-style: (Tùy chọn) Định nghĩa kiểu chữ của phông chữ (ví dụ: normal, italic, oblique).

49. (CSS Nâng Cao) 2D Transforms: Dịch chuyển các element 2D


Thuộc tính Các giá trị của thuộc tính Giải thích Code mẫu Hình Ảnh
translate()
  • translate(x, y)
 Dịch chuyển phần tử theo trục x và y. 
div {
  transform: translate(50px, 100px);
}

rotate()
  • rotate(angle)
 Xoay phần tử quanh một điểm cố định theo góc chỉ định (đơn vị: deg). 
div {
  transform: rotate(45deg);
}

scaleX()
  • scaleX(factor)
 Thay đổi kích thước của phần tử theo trục x. 
div {
  transform: scaleX(1.5);
}
scaleY()
  • scaleY(factor)
 Thay đổi kích thước của phần tử theo trục y. 
div {
  transform: scaleY(2);
}

scale()
  • scale(x-factor, y-factor)
 Thay đổi kích thước của phần tử theo cả hai trục x và y. 
div {
  transform: scale(1.5, 2);
}
skewX()
  • skewX(angle)
 Làm nghiêng phần tử theo trục x. 
div {
  transform: skewX(20deg);
}

skewY()
  • skewY(angle)
 Làm nghiêng phần tử theo trục y. 
div {
  transform: skewY(15deg);
}
skew()
  • skew(x-angle, y-angle)
 Làm nghiêng phần tử theo cả hai trục x và y. 
div {
  transform: skew(20deg, 15deg);
}
matrix()
  • matrix(a, b, c, d, e, f)
 Áp dụng một phép biến đổi ma trận, kết hợp các phép dịch chuyển, xoay, làm nghiêng và thay đổi kích thước. 
div {
  transform: matrix(1, 0.5, -0.5, 1, 50, 100);
}

50. (CSS Nâng Cao) 3D Transforms: Dịch chuyển các element 3D


Thuộc tính Các giá trị của thuộc tính Giải thích Code mẫu Hình Ảnh
matrix3d matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n) Định nghĩa một biến đổi 3D, sử dụng ma trận 4x4 với 16 giá trị. 
div {
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
translate3d translate3d(x, y, z) Định nghĩa một phép dịch chuyển 3D. 
div {
  transform: translate3d(50px, 100px, 200px);
}
translateX translateX(x) Định nghĩa một phép dịch chuyển 3D, sử dụng chỉ giá trị cho trục X. 
div {
  transform: translateX(50px);
}
translateY translateY(y) Định nghĩa một phép dịch chuyển 3D, sử dụng chỉ giá trị cho trục Y. 
div {
  transform: translateY(100px);
}
translateZ translateZ(z) Định nghĩa một phép dịch chuyển 3D, sử dụng chỉ giá trị cho trục Z. 
div {
  transform: translateZ(200px);
}
scale3d scale3d(x, y, z) Định nghĩa một phép biến đổi tỷ lệ 3D. 
div {
  transform: scale3d(1.5, 2, 0.5);
}
scaleX scaleX(x) Định nghĩa một phép biến đổi tỷ lệ 3D theo trục X. 
div {
  transform: scaleX(1.5);
}
scaleY scaleY(y) Định nghĩa một phép biến đổi tỷ lệ 3D theo trục Y. 
div {
  transform: scaleY(2);
}
scaleZ scaleZ(z) Định nghĩa một phép biến đổi tỷ lệ 3D theo trục Z. 
div {
  transform: scaleZ(0.5);
}
rotate3d rotate3d(x, y, z, angle) Định nghĩa một phép xoay 3D. 
div {
  transform: rotate3d(1, 1, 1, 45deg);
}
rotateX rotateX(angle) Định nghĩa một phép xoay 3D dọc theo trục X. 
div {
  transform: rotateX(45deg);
}
rotateY rotateY(angle) Định nghĩa một phép xoay 3D dọc theo trục Y. 
div {
  transform: rotateY(45deg);
}
rotateZ rotateZ(angle) Định nghĩa một phép xoay 3D dọc theo trục Z. 
div {
  transform: rotateZ(45deg);
}
perspective perspective(n) Định nghĩa khoảng cách giữa người xem và mặt phẳng z=0 của phần tử. 
div {
  perspective: 500px;
}

51. (CSS Nâng Cao) CSS Transitions - Chuyển thuộc tính CSS Này => 1 CSS khác cùng loại sẽ thực hiện trong 1 khoản thời gian và cách chuyển đổi


Thuộc tính Các giá trị của thuộc tính Giải thích Code mẫu Thông tin
transition
  • <property> <duration> <timing-function> <delay>
 Thiết lập hiệu ứng chuyển đổi cho một hoặc nhiều thuộc tính. 
div {
          transition: all 0.5s ease-in-out;
      }
 Thuộc tính ở đây là bất kỳ thuộc tính nào của css: như width , height, color, background.......
transition-delay
  • <time>
 Xác định khoảng thời gian chờ trước khi bắt đầu hiệu ứng chuyển đổi. 
div {
          transition-delay: 1s;
      }
transition-duration
  • <time>
 Xác định thời gian kéo dài của hiệu ứng chuyển đổi. 
div {
          transition-duration: 2s;
      }
transition-property
  • <property>
  • all
 Xác định thuộc tính CSS nào sẽ có hiệu ứng chuyển đổi. 
div {
          transition-property: opacity;
      }
transition-timing-function
  • linear
  • ease
  • ease-in
  • ease-out
  • ease-in-out
  • step-start
  • step-end
  • steps(<integer>[, <start|end>])
  • cubic-bezier(<x1>, <y1>, <x2>, <y2>)
 Xác định tốc độ của hiệu ứng chuyển đổi. 
div {
          transition-timing-function: ease-in-out;
      }
 

          .box {
            width: 100px;
            height: 100px;
            background-color: #4CAF50;
            transition: background-color 2s ease-in-out, transform 1s;   (transition sẽ thực hiện 2 thuộc tính là background-color và transform)
        }
        
        .box:hover {
            background-color: #ff6347;
            transform: rotate(45deg);
        }
    .box:
  • width: Chiều rộng của phần tử là 100px.
  • height: Chiều cao của phần tử là 100px.
  • background-color: Màu nền ban đầu của phần tử là màu xanh lá cây (#4CAF50).
  • transition: Định nghĩa các thuộc tính CSS sẽ có hiệu ứng chuyển đổi khi thay đổi
    • background-color 2s ease-in-out: Chuyển đổi màu nền trong 2 giây với hiệu ứng "ease-in-out".
    • transform 1s: Chuyển đổi thuộc tính transform trong 1 giây.
    .box:hover (Khi người dùng di chuột vào phần tử .box, các thuộc tính sau sẽ thay đổi)
  • background-color: Màu nền thay đổi thành màu cam (#ff6347).
  • transform: Phần tử sẽ xoay 45 độ.

52. (CSS Nâng Cao) CSS Animations - cho phép các nhà phát triển web tạo ra các hiệu ứng chuyển động mượt mà

  • CSS Animation lmột công nghệ trong CSS (Cascading Style Sheets) cho phép các nhà phát triển web tạo ra các hiệu ứng chuyển động mượt mà và phức tạp trên các trang web mà không cần sử dụng JavaScript. CSS Animation cung cấp một phương pháp dễ dàng và hiệu quả để thay đổi các thuộc tính của các phần tử HTML theo thời gian, giúp cải thiện trải nghiệm người dùng. 
                 B1: Ví dụ ta tạo 1 Animation theo kiểu from + t0 hoặc 25% + 50% + 75% + 100% (trong từng khoản sẽ thực hiện việc gì đó) = @keyframes

            B2:  Sau đó thực thi Animation bằng các thuộc tính:
               - animation-name: Đặt tên cho hoạt ảnh, liên kết với các @keyframes đã định nghĩa.
               - animation-duration: Định nghĩa thời gian hoàn thành một chu kỳ của hoạt ảnh.
               - animation-timing-function: Định nghĩa tốc độ của hoạt ảnh (vd: ease, linear, ease-in, ease-out, cubic-bezier).
               - animation-delay: Định nghĩa thời gian chờ trước khi bắt đầu hoạt ảnh.
               - animation-iteration-count: Định nghĩa số lần lặp lại của hoạt ảnh (vd: infinite để lặp vô hạn).
               - animation-direction: Định nghĩa hướng của hoạt ảnh (vd: normal, reverse, alternate, alternate-reverse).
               - animation-fill-mode: Định nghĩa trạng thái của phần tử khi hoạt ảnh không phát (vd: none, forwards, backwards, both).
               - animation-play-state: Định nghĩa trạng thái hoạt ảnh (vd: running, paused).

Thuộc tính Các giá trị của thuộc tính Giải thích Code mẫu Thông tin
@keyframes N/A Định nghĩa mã của hoạt ảnh. 
@keyframes example {
        from {background-color: #4CAF50;}
        to {background-color: #ff6347;}
    }
@keyframes example {
      0%   {background-color: red;}
      25%  {background-color: yellow;}
      50%  {background-color: blue;}
      100% {background-color: green;}
    }
    
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
  }
animation animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state Thuộc tính viết tắt cho việc thiết lập tất cả các thuộc tính hoạt ảnh. 
div {
        animation: example 2s ease-in-out;
    }
animation-delay time (s | ms) Chỉ định một khoảng thời gian trì hoãn cho hoạt ảnh bắt đầu. 
div:hover {
        animation-delay: 2s;
    }
animation-direction normal | reverse | alternate | alternate-reverse Chỉ định liệu hoạt ảnh nên được phát tiến, lùi hoặc xen kẽ. 
div:hover {
        animation-direction: alternate;
    }
animation-duration time (s | ms) Chỉ định thời gian hoạt ảnh hoàn thành một chu kỳ. 
div:hover {
        animation-duration: 4s;
    }
animation-fill-mode none | forwards | backwards | both Chỉ định kiểu cho phần tử khi hoạt ảnh không phát. 
div:hover {
        animation-fill-mode: forwards;
    }

animation-iteration-count number | infinite Chỉ định số lần hoạt ảnh nên được phát. 
div:hover {
        animation-iteration-count: 3;
    }
animation-name keyframes-name Chỉ định tên của hoạt ảnh @keyframes. 
div:hover {
        animation-name: example;
    }
animation-play-state running | paused Chỉ định liệu hoạt ảnh đang chạy hoặc tạm dừng. 
div:hover {
        animation-play-state: paused;
    }

animation-timing-function ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int, start | end) | cubic-bezier(n, n, n, n) Chỉ định đường cong tốc độ của hoạt ảnh. 
div:hover {
        animation-timing-function: linear;
    }
 

            .animated-box {
              width: 100px;
              height: 100px;
              background-color: red;
              animation-name: example;
              animation-duration: 4s;
              animation-timing-function: ease-in-out;
              animation-delay: 1s;
              animation-iteration-count: infinite;
              animation-direction: alternate;
              animation-fill-mode: forwards;
          }
          
          @keyframes example {
              0% { background-color: red; }
              50% { background-color: yellow; }
              100% { background-color: green; }
          }
    @keyframes example:
  • Định nghĩa các trạng thái của hoạt ảnh từ màu đỏ (0%) đến màu vàng (50%) và cuối cùng đến màu xanh lá cây (100%).
    .animated-box:
  • animation-name: example;: Liên kết hoạt ảnh với các @keyframes được đặt tên "example".
  • animation-duration: 4s;: Hoạt ảnh sẽ hoàn thành một chu kỳ trong 4 giây.
  • animation-timing-function: ease-in-out;: Hoạt ảnh sẽ bắt đầu chậm, tăng tốc ở giữa và chậm lại khi kết thúc.
  • animation-delay: 1s;: Hoạt ảnh sẽ bắt đầu sau 1 giây.
  • animation-iteration-count: infinite;: Hoạt ảnh sẽ lặp lại vô hạn.
  • animation-direction: alternate;: Hoạt ảnh sẽ phát tiến và lùi xen kẽ.
  • animation-fill-mode: forwards;: Phần tử sẽ giữ nguyên trạng thái cuối cùng của hoạt ảnh khi kết thúc.

53. (CSS Nâng Cao) CSS Tooltip - Tạo 1 chữ hiển lên khi ta hover vô 1 object

  • Tooltip là một phần tử nhỏ, thường xuất hiện khi người dùng di chuột hoặc nhấn vào một phần tử khác. Nó cung cấp thông tin bổ sung hoặc mô tả ngắn gọn về phần tử mà người dùng đang tương tác. Tooltip thường được sử dụng để cung cấp thông tin hữu ích mà không làm gián đoạn trải nghiệm người dùng.

            HTML:
            <div class="tooltip">
                         Di chuột vào đây
                   <span class="tooltiptext">Đây là nội dung của tooltip!</span>
            </div>
            <ul>
                      <li>Thẻ div với lớp .tooltip chứa văn bản "Di chuột vào đây".</li>
                      <li>Bên trong .tooltip, có một thẻ span với lớp .tooltiptext chứa nội dung tooltip ("Đây là nội dung của tooltip!").</li>
            </ul>
  • Thẻ div với lớp .tooltip chứa văn bản "Di chuột vào đây".
  • Bên trong .tooltip, có một thẻ span với lớp .tooltiptext chứa nội dung tooltip ("Đây là nội dung của tooltip!").

            CSS:
            .tooltip {
              position: relative;
              display: inline-block;
              border-bottom: 1px dotted black; /* Tùy chọn - gạch dưới văn bản tooltip */
              cursor: help; /* Tùy chọn - thay đổi con trỏ thành dấu hỏi */
            }
            
            .tooltip .tooltiptext {
              visibility: hidden;
              width: 120px;
              background-color: #555;
              color: #fff;
              text-align: center;
              border-radius: 6px;
              padding: 5px;
              position: absolute;
              z-index: 1;
              bottom: 125%;
              left: 50%;
              margin-left: -60px;
              opacity: 0;
              transition: opacity 0.3s;
            }
            
            .tooltip:hover .tooltiptext {
              visibility: visible;
              opacity: 1;
            }
  • .tooltip được đặt position: relative để cho phép định vị tooltip.
  • .tooltiptext ban đầu bị ẩn (visibility: hidden) và được định vị tuyệt đối so với phần tử cha .tooltip.
  • Khi di chuột (:hover) vào .tooltip, .tooltiptext sẽ hiển thị (visibility: visible) và dần dần xuất hiện (opacity: 1).

54. (CSS Nâng Cao) CSS Styling Images - Tạo ảnh theo phông cách khác nhau

  • Bo Tròn Ảnh: Bằng thuộc tính border-radius

  • Hình ảnh nhỏ: thumbnail image

  • Response Image: hình ảnh theo kích thước

  • Card Image: Tạo ảnh card

  • Image Hover Overlay:Lớp phủ ảnh
    Avatar
    Hello World
            .context-image {
              width: 500px;
              height: 500px;
              position: relative;
          }
  
          .images {
              width: 100%;
          }
  
          .text-over {
              position: absolute;
              bottom: 0;
              left: 0;
              right: 0;
              background-color: #008CBA;
              overflow: hidden;
              width: 100%;
              height: 0;
              width: 100%;
              transition: height .5s ease-in-out;
  
          }
  
          .context-image:hover .text-over {
              height: 100%;
              cursor: pointer;
          }
  
          .text {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
          }

55. (CSS Nâng Cao) CSS Image Reflections - Phản chiếu ảnh bằng box-reflect

  • CSS Image Reflections - Phản chiếu ảnh bằng box-reflect

            img {
              -webkit-box-reflect: below;
            }
  • below: Quay ngược ảnh 

            img {
              -webkit-box-reflect: right;
            }
  • right: Quay ngược ảnh 

            img {
              -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
            }
  • right: Quay ngược ảnh

56. (CSS Nâng Cao) CSS The object-fit Property - Cho ảnh và video vào vừa khung bằng object-fit

  • CSS The object-fit Property - Cho ảnh và video vào vừa khung object-fit 

            .fill {object-fit: fill;}
            .contain {object-fit: contain;}
            .cover {object-fit: cover;}
            .scale-down {object-fit: scale-down;}
            .none {object-fit: none;}
  • Object-fit: fill: Hình ảnh được kéo giãn để phù hợp với cả chiều rộng và chiều cao của khung chứa, có thể bị méo.
  • Object-fit: contain: Hình ảnh được thay đổi kích thước để vừa với khung chứa mà không bị méo, nhưng có thể có khoảng trống xung quanh nếu tỷ lệ khung hình của hình ảnh không khớp với khung chứa.
  • Object-fit: cover: Hình ảnh được thay đổi kích thước để bao phủ toàn bộ khung chứa, có thể cắt bỏ một phần của hình ảnh nếu tỷ lệ khung hình không khớp với khung chứa.
  • Object-fit: none: Hình ảnh không được thay đổi kích thước và giữ nguyên kích thước gốc của nó.
  • Object-fit: scale-down: Hình ảnh sẽ được thay đổi kích thước giống như none hoặc contain, tùy thuộc vào kích thước nào nhỏ hơn.

57. (CSS Nâng Cao) CSS The object-position Property - cho phép bạn đặt vị trí của nội dung hình ảnh bên trong khung chứa.

  • CSS The object-position Property - cho phép bạn đặt vị trí của nội dung hình ảnh bên trong khung chứa. object-position 

            object-position: center;
            object-position: top left;
            object-position: bottom right;
  • object-position: center; Đưa hình ảnh ra giữa
  • object-position: top left; Hình ảnh dính ở bên trên và bên trái
  • object-position: bottom right; Hình ảnh dính ở bên dưới và phải

58. (CSS Nâng Cao) Tạo hình ảnh mặt nạ bằng mask-image

  • mask-image :sử dụng để xác định một hình ảnh mask (mặt nạ) cho một phần tử. Hình ảnh mặt nạ sẽ che phủ một phần của phần tử, tạo hiệu ứng hiển thị đặc biệt. Khi áp dụng, các phần tử bị mặt nạ che sẽ trở nên trong suốt, hiển thị nền phía sau nó

STT Thuộc Tính Giá Trị Giải Thích Thuộc Tính Code ví dụ
1 mask-image none | url() | linear-gradient() | radial-gradient() | repeating-linear-gradient() | repeating-radial-gradient() Xác định một hình ảnh được sử dụng như một lớp mặt nạ cho phần tử. 
div {
mask-image: url('image.png');
}
2 mask-mode alpha | luminance Chỉ định liệu hình ảnh lớp mặt nạ được xử lý như một mặt nạ độ sáng hoặc như một mặt nạ alpha. 
div {
mask-mode: alpha;
}
3 mask-origin border-box | content-box | padding-box Chỉ định vị trí gốc (khu vực vị trí mặt nạ) của hình ảnh lớp mặt nạ. 
div {
mask-origin: border-box;
}
4 mask-position left top | center center | right bottom | <length> | <percentage> Đặt vị trí bắt đầu của hình ảnh lớp mặt nạ (tương đối với khu vực vị trí mặt nạ). 
div {
mask-position: center;
}
5 mask-repeat repeat | no-repeat | repeat-x | repeat-y | space | round Chỉ định cách hình ảnh lớp mặt nạ được lặp lại. 
div {
mask-repeat: no-repeat;
}
6 mask-size auto | contain | cover | <length> | <percentage> Chỉ định kích thước của hình ảnh lớp mặt nạ. 
div {
mask-size: contain;
}
 
            p {
              color: red;
              text-align: center;
            }

59. (CSS Nâng Cao) CSS Style Button

  • CSS Style Button : Làm đẹp cho button

  • Button Colors: Màu sắt button 
            CSS:
                .button {
                  background-color: #04AA6D; /* Green */
                  border: none;
                  color: white;
                  padding: 15px 32px;
                  text-align: center;
                  text-decoration: none;
                  display: inline-block;
                  font-size: 16px;
                  margin: 4px 2px;
                  cursor: pointer;
                }
                
                .button2 {background-color: #008CBA;} /* Blue */
                .button3{background-color: #f44336;} /* Red */ 
                .button4 {background-color: #e7e7e7; color: black;} /* Gray */ 
                .button5 {background-color: #555555;} /* Black */
            
                    <button class="button">Green</button>
                <button class="button button2">Blue</button>
                <button class="button button3">Red</button>
                <button class="button button4">Gray</button>
                <button class="button button5">Black</button>
      Áp dụng 1 Element có 2 class:
    • button: Áp dụng Css của Button
    • button2: Áp dụng css của button2
  • Button Size: Kích Thước Button 
            CSS:
                .button {
                  background-color: #04AA6D; /* Green */
                  border: none;
                  color: white;
                  padding: 15px 32px;
                  text-align: center;
                  text-decoration: none;
                  display: inline-block;
                  margin: 4px 2px;
                  cursor: pointer;
                }
                
                .button1 {font-size: 10px;}
                .button2 {font-size: 12px;}
                .button3 {font-size: 16px;}
                .button4 {font-size: 20px;}
                .button5 {font-size: 24px;}
            
                    <button class="button button1">10px</button>
                <button class="button button2">12px</button>
                <button class="button button3">16px</button>
                <button class="button button4">20px</button>
                <button class="button button5">24px</button>
      Áp dụng 1 Element có 2 class:
    • button: Áp dụng Css của Button
    • button2: Áp dụng css của button2
  • Bo Tròn Button 
            CSS:
                  .button {
                    background-color: #04AA6D; /* Green */
                    border: none;
                    color: white;
                    padding: 20px;
                    text-align: center;
                    text-decoration: none;
                    display: inline-block;
                    font-size: 16px;
                    margin: 4px 2px;
                    cursor: pointer;
                  }
                  
                  .button1 {border-radius: 2px;}
                  .button2 {border-radius: 4px;}
                  .button3 {border-radius: 8px;}
                  .button4 {border-radius: 12px;}
                  .button5 {border-radius: 50%;}
            
                    <button class="button button1">2px</button>
                <button class="button button2">4px</button>
                <button class="button button3">8px</button>
                <button class="button button4">12px</button>
                <button class="button button5">50%</button>
      Áp dụng 1 Element có 2 class:
    • button: Áp dụng Css của Button
    • button2: Áp dụng css của button2
  • Animation Button 
            CSS:
                  .button-animation {
                    position: relative;
                    background-color: #04AA6D;
                    border: none;
                    font-size: 28px;
                    color: #FFFFFF;
                    padding: 20px;
                    width: 200px;
                    text-align: center;
                    transition-duration: 0.4s;
                    text-decoration: none;
                    overflow: hidden;
                    cursor: pointer;
                  }
                  
                  .button-animation:after {
                    content: "";
                    background: #f1f1f1;
                    display: block;
                    position: absolute;
                    padding-top: 300%;
                    padding-left: 350%;
                    margin-left: -20px !important;
                    margin-top: -120%;
                    opacity: 0;
                    transition: all 0.8s
                  }
                  
                  .button-animation:active:after {
                    padding: 0;
                    margin: 0;
                    opacity: 1;
                    transition: 0s
                  }
            
                    <button class="button-animation">Click Me</button>
      Áp dụng 1 Element có 2 class:
    • button: Áp dụng Css của Button
    • button2: Áp dụng css của button2
  • Khoá và Mở Button 
            CSS:
                  .button {
                    background-color: #04AA6D; /* Green */
                    border: none;
                    color: white;
                    padding: 15px 32px;
                    text-align: center;
                    text-decoration: none;
                    display: inline-block;
                    font-size: 16px;
                    margin: 4px 2px;
                    cursor: pointer;
                  }
                  
                  .disabled {
                    opacity: 0.6;
                    cursor: not-allowed;
                  }
            
                    <button class="button">Normal Button</button>
                <button class="button disabled">Disabled Button</button>
      Áp dụng 1 Element có 2 class:
    • button: Áp dụng Css của Button
    • button2: Áp dụng css của button2
  • Ngoài ra có thể tham khảo thêm link sau

60. (CSS Nâng Cao) CSS Pagination - Phân Trang

  • CSS Pagination - Phân Trang

Demo:

Trước 1 2 3 4 .... Sau 
            <div class="pagination">
                  <a href="#">&laquo;</a>
                  <a href="#">1</a>
                  <a href="#">2</a>
                  <a href="#">3</a>
                  <a href="#">4</a>
                  <a href="#">5</a>
                  <a href="#">6</a>
                  <a href="#">&raquo;</a>
            </div>         
        
            .pagination {
              display: inline-block;
            }
            
            .pagination a {
              color: black;
              float: left;
              padding: 8px 16px;
              text-decoration: none;
            }
            
            .pagination a.active {
              background-color: #4CAF50;
              color: white;
            }
            
            .pagination a:hover:not(.active) {background-color: #ddd;}
  • .pagination: Class định nghĩa các thuộc tính a inline-block
  • .pagination a: Class định nghĩa thẻ a
  • .pagination a.active: Class nút nào active
  • .pagination a:hover: Nút vào hover vô thì đổi màu
            .pagination a {
              border-radius: 5px;
            }
            
            .pagination a.active {
              border-radius: 5px;
            }
            .pagination a {
              transition: background-color .3s;
            }
            .pagination a {
              border: 1px solid #ddd; /* Gray */
            }
            .pagination a {
              margin: 0 4px; /* 0 is for top and bottom. Feel free to change it */
            }
            .pagination a {
              font-size: 22px;
            }
            .center {
              text-align: center;
            }
  • border-radius: 5px; Thêm viền bo tròn cho nút
  • transition: background-color .3s; Thêm hiệu ứng khi chuyển background
  • border: 1px solid #ddd; /* Gray */ Thêm border cho nút
  • margin: 0 4px; cho khoản trắng ở giữa
  • font-size: 22px; Thêm kích thước font-size
  • text-align: center; Chữ căn giữa

Demo: Phân Trang Theo Kiểu Đường Dẫn


            .content-paginglink {
              display: inline-block;
              padding: 8px 16px;
              background-color: #4CAF50;
  
            }
  
            .content-paginglink ul {
              list-style-type: none;
            }
  
            .content-paginglink ul li {
              float: left;
              color: #e7e7e7;
            }
  
            .content-paginglink ul li::before {
              padding: 8px;
              color: black;
              content: "/\00a0";
              font-weight: bold;
            }
  
            .content-paginglink ul li a:hover {
              color: #f44336;
            }
  
            .content-paginglink ul li a {
              text-decoration: none;
              color: yellow;
            }
        
            <div class="content-paginglink">
                      <ul>
                        <li><a href="#" target="_blank">Home</a></li>
                        <li><a href="#" target="_blank">Library</a></li>
                        <li><a href="#" target="_blank">Data</a></li>
                        <li>CSS</li>
                      </ul>
            </div>
          <div class="clear-float"></div>

61. (CSS Nâng Cao) CSS Multiple Columns - Cho phép bạn chia nội dung của một phần tử HTML thành nhiều cột

  • CSS Multiple Columns: Cho phép bạn chia nội dung của một phần tử HTML thành nhiều cột

STT Thuộc Tính Giá Trị Giải Thích Thuộc Tính Code ví dụ
1 column-count Chỉ định số cột mà nội dung nên được chia thành. 
div {
column-count: 3;
}
2 column-gap | normal Chỉ định khoảng cách giữa các cột. 
div {
column-gap: 20px;
}
3 column-rule <'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'> Chỉ định quy tắc giữa các cột. 
div {
column-rule: 2px solid #000;
}
4 column-width Chỉ định độ rộng tối thiểu của mỗi cột. 
div {
column-width: 200px;
}
5 columns <'column-width'> || <'column-count'> Thiết lập cả số cột và độ rộng cột trong một khai báo. 
div {
columns: 200px 3;
}
6 column-span all | none Chỉ định liệu một phần tử nên trải dài trên nhiều cột hay không. 
h1 {
column-span: all;
}
7 column-fill auto | balance Chỉ định cách nội dung nên được cân bằng giữa các cột. 
div {
column-fill: balance;
}

62. (CSS Nâng Cao) CSS User Interface - 2 Thuộc tính size and outline-offset giúp Cho phép thay đổi kích thước của một phần tử. dung

  • CSS User Interface - 2 Thuộc tính size and outline-offset giúp căn chỉ text trong nội

  • resize: 
                  Giá trị: none | both | horizontal | vertical
              Giải Thích Thuộc Tính: Cho phép thay đổi kích thước của một phần tử.
            
                    div {
                  resize: none | both | horizontal | vertical;
                        - none: không xử lý
                        - both: Kéo rộng đc cả ngang và dọc
                        - horizontal: Kéo rộng đc chiều ngang
                        - vertical: Kéo rộng đc theo chiều dọc
                  overflow: auto;
              }
  • outline-offset: 
                  Giá trị: px;
              Giải Thích Thuộc Tính: Xác định khoảng cách giữa đường viền ngoài và biên của phần tử.
            
                    div {
                  outline: 2px solid red;
                  outline-offset: 10px;
              }
STT Thuộc Tính Giá Trị Giải Thích Thuộc Tính Code ví dụ Kết quả
1 resize none | both | horizontal | vertical Cho phép thay đổi kích thước của một phần tử. 
div {
  resize: both;
  overflow: auto;
}
Bạn có thể thay đổi kích thước phần tử này.
2 outline-offset Xác định khoảng cách giữa đường viền ngoài và biên của phần tử. 
div {
  outline: 2px solid red;
  outline-offset: 10px;
}
Đường viền ngoài cách biên của phần tử 10px.

63. (CSS Nâng Cao) CSS Variables - Tạo biến CSS và Sử dụng biến CSS --tenbien + var(--tenbien)


64. (CSS Nâng Cao) box-sizing thay đổi cách tính toán kích thước của các phần tử (element) trong trang web 


          .content-box {
            box-sizing: content-box;
            width: 200px;
            padding: 20px;
            border: 10px solid black;
        }

        .border-box {
            box-sizing: border-box;
            width: 200px;
            padding: 20px;
            border: 10px solid black;
        }

65. (CSS Nâng Cao) @media responsive web design 


          @media media-type and (condition) {
            /* CSS rules */
        }
  • Nghĩa là khi màn hình đạt đến điều kiện condition thì CSS bên trong sẽ được thực thi 
           => /* Áp dụng kiểu khi chiều rộng viewport lớn hơn 600px và chiều cao lớn hơn 400px */
                  @media screen and (min-width: 600px) and (min-height: 400px) {
                      body {
                          background-color: lightcoral;
                      }
                  }
           =>/* Áp dụng kiểu khi chiều rộng viewport lớn hơn 600px hoặc chiều cao lớn hơn 400px */      
                  @media screen and (min-width: 600px), screen and (min-height: 400px) {
                      body {
                          background-color: lightyellow;
                      }
                  }
         =>/* Áp dụng kiểu khi thiết bị không phải là màn hình */      
                  @media not screen {
                      body {
                          font-size: 16px;
                      }
                  }
  • Nghĩa là khi màn hình đạt đến điều kiện condition thì CSS bên trong sẽ được thực thi 
           => /* Với mỗi kích thước khác nhau thì sẽ add file CSS tương ứng href */
           <link rel="stylesheet" media="print" href="print.css">
           <link rel="stylesheet" media="screen" href="screen.css">
           <link rel="stylesheet" media="screen and (min-width: 480px)" href="example1.css">
           <link rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)" href="example2.css">
STT Thuộc Tính Giá Trị Giải Thích Thuộc Tính Code ví dụ
1 orientation landscape, portrait Xác định hướng của màn hình. Chế độ ngang (landscape) hoặc dọc (portrait). 
@media (orientation: landscape) {
/* CSS cho chế độ ngang */
}
@media (orientation: portrait) {
/* CSS cho chế độ dọc */
}
2 max-height px, em, rem, % Chiều cao tối đa của màn hình hiển thị. 
@media (max-height: 800px) {
/* CSS cho màn hình có chiều cao tối đa 800px */
}
3 min-height px, em, rem, % Chiều cao tối thiểu của màn hình hiển thị. 
@media (min-height: 400px) {
/* CSS cho màn hình có chiều cao tối thiểu 400px */
}
4 height px, em, rem, % Chiều cao của màn hình hiển thị (bao gồm cả thanh cuộn). 
@media (height: 600px) {
/* CSS cho màn hình có chiều cao 600px */
}
5 max-width px, em, rem, % Chiều rộng tối đa của màn hình hiển thị. 
@media (max-width: 1200px) {
/* CSS cho màn hình có chiều rộng tối đa 1200px */
}
6 min-width px, em, rem, % Chiều rộng tối thiểu của màn hình hiển thị. 
@media (min-width: 600px) {
/* CSS cho màn hình có chiều rộng tối thiểu 600px */
}
7 width px, em, rem, % Chiều rộng của màn hình hiển thị (bao gồm cả thanh cuộn). 
@media (width: 800px) {
/* CSS cho màn hình có chiều rộng 800px */
}

66. (CSS Nâng Cao) CSS Flex


67. (CSS Nâng Cao) Responsive


68. (CSS Nâng Cao) CSS Gird tạo ra các bố cục web phức tạp = Giống như thiết kế table


Gird Container (Thẻ Cha):

Gird Item (Thẻ Con):

STT Thuộc Tính Giá Trị Giải Thích Thuộc Tính Code ví dụ
1 grid-column-start 1 / 2 / 3 / ... Xác định bắt đầu cột của phần tử lưới. 
.grid-item {
  grid-column-start: 2;
}
2 grid-column-end 1 / 2 / 3 / ... Xác định kết thúc cột của phần tử lưới. 
.grid-item {
  grid-column-end: 4;
}
3 grid-row-start 1 / 2 / 3 / ... Xác định bắt đầu hàng của phần tử lưới. 
.grid-item {
  grid-row-start: 1;
}
4 grid-row-end 1 / 2 / 3 / ... Xác định kết thúc hàng của phần tử lưới. 
.grid-item {
  grid-row-end: 3;
}
5 grid-column start / end Thiết lập giá trị cho cả grid-column-start và grid-column-end. 
.grid-item {
  grid-column: 1 / 3;
}
6 grid-row start / end Thiết lập giá trị cho cả grid-row-start và grid-row-end. 
.grid-item {
  grid-row: 2 / 4;
}
7 grid-area row-start / column-start / row-end / column-end Thiết lập vị trí của phần tử lưới theo khu vực. 
.grid-item {
  grid-area: 1 / 2 / 3 / 4;
}
Header: grid-column: 1/5;
Menu: grid-row: 2/5;
Main: grid-column-start: 2; grid-column-end: 4;
Right
Footer: grid-column-start: 2; grid-column-end: 5;
          .bg-blue {
            background-color: rgb(218, 234, 251) !important;
          }
  
          .gird-contenerweb {
            display: grid;
            grid-template-columns: auto auto auto auto;
            grid-template-rows: 100px 100px 100px;
            background-color: #008CBA;
            gap: 10px 5px;
            border: solid 1px black;
          }
  
          .gird-contenerweb>div {
            border: solid 2px darkred;
            text-align: center;
            justify-content: center;
            margin: 5px;
            padding: 50px;
          }
  
          .item1 {
            grid-column: 1/5;
          }
  
          .item2 {
            grid-row: 2/5;
          }
  
          .item3 {
            grid-column-start: 2;
            grid-column-end: 4;
          }
  
          .item5 {
            grid-column-start: 2;
            grid-column-end: 5;
          }



          --------------HTML-------------------
          <div class="gird-contenerweb bg-blue mt">
              <div class="item1">Header: grid-column: 1/5;</div>
              <div class="item2">Menu: grid-row: 2/5;</div>
              <div class="item3">Main: grid-column-start: 2;
                grid-column-end: 4;</div>
              <div class="item4">Right</div>
              <div class="item5">Footer: grid-column-start: 2;
                grid-column-end: 5;</div>
      </div>