B6: Hoc CSS nâng cao các thẻ Div trong HTML5

Thảo luận trong 'Ngôn ngữ lập trình CSS, HTML, HTML5' bắt đầu bởi admin, 7/1/16.

  1. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,997
    Đã được thích:
    1,216
    Điểm thành tích:
    113
    Giới tính:
    Nam
    B6: Hoc CSS nâng cao các thẻ Div trong HTML5
    ​
    Thuộc tính cần lưu ý trong bài :
    • box-sizing: border-box; // thuộc tính 'box-sizing:border-box' trừ padding và margin khi tính tổng % content trong thẻ div.
    • letter-spacing: 3px; // Khoảng cách giữa các ký tự với nhau.
    • word-spacing: 3px; // Khoảng cách giữa các chữ với nhau.
    • text-indent : 100px; // Thụt vào đầy dòng đầu tiên trong đoạn văn là 100px;
    • border: 15px solid red; // tạo đường viền bao quanh thẻ div và các thẻ cần bao quanh.
    • line-height: 40px; // chiều cao giữa các dòng trong html
    • margin: 20px auto; // tạo khoảng trắng, thụt vào theo các phía trái, phải,
    • padding: 10px 20px 30px 40px;
    • text-decoration: none; // bỏ gạch dưới ở thẻ a, thẻ liên kết
    Demo Online xem tại đây : demo css nâng cao.

    Code: trong bài demo, copy cho vào file notepad lưu dưới dạng .html để chạy.
    HTML:
    <!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bài 6: Hoc CSS nâng cao các thẻ Div trong HTML5</title>
    <meta name="description" content="Bài 6: Hoc CSS nâng cao các thẻ Div trong HTML5, Bài 6: Hoc CSS nâng cao các thẻ Div trong HTML5">
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
            box-sizing: border-box; /* thuộc tính 'box-sizing:border-box' trừ padding và margin khi tính tổng % content trong thẻ div */
        }
        #content
        {
            font-family: "Times New Roman" , Times, serif;
            font-size: 30px;
            line-height: 40px;
            background-color: #CCC;
            color: black;
            height: auto;
            width: 98%;
            margin: 20px auto;
            word-spacing: 20px;
            letter-spacing: 3px;
            text-indent: 100px;
            padding: 10px 20px 30px 40px;
            border: 15px solid red; /* thuộc tính 'box-sizing:border-box' trừ padding và margin khi tính tổng % content trong thẻ div */
            box-sizing: border-box;
        }
        #content a
        {
            text-decoration: none;
        }
       
        body
        {
            background: url(images/bg-body.png) repeat-x fixed center top;
        }
        #testa
        {
            margin: 10px 20px;
        }
        #testa a
        {
            display: block;
            cursor: cell;
        }
        ul
        {
            margin-left: 30px;
            list-style-type: upper-latin;
            list-style-image: url(images/icon-ul.png);
            list-style-position: outside;
        }
    </style>
