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>
