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' bắt đầu bởi admin, 7/1/16.

  1. admin

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    3,738
    Đã được thích:
    711
    Đ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="http://itseovn.com">Mở diễn đàn SEO</a> <a href="http://itseovn.com">Mở diễn
                đàn cndd</a>
        </div>
        <a href="http://itseovn.com">Mở diễn đàn SEO</a> <a href="http://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="http://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

    Đang tải...


Like và Share ủng hộ ITSEOVN