{"id":13680,"date":"2021-02-26T04:40:37","date_gmt":"2021-02-26T04:40:37","guid":{"rendered":"https:\/\/freehost.page\/?p=13680"},"modified":"2021-02-26T04:40:37","modified_gmt":"2021-02-26T04:40:37","slug":"dung-go-bo-css","status":"publish","type":"post","link":"https:\/\/kiencang.net\/dung-go-bo-css\/","title":{"rendered":"\u0110\u1eebng b\u1ecb g\u00f2 b\u00f3 trong CSS m\u1eb7c \u0111\u1ecbnh c\u1ee7a theme: c\u00e1ch d\u1ec5 nh\u1ea5t \u0111\u1ec3 &#8220;trang \u0111i\u1ec3m&#8221; cho website c\u1ee7a b\u1ea1n!"},"content":{"rendered":"\n<p>B\u1ea1n c\u00f3 bi\u1ebft c\u00e1ch \u0111\u01a1n gi\u1ea3n nh\u1ea5t \u0111\u1ec3 l\u00e0m m\u1ed9t website \u0111\u1eb9p l\u00ean tr\u00f4ng th\u1ea5y m\u00e0 kh\u00f4ng t\u1ed1n \u0111\u1ed3ng n\u00e0o?<\/p>\n\n\n\n<p>Yep, ti\u00eau \u0111\u1ec1 l\u1ed9 lu\u00f4n r\u1ed3i \u0111\u1ea5y \u1ea1: <a href=\"https:\/\/kiencang.net\/category\/css\/\" target=\"_blank\" rel=\"noreferrer noopener\">s\u1eed d\u1ee5ng CSS<\/a>.<\/p>\n\n\n\n<p>CSS l\u00e0 ph\u1ea5n son, trang ph\u1ee5c c\u1ee7a c\u00f4 n\u00e0ng website m\u1eb7t m\u1ed9c.<\/p>\n\n\n\n<p>Trong b\u00e0i vi\u1ebft n\u00e0y t\u00f4i s\u1ebd n\u00f3i v\u1ec1 c\u00e1c t\u00f9y ch\u1ecdn CSS m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng \u0111\u1ec3 l\u00e0m \u0111\u1eb9p b\u1ea5t c\u1ee9 website n\u00e0o (bao g\u1ed3m c\u1ea3 WordPress).<\/p>\n\n\n\n<p>OK, let&#8217;s go.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_60 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >M\u1ee5c l\u1ee5c<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\" role=\"button\"><label for=\"item-6577d6e703089\" ><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input aria-label=\"Toggle\" aria-label=\"item-6577d6e703089\"  type=\"checkbox\" id=\"item-6577d6e703089\"><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/kiencang.net\/dung-go-bo-css\/#Font_chu\" title=\"Font ch\u1eef\">Font ch\u1eef<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/kiencang.net\/dung-go-bo-css\/#Lien_ket\" title=\"Li\u00ean k\u1ebft\">Li\u00ean k\u1ebft<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/kiencang.net\/dung-go-bo-css\/#Tieu_de\" title=\"Ti\u00eau \u0111\u1ec1\">Ti\u00eau \u0111\u1ec1<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/kiencang.net\/dung-go-bo-css\/#Background\" title=\"Background\">Background<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/kiencang.net\/dung-go-bo-css\/#Duong_vien\" title=\"\u0110\u01b0\u1eddng vi\u1ec1n\">\u0110\u01b0\u1eddng vi\u1ec1n<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/kiencang.net\/dung-go-bo-css\/#Tao_khoang_cach\" title=\"T\u1ea1o kho\u1ea3ng c\u00e1ch\">T\u1ea1o kho\u1ea3ng c\u00e1ch<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/kiencang.net\/dung-go-bo-css\/#Anh\" title=\"\u1ea2nh\">\u1ea2nh<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/kiencang.net\/dung-go-bo-css\/#Danh_muc_liet_ke\" title=\"Danh m\u1ee5c li\u1ec7t k\u00ea\">Danh m\u1ee5c li\u1ec7t k\u00ea<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/kiencang.net\/dung-go-bo-css\/#Voi_WordPress\" title=\"V\u1edbi WordPress\">V\u1edbi WordPress<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/kiencang.net\/dung-go-bo-css\/#Ket_luan\" title=\"K\u1ebft lu\u1eadn\">K\u1ebft lu\u1eadn<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Font_chu\"><\/span>Font ch\u1eef<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Ch\u1eef l\u00e0 th\u00e0nh ph\u1ea7n quan tr\u1ecdng trong h\u01a1n 97% website(*).<\/p>\n\n\n\n<p>C\u00f3 v\u00e0i th\u1ee9 m\u00e0 b\u1ea1n c\u1ea7n ch\u00fa \u00fd:<\/p>\n\n\n\n<ul><li><strong>K\u00edch c\u1ee1 font<\/strong>: \u0111\u1eebng to m\u00e0 c\u0169ng \u0111\u1eebng nh\u1ecf, v\u00e0 l\u01b0u \u00fd \u0111i\u1ec1u n\u00e0y n\u1eefa, gi\u1edd th\u1ecb l\u1ef1c m\u1ecdi ng\u01b0\u1eddi kh\u00f4ng t\u1ed1t l\u1eafm \u0111\u00e2u \u1ea1, ngay c\u1ea3 nh\u1eefng ng\u01b0\u1eddi tr\u1ebb tu\u1ed5i;<\/li><\/ul>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>p {font-size:18px;}<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<ul><li><strong>Ki\u1ec3u font<\/strong>: ph\u1ea3i d\u1ec5 \u0111\u1ecdc, nh\u1eefng font u\u1ed1n l\u01b0\u1ee3n hoa l\u00e1 c\u00e0nh c\u00f3 th\u1ec3 ph\u00f9 h\u1ee3p trong thi\u1ebft k\u1ebf banner, \u0111\u1ed3 h\u1ecda n\u00f3i chung ho\u1eb7c m\u1ed9t th\u00e0nh ph\u1ea7n nh\u1ecf n\u00e0o \u0111\u00f3, nh\u01b0ng v\u1edbi ch\u1eef cho b\u00e0i vi\u1ebft tr\u00ean website b\u1ea1n c\u1ee9 d\u00f9ng font ph\u1ed5 bi\u1ebfn l\u00e0 an to\u00e0n nh\u1ea5t;<\/li><\/ul>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body {font-family:\"Times New Roman\", Times, serif;}<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<ul><li><strong>M\u00e0u ch\u1eef<\/strong>: \u0111\u1eebng t\u01b0\u01a1ng ph\u1ea3n qu\u00e1 l\u1edbn so v\u1edbi m\u00e0u n\u1ec1n, v\u00ed d\u1ee5 b\u1ea1n d\u00f9ng n\u1ec1n tr\u1eafng th\u00ec \u0111\u1eebng \u0111\u1ec3 ch\u1eef \u0111en to\u00e0n ph\u1ea7n #000000, m\u00e0 n\u00ean \u0111\u1ec3 m\u00e0u ch\u1eef #333333 ho\u1eb7c #444444;<\/li><\/ul>\n\n\n\n<p>V\u00ed d\u1ee5: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body {color:#333333;}<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Lien_ket\"><\/span>Li\u00ean k\u1ebft<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>M\u1eb7c \u0111\u1ecbnh c\u00e1c li\u00ean k\u1ebft tr\u00ean website c\u00f3 <span style=\"color:blue;\">m\u00e0u xanh<\/span> &amp; <span style=\"text-decoration: underline;\">g\u1ea1ch d\u01b0\u1edbi<\/span>.<\/p>\n\n\n\n<p>\u0110a s\u1ed1 c\u00e1c theme (giao di\u1ec7n) hi\u1ec7n nay gi\u1eef l\u1ea1i thi\u1ebft k\u1ebf m\u00e0u xanh cho link nh\u01b0ng lo\u1ea1i b\u1ecf g\u1ea1ch ch\u00e2n \u0111i, c\u00f3 l\u1ebd \u0111\u1ec3 d\u1ec5 \u0111\u1ecdc h\u01a1n.<\/p>\n\n\n\n<p>V\u00e0i th\u1ee9 b\u1ea1n c\u1ea7n ch\u00fa \u00fd:<\/p>\n\n\n\n<ul><li><span style=\"color:blue;\">V\u1eabn n\u00ean \u0111\u1ec3 li\u00ean k\u1ebft l\u00e0 m\u00e0u xanh<\/span> (g\u1ea7n v\u1edbi m\u00e0u blue ho\u1eb7c xanh n\u01b0\u1edbc bi\u1ec3n), ho\u1eb7c \u00edt nh\u1ea5t l\u00e0 trong ph\u1ed5 m\u00e0u xanh (v\u00ed d\u1ee5 <span style=\"color:green;\">green<\/span>), v\u00ec c\u00e1i n\u00e0y g\u1ea7n nh\u01b0 l\u00e0 ti\u00eau chu\u1ea9n \u0111\u1ec3 m\u1ecdi ng\u01b0\u1eddi nh\u1eadn bi\u1ebft li\u00ean k\u1ebft r\u1ed3i, thay \u0111\u1ed5i n\u00f3 r\u1ee7i ro cao h\u01a1n l\u00e0 l\u1ee3i \u00edch. <\/li><\/ul>\n\n\n\n<p>\u0110\u1ec3 \u0111i\u1ec1u ch\u1ec9nh m\u00e0u c\u1ee7a li\u00ean k\u1ebft, b\u1ea1n d\u00f9ng c\u00fa ph\u00e1p sau <code>a {color: m\u00e0u m\u00e0 b\u1ea1n ch\u1ecdn;}<\/code><\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>a {color:blue;}<\/code><\/pre>\n\n\n\n<p>Tham kh\u1ea3o th\u00eam: <a href=\"https:\/\/kiencang.net\/cac-cach-khai-bao-mau-sac-trong-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">m\u00e0u s\u1eafc trong CSS<\/a>.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<ul><li>Tuy nhi\u00ean c\u00f3 nhi\u1ec1u c\u00e1i kh\u00e1c \u0111\u1ec3 b\u1ea1n l\u00e0m v\u1edbi li\u00ean k\u1ebft. B\u1ea1n c\u00f3 th\u1ec3 thay \u0111\u1ed5i m\u00e0u hover, m\u00e0u khi li\u00ean k\u1ebft \u0111\u00e3 \u0111\u01b0\u1ee3c click;<\/li><\/ul>\n\n\n\n<p>B\u1ea1n s\u1eed d\u1ee5ng <a href=\"https:\/\/kiencang.net\/chinh-sua-css-cho-the-a\/\" target=\"_blank\" rel=\"noreferrer noopener\">l\u1edbp gi\u1ea3 a:hover &amp; a:visted<\/a> \u0111\u1ec3 \u0111i\u1ec1u ch\u1ec9nh CSS.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>a:hover {color:red;}\na:visted {color:grey;}<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<ul><li>\u0110a s\u1ed1 website hi\u1ec7n nay khi b\u1ea5m v\u00e0o li\u00ean k\u1ebft n\u1ed9i b\u1ed9 l\u00e0 s\u1ebd duy\u1ec7t trong c\u00f9ng tab, nh\u01b0ng c\u00f3 th\u1ec3 m\u1ed9t s\u1ed1 ki\u1ec3u trang m\u1edf trong tab m\u1edbi l\u1ea1i hay h\u01a1n, b\u1ea1n c\u00f3 th\u1ec3 d\u00f9ng thu\u1ed9c t\u00ednh <code>target=\"_blank\"<\/code> \u0111\u1ec3 th\u1ef1c hi\u1ec7n \u0111i\u1ec1u n\u00e0y;<\/li><\/ul>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"https:\/\/kiencang.net\" target=\"_blank\"&gt;Ki\u1ebfn c\u00e0ng&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<ul><li>Li\u00ean k\u1ebft ngo\u00e0i th\u00ec v\u1eabn lu\u00f4n n\u00ean \u0111\u1ec3 m\u1edf \u1edf tab m\u1edbi;<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tieu_de\"><\/span>Ti\u00eau \u0111\u1ec1<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Ti\u00eau \u0111\u1ec1 l\u00e0 th\u1ee9 \u0111\u1eadp v\u00e0o m\u1eaft ng\u01b0\u1eddi \u0111\u1ecdc \u0111\u1ea7u ti\u00ean, n\u00f3 ph\u1ea3i \u0111\u1ee7 to &amp; n\u1ed5i b\u1eadt. B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng l\u1edbp gi\u1ea3 <a href=\"https:\/\/kiencang.net\/lop-gia-first-letter-trong-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">first-letter<\/a>, ho\u1eb7c thu\u1ed9c t\u00ednh <a href=\"https:\/\/kiencang.net\/thuc-hanh-thuoc-tinh-word-spacing-trong-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">word-spacing<\/a>, color \u0111\u1ec3 l\u00e0m ti\u00eau \u0111\u1ec1 phong ph\u00fa h\u01a1n.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>h1:first-letter {font-size:314%;color:green;}<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Background\"><\/span>Background<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>G\u1ecdi l\u00e0 n\u1ec1n. G\u1ed3m n\u1ec1n m\u00e0u &amp; n\u1ec1n \u1ea3nh. N\u1ec1n gi\u00fap t\u1ea1o c\u00e1 t\u00ednh cho website.<\/p>\n\n\n\n<p>Nhi\u1ec1u theme s\u1eed d\u1ee5ng m\u00e0u n\u1ec1n an to\u00e0n, v\u00ed d\u1ee5 nh\u01b0 tr\u1eafng ho\u1eb7c x\u00e1m (b\u1ea1n \u0111\u1eebng tr\u00e1ch h\u1ecd, l\u00fd do l\u00e0 v\u00ec \u0111\u00e2y l\u00e0 m\u1eb7c \u0111\u1ecbnh t\u1ed1t tr\u00ean h\u1ea7u h\u1ebft website). B\u1ea1n ho\u00e0n to\u00e0n <a href=\"https:\/\/kiencang.net\/background-trong-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">thay \u0111\u1ed5i \u0111\u01b0\u1ee3c \u0111i\u1ec1u n\u00e0y v\u1edbi v\u00e0i d\u00f2ng m\u00e3 CSS \u0111\u01a1n gi\u1ea3n<\/a>.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 thay \u0111\u1ed5i m\u00e0u n\u1ec1n:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body {background-color:#FF7357;}<\/code><\/pre>\n\n\n\n<p>ho\u1eb7c thay \u0111\u1ed5i \u1ea3nh n\u1ec1n:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body {background-image: url('duong-dan-anh.jpg');}<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Duong_vien\"><\/span>\u0110\u01b0\u1eddng vi\u1ec1n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u0110\u01b0\u1eddng vi\u1ec1n t\u1ea1o ra ranh gi\u1edbi r\u00f5 r\u00e0ng gi\u1eefa c\u00e1c ph\u1ea7n n\u1ed9i dung kh\u00e1c nhau.<\/p>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 t\u1ea1o \u0111\u01b0\u1eddng vi\u1ec1n b\u1eb1ng <a href=\"https:\/\/kiencang.net\/hr-trong-html\/\" target=\"_blank\" rel=\"noreferrer noopener\">th\u1ebb hr<\/a> ho\u1eb7c ph\u1ed5 bi\u1ebfn h\u01a1n v\u1edbi <a href=\"https:\/\/kiencang.net\/cach-su-dung-duong-vien-border-trong-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">thu\u1ed9c t\u00ednh border trong CSS<\/a>.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.the_can_tac_dong {border: 1px solid red;}<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tao_khoang_cach\"><\/span>T\u1ea1o kho\u1ea3ng c\u00e1ch<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>M\u1ecdi th\u1ee9 c\u1ea7n c\u00f3 kho\u1ea3ng c\u00e1ch, ranh gi\u1edbi \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o kh\u00f4ng gian kh\u00f4ng b\u1ecb ng\u1ed9t ng\u1ea1t.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 b\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y c\u00e1c th\u1ebb danh m\u1ee5c d\u1ea1ng ul ol li qu\u00e1 s\u00e1t nhau g\u00e2y ra t\u00ecnh tr\u1ea1ng kh\u00f3 \u0111\u1ecdc, b\u1ea1n c\u00f3 th\u1ec3 d\u00f9ng <a href=\"https:\/\/kiencang.net\/cach-dung-margin-va-padding-trong-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">margin &amp; padding<\/a> \u0111\u1ec3 t\u0103ng kho\u1ea3ng c\u00e1ch n\u00e0y l\u00ean. <\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>li {margin-bottom:7px;}<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Anh\"><\/span>\u1ea2nh<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u1ea2nh l\u00e0 m\u1ed9t th\u00e0nh ph\u1ea7n \u0111\u1eb7c bi\u1ec7t quan tr\u1ecdng tr\u00ean website.<\/p>\n\n\n\n<p>M\u1ed9t s\u1ed1 c\u00e1i m\u00e0 b\u1ea1n c\u1ea7n \u0111\u1ec3 \u00fd:<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/kiencang.net\/can-giua-anh-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">c\u0103n gi\u1eefa \u1ea3nh<\/a>;<\/li><\/ul>\n\n\n\n<p>\u0110\u1ec3 c\u0103n gi\u1eefa \u1ea3nh b\u1ea1n tham kh\u1ea3o b\u00e0i vi\u1ebft sau.<\/p>\n\n\n\n<ul><li>T\u1ea1o hi\u1ec7u \u1ee9ng cho \u1ea3nh;<\/li><\/ul>\n\n\n\n<p>C\u00f3 kha kh\u00e1 hi\u1ec7u \u1ee9ng b\u1ea1n c\u00f3 th\u1ec3 l\u00e0m v\u1edbi \u1ea3nh \u0111\u1ec3 n\u00f3 tr\u00f4ng \u0111\u1ee1 nh\u00e0m, v\u00ed d\u1ee5 nh\u01b0 <a href=\"https:\/\/kiencang.net\/code-bo-tron-anh-voi-css3\/\" target=\"_blank\" rel=\"noreferrer noopener\">bo tr\u00f2n \u1ea3nh<\/a>, <a href=\"https:\/\/kiencang.net\/box-shadow-css3\/\" target=\"_blank\" rel=\"noreferrer noopener\">t\u1ea1o b\u00f3ng \u0111\u1ed5 cho \u1ea3nh<\/a>.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 m\u1ed9t \u0111o\u1ea1n CSS t\u1ea1o b\u00f3ng \u0111\u1ed5 cho \u1ea3nh:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>img {box-shadow: #999999 20px 20px 20px;}<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Danh_muc_liet_ke\"><\/span>Danh m\u1ee5c li\u1ec7t k\u00ea<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>C\u00e1c danh m\u1ee5c nh\u01b0 th\u1ebf n\u00e0y kh\u00e1 ph\u1ed5 bi\u1ebfn tr\u00ean website, v\u00ec n\u00f3 l\u00e0m n\u1ed9i dung d\u1ec5 hi\u1ec3u h\u01a1n, v\u00ed d\u1ee5:<\/p>\n\n\n\n<ul><li>th\u1ebb ul li;<\/li><li>th\u1ebb ol li;<\/li><li>bi\u1ebfn h\u00f3a ch\u1ea5m tr\u00f2n;<\/li><\/ul>\n\n\n\n<p>C\u00e1c th\u1ebb ul li n\u00e0y c\u00f3 m\u1ed9t t\u00ecnh n\u0103ng r\u1ea5t hay l\u00e0 bi\u1ebfn ch\u1ea5m tr\u00f2n m\u1ed9c m\u1ea1c th\u00e0nh d\u1ea1ng \u1ea3nh \u0111\u1ec3 \u0111\u1eb9p m\u1eaft &amp; thu h\u00fat h\u01a1n, v\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ul li {list-style-image: url('https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/ul-li-1.png');}<\/code><\/pre>\n\n\n\n<p>N\u1ebfu b\u1ea1n th\u00edch \u1ea3nh ul li tr\u00ean website n\u00e0y, th\u00ec n\u00f3 \u0111\u00e2y: <a href=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/ul-li-1.png\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/ul-li-1.png<\/a>, b\u1ea1n t\u1ea3i v\u1ec1 v\u00e0 d\u00f9ng tho\u1ea3i m\u00e1i nh\u00e9.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Voi_WordPress\"><\/span>V\u1edbi WordPress<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u0110\u1ec3 b\u1ed5 sung m\u00e3 CSS t\u00f9y ch\u1ec9nh cho WordPress b\u1ea1n l\u00e0m nh\u01b0 sau: Customize &gt; Additional CSS r\u1ed3i th\u00eam c\u00e1c \u0111o\u1ea1n m\u00e3 CSS v\u00e0o \u0111\u00e2y.<\/p>\n\n\n\n<p>PS: b\u1ea1n c\u00f3 th\u1ec3 t\u1ea1o m\u1ed9t file css ri\u00eang r\u1ed3i \u0111\u1eb7t v\u00e0o th\u1ebb head trong html \u0111\u1ec3 <a href=\"https:\/\/kiencang.net\/ba-cach-dung-css-dieu-chinh-style-cho-trang-web\/\" target=\"_blank\" rel=\"noreferrer noopener\">style cho trang<\/a>, tuy nhi\u00ean c\u00e1ch n\u00e0y kh\u00f4ng hay b\u1eb1ng c\u00e1ch tr\u00ean, v\u00ec n\u00f3 ph\u1ee9c t\u1ea1p h\u01a1n, v\u00e0 c\u00e1c plugin backup mi\u1ec5n ph\u00ed c\u00f3 th\u1ec3 b\u1ecf qua file n\u00e0y.<\/p>\n\n\n\n<p>\u0110\u1ec3 bi\u1ebft <a href=\"https:\/\/kiencang.net\/bo-chon-hay-selector-trong-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">selector (b\u1ed9 ch\u1ecdn \u0111\u1ec3 t\u00e1c \u0111\u1ed9ng CSS)<\/a> c\u1ee7a m\u1ed9t th\u00e0nh ph\u1ea7n tr\u00ean website, tr\u00ean tr\u00ecnh duy\u1ec7t Chrome b\u1ea1n d\u00f9ng chu\u1ed9t qu\u00e9t v\u00e0o th\u00e0nh ph\u1ea7n \u0111\u00f3 r\u1ed3i chu\u1ed9t ph\u1ea3i ch\u1ecdn ki\u1ec3m tra (ctrl + shift + i). M\u1ed9t c\u1eeda s\u1ed5 s\u1ebd b\u1eadt ra k\u00e8m th\u1ebb html t\u01b0\u01a1ng \u1ee9ng. B\u1ea1n chu\u1ed9t ph\u1ea3i ti\u1ebfp, ch\u1ecdn copy &gt; copy selector l\u00e0 s\u1ebd bi\u1ebft \u0111\u01b0\u1ee3c b\u1ed9 ch\u1ecdn c\u1ee7a th\u00e0nh ph\u1ea7n \u0111\u00f3.<\/p>\n\n\n\n<p>Video h\u01b0\u1edbng d\u1eabn (kh\u00f4ng l\u1eddi) \u0111\u1ec3 l\u1ea5y b\u1ed9 ch\u1ecdn:<\/p>\n\n\n\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/8jMP8DSxvR0\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"\"><\/iframe>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Ket_luan\"><\/span>K\u1ebft lu\u1eadn<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>R\u00f5 r\u00e0ng CSS cho ch\u00fang ta c\u01a1 h\u1ed9i r\u1ea5t t\u1ed1t can thi\u1ec7p \u0111\u1ebfn giao di\u1ec7n c\u1ee7a website &amp; \u0111em l\u1ea1i hi\u1ec7u qu\u1ea3 kinh ng\u1ea1c thay v\u00ec c\u1ee9 \u0111\u1ec3 theme v\u1edbi c\u00e1c t\u00f9y ch\u1ecdn m\u1eb7c \u0111\u1ecbnh l\u1eb7p l\u1ea1i nh\u00e0m ch\u00e1n.<\/p>\n\n\n\n<p>\u0110i\u1ec1u l\u01b0u \u00fd cu\u1ed1i c\u00f9ng: t\u1ea5t c\u1ea3 th\u00f4ng tin tr\u00ean ch\u1ec9 l\u00e0 g\u1ee3i \u00fd, b\u1ea1n c\u1ea7n ki\u1ec3m tra k\u1ef9 l\u1ea1i website c\u0169ng nh\u01b0 thu nh\u1eadn \u00fd ki\u1ebfn ph\u1ea3n h\u1ed3i t\u1eeb ng\u01b0\u1eddi d\u00f9ng \u0111\u1ec3 \u0111i\u1ec1u ch\u1ec9nh sao cho h\u1ee3p l\u00fd: \u0111\u00f4i khi c\u00e1i m\u00ecnh ngh\u0129 l\u00e0 hay, \u0111a s\u1ed1 ng\u01b0\u1eddi d\u00f9ng l\u1ea1i cho l\u00e0 d\u1edf!<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>Ch\u00fa th\u00edch:<\/p>\n\n\n\n<p>(*): theo c\u1ea3m nh\u1eadn ch\u1ee7 quan c\u1ee7a t\u00f4i.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>B\u1ea1n c\u00f3 bi\u1ebft c\u00e1ch \u0111\u01a1n gi\u1ea3n nh\u1ea5t \u0111\u1ec3 l\u00e0m m\u1ed9t website \u0111\u1eb9p l\u00ean tr\u00f4ng th\u1ea5y m\u00e0 kh\u00f4ng t\u1ed1n \u0111\u1ed3ng n\u00e0o? Yep, ti\u00eau \u0111\u1ec1 l\u1ed9 lu\u00f4n r\u1ed3i \u0111\u1ea5y \u1ea1: s\u1eed d\u1ee5ng CSS. CSS l\u00e0 ph\u1ea5n son, trang ph\u1ee5c c\u1ee7a c\u00f4 n\u00e0ng website m\u1eb7t m\u1ed9c. Trong b\u00e0i vi\u1ebft n\u00e0y t\u00f4i s\u1ebd n\u00f3i v\u1ec1 c\u00e1c t\u00f9y ch\u1ecdn CSS &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[229],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u0110\u1eebng b\u1ecb g\u00f2 b\u00f3 trong CSS m\u1eb7c \u0111\u1ecbnh c\u1ee7a theme: c\u00e1ch d\u1ec5 nh\u1ea5t \u0111\u1ec3 &quot;trang \u0111i\u1ec3m&quot; cho website c\u1ee7a b\u1ea1n! &#8226; Ki\u1ebfn c\u00e0ng<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kiencang.net\/dung-go-bo-css\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u0110\u1eebng b\u1ecb g\u00f2 b\u00f3 trong CSS m\u1eb7c \u0111\u1ecbnh c\u1ee7a theme: c\u00e1ch d\u1ec5 nh\u1ea5t \u0111\u1ec3 &quot;trang \u0111i\u1ec3m&quot; cho website c\u1ee7a b\u1ea1n! &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"B\u1ea1n c\u00f3 bi\u1ebft c\u00e1ch \u0111\u01a1n gi\u1ea3n nh\u1ea5t \u0111\u1ec3 l\u00e0m m\u1ed9t website \u0111\u1eb9p l\u00ean tr\u00f4ng th\u1ea5y m\u00e0 kh\u00f4ng t\u1ed1n \u0111\u1ed3ng n\u00e0o? Yep, ti\u00eau \u0111\u1ec1 l\u1ed9 lu\u00f4n r\u1ed3i \u0111\u1ea5y \u1ea1: s\u1eed d\u1ee5ng CSS. CSS l\u00e0 ph\u1ea5n son, trang ph\u1ee5c c\u1ee7a c\u00f4 n\u00e0ng website m\u1eb7t m\u1ed9c. Trong b\u00e0i vi\u1ebft n\u00e0y t\u00f4i s\u1ebd n\u00f3i v\u1ec1 c\u00e1c t\u00f9y ch\u1ecdn CSS &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/dung-go-bo-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/anhducnguyen87\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-02-26T04:40:37+00:00\" \/>\n<meta name=\"author\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u0110\u1eebng b\u1ecb g\u00f2 b\u00f3 trong CSS m\u1eb7c \u0111\u1ecbnh c\u1ee7a theme: c\u00e1ch d\u1ec5 nh\u1ea5t \u0111\u1ec3 \"trang \u0111i\u1ec3m\" cho website c\u1ee7a b\u1ea1n! &#8226; Ki\u1ebfn c\u00e0ng","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kiencang.net\/dung-go-bo-css\/","og_locale":"vi_VN","og_type":"article","og_title":"\u0110\u1eebng b\u1ecb g\u00f2 b\u00f3 trong CSS m\u1eb7c \u0111\u1ecbnh c\u1ee7a theme: c\u00e1ch d\u1ec5 nh\u1ea5t \u0111\u1ec3 \"trang \u0111i\u1ec3m\" cho website c\u1ee7a b\u1ea1n! &#8226; Ki\u1ebfn c\u00e0ng","og_description":"B\u1ea1n c\u00f3 bi\u1ebft c\u00e1ch \u0111\u01a1n gi\u1ea3n nh\u1ea5t \u0111\u1ec3 l\u00e0m m\u1ed9t website \u0111\u1eb9p l\u00ean tr\u00f4ng th\u1ea5y m\u00e0 kh\u00f4ng t\u1ed1n \u0111\u1ed3ng n\u00e0o? Yep, ti\u00eau \u0111\u1ec1 l\u1ed9 lu\u00f4n r\u1ed3i \u0111\u1ea5y \u1ea1: s\u1eed d\u1ee5ng CSS. CSS l\u00e0 ph\u1ea5n son, trang ph\u1ee5c c\u1ee7a c\u00f4 n\u00e0ng website m\u1eb7t m\u1ed9c. Trong b\u00e0i vi\u1ebft n\u00e0y t\u00f4i s\u1ebd n\u00f3i v\u1ec1 c\u00e1c t\u00f9y ch\u1ecdn CSS &hellip;","og_url":"https:\/\/kiencang.net\/dung-go-bo-css\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2021-02-26T04:40:37+00:00","author":"Nguy\u1ec5n \u0110\u1ee9c Anh","twitter_card":"summary_large_image","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Nguy\u1ec5n \u0110\u1ee9c Anh","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"5 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/dung-go-bo-css\/","url":"https:\/\/kiencang.net\/dung-go-bo-css\/","name":"\u0110\u1eebng b\u1ecb g\u00f2 b\u00f3 trong CSS m\u1eb7c \u0111\u1ecbnh c\u1ee7a theme: c\u00e1ch d\u1ec5 nh\u1ea5t \u0111\u1ec3 \"trang \u0111i\u1ec3m\" cho website c\u1ee7a b\u1ea1n! &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2021-02-26T04:40:37+00:00","dateModified":"2021-02-26T04:40:37+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/dung-go-bo-css\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/dung-go-bo-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/dung-go-bo-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"\u0110\u1eebng b\u1ecb g\u00f2 b\u00f3 trong CSS m\u1eb7c \u0111\u1ecbnh c\u1ee7a theme: c\u00e1ch d\u1ec5 nh\u1ea5t \u0111\u1ec3 &#8220;trang \u0111i\u1ec3m&#8221; cho website c\u1ee7a b\u1ea1n!"}]},{"@type":"WebSite","@id":"https:\/\/kiencang.net\/#website","url":"https:\/\/kiencang.net\/","name":"Ki\u1ebfn c\u00e0ng","description":"\u00d4m l\u00fd thuy\u1ebft, h\u00f4n th\u1ef1c h\u00e0nh","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kiencang.net\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"vi"},{"@type":"Person","@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16","name":"Nguy\u1ec5n \u0110\u1ee9c Anh","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/kiencang.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","caption":"Nguy\u1ec5n \u0110\u1ee9c Anh"},"description":"Sinh n\u0103m 1987, t\u1ed1t nghi\u1ec7p Cao \u0111\u1eb3ng th\u1ef1c h\u00e0nh FPT qu\u00e3ng 2014, chuy\u00ean ng\u00e0nh Thi\u1ebft k\u1ebf website. T\u00f4i th\u00edch Content, SEO, Ads, T\u0103ng t\u1ed1c website v\u00e0 Th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed. B\u00ean c\u1ea1nh b\u00e0i t\u1ef1 vi\u1ebft, t\u00f4i c\u0169ng d\u1ecbch nhi\u1ec1u n\u1ed9i dung th\u00fa v\u1ecb c\u1ee7a c\u00e1c t\u00e1c gi\u1ea3 kh\u00e1c nhau. FB c\u00e1 nh\u00e2n: facebook.com\/anhducnguyen87. Email li\u00ean h\u1ec7: guiemailchotoi@gmail.com","sameAs":["https:\/\/www.facebook.com\/anhducnguyen87\/"],"url":"https:\/\/kiencang.net\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/13680"}],"collection":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/comments?post=13680"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/13680\/revisions"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=13680"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=13680"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=13680"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}