Hướng dẫn content css là gì

Question

Trang chủ
Tham khảo
CSS
Thuộc tính content

Nội dung chính Show

Định nghĩa và sử dụng
Cấu trúc
Trình duyệt hỗ trợ
1- Tổng quan
2- min-content
3- max-content
4- fit-content

Định nghĩa và sử dụng

Thuộc tính content sử dụng kèm với bộ chọn :before, :after để chèn nội dung được tạo.

Cấu trúc

tag {
    content: giá trị;
}

Với giá trị như sau:

Thuộc tính	giá trị	Ví dụ	Mô tả
content	Nội dung	content: "thêm text";	Nội dung trong dấu ngoặc sẽ được thêm vào thành phần.
attr(x)	content: attr(alt);	Nội dung của thuộc tính html sẽ được thêm vào nội dung thành phần.
close-quote	content: close-quote;	Thêm dấu ngoặc đóng vào thành phần.
open-quote	content: open-quote;	Thêm dấu ngoặc mở vào thành phần.
no-close-quote	content: no-close-quote;	bỏ dấu ngoặc đóng của thành phần.
no-open-quote	content: no-open-quote;	bỏ dấu ngoặc mở của thành phần.
inherit	content: inherit;	Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

Chú ý: Hai thuộc thính close-quote và open-quote phải được dùng chung nhau, không thể thiếu một trong hai.

HTML viết:

<html>
<head></head>
<body>
<p>HỌC WEB CHUẨN</p>
</body>
</html>

Hiển thị trình duyệt khi chưa có CSS:

CSS viết:

p:after {
    content: ": kiến thức nhỏ cho web hiện đại.";
}

Hiển thị trình duyệt khi có CSS:

Trình duyệt hỗ trợ

Thuộc tính content được hỗ trợ trong đa số các trình duyệt.

Trình duyệt Internet Explorer, chỉ IE8 hỗ trợ tuy nhiên đòi hỏi phải có !Doctype

Thuộc tính content trong CSS thường được sử dụng cùng với 2 ghost element là after và before, những giá trị nào có thể đưa vào cho thuộc tính content này

<div 
  data-done="&#x2705;"
  class="email">
    
</div>

.email::before {
  /* Chèn trước thẻ div giá trị của data-done + Email: */
  content: attr(data-done) " Email: "; 
}

Không phải giá trị nào đưa vào content này cũng hợp lệ

/* Được */
::after {
  content: "1";
}

/* Không được */
::after {
  content: 1;
}

Không thể tính toán gì đâu, nó chỉ là string thôi

<div data-price="4" data-sale-modifier="0.9">Coffee</div>

/* Méo chạy */
div::after {
  content: " $" 
    calc(attr(data-price) * attr(data-sale-modifier));
}
/* Nope */
::after {
  content: calc(2 + 2);
}

Muốn nối chuỗi ư?

/* Không chạy đâu, không phải javascript hay php */
::after {
  content: "1" . "2" . "3";
  content: "1" + "2" + "3";

  /* Dùng bình thường thế này thôi */
  content: "1" "2" "3";
  content: "1 2 3";
}

Đường dẫn hình thì được, mà không cho thay đổi kích thước hình ¯_(ツ)_/

p:before {
  content: url(image.jpg);
}

TopDev via Vuilaptrinh

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới.

Facebook

1- Tổng quan

Trong CSS có một số từ khóa đại diện cho các giá trị của kích thước (chiều rộng, hoặc chiều cao) của phần tử. Trong bài viết này tôi sẽ giải thích cách làm việc của chúng.

min-content
max-content
fit-content
stretch

Example


width: max-content;
width: min-content;
width: fit-content;
width: stretch;

max-width: max-content;
max-width: min-content;
max-width: fit-content;
max-width: stretch;

min-width: max-content;
min-width: min-content;
min-width: fit-content;
min-width: stretch;

height: max-content;
height: min-content;
height: fit-content;
height: stretch;

......

Chú ý: Các từ khóa trên chỉ làm việc với các phần tử khối (block element) hoặc các phần tử nội tuyến khối (inline-block element), điều này đảm bảo rằng các phần tử sẽ hiển thị dưới dạng một hình chữ nhật (Có chiều rộng và chiều cao).

2- min-content

Theo phương nằm ngang, từ khóa min-content đại diện cho giá trị nhỏ nhất của chiều rộng mà không làm nội dung của phần tử tràn ra ngoài theo phương nằm ngang.

min-content-h-example.html


