Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Thuộc tính Content trong CSS

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi anhtuan1006, 2/8/16.

Lượt xem: 2,018

  1. anhtuan1006 Thành viên cấp 2

    Chào các bạn, hôm nay mình lại có vấn đề này muốn mọi người giải đáp giúp.
    Mình có đọc ở trên mạng thấy người ta hay viết thuộc tính Content:' ' và nó hay được đi kèm với thuộc tính before after, nhưng mình không hiểu ý nghĩa của cách viết đó nhằm mục đích gì ?

    Bạn nào biết xin vui lòng giảng qua cho mình chút được không. Mình xin cám ơn !

    ...
  2. Nighter

    Nighter Thành viên cấp 3

    content là nội dung
    nó hay kèm after hoặc before để chèn 1 đoạn nội dung vào trước hoặc sau của đối tượng
    vd bạn có html:
    <p>con gà</p>
    bạn css cho nó:
    p:before{content:'hiểu chưa'}
    kết quả hiển thị sẽ là
    hiểu chưa con gà
    :D:D:D
    anhtuan1006 thích bài viết này
  3. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    Nighter bạn vui tính thiệt ^^

    Nhưng ý mình hỏi là kiểu viết thế này cơ content: ' ' ở cả before và after đều viết như vậy. Hổng lẻ để chèn thêm kí tự trống vào trước với sau nó à.... mà làm như vậy thì đâu cần viết làm gì cho mắc công.
  4. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    Bạn nào có thể giải thích cho mình cái này được không ...
  5. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    @Tư Xả Láng , bạn ơi .............
  6. Tư Xả Láng

    Tư Xả Láng Thành viên cấp 2

    Chưa ai giải đáp cho bạn à!. Bạn thấy trường hợp nầy ở đâu?, cho mình xem tham khảo thêm. Thực ra mình cũng chưa hiểu rỏ về trường hợp như bạn nói, tuy nhiên, theo mình hiểu mập mờ là người ta dùng linh động content:' '; trong nhiều trường hợp. Mình có thể dẫn ra cho bạn một thí dụ sau đây mà mình biết:

    Bây giờ bạn thử dùng HTML và CSS để layout một cấu trúc như bên dưới:

    BregqBW.png

    <html>
    <head>
    <meta charset="utf-8"/>
    <style>
    div {
    color: #FFFFFF;
    padding-top: 20px;
    }

    div.thanh-phan-a {
    background: none repeat scroll 0 0 #FFBF00;
    float: left;
    height: 100px;
    text-align: center;
    width: 200px;
    }

    div.thanh-phan-b {
    background: none repeat scroll 0 0 #FF00FF;
    float: right;
    height: 100px;
    text-align: center;
    width: 200px;
    }

    div.thanh-phan-c {
    background: none repeat scroll 0 0 #D7DF01;
    height: 100px;
    margin-top: 50px;
    text-align: center;
    }
    </style>
    </head>

    <body>
    <div>
    <div class="thanh-phan-a">Thành phần A.</div>
    <div class="thanh-phan-b">Thành phần B.</div>
    </div>
    <div class="thanh-phan-c">Thành phần C.</div>
    </body>
    </html>


    Phần html và css ở trên coi như tạm ổn. Tuy nhiên khi hiển thị trên trình duyệt thì nó không như ta mong muốn. Nó có dạng như vầy:

    URx34VG.png

    Giải thích: Do thành phần A và thành phần B có sử dụng float nên nếu còn vùng không gian trống, thành phần C sẽ lập tức chiếm chỗ, chính vì vậy mà ta có giao diện như trên.

    Bây giờ ta ngăn chặn, không cho thành phần C nhảy lên chiếm vùng không gian của 2 thành phần float ở trên bằng cách thêm thuộc tính clear: both; cho thành phần C.

    div.thanh-phan-c {
    background: none repeat scroll 0 0 #D7DF01;
    clear: both;
    height: 100px;
    margin-top: 50px;
    text-align: center;
    }


    Bây giờ thì thành phần C không nhảy lên chiếm vùng không gian của 2 thành phần float ở trên, tuy nhiên thành phần C vẫn còn ảnh hưởng bởi thuộc tính float, bằng chứng là chúng ta sẽ không thể sử dụng padding hoặc margin như ý muốn được.

    8gua08w.png

    Rắc rối nhỉ.!?. Bây giờ làm sao đây.!?, hay ta thử giải quyết vấn đề bằng cách thêm một thành phần tạm nằm bên dưới thành phần sử dụng float, mục đích là kéo trả lại vùng không gian cho thành phần sử dụng float. Trong trường hợp nầy , ta phải nhờ đến content: ' '; .
    Ta thêm vào css code bên dưới:

    div.bao-bao-ngoai-a_b:after {
    clear: both;
    content: ' ';
    display: block;
    }

    Sửa lại phần html:

    <div>
    <div class="thanh-phan-a">Thành phần A.</div>
    <div class="thanh-phan-b">Thành phần B.</div>
    </div>

    ...thành:

    <div class="bao-bao-ngoai-a_b">
    <div class="thanh-phan-a">Thành phần A.</div>
    <div class="thanh-phan-b">Thành phần B.</div>
    </div>


    Rồi bây giờ thì nó hiển thị đúng như ta mong muốn rồi đấy.

    BregqBW.png
    anhtuan1006 thích bài viết này
  7. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    Cảm ơn @Tư Xả Láng nhiều nha....

    Đọc ví dụ của bạn mình cũng vỡ vỡ ra được một chút ( hehe vì trình mình còn yếu quá ^.^)

    Để mình đọc thêm về cái content này đã , có gì khúc mắc mình sẽ hỏi bài bạn sau

    Mà sao mình không Tag được tên bạn nữa nhỉ ...
  8. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    @Tư Xả Láng ơi, lại phiền bạn chút đây, bạn có thể giải thích giúp mình cái content: ' '

    trong đoạn code dưới đây với nha:

    HTML:
    <body>
    <div class="box"></div>
    </body>


    CSS:
    .box {
    width: 200px; height: 200px;
    background: #e3e3e3;
    position: relative;

    border: 10px solid green;
    }

    /* Create two boxes with the same width of the container */
    .box:after, .box:before {
    content: ' ';
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    }

    .box:after {
    border: 5px solid red;
    outline: 5px solid yellow;
    }

    .box:before {
    border: 10px solid blue;
    }
    -------------------------------------------------------------------------------------------------------------------
    Kết quả thu được là cái hình này:

    [​IMG]
  9. luckeylog

    luckeylog Mới đăng kí

    hiểu đơn giản là content là thuộc tính bắt buộc khi sử dụng :before và :after. Khi sử dụng :before và :after nếu không có dòng content thì cái :before và :after đó ko hiện ra. nếu ko có nội dung thì sử dụng content: ''; còn có nội dung gì thì cho vào trong cặp dấu '' đó. - theo việc sử dụng trước giờ thì mình biết vại! ^_^
    anhtuan1006 thích bài viết này
  10. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    Cảm ơn bạn luckeylog ...

    Bạn nào biết thì có thể giải thích thêm kĩ kĩ tí, giúp mình với được không ....
  11. luckeylog

    luckeylog Mới đăng kí

    Vẫn ko hiểu ta, nghĩ nó cũng đơn giản thôi bác à, đừng nghĩ chi phức tạp.
    mỗi thẻ <div>, p, a, ... đều có 2 thành phần :before và :after mà mặc định 2 thành phần này không xuất hiện, nó cũng có thể được coi như một thẻ div bình thường và dùng css để style nó như một thẻ div vậy. Nhưng khi dùng css để style cho nó thì bắt buộc phải có thuộc tính content: '';

    vd: <div>Center</div>
    nếu css như vầy:
    div:before { content: 'Left'; ... }
    div:after { content: 'Right'; ... }
    => Thì nó sẽ ra như thế này: Left Center Right

    còn nếu css thế này:
    div:before { content: ''; ... }
    div:after {content: 'Right'; ... }
    => Thì nó sẽ ra như thế này: Center Right (content: ''; có nghĩa là nội dung = rỗng nên ko hiện ra.)

    ... là các style khác như: color: red; v.v.. đc ko bác!
    anhtuan1006 thích bài viết này

Ủng hộ diễn đàn