</head>
<body>
    <h1 align="center">
        Bài 6: Hoc CSS nâng cao các thẻ Div trong HTML5</h1>
    <!-- thuộc tính display thay đổi thuộc tính nằm trên 1 dòng và 2 dòng của 1 thẻ outline -->
    <div id="testa">
        <a href="https://itseovn.com">Mở diễn đàn SEO</a> <a href="https://itseovn.com">Mở diễn
            đàn cndd</a>
    </div>
    <a href="https://itseovn.com">Mở diễn đàn SEO</a> <a href="https://itseovn.com">Mở diễn
        đàn cndd</a>
    <br>
    <br>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS
            <br>
            (Javascript)</li>
    </ul>
    <br>
    <br>
    <div id="content">
        <a href="https://itseovn.com">Mở diễn đàn SEO</a>
        <br>
        Test thẻ div, cấu trúc dữ liệu thẻ 'Div', Hoc CSS nâng cao các thẻ Div trong HTML5,Test
        thẻ div, cấu trúc dữ liệu thẻ 'Div', Hoc CSS nâng cao các thẻ Div trong HTML5, Test
        thẻ div, cấu trúc dữ liệu thẻ 'Div', Hoc CSS nâng cao các thẻ Div trong HTML5
        <br>
        <br>
        Test thẻ div, cấu trúc dữ liệu thẻ 'Div', Hoc CSS nâng cao các thẻ Div trong HTML5,Test
        thẻ div, cấu trúc dữ liệu thẻ 'Div', Hoc CSS nâng cao các thẻ Div trong HTML5, Test
        thẻ div, cấu trúc dữ liệu thẻ 'Div', Hoc CSS nâng cao các thẻ Div trong HTML5
        <br>
        <br>
        Test thẻ div, cấu trúc dữ liệu thẻ 'Div', Hoc CSS nâng cao các thẻ Div trong HTML5,Test
        thẻ div, cấu trúc dữ liệu thẻ 'Div', Hoc CSS nâng cao các thẻ Div trong HTML5, Test
        thẻ div, cấu trúc dữ liệu thẻ 'Div', Hoc CSS nâng cao các thẻ Div trong HTML5
        <br>
        <br>
        Test thẻ div, cấu trúc dữ liệu thẻ 'Div', Hoc CSS nâng cao các thẻ Div trong HTML5,Test
        thẻ div, cấu trúc dữ liệu thẻ 'Div', Hoc CSS nâng cao các thẻ Div trong HTML5, Test
        thẻ div, cấu trúc dữ liệu thẻ 'Div', Hoc CSS nâng cao các thẻ Div trong HTML5
        <br>
        <br>
        Test thẻ div, cấu trúc dữ liệu thẻ 'Div', Hoc CSS nâng cao các thẻ Div trong HTML5,Test
        thẻ div, cấu trúc dữ liệu thẻ 'Div', Hoc CSS nâng cao các thẻ Div trong HTML5, Test
        thẻ div, cấu trúc dữ liệu thẻ 'Div', Hoc CSS nâng cao các thẻ Div trong HTML5<br>
        Test thẻ div, cấu trúc dữ liệu thẻ 'Div', Hoc CSS nâng cao các thẻ Div trong HTML5,Test
        thẻ div, cấu trúc dữ liệu thẻ 'Div', Hoc CSS nâng cao các thẻ Div trong HTML5, Test
        thẻ div, cấu trúc dữ liệu thẻ 'Div', Hoc CSS nâng cao các thẻ Div trong HTML5
        <br>
        <br>
        Test thẻ div, cấu trúc dữ liệu thẻ 'Div', Hoc CSS nâng cao các thẻ Div trong HTML5,Test
        thẻ div, cấu trúc dữ liệu thẻ 'Div', Hoc CSS nâng cao các thẻ Div trong HTML5, Test
        thẻ div, cấu trúc dữ liệu thẻ 'Div', Hoc CSS nâng cao các thẻ Div trong HTML5
    </div>
</body>
</html>
     
    Cảm ơn đã xem bài:

    B6: Hoc CSS nâng cao các thẻ Div trong HTML5

    admin, 7/1/16
    #1


Chủ để tương tự : nâng các
Diễn đàn Tiêu đề Date
Ngôn ngữ lập trình CSS, HTML, HTML5 Xin kích thước tất cả các size của youtube video channel? 23/11/20
Ngôn ngữ lập trình CSS, HTML, HTML5 [Hỏi] Khoảng cách chữ text trong html css là thuộc tính gì ấy nhỉ? 1/9/20
Ngôn ngữ lập trình CSS, HTML, HTML5 Hướng dẫn cách cấu hình bản ghi MX cho Gmail trong cài đặt domain 11/8/20
Ngôn ngữ lập trình CSS, HTML, HTML5 Thuộc tính khoảng cách text, khoảng cách chữ trong html css là gì? 30/6/20
Ngôn ngữ lập trình CSS, HTML, HTML5 Thẻ <METER> Element Tag trong HTML5 cách sử dụng 25/2/18