<!DOCTYPE html>
<html>
   <head>
      <title>Value: min-content</title>
      <meta charset="UTF-8"/>
      <style>
         .my-element  {
            display: inline-block;
            border: 1px solid gray;
            background-color: SeaShell;
            padding: 5px;
            margin: 15px 35px 0px 0px;
         }
      </style>
   </head>
   <body>
      <h2>Horizontal 'min-content' value?</h2>
       <div class="my-element" style="width:20px;">
           This is text content of element.
       </div>
       <div class="my-element" style="width: min-content;">
           This is text content of element.
       </div> 
       <div class="my-element" style="width: 180px;">
           This is text content of element.
       </div>
   </body>
</html>

Theo phương thẳng đứng, từ khóa min-content đại diện cho giá trị nhỏ nhất của chiều cao mà không làm nội dung của phần tử tràn ra ngoài theo phương thẳng đứng.

min-content-v-example.html


<!DOCTYPE html>
<html>
   <head>
      <title>Value: min-content</title>
      <meta charset="UTF-8"/>
      <style>
         .my-element  {
            border: 1px solid gray;
            padding: 5px;
            margin-bottom: 25px;
            background-color: SeaShell;
         }
      </style>
   </head>
   <body>
      <h2>Vertical 'min-content' value?</h2>
       <div class="my-element" style="height:35px;">
           Line 1 <br/>
           Line 2 <br/>
           Some text content of the element.
       </div>
       <div class="my-element" style="height: min-content;">
           Line 1 <br/>
           Line 2 <br/>
           Some text content of the element.
       </div>
       <div class="my-element" style="height: 90px;">
           Line 1 <br/>
           Line 2 <br/>
           Some text content of the element.
       </div>
   </body>
</html>

3- max-content

max-content là một từ khóa đại diện cho một giá trị, là chiều rộng nội tại (intrinsic) ưa thích của một phần tử, hoặc chiều cao nội tại ưa thích của một phần tử.

Giá trị max-content theo phương ngang được tính toán thế nào?


width: max-content;
min-width: max-content;
max-width: max-content;

Giả sử bạn làm cho phần tử cha có chiều rộng vô hạn (Hoặc rất lớn), và làm cho phần tử hiện tại có chiều cao nhỏ nhất (Mà không làm nội dung của nó tràn ra ngoài theo phương thẳng đứng). Khi đó giá trị max-content chính là chiều rộng nhỏ nhất, mà không làm nội dung của nó tràn theo phương nằm ngang.

Giá trị max-content theo phương thẳng đứng được tính toán thế nào?


height: max-content;
min-height: max-content;
max-height: max-content;

Giả sử bạn làm cho phần tử cha có chiều cao vô hạn (Hoặc rất lớn), và làm cho phần tử hiện tại có chiều rộng nhỏ nhất (Mà không làm nội dung của nó tràn ra ngoài theo phương ngang). Khi đó giá trị max-content chính là chiều cao nhỏ nhất, mà không làm nội dung của nó tràn theo phương thẳng đứng.

4- fit-content

Theo mặc định các phần tử viết nội dung của nó theo: "phương ngang, từ trên xuống dưới" (Horizontal, Top to Bottom) - CSS {writing-mode:horizontal-tb}. Trong trường hợp này, từ khóa fit-content chỉ có ý nghĩa theo phương nằm ngang.

TODO Link?


.element  {
  width: -moz-fit-content;  /** OLD Firefox */
  width: fit-content;
}

Nếu chế độ viết (Writing mode) theo phương nằm ngang. Một phần tử được sét CSS {width: fit-content} có nghĩa là:

Nếu phần tử cha có thể cung cấp cho phần tử hiện tại một giá trị chiều rộng lớn hơn max-content thì fit-content = max-content.
Nếu phần tử cha không thể cung cấp cho phần tử hiện tại một giá trị chiều rộng lớn hơn min-content thì fit-content = min-content.
Nếu phần tử cha chỉ có thể cung cấp cho phần tử hiện tại một giá trị chiều rộng trong khoảng (min-content, max-content), phần tử hiện tại sẽ có chiều rộng "vừa vặn" (fit) với phần tử cha.

Từ khóa fit-content sẽ có ý nghĩa theo phương thẳng đứng nếu chế độ viết (writing mode) theo phương thẳng đứng, nghĩa là:


.element {
    writing-mode: vertical-rl | vertical-lr;
    width: fit-content;
}

programming css CSS content icon Display trong CSS After trong CSS Position HTML

Hướng dẫn content css là gì

Định nghĩa và sử dụng

Cấu trúc

HTML viết:

Hiển thị trình duyệt khi chưa có CSS:

CSS viết:

Hiển thị trình duyệt khi có CSS:

Trình duyệt hỗ trợ

1- Tổng quan

2- min-content

3- max-content

4- fit-content

Bài Viết Liên Quan

MỚI CẬP NHẬP

Xem Nhiều

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội