{"id":82077,"date":"2024-11-28T16:25:03","date_gmt":"2024-11-28T09:25:03","guid":{"rendered":"https:\/\/itviec.com\/blog\/?p=82077"},"modified":"2024-11-28T16:25:03","modified_gmt":"2024-11-28T09:25:03","slug":"cau-hoi-phong-van-css","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-css\/","title":{"rendered":"Top 30+ c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n CSS t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">N\u1ed9i dung b\u00e0i vi\u1ebft<\/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\"><span class=\"ez-toc-js-icon-con\"><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><\/span><\/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:\/\/itviec.com\/blog\/cau-hoi-phong-van-css\/#Cau_hoi_phong_van_CSS_co_ban_cho_Junior_Frontend_Developer\" >C\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n CSS c\u01a1 b\u1ea3n cho Junior Frontend Developer<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-css\/#Cau_hoi_phong_van_CSS_trung_cap_phu_hop_cho_Middle_Frontend_Developer\" >C\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n CSS trung c\u1ea5p ph\u00f9 h\u1ee3p cho Middle Frontend Developer<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-css\/#Cau_hoi_phong_van_CSS_nang_cao_cho_Senior_Frontend_Developer\" >C\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n CSS n\u00e2ng cao cho Senior Frontend Developer<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-css\/#Tong_ket_cau_hoi_phong_van_CSS\" >T\u1ed5ng k\u1ebft c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n CSS<\/a><\/li><\/ul><\/nav><\/div>\n<p><em><strong>Trong b\u00e0i vi\u1ebft n\u00e0y, ITviec \u0111\u00e3 t\u1ed5ng h\u1ee3p 40 c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n CSS, t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao, d\u00e0nh cho c\u00e1c Frontend Developer, t\u1eeb c\u1ea5p \u0111\u1ed9 \u0111\u1ea7u v\u00e0o (Junior) \u0111\u1ebfn c\u1ea5p cao (Senior). H\u00e3y \u0111\u1ecdc t\u1eebng c\u00e2u h\u1ecfi v\u00e0 th\u1eed tr\u1ea3 l\u1eddi tr\u01b0\u1edbc khi xem \u0111\u00e1p \u00e1n \u0111\u1ec3 ki\u1ec3m tra ki\u1ebfn th\u1ee9c tr\u01b0\u1edbc bu\u1ed5i ph\u1ecfng v\u1ea5n nh\u00e9!<\/strong><\/em><\/p>\n<p><span style=\"font-weight: 400;\">\u0110\u1ecdc b\u00e0i vi\u1ebft n\u00e0y \u0111\u1ec3 hi\u1ec3u r\u00f5 h\u01a1n v\u1ec1 c\u00e1c c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n CSS theo t\u1eebng c\u1ea5p \u0111\u1ed9:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n CSS c\u01a1 b\u1ea3n cho Junior Frontend Developer<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n CSS trung c\u1ea5p cho Middle Frontend Developer<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n CSS n\u00e2ng cao cho Senior Frontend Developer<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Cau_hoi_phong_van_CSS_co_ban_cho_Junior_Frontend_Developer\"><\/span><b>C\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n CSS c\u01a1 b\u1ea3n cho Junior Frontend Developer<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><b>CSS l\u00e0 g\u00ec?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">CSS l\u00e0 vi\u1ebft t\u1eaft c\u1ee7a Cascading Style Sheets. \u0110\u00e2y l\u00e0 ng\u00f4n ng\u1eef \u0111\u1ecbnh ki\u1ec3u d\u00f9ng \u0111\u1ec3 m\u00f4 t\u1ea3 giao di\u1ec7n v\u00e0 \u0111\u1ecbnh d\u1ea1ng c\u1ee7a t\u00e0i li\u1ec7u \u0111\u01b0\u1ee3c vi\u1ebft b\u1eb1ng HTML (Ng\u00f4n ng\u1eef \u0110\u00e1nh d\u1ea5u Si\u00eau v\u0103n b\u1ea3n) ho\u1eb7c XML (Ng\u00f4n ng\u1eef \u0110\u00e1nh d\u1ea5u M\u1edf r\u1ed9ng).\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">M\u1ee5c \u0111\u00edch ch\u00ednh c\u1ee7a CSS l\u00e0 t\u00e1ch bi\u1ec7t ph\u1ea7n tr\u00ecnh b\u00e0y v\u00e0 thi\u1ebft k\u1ebf c\u1ee7a m\u1ed9t trang web kh\u1ecfi n\u1ed9i dung, gi\u00fap vi\u1ec7c duy tr\u00ec, c\u1eadp nh\u1eadt v\u00e0 s\u1eeda \u0111\u1ed5i giao di\u1ec7n tr\u1ef1c quan c\u1ee7a trang web tr\u1edf n\u00ean d\u1ec5 d\u00e0ng h\u01a1n.<\/span><\/p>\n<blockquote><p>\u0110\u1ecdc th\u00eam: <a href=\"https:\/\/itviec.com\/blog\/css-la-gi\/\" target=\"_blank\" rel=\"noopener\"><strong>CSS l\u00e0 g\u00ec? H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng hi\u1ec7u qu\u1ea3 CSS \u0111\u1ec3 thi\u1ebft k\u1ebf web<\/strong><\/a><\/p><\/blockquote>\n<h3><b>Nh\u1eefng \u01b0u \u0111i\u1ec3m khi s\u1eed d\u1ee5ng CSS trong l\u1eadp tr\u00ecnh Frontend l\u00e0 g\u00ec?<\/b><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>T\u00ednh nh\u1ea5t qu\u00e1n<\/b><span style=\"font-weight: 400;\">: B\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng m\u1ed9t t\u1ec7p CSS duy nh\u1ea5t \u0111\u1ec3 ki\u1ec3m so\u00e1t c\u00e1c ki\u1ec3u cho nhi\u1ec1u trang, b\u1ea1n c\u00f3 th\u1ec3 t\u1ea1o ra giao di\u1ec7n \u0111\u1ed3ng nh\u1ea5t cho to\u00e0n b\u1ed9 trang web.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Hi\u1ec7u qu\u1ea3<\/b><span style=\"font-weight: 400;\">: CSS gi\u1ea3m thi\u1ec3u vi\u1ec7c sao ch\u00e9p m\u00e3 v\u00e0 gi\u00fap qu\u1ea3n l\u00fd c\u0169ng nh\u01b0 c\u1eadp nh\u1eadt c\u00e1c ki\u1ec3u d\u1ec5 d\u00e0ng h\u01a1n. \u0110i\u1ec1u n\u00e0y d\u1eabn \u0111\u1ebfn th\u1eddi gian t\u1ea3i trang nhanh h\u01a1n v\u00e0 gi\u1ea3m m\u1ee9c s\u1eed d\u1ee5ng b\u0103ng th\u00f4ng, \u0111\u1eb7c bi\u1ec7t khi s\u1eed d\u1ee5ng c\u00e1c k\u1ef9 thu\u1eadt t\u1ed1i \u01b0u h\u00f3a CSS nh\u01b0 minify v\u00e0 combine.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>T\u00ednh m\u00f4-\u0111un<\/b><span style=\"font-weight: 400;\">: V\u1edbi CSS, b\u1ea1n c\u00f3 th\u1ec3 chia nh\u1ecf c\u00e1c kho\u00e1 h\u1ecdc th\u00e0nh c\u00e1c m\u00f4-\u0111un c\u00f3 th\u1ec3 t\u00e1i s\u1eed d\u1ee5ng, k\u1ebft h\u1ee3p v\u00e0 c\u1eadp nh\u1eadt m\u1ed9t c\u00e1ch \u0111\u1ed9c l\u1eadp v\u1edbi nhau.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>T\u00ednh truy c\u1eadp<\/b><span style=\"font-weight: 400;\">: CSS gi\u00fap t\u1ea1o ra c\u00e1c trang web c\u00f3 th\u1ec3 truy c\u1eadp \u0111\u01b0\u1ee3c b\u1eb1ng c\u00e1ch cho ph\u00e9p c\u00e1c nh\u00e0 ph\u00e1t tri\u1ec3n \u00e1p d\u1ee5ng c\u00e1c ki\u1ec3u c\u1ee5 th\u1ec3 cho c\u00e1c lo\u1ea1i thi\u1ebft b\u1ecb kh\u00e1c nhau (responsive design) ho\u1eb7c theo s\u1edf th\u00edch c\u1ee7a ng\u01b0\u1eddi d\u00f9ng.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>T\u00ednh linh ho\u1ea1t<\/b><span style=\"font-weight: 400;\">: CSS cung c\u1ea5p nhi\u1ec1u thu\u1ed9c t\u00ednh v\u00e0 k\u1ef9 thu\u1eadt \u0111\u1ecbnh ki\u1ec3u kh\u00e1c nhau c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 \u0111\u1ea1t \u0111\u01b0\u1ee3c c\u00e1c hi\u1ec7u \u1ee9ng kh\u00e1c nhau, ph\u1ee5c v\u1ee5 cho c\u00e1c y\u00eau c\u1ea7u thi\u1ebft k\u1ebf \u0111a d\u1ea1ng.<\/span><\/li>\n<\/ul>\n<h3><b>Overflow CSS l\u00e0 g\u00ec?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">CSS overflow ki\u1ec3m so\u00e1t n\u1ed9i dung, cho bi\u1ebft li\u1ec7u c\u00f3 n\u00ean c\u1eaft n\u1ed9i dung hay th\u00eam thanh cu\u1ed9n hay kh\u00f4ng. Overflow ch\u1ee9a c\u00e1c thu\u1ed9c t\u00ednh sau:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>visible:<\/b><span style=\"font-weight: 400;\"> N\u1ed9i dung kh\u00f4ng b\u1ecb c\u1eaft v\u00e0 hi\u1ec3n th\u1ecb b\u00ean ngo\u00e0i h\u1ed9p ph\u1ea7n t\u1eed.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>hidden:<\/b><span style=\"font-weight: 400;\"> N\u1ed9i dung d\u01b0 th\u1eeba b\u1ecb c\u1eaft v\u00e0 ph\u1ea7n c\u00f2n l\u1ea1i c\u1ee7a n\u1ed9i dung s\u1ebd kh\u00f4ng hi\u1ec3n th\u1ecb.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>scroll:<\/b><span style=\"font-weight: 400;\"> N\u1ed9i dung d\u01b0 th\u1eeba b\u1ecb c\u1eaft nh\u01b0ng m\u1ed9t thanh cu\u1ed9n \u0111\u01b0\u1ee3c th\u00eam v\u00e0o \u0111\u1ec3 xem ph\u1ea7n c\u00f2n l\u1ea1i c\u1ee7a n\u1ed9i dung. Thanh cu\u1ed9n c\u00f3 th\u1ec3 l\u00e0 ngang ho\u1eb7c d\u1ecdc.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>auto:<\/b><span style=\"font-weight: 400;\"> T\u1ef1 \u0111\u1ed9ng th\u00eam thanh cu\u1ed9n khi c\u1ea7n thi\u1ebft.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>overflow-x v\u00e0 overflow-y: <\/b><span style=\"font-weight: 400;\">C\u00e1c thu\u1ed9c t\u00ednh n\u00e0y ch\u1ec9 \u0111\u1ecbnh c\u00e1ch thay \u0111\u1ed5i overflow c\u1ee7a c\u00e1c ph\u1ea7n t\u1eed. x x\u1eed l\u00fd c\u00e1c c\u1ea1nh ngang v\u00e0 y x\u1eed l\u00fd c\u00e1c c\u1ea1nh d\u1ecdc.<\/span><\/li>\n<\/ul>\n<blockquote><p>\u0110\u1ecdc th\u00eam: <a href=\"https:\/\/itviec.com\/blog\/overflow-css-la-gi\/\" target=\"_blank\" rel=\"noopener\"><strong>Overflow CSS l\u00e0 g\u00ec? C\u00e1ch \u1ee9ng d\u1ee5ng thu\u1ed9c t\u00ednh Overflow<\/strong><\/a><\/p><\/blockquote>\n<h3><b>C\u00e1ch li\u00ean k\u1ebft file CSS v\u1edbi file HTML nh\u01b0 th\u1ebf n\u00e0o?<\/b><i><\/i><\/h3>\n<p><b>Cascading Style Sheet (CSS)<\/b><span style=\"font-weight: 400;\"> \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 thi\u1ebft l\u1eadp ki\u1ec3u d\u00e1ng cho c\u00e1c trang web ch\u1ee9a c\u00e1c ph\u1ea7n t\u1eed HTML. N\u00f3 thi\u1ebft l\u1eadp c\u00e1c thu\u1ed9c t\u00ednh nh\u01b0 m\u00e0u n\u1ec1n, k\u00edch th\u01b0\u1edbc font ch\u1eef, ki\u1ec3u font ch\u1eef, m\u00e0u s\u1eafc, &#8230; v.v. cho c\u00e1c ph\u1ea7n t\u1eed tr\u00ean m\u1ed9t trang web.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">C\u00f3 ba lo\u1ea1i CSS nh\u01b0 sau:<\/span><\/p>\n<h4><b>CSS n\u1ed9i tuy\u1ebfn (Inline CSS)<\/b><\/h4>\n<p><span style=\"font-weight: 400;\">CSS n\u1ed9i tuy\u1ebfn ch\u1ee9a thu\u1ed9c t\u00ednh CSS trong ph\u1ea7n th\u00e2n, \u0111\u01b0\u1ee3c g\u1eafn v\u1edbi ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 CSS n\u1ed9i tuy\u1ebfn. Lo\u1ea1i ki\u1ec3u n\u00e0y \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh b\u00ean trong m\u1ed9t th\u1ebb HTML b\u1eb1ng thu\u1ed9c t\u00ednh style.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;p style=\"color: blue; font-size: 16px;\"&gt;\u0110\u00e2y l\u00e0 m\u1ed9t \u0111o\u1ea1n v\u0103n c\u00f3 ki\u1ec3u n\u1ed9i tuy\u1ebfn.&lt;\/p&gt;<\/span><\/pre>\n<h4><b>CSS n\u1ed9i b\u1ed9 ho\u1eb7c nh\u00fang (Internal or Embedded CSS)<\/b><\/h4>\n<p><span style=\"font-weight: 400;\">Lo\u1ea1i n\u00e0y c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng khi m\u1ed9t t\u00e0i li\u1ec7u HTML duy nh\u1ea5t c\u1ea7n \u0111\u01b0\u1ee3c \u0111\u1ecbnh d\u1ea1ng theo c\u00e1ch \u0111\u1ed9c \u0111\u00e1o. T\u1eadp h\u1ee3p quy t\u1eafc CSS n\u00ean n\u1eb1m trong t\u1ec7p HTML \u1edf ph\u1ea7n \u0111\u1ea7u, ngh\u0129a l\u00e0 CSS \u0111\u01b0\u1ee3c nh\u00fang b\u00ean trong t\u1ec7p HTML.<\/span><\/p>\n<p>V\u00ed d\u1ee5:<\/p>\n<pre><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;style&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0p {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: red;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0font-size: 18px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/style&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;p&gt;\u0110\u00e2y l\u00e0 m\u1ed9t \u0111o\u1ea1n v\u0103n c\u00f3 ki\u1ec3u n\u1ed9i b\u1ed9.&lt;\/p&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/pre>\n<h4><b>CSS ngo\u1ea1i b\u1ed9 (External CSS)<\/b><\/h4>\n<p><span style=\"font-weight: 400;\">CSS ngo\u1ea1i b\u1ed9 ch\u1ee9a m\u1ed9t t\u1ec7p CSS ri\u00eang bi\u1ec7t ch\u1ec9 ch\u1ee9a c\u00e1c thu\u1ed9c t\u00ednh ki\u1ec3u v\u1edbi s\u1ef1 tr\u1ee3 gi\u00fap c\u1ee7a c\u00e1c thu\u1ed9c t\u00ednh th\u1ebb (v\u00ed d\u1ee5: class, id, heading, &#8230; v.v.). Thu\u1ed9c t\u00ednh CSS \u0111\u01b0\u1ee3c vi\u1ebft trong m\u1ed9t t\u1ec7p ri\u00eang bi\u1ec7t v\u1edbi ph\u1ea7n m\u1edf r\u1ed9ng .css v\u00e0 n\u00ean \u0111\u01b0\u1ee3c li\u00ean k\u1ebft v\u1edbi t\u00e0i li\u1ec7u HTML b\u1eb1ng th\u1ebb link. \u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 \u0111\u1ed1i v\u1edbi m\u1ed7i ph\u1ea7n t\u1eed, ki\u1ec3u ch\u1ec9 c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c thi\u1ebft l\u1eadp m\u1ed9t l\u1ea7n v\u00e0 s\u1ebd \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng tr\u00ean to\u00e0n b\u1ed9 c\u00e1c trang web.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5 ta c\u00f3 file styles.css:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">p {<\/span>\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0color: green;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0font-size: 20px;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n<span style=\"font-weight: 400;\">T\u1ec7p index.html<\/span>\r\n<span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;link rel=\"stylesheet\" href=\"styles.css\"&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;p&gt;\u0110\u00e2y l\u00e0 m\u1ed9t \u0111o\u1ea1n v\u0103n c\u00f3 ki\u1ec3u ngo\u1ea1i b\u1ed9.&lt;\/p&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/pre>\n<blockquote><p>\u0110\u1ecdc th\u00eam: <a href=\"https:\/\/itviec.com\/blog\/html-css\/\" target=\"_blank\" rel=\"noopener\"><strong>HTML CSS l\u00e0 g\u00ec? 3 c\u00e1ch link CSS v\u00e0o HTML khi l\u1eadp tr\u00ecnh website<\/strong><\/a><\/p><\/blockquote>\n<h3><b>B\u1ed9 ch\u1ecdn trong CSS l\u00e0 g\u00ec?<\/b><i><\/i><\/h3>\n<p><span style=\"font-weight: 400;\">C\u00e1c b\u1ed9 ch\u1ecdn (selectors) l\u00e0 c\u00e1c m\u1eabu \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 ch\u1ecdn ph\u1ea7n t\u1eed ho\u1eb7c c\u00e1c ph\u1ea7n t\u1eed m\u00e0 b\u1ea1n mu\u1ed1n \u0111\u1ecbnh ki\u1ec3u. Ch\u00fang c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u00ecm c\u00e1c ph\u1ea7n t\u1eed d\u1ef1a tr\u00ean t\u00ean, ID, l\u1edbp, thu\u1ed9c t\u00ednh v\u00e0 nhi\u1ec1u y\u1ebfu t\u1ed1 kh\u00e1c. V\u00ed d\u1ee5:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">p l\u00e0 b\u1ed9 ch\u1ecdn ki\u1ec3u (type selector) ch\u1ecdn t\u1ea5t c\u1ea3 c\u00e1c ph\u1ea7n t\u1eed &lt;p&gt;.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">.navigation l\u00e0 b\u1ed9 ch\u1ecdn l\u1edbp (class selector) ch\u1ecdn t\u1ea5t c\u1ea3 c\u00e1c ph\u1ea7n t\u1eed c\u00f3 l\u1edbp l\u00e0 navigation.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">#header l\u00e0 b\u1ed9 ch\u1ecdn ID (ID selector) ch\u1ecdn ph\u1ea7n t\u1eed c\u00f3 ID l\u00e0 header.<\/span><\/li>\n<\/ul>\n<blockquote><p>\u0110\u1ecdc th\u00eam: <a href=\"https:\/\/itviec.com\/blog\/css-selector\/\" target=\"_blank\" rel=\"noopener\"><strong>CSS selector l\u00e0 g\u00ec? Top 10 CSS selector ph\u1ed5 bi\u1ebfn nh\u1ea5t hi\u1ec7n nay<\/strong><\/a><\/p><\/blockquote>\n<h3><b>Li\u1ec7t k\u00ea c\u00e1c b\u1ed9 ch\u1ecdn kh\u00e1c nhau trong CSS<\/b><i><\/i><\/h3>\n<p><span style=\"font-weight: 400;\">B\u1ed9 ch\u1ecdn CSS l\u00e0 m\u1ed9t chu\u1ed7i k\u00fd t\u1ef1 x\u00e1c \u0111\u1ecbnh c\u00e1c ph\u1ea7n t\u1eed m\u00e0 thu\u1ed9c t\u00ednh CSS c\u1ee5 th\u1ec3 s\u1ebd \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng. C\u00e1c lo\u1ea1i b\u1ed9 ch\u1ecdn kh\u00e1c nhau bao g\u1ed3m:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>B\u1ed9 ch\u1ecdn to\u00e0n c\u1ea7u (Universal Selector)<\/b><span style=\"font-weight: 400;\">: Ch\u1ecdn t\u1ea5t c\u1ea3 c\u00e1c ph\u1ea7n t\u1eed v\u00e0 \u00e1p d\u1ee5ng c\u00e1c thu\u1ed9c t\u00ednh CSS cho ch\u00fang.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>B\u1ed9 ch\u1ecdn theo lo\u1ea1i ph\u1ea7n t\u1eed (Element Type Selector)<\/b><span style=\"font-weight: 400;\">: Kh\u1edbp v\u1edbi m\u1ed9t ho\u1eb7c nhi\u1ec1u ph\u1ea7n t\u1eed HTML c\u00f9ng lo\u1ea1i.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>B\u1ed9 ch\u1ecdn ID (ID Selector)<\/b><span style=\"font-weight: 400;\">: Kh\u1edbp v\u1edbi ph\u1ea7n t\u1eed HTML c\u00f3 thu\u1ed9c t\u00ednh ID tr\u00f9ng v\u1edbi gi\u00e1 tr\u1ecb c\u1ee7a b\u1ed9 ch\u1ecdn.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>B\u1ed9 ch\u1ecdn l\u1edbp (Class Selector)<\/b><span style=\"font-weight: 400;\">: Kh\u1edbp v\u1edbi t\u1ea5t c\u1ea3 c\u00e1c ph\u1ea7n t\u1eed trong trang c\u00f3 thu\u1ed9c t\u00ednh l\u1edbp tr\u00f9ng v\u1edbi gi\u00e1 tr\u1ecb c\u1ee7a b\u1ed9 ch\u1ecdn.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>T\u1ed5 h\u1ee3p h\u1eadu du\u1ec7 (Descendant Combinator)<\/b><span style=\"font-weight: 400;\">: K\u1ebft h\u1ee3p hai ho\u1eb7c nhi\u1ec1u b\u1ed9 ch\u1ecdn \u0111\u1ec3 ch\u1ecdn c\u00e1c ph\u1ea7n t\u1eed c\u1ee5 th\u1ec3 h\u01a1n. Ch\u1ecdn t\u1ea5t c\u1ea3 c\u00e1c ph\u1ea7n t\u1eed HTML l\u00e0 con, ch\u00e1u, ch\u1eaft, v.v.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>T\u1ed5 h\u1ee3p con (Child Combinator)<\/b><span style=\"font-weight: 400;\">: Nh\u1eafm \u0111\u1ebfn c\u00e1c ph\u1ea7n t\u1eed con tr\u1ef1c ti\u1ebfp c\u1ee7a m\u1ed9t ph\u1ea7n t\u1eed cha.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>T\u1ed5 h\u1ee3p anh ch\u1ecb em t\u1ed5ng qu\u00e1t (General Sibling Combinator)<\/b><span style=\"font-weight: 400;\">: Kh\u1edbp c\u00e1c ph\u1ea7n t\u1eed d\u1ef1a tr\u00ean m\u1ed1i quan h\u1ec7 anh ch\u1ecb em, ch\u1ecdn c\u00e1c ph\u1ea7n t\u1eed \u0111\u1ee9ng c\u1ea1nh nhau trong t\u00e0i li\u1ec7u HTML.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>T\u1ed5 h\u1ee3p anh ch\u1ecb em li\u1ec1n k\u1ec1 (Adjacent Sibling Combinator)<\/b><span style=\"font-weight: 400;\">: Nh\u1eafm \u0111\u1ebfn ph\u1ea7n t\u1eed ph\u1ea3i l\u00e0 anh ch\u1ecb em li\u1ec1n k\u1ec1 ngay sau.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>B\u1ed9 ch\u1ecdn thu\u1ed9c t\u00ednh (Attribute Selector)<\/b><span style=\"font-weight: 400;\">: Nh\u1eafm \u0111\u1ebfn c\u00e1c ph\u1ea7n t\u1eed d\u1ef1a tr\u00ean s\u1ef1 t\u1ed3n t\u1ea1i v\u00e0\/ho\u1eb7c gi\u00e1 tr\u1ecb c\u1ee7a thu\u1ed9c t\u00ednh HTML.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Pseudo-class<\/b><span style=\"font-weight: 400;\">: S\u1eed d\u1ee5ng k\u00fd t\u1ef1 hai ch\u1ea5m \u0111\u1ec3 x\u00e1c \u0111\u1ecbnh tr\u1ea1ng th\u00e1i gi\u1ea3 m\u00e0 m\u1ed9t ph\u1ea7n t\u1eed c\u00f3 th\u1ec3 c\u00f3, v\u00ed d\u1ee5: tr\u1ea1ng th\u00e1i khi \u0111\u01b0\u1ee3c di chu\u1ed9t qua (hover).<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-82250\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/11\/cau-hoi-phong-van-1-vippro.gif\" alt=\"c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n css - itviec blog\" width=\"514\" height=\"285\" \/><\/p>\n<p>Style code:<\/p>\n<pre><span style=\"font-weight: 400;\">&lt;style&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\/* universal selector *\/<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0* {<\/span>\r\n  <span style=\"font-weight: 400;\">color: blue;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0}<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\/* element type selector *\/<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0p {<\/span>\r\n  <span style=\"font-weight: 400;\">font-weight: 900;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0}<\/span>\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\/* id selector *\/<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0#idElement {<\/span>\r\n  <span style=\"font-weight: 400;\">color: green;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0}<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\/* class selector *\/<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0.classElement {<\/span>\r\n  <span style=\"font-weight: 400;\">padding: 20px;<\/span>\r\n  <span style=\"font-weight: 400;\">width: 120px;<\/span>\r\n  <span style=\"font-weight: 400;\">height: 50px;<\/span>\r\n  <span style=\"font-weight: 400;\">background-color: green;<\/span>\r\n  <span style=\"font-weight: 400;\">text-align: center;<\/span>\r\n  <span style=\"font-weight: 400;\">border: 2px solid blue;<\/span>\r\n  <span style=\"font-weight: 400;\">margin: 10px;<\/span>\r\n  <span style=\"font-weight: 400;\">color: white;<\/span>\r\n  <span style=\"font-weight: 400;\">align-items: center;<\/span>\r\n  <span style=\"font-weight: 400;\">display: flex;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0}<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\/* descendant combinator *\/<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0#container &gt; .classElement {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0<\/span> <span style=\"font-weight: 400;\">background-color: yellow;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0<\/span> <span style=\"font-weight: 400;\">color: black;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0}<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\/* child combinator *\/<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0div &gt; p {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0<\/span> <span style=\"font-weight: 400;\">font-size: 1.2rem;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0}<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\/* general sibling combinator *\/<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0h1 ~ p {<\/span>\r\n  <span style=\"font-weight: 400;\">text-align: center;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0}<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\/* adjacent sibling combinator *\/<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0p + p {<\/span>\r\n  <span style=\"font-weight: 400;\">text-indent: 2.4em;<\/span>\r\n  <span style=\"font-weight: 400;\">margin-bottom: 0;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0}<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\/* attribute selector *\/<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0input[type=\"text\"] {<\/span>\r\n  <span style=\"font-weight: 400;\">background-color: black;<\/span>\r\n  <span style=\"font-weight: 400;\">color: white;<\/span>\r\n  <span style=\"font-weight: 400;\">font-weight: bold;<\/span>\r\n  <span style=\"font-weight: 400;\">font-size: 1.4rem;<\/span>\r\n  <span style=\"font-weight: 400;\">width: 200px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0}<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\/* Pseudo-class *\/<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0h1:hover {<\/span>\r\n  <span style=\"font-weight: 400;\">background-color: red;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0}<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;\/style&gt;<\/span><\/pre>\n<p>Body code:<\/p>\n<pre><span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;h1&gt;CSS Selector&lt;\/h1&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;p&gt;Element type Selector&lt;\/p&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;p id = \"idElement\"&gt;ID Selector&lt;\/p&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;div class=\"classElement\"&gt;Class Element 1&lt;\/div&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;div class=\"classElement\"&gt;&lt;p&gt;Class Element 2&lt;\/p&gt;&lt;\/div&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;div class=\"classElement\"&gt;Class Element 3&lt;\/div&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;div id = \"container\"&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0&lt;div class=\"classElement\"&gt;Class Element 4&lt;\/div&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0&lt;div class=\"classElement\"&gt;&lt;p&gt;Class Element 5&lt;\/p&gt;&lt;\/div&gt;\u00a0<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;\/div&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;p&gt;Adjacent sibling combinator&lt;\/p&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;p&gt;Adjacent sibling combinator&lt;\/p&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;input type=\"text\" placeholder = \"Attribute Selector\"\/&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span><\/pre>\n<h3><b>Class selector v\u00e0 ID selector kh\u00e1c nhau nh\u01b0 th\u1ebf n\u00e0o?<\/b><i><\/i><i><span style=\"font-weight: 400;\">\u00a0<\/span><\/i><\/h3>\n<p><span style=\"font-weight: 400;\">B\u1ed9 ch\u1ecdn ID ch\u1ecdn thu\u1ed9c t\u00ednh id c\u1ee7a m\u1ed9t ph\u1ea7n t\u1eed HTML \u0111\u1ec3 ch\u1ecdn m\u1ed9t ph\u1ea7n t\u1eed c\u1ee5 th\u1ec3. M\u1ed9t ID lu\u00f4n duy nh\u1ea5t trong m\u1ed9t trang, v\u00ec v\u1eady n\u00f3 \u0111\u01b0\u1ee3c ch\u1ecdn \u0111\u1ec3 ch\u1ecdn m\u1ed9t ph\u1ea7n t\u1eed duy nh\u1ea5t. N\u00f3 \u0111\u01b0\u1ee3c vi\u1ebft v\u1edbi k\u00fd t\u1ef1 th\u0103ng (#), theo sau l\u00e0 ID c\u1ee7a ph\u1ea7n t\u1eed.<\/span><\/p>\n<p><b>C\u00fa ph\u00e1p:<\/b><\/p>\n<pre>#element_id_name{\r\n\u00a0\u00a0\u00a0\/\/ CSS properties\r\n}<\/pre>\n<p><span style=\"font-weight: 400;\">B\u1ed9 ch\u1ecdn l\u1edbp ch\u1ecdn c\u00e1c ph\u1ea7n t\u1eed HTML c\u00f3 thu\u1ed9c t\u00ednh l\u1edbp c\u1ee5 th\u1ec3. N\u00f3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng v\u1edbi k\u00fd t\u1ef1 ch\u1ea5m \u201c.\u201d (d\u1ea5u ch\u1ea5m) theo sau l\u00e0 t\u00ean l\u1edbp.<\/span><\/p>\n<p><b>C\u00fa ph\u00e1p:<\/b><\/p>\n<pre>.element_class_name{\r\n\u00a0\u00a0\u00a0\/\/ CSS properties\r\n}<\/pre>\n<p><span style=\"font-weight: 400;\">S\u1ef1 kh\u00e1c bi\u1ec7t gi\u1eefa b\u1ed9 ch\u1ecdn class (\u201c.\u201d) v\u00e0 b\u1ed9 ch\u1ecdn id (\u201c#\u201d):<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>B\u1ed9 ch\u1ecdn class<\/b><\/td>\n<td><b>B\u1ed9 ch\u1ecdn id<\/b><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">\u0110\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 \u0111\u1ea1i di\u1ec7n cho class=&#8221;t\u00ean_l\u1edbp&#8221; trong ph\u1ea7n t\u1eed HTML.<\/span><\/td>\n<td><span style=\"font-weight: 400;\">\u0110\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 \u0111\u1ea1i di\u1ec7n cho id=&#8221;t\u00ean_id&#8221; trong ph\u1ea7n t\u1eed HTML.<\/span><\/td>\n<\/tr>\n<tr>\n<td><b>M\u1ed7i ph\u1ea7n t\u1eed c\u00f3 th\u1ec3 ch\u1ee9a nhi\u1ec1u selector \u201c.\u201d <\/b><span style=\"font-weight: 400;\">ngh\u0129a l\u00e0 ph\u1ea7n t\u1eed c\u00f3 th\u1ec3 ch\u1ee9a nhi\u1ec1u l\u1edbp, \u0111\u01b0\u1ee3c ph\u00e2n c\u00e1ch b\u1eb1ng kho\u1ea3ng tr\u1eafng. Ch\u00fang s\u1ebd \u0111\u01b0\u1ee3c ch\u1ecdn b\u1eb1ng nhi\u1ec1u d\u1ea5u ch\u1ea5m nh\u01b0 .l\u1edbp1 .l\u1edbp2 &#8230; v\u00e0 t\u01b0\u01a1ng t\u1ef1.<\/span><\/td>\n<td><b>M\u1ed7i ph\u1ea7n t\u1eed ch\u1ec9 c\u00f3 th\u1ec3 ch\u1ee9a m\u1ed9t selector \u201c#\u201d<\/b><span style=\"font-weight: 400;\">, kh\u00f4ng th\u1ec3 nhi\u1ec1u h\u01a1n m\u1ed9t, kh\u00f4ng gi\u1ed1ng nh\u01b0 selector l\u1edbp.<\/span><\/td>\n<\/tr>\n<tr>\n<td><b>C\u00e1c selector \u201c.\u201d kh\u00f4ng ph\u1ea3i l\u00e0 duy nh\u1ea5t:<\/b><span style=\"font-weight: 400;\"> C\u00f9ng m\u1ed9t selector c\u00f3 th\u1ec3 \u00e1p d\u1ee5ng cho nhi\u1ec1u ph\u1ea7n t\u1eed, n\u1ebfu c\u00e1c ph\u1ea7n t\u1eed HTML c\u00f3 c\u00f9ng thu\u1ed9c t\u00ednh l\u1edbp, gi\u1ed1ng nh\u01b0 m\u1ed9t danh s\u00e1ch c\u00e1c ph\u1ea7n t\u1eed c\u00f3 th\u1ec3 ch\u1ee9a c\u00f9ng m\u1ed9t l\u1edbp.<\/span><\/td>\n<td><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3><b>Box Model trong CSS l\u00e0 g\u00ec?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Box model trong CSS l\u00e0 m\u1ed9t kh\u00e1i ni\u1ec7m t\u1ed5 ch\u1ee9c v\u00e0 c\u1ea5u tr\u00fac c\u00e1c ph\u1ea7n t\u1eed HTML tr\u00ean m\u1ed9t trang web d\u01b0\u1edbi d\u1ea1ng c\u00e1c h\u1ed9p ch\u1eef nh\u1eadt. M\u1ed7i ph\u1ea7n t\u1eed tr\u00ean m\u1ed9t trang bao g\u1ed3m m\u1ed9t h\u1ed9p ch\u1eef nh\u1eadt, bao g\u1ed3m n\u1ed9i dung, kho\u1ea3ng c\u00e1ch l\u1ec1 trong (padding), vi\u1ec1n (border) v\u00e0 kho\u1ea3ng c\u00e1ch l\u1ec1 ngo\u00e0i (margin). C\u00e1c th\u00e0nh ph\u1ea7n n\u00e0y c\u00f9ng nhau \u0111\u00f3ng g\u00f3p v\u00e0o k\u00edch th\u01b0\u1edbc v\u00e0 v\u1ecb tr\u00ed c\u1ee7a ph\u1ea7n t\u1eed.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>N\u1ed9i dung (Content):<\/b><span style=\"font-weight: 400;\"> V\u0103n b\u1ea3n ho\u1eb7c h\u00ecnh \u1ea3nh th\u1ef1c t\u1ebf b\u00ean trong ph\u1ea7n t\u1eed.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Kho\u1ea3ng c\u00e1ch l\u1ec1 trong (Padding):<\/b><span style=\"font-weight: 400;\"> Kho\u1ea3ng tr\u1ed1ng gi\u1eefa n\u1ed9i dung v\u00e0 vi\u1ec1n, ho\u1ea1t \u0111\u1ed9ng nh\u01b0 m\u1ed9t l\u1edbp \u0111\u1ec7m xung quanh n\u1ed9i dung.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Vi\u1ec1n (Border):<\/b><span style=\"font-weight: 400;\"> \u0110\u01b0\u1eddng vi\u1ec1n bao quanh kho\u1ea3ng c\u00e1ch l\u1ec1 trong v\u00e0 n\u1ed9i dung, x\u00e1c \u0111\u1ecbnh tr\u1ef1c quan ranh gi\u1edbi c\u1ee7a ph\u1ea7n t\u1eed.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Kho\u1ea3ng c\u00e1ch l\u1ec1 ngo\u00e0i (Margin):<\/b><span style=\"font-weight: 400;\"> Kho\u1ea3ng tr\u1ed1ng xung quanh vi\u1ec1n, gi\u00fap c\u00e1ch c\u00e1c ph\u1ea7n t\u1eed ra kh\u1ecfi nhau v\u00e0 c\u00e1c ph\u1ea7n kh\u00e1c c\u1ee7a trang.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">div {<\/span>\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0width: 300px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0height: 200px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0padding: 20px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0border: 2px solid black;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0margin: 10px;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<h3><b>Pseudo-class l\u00e0 g\u00ec?<\/b><\/h3>\n<p><b>Pseudo-class<\/b><span style=\"font-weight: 400;\"> l\u00e0 m\u1ed9t ki\u1ec3u l\u1ef1a ch\u1ecdn \u0111\u1eb7c bi\u1ec7t trong CSS cho ph\u00e9p \u00e1p d\u1ee5ng ki\u1ec3u (style) cho c\u00e1c ph\u1ea7n t\u1eed trong nh\u1eefng tr\u1ea1ng th\u00e1i nh\u1ea5t \u0111\u1ecbnh m\u00e0 kh\u00f4ng t\u1ed3n t\u1ea1i trong c\u1ea5u tr\u00fac HTML th\u00f4ng th\u01b0\u1eddng. Ch\u00fang th\u01b0\u1eddng \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 t\u1ea1o hi\u1ec7u \u1ee9ng khi ng\u01b0\u1eddi d\u00f9ng t\u01b0\u01a1ng t\u00e1c, ch\u1eb3ng h\u1ea1n khi di chu\u1ed9t qua li\u00ean k\u1ebft.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">C\u00e1c pseudo-class ph\u1ed5 bi\u1ebfn c\u1ee7a th\u1ebb li\u00ean k\u1ebft (&lt;a&gt;) g\u1ed3m: :link, :visited, :hover, :active, :focus.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">\/* Thay \u0111\u1ed5i m\u00e0u khi di chu\u1ed9t qua li\u00ean k\u1ebft *\/<\/span>\r\n<span style=\"font-weight: 400;\">a:hover {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0color: #FF00FF;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<h3><b> CSS Combinator l\u00e0 g\u00ec?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Combinator CSS gi\u1ea3i th\u00edch m\u1ed1i quan h\u1ec7 gi\u1eefa hai selector. Selector CSS l\u00e0 c\u00e1c m\u1eabu \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 ch\u1ecdn c\u00e1c ph\u1ea7n t\u1eed cho m\u1ee5c \u0111\u00edch ki\u1ec3u d\u00e1ng. M\u1ed9t selector CSS c\u00f3 th\u1ec3 l\u00e0 m\u1ed9t selector \u0111\u01a1n gi\u1ea3n ho\u1eb7c m\u1ed9t selector ph\u1ee9c t\u1ea1p bao g\u1ed3m nhi\u1ec1u selector \u0111\u01b0\u1ee3c k\u1ebft n\u1ed1i b\u1eb1ng combinator.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">C\u00f3 b\u1ed1n lo\u1ea1i combinator c\u00f3 s\u1eb5n trong CSS \u0111\u01b0\u1ee3c th\u1ea3o lu\u1eadn d\u01b0\u1edbi \u0111\u00e2y:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>General Sibling selector (~):<\/b><span style=\"font-weight: 400;\"> Selector anh ch\u1ecb em chung \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 ch\u1ecdn ph\u1ea7n t\u1eed theo sau ph\u1ea7n t\u1eed selector \u0111\u1ea7u ti\u00ean v\u00e0 c\u0169ng chia s\u1ebb c\u00f9ng cha m\u1eb9 v\u1edbi ph\u1ea7n t\u1eed selector \u0111\u1ea7u ti\u00ean. \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 ch\u1ecdn m\u1ed9t nh\u00f3m c\u00e1c ph\u1ea7n t\u1eed chia s\u1ebb c\u00f9ng m\u1ed9t ph\u1ea7n t\u1eed cha.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Adjacent Sibling selector (+):<\/b><span style=\"font-weight: 400;\"> Selector anh ch\u1ecb em li\u1ec1n k\u1ec1 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 ch\u1ecdn ph\u1ea7n t\u1eed li\u1ec1n k\u1ec1 ho\u1eb7c ph\u1ea7n t\u1eed k\u1ebf ti\u1ebfp v\u1edbi th\u1ebb selector \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh. Combinator n\u00e0y ch\u1ec9 ch\u1ecdn m\u1ed9t th\u1ebb ngay b\u00ean c\u1ea1nh th\u1ebb \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Child Selector (&gt;):<\/b><span style=\"font-weight: 400;\"> Selector con \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 ch\u1ecdn ph\u1ea7n t\u1eed l\u00e0 con tr\u1ef1c ti\u1ebfp c\u1ee7a th\u1ebb \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh. Combinator n\u00e0y nghi\u00eam ng\u1eb7t h\u01a1n selector con ch\u00e1u v\u00ec n\u00f3 ch\u1ec9 ch\u1ecdn selector th\u1ee9 hai n\u1ebfu n\u00f3 c\u00f3 ph\u1ea7n t\u1eed selector \u0111\u1ea7u ti\u00ean l\u00e0m cha.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Descendant selector (kho\u1ea3ng tr\u1eafng):<\/b><span style=\"font-weight: 400;\"> Selector con ch\u00e1u \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 ch\u1ecdn t\u1ea5t c\u1ea3 c\u00e1c ph\u1ea7n t\u1eed con c\u1ee7a th\u1ebb \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh. C\u00e1c th\u1ebb c\u00f3 th\u1ec3 l\u00e0 con tr\u1ef1c ti\u1ebfp c\u1ee7a th\u1ebb \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh ho\u1eb7c c\u00f3 th\u1ec3 r\u1ea5t s\u00e2u trong th\u1ebb \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh. Combinator n\u00e0y k\u1ebft h\u1ee3p hai selector sao cho c\u00e1c ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c ch\u1ecdn c\u00f3 t\u1ed5 ti\u00ean gi\u1ed1ng nh\u01b0 ph\u1ea7n t\u1eed selector \u0111\u1ea7u ti\u00ean.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">\/* Ch\u1ecdn t\u1ea5t c\u1ea3 c\u00e1c th\u1ebb &lt;p&gt; sau th\u1ebb &lt;div&gt; (kh\u00f4ng nh\u1ea5t thi\u1ebft ph\u1ea3i l\u00e0 con tr\u1ef1c ti\u1ebfp) *\/<\/span>\r\n<span style=\"font-weight: 400;\">div ~ p {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0color: blue;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n<span style=\"font-weight: 400;\">\/* Ch\u1ecdn th\u1ebb &lt;span&gt; ngay sau th\u1ebb &lt;h1&gt; *\/<\/span>\r\n<span style=\"font-weight: 400;\">h1 + span {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0font-weight: bold;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n<span style=\"font-weight: 400;\">\/* Ch\u1ecdn t\u1ea5t c\u1ea3 c\u00e1c th\u1ebb &lt;li&gt; b\u00ean trong th\u1ebb &lt;ul&gt; *\/<\/span>\r\n<span style=\"font-weight: 400;\">ul &gt; li {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0list-style: none;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<h3><b> Float trong CSS ho\u1ea1t \u0111\u1ed9ng nh\u01b0 th\u1ebf n\u00e0o?<\/b><i><\/i><\/h3>\n<p><b>Float<\/b><span style=\"font-weight: 400;\"> (c\u0103n l\u1ec1) l\u00e0 m\u1ed9t thu\u1ed9c t\u00ednh trong CSS \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 \u0111i\u1ec1u ch\u1ec9nh c\u00e1ch c\u00e1c ph\u1ea7n t\u1eed hi\u1ec3n th\u1ecb tr\u00ean trang web, cho ph\u00e9p ch\u00fang &#8220;tr\u00f4i&#8221; sang b\u00ean tr\u00e1i ho\u1eb7c b\u00ean ph\u1ea3i trong b\u1ed1 c\u1ee5c, cho ph\u00e9p c\u00e1c ph\u1ea7n t\u1eed kh\u00e1c qu\u1ea5n xung quanh ch\u00fang.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh float ho\u1ea1t \u0111\u1ed9ng nh\u01b0 sau:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Khi m\u1ed9t ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c \u0111\u1eb7t thu\u1ed9c t\u00ednh float, n\u00f3 s\u1ebd \u0111\u01b0\u1ee3c di chuy\u1ec3n sang b\u00ean tr\u00e1i ho\u1eb7c b\u00ean ph\u1ea3i v\u00e0 c\u00e1c ph\u1ea7n t\u1eed kh\u00e1c s\u1ebd qu\u1ea5n quanh n\u00f3.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u00e1c ph\u1ea7n t\u1eed \u0111\u1ee9ng sau ph\u1ea7n t\u1eed \u0111\u00e3 \u0111\u01b0\u1ee3c c\u0103n s\u1ebd ch\u1ea3y xung quanh n\u00f3, trong khi c\u00e1c ph\u1ea7n t\u1eed \u0111\u1ee9ng tr\u01b0\u1edbc s\u1ebd kh\u00f4ng b\u1ecb \u1ea3nh h\u01b0\u1edfng.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Float kh\u00f4ng l\u00e0m thay \u0111\u1ed5i chi\u1ec1u cao c\u1ee7a ph\u1ea7n t\u1eed cha; n\u1ebfu kh\u00f4ng c\u00f3 ph\u1ea7n t\u1eed con n\u00e0o kh\u00f4ng b\u1ecb float, chi\u1ec1u cao c\u1ee7a ph\u1ea7n t\u1eed cha s\u1ebd kh\u00f4ng \u0111\u01b0\u1ee3c t\u00ednh \u0111\u00fang.<\/span><\/li>\n<\/ul>\n<h3><b>Border box kh\u00e1c g\u00ec v\u1edbi content box?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Border-box v\u00e0 content-box l\u00e0 hai m\u00f4 h\u00ecnh h\u1ed9p (box model) kh\u00e1c nhau trong CSS, \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 x\u00e1c \u0111\u1ecbnh c\u00e1ch t\u00ednh to\u00e1n chi\u1ec1u cao v\u00e0 chi\u1ec1u r\u1ed9ng c\u1ee7a m\u1ed9t ph\u1ea7n t\u1eed. S\u1ef1 kh\u00e1c bi\u1ec7t ch\u00ednh gi\u1eefa hai m\u00f4 h\u00ecnh n\u00e0y n\u1eb1m \u1edf c\u00e1ch t\u00ednh to\u00e1n c\u00e1c thu\u1ed9c t\u00ednh nh\u01b0 padding (kho\u1ea3ng c\u00e1ch l\u1ec1 trong) v\u00e0 border (vi\u1ec1n).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Trong m\u00f4 h\u00ecnh border-box, chi\u1ec1u cao v\u00e0 chi\u1ec1u r\u1ed9ng m\u00e0 b\u1ea1n g\u00e1n cho m\u1ed9t ph\u1ea7n t\u1eed bao g\u1ed3m t\u1ea5t c\u1ea3 m\u1ecdi th\u1ee9: n\u1ed9i dung, padding v\u00e0 border. \u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 n\u1ebfu b\u1ea1n \u0111\u1eb7t width: 200px cho m\u1ed9t ph\u1ea7n t\u1eed, th\u00ec t\u1ed5ng chi\u1ec1u r\u1ed9ng c\u1ee7a ph\u1ea7n t\u1eed (bao g\u1ed3m c\u1ea3 padding v\u00e0 border) s\u1ebd l\u00e0 200px.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Trong m\u00f4 h\u00ecnh content-box, chi\u1ec1u cao v\u00e0 chi\u1ec1u r\u1ed9ng m\u00e0 b\u1ea1n g\u00e1n cho m\u1ed9t ph\u1ea7n t\u1eed ch\u1ec9 bao g\u1ed3m n\u1ed9i dung (content) b\u00ean trong ph\u1ea7n t\u1eed \u0111\u00f3. C\u00e1c thu\u1ed9c t\u00ednh padding v\u00e0 border s\u1ebd \u0111\u01b0\u1ee3c th\u00eam v\u00e0o b\u00ean ngo\u00e0i, l\u00e0m t\u0103ng t\u1ed5ng chi\u1ec1u cao v\u00e0 chi\u1ec1u r\u1ed9ng c\u1ee7a ph\u1ea7n t\u1eed.<\/span><\/p>\n<h3><b>C\u00f4ng d\u1ee5ng c\u1ee7a ruleset l\u00e0 g\u00ec?<\/b><\/h3>\n<p><b>Ruleset<\/b><span style=\"font-weight: 400;\"> trong CSS \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 \u00e1p d\u1ee5ng c\u00e1c ki\u1ec3u d\u00e1ng (style) cho c\u00e1c ph\u1ea7n t\u1eed HTML c\u1ee5 th\u1ec3. M\u1ed7i ruleset gi\u00fap x\u00e1c \u0111\u1ecbnh c\u00e1c thu\u1ed9c t\u00ednh v\u00e0 gi\u00e1 tr\u1ecb s\u1ebd \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng cho m\u1ed9t ho\u1eb7c nhi\u1ec1u ph\u1ea7n t\u1eed tr\u00ean trang b\u1eb1ng c\u00e1ch:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Cung c\u1ea5p ki\u1ec3u d\u00e1ng cho c\u00e1c ph\u1ea7n t\u1eed<\/b><span style=\"font-weight: 400;\">: \u0110\u1ecbnh ngh\u0129a c\u00e1c thu\u1ed9c t\u00ednh nh\u01b0 m\u00e0u s\u1eafc, k\u00edch th\u01b0\u1edbc, c\u0103n l\u1ec1, kho\u1ea3ng c\u00e1ch v\u00e0 nhi\u1ec1u thu\u1ed9c t\u00ednh kh\u00e1c cho c\u00e1c ph\u1ea7n t\u1eed HTML.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>T\u0103ng t\u00ednh nh\u1ea5t qu\u00e1n<\/b><span style=\"font-weight: 400;\">: Cho ph\u00e9p \u00e1p d\u1ee5ng c\u00f9ng m\u1ed9t ki\u1ec3u d\u00e1ng cho nhi\u1ec1u ph\u1ea7n t\u1eed, gi\u00fap giao di\u1ec7n trang web \u0111\u1ed3ng b\u1ed9 v\u00e0 d\u1ec5 qu\u1ea3n l\u00fd.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>T\u1ed5 ch\u1ee9c m\u00e3 hi\u1ec7u qu\u1ea3<\/b><span style=\"font-weight: 400;\">: Ruleset chia m\u00e3 CSS th\u00e0nh c\u00e1c ph\u1ea7n r\u00f5 r\u00e0ng (selector v\u00e0 declaration block), gi\u00fap d\u1ec5 \u0111\u1ecdc, b\u1ea3o tr\u00ec v\u00e0 s\u1eeda \u0111\u1ed5i khi c\u1ea7n thi\u1ebft.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>H\u1ed7 tr\u1ee3 t\u00f9y ch\u1ec9nh giao di\u1ec7n linh ho\u1ea1t<\/b><span style=\"font-weight: 400;\">: Ruleset c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p nhi\u1ec1u b\u1ed9 ch\u1ecdn v\u1edbi nhau, \u00e1p d\u1ee5ng c\u00e1c ki\u1ec3u d\u00e1ng ph\u1ee9c t\u1ea1p v\u00e0 t\u1ea1o s\u1ef1 linh ho\u1ea1t trong vi\u1ec7c thi\u1ebft k\u1ebf giao di\u1ec7n trang web.<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Cau_hoi_phong_van_CSS_trung_cap_phu_hop_cho_Middle_Frontend_Developer\"><\/span><b>C\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n CSS trung c\u1ea5p ph\u00f9 h\u1ee3p cho Middle Frontend Developer<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><b>Media queries trong CSS l\u00e0 g\u00ec?<\/b><i><\/i><\/h3>\n<p><span style=\"font-weight: 400;\">Media queries \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ea1o ra thi\u1ebft k\u1ebf web \u0111\u00e1p \u1ee9ng (responsive design). \u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 giao di\u1ec7n c\u1ee7a m\u1ed9t trang web kh\u00e1c nhau t\u00f9y thu\u1ed9c v\u00e0o h\u1ec7 th\u1ed1ng, d\u1ef1a tr\u00ean k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh ho\u1eb7c lo\u1ea1i media.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Media queries c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 ki\u1ec3m tra nhi\u1ec1u th\u1ee9:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Chi\u1ec1u r\u1ed9ng v\u00e0 chi\u1ec1u cao c\u1ee7a viewport<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Chi\u1ec1u r\u1ed9ng v\u00e0 chi\u1ec1u cao c\u1ee7a thi\u1ebft b\u1ecb<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">\u0110\u1ecbnh h\u01b0\u1edbng<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">\u0110\u1ed9 ph\u00e2n gi\u1ea3i<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">M\u1ed9t media queries bao g\u1ed3m m\u1ed9t lo\u1ea1i media c\u00f3 th\u1ec3 ch\u1ee9a m\u1ed9t ho\u1eb7c nhi\u1ec1u bi\u1ec3u th\u1ee9c c\u00f3 th\u1ec3 \u0111\u00fang ho\u1eb7c sai. K\u1ebft qu\u1ea3 c\u1ee7a query l\u00e0 \u0111\u00fang n\u1ebfu media \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh kh\u1edbp v\u1edbi lo\u1ea1i thi\u1ebft b\u1ecb m\u00e0 t\u00e0i li\u1ec7u \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb. N\u1ebfu media queries l\u00e0 \u0111\u00fang, th\u00ec c\u00e1c thu\u1ed9c t\u00ednh CSS s\u1ebd \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n<pre>@media not | only mediatype and (expression) {\r\n\u00a0\u00a0\u00a0\/\/ Code content\r\n}<\/pre>\n<h3><b>Flexbox trong CSS l\u00e0 g\u00ec?<\/b><i><\/i><\/h3>\n<p><span style=\"font-weight: 400;\">Flexbox, hay c\u00f2n g\u1ecdi l\u00e0 Flexible Box Layout, l\u00e0 m\u1ed9t m\u00f4 h\u00ecnh b\u1ed1 c\u1ee5c trong CSS cho ph\u00e9p t\u1ea1o ra c\u00e1c b\u1ed1 c\u1ee5c linh ho\u1ea1t v\u00e0 hi\u1ec7u qu\u1ea3 tr\u00ean trang web. Flexbox gi\u00fap \u0111\u1ecbnh d\u1ea1ng c\u00e1c ph\u1ea7n t\u1eed trong m\u1ed9t container theo chi\u1ec1u ngang ho\u1eb7c chi\u1ec1u d\u1ecdc, d\u1ec5 d\u00e0ng c\u0103n ch\u1ec9nh, ph\u00e2n ph\u1ed1i kh\u00f4ng gian v\u00e0 thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc c\u00e1c ph\u1ea7n t\u1eed theo k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh. Flexbox h\u1ed7 tr\u1ee3 vi\u1ec7c c\u0103n ch\u1ec9nh c\u00e1c ph\u1ea7n t\u1eed con m\u1ed9t c\u00e1ch \u0111\u1ed3ng \u0111\u1ec1u v\u00e0 d\u1ec5 d\u00e0ng trong c\u00e1c b\u1ed1 c\u1ee5c ph\u1ee9c t\u1ea1p.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n<pre>.main-container {\r\n\u00a0\u00a0\u00a0display: flex;\r\n}<\/pre>\n<p><b>C\u00e1c thu\u1ed9c t\u00ednh flex:<\/b><span style=\"font-weight: 400;\"> flex-direction flex-wrap flex-flow justify-content align-items align-content,&#8230;<\/span><\/p>\n<blockquote><p>\u0110\u1ecdc th\u00eam: <a href=\"https:\/\/itviec.com\/blog\/flex-css\/\" target=\"_blank\" rel=\"noopener\"><strong>Flex CSS l\u00e0 g\u00ec? Gi\u1ea3i \u0111\u00e1p chi ti\u1ebft 13 thu\u1ed9c t\u00ednh trong Flexbox CSS<\/strong><\/a><\/p><\/blockquote>\n<h3><b>S\u1ef1 kh\u00e1c bi\u1ec7t gi\u1eefa thu\u1ed9c t\u00ednh absolute, relative, fixed v\u00e0 sticky positioning l\u00e0 g\u00ec?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh static, relative, absolute, fixed, sticky, initial v\u00e0 inherit l\u00e0 c\u00e1c lo\u1ea1i v\u1ecb tr\u00ed trong CSS. C\u1ee5 th\u1ec3:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Static<\/b><span style=\"font-weight: 400;\">: l\u00e0 gi\u00e1 tr\u1ecb m\u1eb7c \u0111\u1ecbnh, t\u1ea5t c\u1ea3 c\u00e1c ph\u1ea7n t\u1eed xu\u1ea5t hi\u1ec7n theo th\u1ee9 t\u1ef1 trong t\u00e0i li\u1ec7u.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Relative<\/b><span style=\"font-weight: 400;\">: ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c \u0111\u1ecbnh v\u1ecb t\u01b0\u01a1ng \u0111\u1ed1i v\u1edbi v\u1ecb tr\u00ed b\u00ecnh th\u01b0\u1eddng c\u1ee7a n\u00f3.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Absolute<\/b><span style=\"font-weight: 400;\">: ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c \u0111\u1ecbnh v\u1ecb tuy\u1ec7t \u0111\u1ed1i v\u1edbi ph\u1ea7n t\u1eed cha \u0111\u1ea7u ti\u00ean \u0111\u00e3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh v\u1ecb.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Fixed<\/b><span style=\"font-weight: 400;\">: ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c \u0111\u1ecbnh v\u1ecb li\u00ean quan \u0111\u1ebfn c\u1eeda s\u1ed5 tr\u00ecnh duy\u1ec7t.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Sticky<\/b><span style=\"font-weight: 400;\">: ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c \u0111\u1ecbnh v\u1ecb d\u1ef1a tr\u00ean v\u1ecb tr\u00ed cu\u1ed9n c\u1ee7a ng\u01b0\u1eddi d\u00f9ng.<\/span><\/li>\n<\/ul>\n<h3><b>CSS Grid kh\u00e1c g\u00ec so v\u1edbi Flexbox?<\/b><\/h3>\n<table>\n<tbody>\n<tr>\n<td><\/td>\n<td><b>Flexbox<\/b><\/td>\n<td><b>Grid<\/b><\/td>\n<\/tr>\n<tr>\n<td><b>Chi\u1ec1u kh\u00f4ng gian v\u00e0 t\u00ednh linh ho\u1ea1t<\/b><\/td>\n<td><span style=\"font-weight: 400;\">Cung c\u1ea5p kh\u1ea3 n\u0103ng ki\u1ec3m so\u00e1t t\u1ed1t h\u01a1n v\u1ec1 c\u0103n ch\u1ec9nh v\u00e0 ph\u00e2n b\u1ed1 kho\u1ea3ng c\u00e1ch gi\u1eefa c\u00e1c ph\u1ea7n t\u1eed. V\u1edbi c\u1ea5u tr\u00fac m\u1ed9t chi\u1ec1u, Flexbox ch\u1ec9 ho\u1ea1t \u0111\u1ed9ng v\u1edbi h\u00e0ng ngang ho\u1eb7c c\u1ed9t d\u1ecdc.\u00a0<\/span><\/td>\n<td><span style=\"font-weight: 400;\">C\u00f3 kh\u1ea3 n\u0103ng b\u1ed1 tr\u00ed hai chi\u1ec1u, cho ph\u00e9p \u0111i\u1ec1u ch\u1ec9nh chi\u1ec1u r\u1ed9ng linh ho\u1ea1t nh\u01b0 m\u1ed9t \u0111\u01a1n v\u1ecb chi\u1ec1u d\u00e0i, gi\u00fap kh\u1eafc ph\u1ee5c c\u00e1c h\u1ea1n ch\u1ebf c\u1ee7a Flexbox.<\/span><\/td>\n<\/tr>\n<tr>\n<td><b>Kh\u1ea3 n\u0103ng c\u0103n ch\u1ec9nh<\/b><\/td>\n<td><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh Flex Direction cho ph\u00e9p l\u1eadp tr\u00ecnh vi\u00ean c\u0103n ch\u1ec9nh c\u00e1c ph\u1ea7n t\u1eed theo chi\u1ec1u d\u1ecdc ho\u1eb7c ngang, th\u01b0\u1eddng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng khi t\u1ea1o ho\u1eb7c \u0111\u1ea3o ng\u01b0\u1ee3c h\u00e0ng v\u00e0 c\u1ed9t.<\/span><\/td>\n<td><span style=\"font-weight: 400;\">S\u1eed d\u1ee5ng c\u00e1c \u0111\u01a1n v\u1ecb \u0111o l\u01b0\u1eddng ph\u00e2n \u0111o\u1ea1n v\u00e0 t\u00ednh n\u0103ng t\u1ef1 \u0111\u1ed9ng \u0111\u1ec3 t\u1ef1 \u0111\u1ed9ng \u0111i\u1ec1u ch\u1ec9nh c\u00e1c c\u1ed9t ho\u1eb7c h\u00e0ng.<\/span><\/td>\n<\/tr>\n<tr>\n<td><b>Qu\u1ea3n l\u00fd ph\u1ea7n t\u1eed<\/b><\/td>\n<td><span style=\"font-weight: 400;\">Flex Container l\u00e0 ph\u1ea7n t\u1eed cha trong khi Flex Item l\u00e0 ph\u1ea7n t\u1eed con. Flex Container c\u00f3 th\u1ec3 \u0111\u1ea3m b\u1ea3o s\u1ef1 c\u00e2n b\u1eb1ng b\u1eb1ng c\u00e1ch \u0111i\u1ec1u ch\u1ec9nh k\u00edch th\u01b0\u1edbc c\u1ee7a c\u00e1c ph\u1ea7n t\u1eed con, gi\u00fap thi\u1ebft k\u1ebf ph\u00f9 h\u1ee3p v\u1edbi c\u00e1c k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh thay \u0111\u1ed5i.\u00a0<\/span><\/td>\n<td><span style=\"font-weight: 400;\">H\u1ed7 tr\u1ee3 c\u1ea3 b\u1ed1 tr\u00ed n\u1ed9i dung ng\u1ea7m v\u00e0 hi\u1ec3n th\u1ecb. T\u00ednh n\u0103ng t\u1ef1 \u0111\u1ed9ng t\u00edch h\u1ee3p c\u1ee7a Grid cho ph\u00e9p m\u1edf r\u1ed9ng t\u1ef1 \u0111\u1ed9ng c\u00e1c d\u00f2ng v\u00e0 sao ch\u00e9p c\u00e1c gi\u00e1 tr\u1ecb t\u1eeb ph\u1ea7n t\u1eed tr\u01b0\u1edbc \u0111\u00f3 v\u00e0o ph\u1ea7n t\u1eed m\u1edbi t\u1ea1o.<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<blockquote><p>\u0110\u1ecdc th\u00eam: <a href=\"https:\/\/itviec.com\/blog\/grid-css\/\" target=\"_blank\" rel=\"noopener\"><strong>Grid CSS: C\u1ea9m nang s\u1eed d\u1ee5ng Grid CSS c\u01a1 b\u1ea3n<\/strong><\/a><\/p><\/blockquote>\n<h3><b>Transition CSS l\u00e0 g\u00ec?<\/b><i><\/i><\/h3>\n<p><span style=\"font-weight: 400;\">Transition trong CSS cho ph\u00e9p ki\u1ec3m so\u00e1t c\u00e1ch th\u1ee9c di\u1ec5n ra qu\u00e1 tr\u00ecnh chuy\u1ec3n \u0111\u1ed5i gi\u1eefa hai tr\u1ea1ng th\u00e1i c\u1ee7a ph\u1ea7n t\u1eed. C\u00f3 b\u1ed1n thu\u1ed9c t\u00ednh transition CSS:<\/span><\/p>\n<h4><b>transition-property<\/b><\/h4>\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh n\u00e0y cho ph\u00e9p b\u1ea1n ch\u1ecdn c\u00e1c thu\u1ed9c t\u00ednh CSS m\u00e0 b\u1ea1n mu\u1ed1n ho\u1ea1t h\u00ecnh h\u00f3a trong qu\u00e1 tr\u00ecnh chuy\u1ec3n \u0111\u1ed5i (thay \u0111\u1ed5i).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n<pre>transition-property: none | all | property | property1, property2, ..., propertyN;<\/pre>\n<h4><b>transition-duration<\/b><\/h4>\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh n\u00e0y cho ph\u00e9p b\u1ea1n x\u00e1c \u0111\u1ecbnh th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 ho\u00e0n th\u00e0nh qu\u00e1 tr\u00ecnh chuy\u1ec3n \u0111\u1ed5i t\u1eeb thu\u1ed9c t\u00ednh CSS n\u00e0y sang thu\u1ed9c t\u00ednh kh\u00e1c. \u1ede \u0111\u00e2y, th\u1eddi gian c\u00f3 th\u1ec3 t\u00ednh b\u1eb1ng gi\u00e2y (s) ho\u1eb7c mili gi\u00e2y (ms), b\u1ea1n n\u00ean s\u1eed d\u1ee5ng &#8216;s&#8217; ho\u1eb7c &#8216;ms&#8217; sau s\u1ed1 (kh\u00f4ng c\u00f3 d\u1ea5u ngo\u1eb7c k\u00e9p).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n<pre>transition-duration: time;<\/pre>\n<p><span style=\"font-weight: 400;\">Th\u1eddi gian c\u00f3 th\u1ec3 t\u00ednh b\u1eb1ng gi\u00e2y ho\u1eb7c mili gi\u00e2y (ms), b\u1ea1n n\u00ean s\u1eed d\u1ee5ng \u2018s\u2019 ho\u1eb7c \u2018ms\u2019 sau s\u1ed1 (kh\u00f4ng c\u00f3 d\u1ea5u ngo\u1eb7c k\u00e9p).<\/span><\/p>\n<h4><b>transition-timing-function<\/b><\/h4>\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh n\u00e0y cho ph\u00e9p b\u1ea1n x\u00e1c \u0111\u1ecbnh t\u1ed1c \u0111\u1ed9 thay \u0111\u1ed5i v\u00e0 c\u00e1ch th\u1ee9c thay \u0111\u1ed5i trong qu\u00e1 tr\u00ecnh chuy\u1ec3n \u0111\u1ed5i. V\u00ed d\u1ee5, s\u1ef1 thay \u0111\u1ed5i c\u00f3 th\u1ec3 nhanh \u1edf \u0111\u1ea7u v\u00e0 ch\u1eadm \u1edf cu\u1ed1i,&#8230;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n<pre>transition-timing-function: ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end;<\/pre>\n<h4><b>transition-delay<\/b><\/h4>\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh n\u00e0y cho ph\u00e9p b\u1ea1n x\u00e1c \u0111\u1ecbnh kho\u1ea3ng th\u1eddi gian ch\u1edd tr\u01b0\u1edbc khi qu\u00e1 tr\u00ecnh chuy\u1ec3n \u0111\u1ed5i th\u1ef1c s\u1ef1 b\u1eaft \u0111\u1ea7u di\u1ec5n ra. \u1ede \u0111\u00e2y, m\u1ed9t l\u1ea7n n\u1eefa, th\u1eddi gian c\u00f3 th\u1ec3 t\u00ednh b\u1eb1ng gi\u00e2y (s) ho\u1eb7c mili gi\u00e2y (ms), v\u00e0 b\u1ea1n n\u00ean s\u1eed d\u1ee5ng &#8216;s&#8217; ho\u1eb7c &#8216;ms&#8217; sau s\u1ed1 (kh\u00f4ng c\u00f3 d\u1ea5u ngo\u1eb7c k\u00e9p).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n<pre>transition-delay: time;<\/pre>\n<blockquote><p>\u0110\u1ecdc th\u00eam: <a href=\"https:\/\/itviec.com\/blog\/transition-css\/\" target=\"_blank\" rel=\"noopener\"><strong>Transition CSS l\u00e0 g\u00ec? Ph\u00e2n bi\u1ec7t transition CSS v\u00e0 animation CSS<\/strong><\/a><\/p><\/blockquote>\n<h3><b>Bi\u1ebfn CSS l\u00e0 g\u00ec v\u00e0 s\u1eed d\u1ee5ng ch\u00fang nh\u01b0 th\u1ebf n\u00e0o?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Bi\u1ebfn CSS l\u00e0 m\u1ed9t ph\u01b0\u01a1ng ph\u00e1p gi\u00fap t\u00e1i s\u1eed d\u1ee5ng c\u00e1c gi\u00e1 tr\u1ecb CSS b\u1eb1ng c\u00e1ch \u0111\u1ecbnh ngh\u0129a c\u00e1c gi\u00e1 tr\u1ecb n\u00e0y th\u00e0nh bi\u1ebfn. Thay v\u00ec ph\u1ea3i vi\u1ebft l\u1ea1i c\u00f9ng m\u1ed9t gi\u00e1 tr\u1ecb nhi\u1ec1u l\u1ea7n, b\u1ea1n ch\u1ec9 c\u1ea7n khai b\u00e1o gi\u00e1 tr\u1ecb \u0111\u00f3 m\u1ed9t l\u1ea7n d\u01b0\u1edbi d\u1ea1ng bi\u1ebfn v\u00e0 s\u1eed d\u1ee5ng l\u1ea1i \u1edf nhi\u1ec1u n\u01a1i.<\/span><\/p>\n<p><b>C\u00e1ch khai b\u00e1o bi\u1ebfn: <\/b><span style=\"font-weight: 400;\">Bi\u1ebfn CSS th\u01b0\u1eddng \u0111\u01b0\u1ee3c khai b\u00e1o trong ph\u1ea7n :root \u0111\u1ec3 c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng tr\u00ean to\u00e0n b\u1ed9 t\u00e0i li\u1ec7u.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">:root {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0--main-color: #3498db;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0--secondary-color: #2ecc71;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0--font-size: 16px;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<p><b>C\u00e1ch s\u1eed d\u1ee5ng bi\u1ebfn: <\/b><span style=\"font-weight: 400;\">\u0110\u1ec3 s\u1eed d\u1ee5ng bi\u1ebfn CSS \u0111\u00e3 khai b\u00e1o, d\u00f9ng c\u00fa ph\u00e1p var(&#8211;ten-bien) trong c\u00e1c thu\u1ed9c t\u00ednh CSS.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">body {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0color: var(--main-color);<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0font-size: var(--font-size);<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n<span style=\"font-weight: 400;\">\r\nbutton {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0background-color: var(--secondary-color);<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0color: #fff;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<p><b>T\u00ednh n\u0103ng n\u00e2ng cao: <\/b><span style=\"font-weight: 400;\">CSS Variables c\u00f2n h\u1ed7 tr\u1ee3 vi\u1ec7c s\u1eed d\u1ee5ng trong c\u00e1c ph\u00e9p t\u00ednh v\u1edbi calc() ho\u1eb7c t\u1ea1o c\u00e1c tr\u1ea1ng th\u00e1i kh\u00e1c nhau khi k\u1ebft h\u1ee3p v\u1edbi :hover, @media.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">.card {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0padding: calc(var(--font-size) * 1.5);<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">.card:hover {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0background-color: var(--secondary-color);<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<h3><b> Thu\u1ed9c t\u00ednh box-sizing c\u1ee7a CSS c\u00f3 t\u00e1c d\u1ee5ng g\u00ec?<\/b><i><\/i><\/h3>\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh box-sizing trong CSS \u0111\u1ecbnh ngh\u0129a c\u00e1ch tr\u00ecnh duy\u1ec7t t\u00ednh to\u00e1n t\u1ed5ng chi\u1ec1u r\u1ed9ng v\u00e0 chi\u1ec1u cao c\u1ee7a m\u1ed9t ph\u1ea7n t\u1eed, bao g\u1ed3m c\u1ea3 padding v\u00e0 border hay kh\u00f4ng.<\/span><\/p>\n<p><b>C\u00fa ph\u00e1p:<\/b><\/p>\n<pre>box-sizing: content-box|border-box;<\/pre>\n<p><b>Gi\u00e1 tr\u1ecb thu\u1ed9c t\u00ednh:<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>content-box:<\/b><span style=\"font-weight: 400;\"> \u0110\u00e2y l\u00e0 gi\u00e1 tr\u1ecb m\u1eb7c \u0111\u1ecbnh c\u1ee7a thu\u1ed9c t\u00ednh box-sizing. Trong ch\u1ebf \u0111\u1ed9 n\u00e0y, c\u00e1c thu\u1ed9c t\u00ednh width v\u00e0 height ch\u1ec9 bao g\u1ed3m n\u1ed9i dung. Border v\u00e0 padding kh\u00f4ng \u0111\u01b0\u1ee3c t\u00ednh v\u00e0o \u0111\u00f3, t\u1ee9c l\u00e0 n\u1ebfu ch\u00fang ta \u0111\u1eb7t chi\u1ec1u r\u1ed9ng c\u1ee7a m\u1ed9t ph\u1ea7n t\u1eed l\u00e0 200 pixel, th\u00ec h\u1ed9p n\u1ed9i dung c\u1ee7a ph\u1ea7n t\u1eed s\u1ebd r\u1ed9ng 200 pixel, v\u00e0 chi\u1ec1u r\u1ed9ng c\u1ee7a b\u1ea5t k\u1ef3 border ho\u1eb7c padding n\u00e0o s\u1ebd \u0111\u01b0\u1ee3c th\u00eam v\u00e0o chi\u1ec1u r\u1ed9ng cu\u1ed1i c\u00f9ng \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>border-box:<\/b><span style=\"font-weight: 400;\"> Trong ch\u1ebf \u0111\u1ed9 n\u00e0y, c\u00e1c thu\u1ed9c t\u00ednh width v\u00e0 height bao g\u1ed3m n\u1ed9i dung, padding v\u00e0 border, t\u1ee9c l\u00e0 n\u1ebfu ch\u00fang ta \u0111\u1eb7t chi\u1ec1u r\u1ed9ng c\u1ee7a m\u1ed9t ph\u1ea7n t\u1eed l\u00e0 200 pixel, th\u00ec 200 pixel \u0111\u00f3 s\u1ebd bao g\u1ed3m b\u1ea5t k\u1ef3 border ho\u1eb7c padding n\u00e0o ch\u00fang ta th\u00eam v\u00e0o, v\u00e0 h\u1ed9p n\u1ed9i dung s\u1ebd thu nh\u1ecf \u0111\u1ec3 h\u1ea5p th\u1ee5 chi\u1ec1u r\u1ed9ng b\u1ed5 sung \u0111\u00f3. \u0110i\u1ec1u n\u00e0y th\u01b0\u1eddng l\u00e0m cho vi\u1ec7c \u0111\u1ecbnh c\u1ee1 c\u00e1c ph\u1ea7n t\u1eed d\u1ec5 d\u00e0ng h\u01a1n nhi\u1ec1u.<\/span><\/li>\n<\/ul>\n<h3><b>Z-index trong CSS ho\u1ea1t \u0111\u1ed9ng nh\u01b0 th\u1ebf n\u00e0o?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh z-index x\u00e1c \u0111\u1ecbnh th\u1ee9 t\u1ef1 x\u1ebfp ch\u1ed3ng c\u1ee7a c\u00e1c ph\u1ea7n t\u1eed theo tr\u1ee5c z (chi\u1ec1u s\u00e2u). Ph\u1ea7n t\u1eed c\u00f3 gi\u00e1 tr\u1ecb z-index cao h\u01a1n s\u1ebd n\u1eb1m tr\u00ean c\u00e1c ph\u1ea7n t\u1eed c\u00f3 gi\u00e1 tr\u1ecb th\u1ea5p h\u01a1n. Thu\u1ed9c t\u00ednh n\u00e0y \u00e1p d\u1ee5ng cho c\u00e1c ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c \u0111\u1ecbnh v\u1ecb (c\u00f3 position kh\u00e1c static).<\/span><\/p>\n<h3><b>Rem v\u00e0 em l\u00e0 g\u00ec v\u00e0 ch\u00fang kh\u00e1c nhau nh\u01b0 th\u1ebf n\u00e0o?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Trong CSS, c\u00e1c \u0111\u01a1n v\u1ecb \u0111o l\u01b0\u1eddng kh\u00e1c nhau \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 \u0111\u1ecbnh ngh\u0129a \u0111\u1ed9 d\u00e0i, k\u00edch th\u01b0\u1edbc v\u00e0 k\u00edch c\u1ee1. M\u1ed9t s\u1ed1 \u0111\u01a1n v\u1ecb th\u01b0\u1eddng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng l\u00e0 px, %, em v\u00e0 rem. M\u1ed7i \u0111\u01a1n v\u1ecb c\u00f3 \u0111\u1eb7c \u0111i\u1ec3m ri\u00eang:<\/span><\/p>\n<p><b>em:<\/b><span style=\"font-weight: 400;\"> \u0110\u01a1n v\u1ecb em l\u00e0 t\u01b0\u01a1ng \u0111\u1ed1i v\u1edbi k\u00edch th\u01b0\u1edbc font c\u1ee7a ch\u00ednh ph\u1ea7n t\u1eed \u0111\u00f3 ho\u1eb7c ph\u1ea7n t\u1eed cha g\u1ea7n nh\u1ea5t c\u00f3 k\u00edch th\u01b0\u1edbc font \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh. 1em b\u1eb1ng v\u1edbi k\u00edch th\u01b0\u1edbc font hi\u1ec7n t\u1ea1i, v\u00ec v\u1eady n\u1ebfu k\u00edch th\u01b0\u1edbc font c\u1ee7a t\u00e0i li\u1ec7u l\u00e0 16px, th\u00ec 1em s\u1ebd b\u1eb1ng 16px.<\/span><\/p>\n<p><b>rem:<\/b><span style=\"font-weight: 400;\"> T\u01b0\u01a1ng t\u1ef1 nh\u01b0 em, \u0111\u01a1n v\u1ecb rem l\u00e0 t\u01b0\u01a1ng \u0111\u1ed1i v\u1edbi k\u00edch th\u01b0\u1edbc font. Tuy nhi\u00ean, rem lu\u00f4n t\u01b0\u01a1ng \u0111\u1ed1i v\u1edbi k\u00edch th\u01b0\u1edbc font g\u1ed1c (root) c\u1ee7a t\u00e0i li\u1ec7u, th\u01b0\u1eddng \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a tr\u00ean ph\u1ea7n t\u1eed . \u0110\u01a1n v\u1ecb n\u00e0y cung c\u1ea5p m\u1ed9t c\u00e1ch nh\u1ea5t qu\u00e1n \u0111\u1ec3 quy m\u00f4 c\u00e1c ph\u1ea7n t\u1eed d\u1ef1a tr\u00ean k\u00edch th\u01b0\u1edbc font t\u1ed5ng th\u1ec3 c\u1ee7a trang, m\u00e0 kh\u00f4ng b\u1ecb \u1ea3nh h\u01b0\u1edfng b\u1edfi k\u00edch th\u01b0\u1edbc font c\u1ee7a c\u00e1c ph\u1ea7n t\u1eed cha.<\/span><\/p>\n<h3><b>Gi\u1ea3i th\u00edch s\u1ef1 kh\u00e1c nhau gi\u1eefa padding v\u00e0 margin?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Trong CSS, padding v\u00e0 margin l\u00e0 c\u00e1c thu\u1ed9c t\u00ednh \u0111i\u1ec1u khi\u1ec3n kho\u1ea3ng tr\u1ed1ng xung quanh m\u1ed9t ph\u1ea7n t\u1eed, nh\u01b0ng ch\u00fang ph\u1ee5c v\u1ee5 cho c\u00e1c m\u1ee5c \u0111\u00edch kh\u00e1c nhau:<\/span><\/p>\n<p><b>Padding:<\/b><span style=\"font-weight: 400;\"> Thu\u1ed9c t\u00ednh n\u00e0y \u0111\u1ecbnh ngh\u0129a kho\u1ea3ng tr\u1ed1ng gi\u1eefa n\u1ed9i dung c\u1ee7a m\u1ed9t ph\u1ea7n t\u1eed v\u00e0 \u0111\u01b0\u1eddng vi\u1ec1n c\u1ee7a n\u00f3. N\u00f3 th\u01b0\u1eddng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ea1o th\u00eam kho\u1ea3ng tr\u1ed1ng xung quanh n\u1ed9i dung b\u00ean trong m\u1ed9t ph\u1ea7n t\u1eed. Padding \u0111\u01b0\u1ee3c bao g\u1ed3m trong m\u00e0u n\u1ec1n ho\u1eb7c h\u00ecnh n\u1ec1n c\u1ee7a ph\u1ea7n t\u1eed v\u00e0 gi\u1eef \u0111\u01b0\u1eddng vi\u1ec1n b\u00ean ngo\u00e0i n\u1ed9i dung th\u1ef1c t\u1ebf.<\/span><\/p>\n<p><b>Margin:<\/b><span style=\"font-weight: 400;\"> Thu\u1ed9c t\u00ednh n\u00e0y \u0111\u1ecbnh ngh\u0129a kho\u1ea3ng tr\u1ed1ng xung quanh b\u00ean ngo\u00e0i c\u1ee7a m\u1ed9t ph\u1ea7n t\u1eed, gi\u1eefa ph\u1ea7n t\u1eed v\u00e0 c\u00e1c ph\u1ea7n t\u1eed xung quanh n\u00f3. N\u00f3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ea1o kho\u1ea3ng tr\u1ed1ng gi\u1eefa c\u00e1c ph\u1ea7n t\u1eed v\u00e0 n\u00f3 l\u00e0 trong su\u1ed1t. Margin n\u1eb1m b\u00ean ngo\u00e0i \u0111\u01b0\u1eddng vi\u1ec1n, v\u00ec v\u1eady n\u1ebfu m\u1ed9t ph\u1ea7n t\u1eed c\u00f3 m\u00e0u n\u1ec1n ho\u1eb7c h\u00ecnh \u1ea3nh, n\u00f3 s\u1ebd kh\u00f4ng \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn margin.<\/span><i><\/i><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-82251\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/11\/cau-hoi-phong-van-css-2-vippro.png\" alt=\"c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n css - itviec blog\" width=\"1922\" height=\"782\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/11\/cau-hoi-phong-van-css-2-vippro.png 1922w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/11\/cau-hoi-phong-van-css-2-vippro-300x122.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/11\/cau-hoi-phong-van-css-2-vippro-1600x651.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/11\/cau-hoi-phong-van-css-2-vippro-200x81.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/11\/cau-hoi-phong-van-css-2-vippro-100x41.png 100w\" sizes=\"auto, (max-width: 1922px) 100vw, 1922px\" \/><\/p>\n<h3><b>B\u1ed9 ti\u1ec1n x\u1eed l\u00fd CSS l\u00e0 g\u00ec? K\u1ec3 t\u00ean m\u1ed9t s\u1ed1 lo\u1ea1i ph\u1ed5 bi\u1ebfn<\/b><i><\/i><\/h3>\n<p><span style=\"font-weight: 400;\">B\u1ed9 ti\u1ec1n x\u1eed l\u00fd CSS (CSS Preprocessor) l\u00e0 c\u00f4ng c\u1ee5 cho ph\u00e9p c\u00e1c l\u1eadp tr\u00ecnh vi\u00ean vi\u1ebft CSS v\u1edbi c\u00fa ph\u00e1p m\u1edf r\u1ed9ng v\u00e0 c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng c\u00e1c t\u00ednh n\u0103ng n\u00e2ng cao nh\u01b0 bi\u1ebfn, h\u00e0m, mixins,&#8230; gi\u00fap c\u1ea3i thi\u1ec7n quy tr\u00ecnh ph\u00e1t tri\u1ec3n CSS. B\u1ed9 ti\u1ec1n x\u1eed l\u00fd s\u1ebd bi\u00ean d\u1ecbch code b\u1eb1ng c\u00fa ph\u00e1p m\u1edf r\u1ed9ng th\u00e0nh m\u00e3 CSS ti\u00eau chu\u1ea9n m\u00e0 tr\u00ecnh duy\u1ec7t c\u00f3 th\u1ec3 hi\u1ec3u.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">M\u1ed9t s\u1ed1 b\u1ed9 ti\u1ec1n x\u1eed l\u00fd CSS ph\u1ed5 bi\u1ebfn bao g\u1ed3m:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Sass (Syntactically Awesome Stylesheets)<\/b><span style=\"font-weight: 400;\">: C\u00fa ph\u00e1p linh ho\u1ea1t, h\u1ed7 tr\u1ee3 bi\u1ebfn, mixins v\u00e0 nesting. C\u00f3 hai d\u1ea1ng l\u00e0 SCSS (Sassy CSS) v\u00e0 Sass (c\u00fa ph\u00e1p l\u01b0\u1ee3c b\u1ecf).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>LESS<\/b><span style=\"font-weight: 400;\">: H\u1ed7 tr\u1ee3 bi\u1ebfn, mixins v\u00e0 to\u00e1n t\u1eed. C\u00e1c c\u00fa ph\u00e1p r\u1ea5t \u0111\u01a1n gi\u1ea3n v\u00e0 d\u1ec5 h\u1ecdc.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Stylus<\/b><span style=\"font-weight: 400;\">: C\u00fa ph\u00e1p linh ho\u1ea1t v\u1edbi kh\u1ea3 n\u0103ng l\u01b0\u1ee3c b\u1ecf d\u1ea5u ngo\u1eb7c v\u00e0 d\u1ea5u ch\u1ea5m ph\u1ea9y. H\u1ed7 tr\u1ee3 nhi\u1ec1u t\u00ednh n\u0103ng nh\u01b0 mixins, \u0111i\u1ec1u ki\u1ec7n v\u00e0 v\u00f2ng l\u1eb7p.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>PostCSS<\/b><span style=\"font-weight: 400;\">: Kh\u00f4ng ph\u1ea3i l\u00e0 m\u1ed9t ti\u1ec1n x\u1eed l\u00fd truy\u1ec1n th\u1ed1ng m\u00e0 l\u00e0 m\u1ed9t c\u00f4ng c\u1ee5 x\u1eed l\u00fd CSS, cho ph\u00e9p s\u1eed d\u1ee5ng c\u00e1c plugin \u0111\u1ec3 th\u00eam t\u00ednh n\u0103ng, nh\u01b0 CSS Modules ho\u1eb7c Autoprefixer.<\/span><\/li>\n<\/ul>\n<h3><b>N\u00eau \u0111i\u1ec3m kh\u00e1c nhau gi\u1eefa Inline, Inline-Block v\u00e0 Block<\/b><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Inline<\/b><span style=\"font-weight: 400;\">: Ph\u1ea7n t\u1eed ch\u1ec9 chi\u1ebfm kh\u00f4ng gian v\u1eeba v\u1edbi n\u1ed9i dung, kh\u00f4ng b\u1eaft \u0111\u1ea7u d\u00f2ng m\u1edbi, kh\u00f4ng th\u1ec3 \u0111\u1eb7t chi\u1ec1u r\u1ed9ng v\u00e0 chi\u1ec1u cao c\u1ed1 \u0111\u1ecbnh cho ph\u1ea7n t\u1eed v\u00e0 c\u00f3 th\u1ec3 n\u1eb1m c\u1ea1nh n\u1ed9i dung kh\u00e1c C\u00e1c ph\u1ea7n t\u1eed inline ph\u1ed5 bi\u1ebfn g\u1ed3m &lt;a&gt;, &lt;span&gt;, &lt;strong&gt;, &lt;img&gt;, &lt;cite&gt;, &lt;button&gt;.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Inline-Block<\/b><span style=\"font-weight: 400;\">: Gi\u1ed1ng inline nh\u01b0ng c\u00f3 th\u1ec3 \u0111\u1eb7t padding, margin, chi\u1ec1u cao v\u00e0 chi\u1ec1u r\u1ed9ng. V\u1eabn n\u1eb1m trong d\u00f2ng hi\u1ec7n t\u1ea1i m\u00e0 kh\u00f4ng xu\u1ed1ng d\u00f2ng m\u1edbi.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Block<\/b><span style=\"font-weight: 400;\">: Ph\u1ea7n t\u1eed chi\u1ebfm to\u00e0n b\u1ed9 chi\u1ec1u r\u1ed9ng c\u1ee7a container v\u00e0 b\u1eaft \u0111\u1ea7u tr\u00ean d\u00f2ng m\u1edbi, \u0111\u1ea9y c\u00e1c ph\u1ea7n t\u1eed kh\u00e1c xu\u1ed1ng d\u01b0\u1edbi. C\u00f3 th\u1ec3 \u0111\u1eb7t chi\u1ec1u r\u1ed9ng v\u00e0 chi\u1ec1u cao. V\u00ed d\u1ee5: &lt;div&gt;, &lt;p&gt;.<\/span><\/li>\n<\/ul>\n<h3><b>Pseudo-elements v\u00e0 Pseudo-class l\u00e0 g\u00ec?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">C\u00e1c pseudo-element (ph\u1ea7n t\u1eed gi\u1ea3) \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 \u0111\u1ecbnh d\u1ea1ng c\u00e1c ph\u1ea7n c\u1ee5 th\u1ec3 c\u1ee7a m\u1ed9t ph\u1ea7n t\u1eed. V\u00ed d\u1ee5, b\u1ea1n c\u00f3 th\u1ec3 vi\u1ebft hoa ch\u1eef c\u00e1i \u0111\u1ea7u ti\u00ean c\u1ee7a m\u1ed9t ph\u1ea7n t\u1eed ho\u1eb7c ch\u00e8n n\u1ed9i dung tr\u01b0\u1edbc ho\u1eb7c sau m\u1ed9t ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh. Trong khi \u0111\u00f3, m\u1ed9t pseudo-class (l\u1edbp gi\u1ea3) \u0111\u1ecbnh ngh\u0129a m\u1ed9t tr\u1ea1ng th\u00e1i \u0111\u1eb7c bi\u1ec7t c\u1ee7a m\u1ed9t ph\u1ea7n t\u1eed.<\/span><\/p>\n<p>C\u00fa ph\u00e1p pseudo-element:<\/p>\n<pre><span style=\"font-weight: 400;\">selector::pseudo-element {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0property:value;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<p>C\u00fa ph\u00e1p pseudo-class:<\/p>\n<pre><span style=\"font-weight: 400;\">selector:pseudo-class {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0property: value;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<p>M\u1ed9t s\u1ed1 pseudo-element \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a trong CSS bao g\u1ed3m:<\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>::after:<\/b><span style=\"font-weight: 400;\"> Ch\u00e8n n\u1ed9i dung sau n\u1ed9i dung c\u1ee7a ph\u1ea7n t\u1eed.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>::backdrop:<\/b><span style=\"font-weight: 400;\"> \u00c1p d\u1ee5ng ki\u1ec3u cho ph\u1ea7n n\u1ec1n \u0111\u1eb1ng sau m\u1ed9t ph\u1ea7n t\u1eed.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>::before:<\/b><span style=\"font-weight: 400;\"> Ch\u00e8n n\u1ed9i dung tr\u01b0\u1edbc n\u1ed9i dung c\u1ee7a ph\u1ea7n t\u1eed.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>::first-letter:<\/b><span style=\"font-weight: 400;\"> \u00c1p d\u1ee5ng ki\u1ec3u cho ch\u1eef c\u00e1i \u0111\u1ea7u ti\u00ean c\u1ee7a ph\u1ea7n t\u1eed.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>::first-line:<\/b><span style=\"font-weight: 400;\"> \u00c1p d\u1ee5ng ki\u1ec3u cho d\u00f2ng \u0111\u1ea7u ti\u00ean c\u1ee7a ph\u1ea7n t\u1eed.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>::file-selector-button:<\/b><span style=\"font-weight: 400;\"> \u00c1p d\u1ee5ng ki\u1ec3u cho n\u00fat ch\u1ecdn t\u1ec7p.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">M\u1ed9t s\u1ed1 v\u00ed d\u1ee5 v\u1ec1 pseudo-class bao g\u1ed3m:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>:fullscreen:<\/b><span style=\"font-weight: 400;\"> \u00c1p d\u1ee5ng ki\u1ec3u cho ph\u1ea7n t\u1eed khi n\u00f3 \u1edf ch\u1ebf \u0111\u1ed9 to\u00e0n m\u00e0n h\u00ecnh.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>:modal:<\/b><span style=\"font-weight: 400;\"> \u00c1p d\u1ee5ng ki\u1ec3u cho ph\u1ea7n t\u1eed khi n\u00f3 \u1edf ch\u1ebf \u0111\u1ed9 modal (h\u1ed9p tho\u1ea1i).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>:picture-in-picture:<\/b><span style=\"font-weight: 400;\"> \u00c1p d\u1ee5ng ki\u1ec3u cho ph\u1ea7n t\u1eed khi n\u00f3 \u1edf ch\u1ebf \u0111\u1ed9 h\u00ecnh trong h\u00ecnh.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>:autofill:<\/b><span style=\"font-weight: 400;\"> \u00c1p d\u1ee5ng ki\u1ec3u cho ph\u1ea7n t\u1eed khi n\u00f3 \u0111\u01b0\u1ee3c t\u1ef1 \u0111\u1ed9ng \u0111i\u1ec1n.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>:hover:<\/b><span style=\"font-weight: 400;\"> \u00c1p d\u1ee5ng ki\u1ec3u khi con tr\u1ecf chu\u1ed9t di chuy\u1ec3n qua ph\u1ea7n t\u1eed.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>:active:<\/b><span style=\"font-weight: 400;\"> \u00c1p d\u1ee5ng ki\u1ec3u khi ph\u1ea7n t\u1eed \u0111ang \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t (v\u00ed d\u1ee5: khi click v\u00e0o m\u1ed9t n\u00fat).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>:focus:<\/b><span style=\"font-weight: 400;\"> \u00c1p d\u1ee5ng ki\u1ec3u khi ph\u1ea7n t\u1eed \u0111ang \u0111\u01b0\u1ee3c focus.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>:link, :visited:<\/b><span style=\"font-weight: 400;\"> \u00c1p d\u1ee5ng ki\u1ec3u cho c\u00e1c li\u00ean k\u1ebft ch\u01b0a \u0111\u01b0\u1ee3c truy c\u1eadp v\u00e0 \u0111\u00e3 \u0111\u01b0\u1ee3c truy c\u1eadp.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>:first-child, :last-child, :nth-child:<\/b><span style=\"font-weight: 400;\"> \u00c1p d\u1ee5ng ki\u1ec3u cho ph\u1ea7n t\u1eed con \u0111\u1ea7u ti\u00ean, cu\u1ed1i c\u00f9ng ho\u1eb7c ph\u1ea7n t\u1eed con th\u1ee9 n c\u1ee7a m\u1ed9t ph\u1ea7n t\u1eed cha.<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Cau_hoi_phong_van_CSS_nang_cao_cho_Senior_Frontend_Developer\"><\/span><b>C\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n CSS n\u00e2ng cao cho Senior Frontend Developer<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><b>S\u1ef1 kh\u00e1c nhau gi\u1eefa ::before v\u00e0 :before l\u00e0 g\u00ec?<\/b><i><\/i><\/h3>\n<p><span style=\"font-weight: 400;\">::before l\u00e0 k\u00fd hi\u1ec7u ch\u00ednh x\u00e1c v\u00e0 hi\u1ec7n \u0111\u1ea1i cho c\u00e1c pseudo-element trong CSS3 v\u00e0 :before \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng trong CSS2.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p hai d\u1ea5u hai ch\u1ea5m (::) ph\u00e2n bi\u1ec7t c\u00e1c pseudo-element v\u1edbi c\u00e1c pseudo-class nh\u01b0 :hover.<\/span><\/p>\n<h3><b>Keyframe l\u00e0 g\u00ec? C\u00e1ch d\u00f9ng ch\u00fang trong CSS animation<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">@keyframes \u0111\u1ecbnh ngh\u0129a chu\u1ed7i c\u00e1c ki\u1ec3u ho\u1eb7c ho\u1ea1t \u1ea3nh m\u00e0 m\u1ed9t ph\u1ea7n t\u1eed n\u00ean tr\u1ea3i qua t\u1ea1i c\u00e1c \u0111i\u1ec3m c\u1ee5 th\u1ec3.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">@keyframes slideIn {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a00% { transform: translateX(-100%); }<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0100% { transform: translateX(0); }<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">div {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0animation: slideIn 2s ease-in-out;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<h3><b> S\u1ef1 kh\u00e1c bi\u1ec7t gi\u1eefa translate(), position v\u00e0 margin trong vi\u1ec7c di chuy\u1ec3n ph\u1ea7n t\u1eed<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">S\u1ef1 kh\u00e1c bi\u1ec7t gi\u1eefa translate(), position, v\u00e0 margin trong vi\u1ec7c di chuy\u1ec3n ph\u1ea7n t\u1eed nh\u01b0 sau:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>translate()<\/b><span style=\"font-weight: 400;\">: Di chuy\u1ec3n m\u1ed9t ph\u1ea7n t\u1eed kh\u1ecfi v\u1ecb tr\u00ed ban \u0111\u1ea7u c\u1ee7a n\u00f3 theo c\u00e1c tr\u1ee5c X, Y ho\u1eb7c Z. S\u1eed d\u1ee5ng transform, kh\u00f4ng \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn kh\u00f4ng gian xung quanh.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>position<\/b><span style=\"font-weight: 400;\">: X\u00e1c \u0111\u1ecbnh c\u00e1ch ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c \u0111\u1ecbnh v\u1ecb trong t\u00e0i li\u1ec7u. C\u00e1c gi\u00e1 tr\u1ecb nh\u01b0 absolute, relative, fixed cho ph\u00e9p thay \u0111\u1ed5i v\u1ecb tr\u00ed v\u00e0 c\u00f3 th\u1ec3 l\u00e0m cho ph\u1ea7n t\u1eed tho\u00e1t kh\u1ecfi d\u00f2ng t\u00e0i li\u1ec7u.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>margin<\/b><span style=\"font-weight: 400;\">: T\u1ea1o kho\u1ea3ng c\u00e1ch gi\u1eefa ph\u1ea7n t\u1eed v\u00e0 c\u00e1c ph\u1ea7n t\u1eed kh\u00e1c. Thay \u0111\u1ed5i gi\u00e1 tr\u1ecb margin s\u1ebd thay \u0111\u1ed5i v\u1ecb tr\u00ed ph\u1ea7n t\u1eed v\u00e0 \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn layout c\u1ee7a ph\u1ea7n t\u1eed xung quanh.<\/span><\/li>\n<\/ul>\n<h3><b>D\u00f9ng CSS nh\u01b0 th\u1ebf n\u00e0o \u0111\u1ec3 trang t\u1ea3i nhanh h\u01a1n?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 c\u1ea3i thi\u1ec7n t\u1ed1c \u0111\u1ed9 t\u1ea3i trang web v\u1edbi CSS, c\u00e1c nh\u00e0 ph\u00e1t tri\u1ec3n c\u00f3 th\u1ec3:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Lo\u1ea1i b\u1ecf c\u00e1c ki\u1ec3u kh\u00f4ng c\u1ea7n thi\u1ebft, ch\u00fa th\u00edch v\u00e0 kho\u1ea3ng tr\u1eafng.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">K\u1ebft h\u1ee3p v\u00e0 n\u00e9n c\u00e1c t\u1ec7p CSS \u0111\u1ec3 gi\u1ea3m s\u1ed1 l\u01b0\u1ee3ng y\u00eau c\u1ea7u HTTP v\u00e0 k\u00edch th\u01b0\u1edbc t\u1ec7p.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">S\u1eed d\u1ee5ng k\u00fd hi\u1ec7u ng\u1eafn g\u1ecdn \u0111\u1ec3 gi\u1ea3m k\u00edch th\u01b0\u1edbc m\u00e3 CSS.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">S\u1eed d\u1ee5ng CSS Sprites \u0111\u1ec3 k\u1ebft h\u1ee3p nhi\u1ec1u h\u00ecnh \u1ea3nh nh\u1ecf th\u00e0nh m\u1ed9t t\u1ec7p duy nh\u1ea5t nh\u1eb1m gi\u1ea3m s\u1ed1 l\u01b0\u1ee3ng y\u00eau c\u1ea7u HTTP.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">\u01afu ti\u00ean n\u1ed9i dung tr\u00ean m\u00e0n h\u00ecnh ch\u00ednh b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng media queries \u0111\u1ec3 t\u1ea3i CSS quan tr\u1ecdng tr\u01b0\u1edbc.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">S\u1eed d\u1ee5ng c\u00e1c thu\u1ed9c t\u00ednh CSS hi\u1ec7n \u0111\u1ea1i nh\u01b0 transform thay v\u00ec c\u00e1c thu\u1ed9c t\u00ednh c\u0169 nh\u01b0 top v\u00e0 left cho c\u00e1c ho\u1ea1t \u0111\u1ed9ng ho\u1ea1t h\u00ecnh.<\/span><\/li>\n<\/ul>\n<h3><b>M\u00f4 t\u1ea3 c\u00e1c thu\u1ed9c t\u00ednh CSS Box Alignment v\u00e0 c\u00e1ch s\u1eed d\u1ee5ng ch\u00fang trong Flexbox v\u00e0 Grid<\/b><i><\/i><\/h3>\n<p><span style=\"font-weight: 400;\">C\u00e1c thu\u1ed9c t\u00ednh CSS Box Alignment ki\u1ec3m so\u00e1t vi\u1ec7c c\u0103n ch\u1ec9nh v\u00e0 ph\u00e2n b\u1ed1 kho\u1ea3ng tr\u1ed1ng gi\u1eefa v\u00e0 xung quanh c\u00e1c ph\u1ea7n t\u1eed n\u1ed9i dung trong m\u1ed9t container flex ho\u1eb7c grid. C\u00e1c thu\u1ed9c t\u00ednh ch\u00ednh bao g\u1ed3m:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>justify-content:<\/b><span style=\"font-weight: 400;\"> C\u0103n ch\u1ec9nh c\u00e1c ph\u1ea7n t\u1eed d\u1ecdc theo tr\u1ee5c ch\u00ednh.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>align-items:<\/b><span style=\"font-weight: 400;\"> C\u0103n ch\u1ec9nh c\u00e1c ph\u1ea7n t\u1eed d\u1ecdc theo tr\u1ee5c ph\u1ee5.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>align-self:<\/b><span style=\"font-weight: 400;\"> Cho ph\u00e9p c\u0103n ch\u1ec9nh t\u1eebng ph\u1ea7n t\u1eed ri\u00eang l\u1ebb theo c\u00e1ch kh\u00e1c nhau.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>align-content:<\/b><span style=\"font-weight: 400;\"> C\u0103n ch\u1ec9nh c\u00e1c d\u00f2ng flex ho\u1eb7c track grid.<\/span><\/li>\n<\/ul>\n<h3><b>L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 t\u1ea1o ra thi\u1ebft k\u1ebf \u0111\u00e1p \u1ee9ng b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng media queries CSS?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">C\u00e1c truy v\u1ea5n media trong CSS cho ph\u00e9p b\u1ea1n \u00e1p d\u1ee5ng c\u00e1c ki\u1ec3u kh\u00e1c nhau d\u1ef1a tr\u00ean \u0111\u1eb7c \u0111i\u1ec3m c\u1ee7a thi\u1ebft b\u1ecb ho\u1eb7c k\u00edch th\u01b0\u1edbc viewport. B\u1eb1ng c\u00e1ch \u0111\u1ecbnh ngh\u0129a c\u00e1c \u0111i\u1ec3m ng\u1eaft (breakpoints), b\u1ea1n c\u00f3 th\u1ec3 t\u1ea1o m\u1ed9t thi\u1ebft k\u1ebf \u0111\u00e1p \u1ee9ng (responsive design) th\u00edch \u1ee9ng v\u1edbi c\u00e1c k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh kh\u00e1c nhau.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">@media (max-width: 600px) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0.element {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0font-size: 14px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">@media (min-width: 601px) and (max-width: 1024px) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0.element {<\/span>\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0font-size: 16px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">@media (min-width: 1025px) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0.element {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0font-size: 18px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<h3><b> L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 t\u1ed1i \u01b0u h\u00f3a CSS cho \u1ee9ng d\u1ee5ng SPA (Single Page Application) l\u1edbn?<\/b><i><\/i><\/h3>\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 t\u1ed1i \u01b0u h\u00f3a CSS cho \u1ee9ng d\u1ee5ng SPA l\u1edbn, c\u00f3 th\u1ec3 \u00e1p d\u1ee5ng nh\u1eefng c\u00e1ch sau:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Chia nh\u1ecf code (Code Splitting)<\/b><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">\u0110\u00e2y l\u00e0 k\u1ef9 thu\u1eadt cho ph\u00e9p l\u1eadp tr\u00ecnh vi\u00ean chia code JavaScript th\u00e0nh c\u00e1c ph\u1ea7n nh\u1ecf h\u01a1n, ch\u1ec9 \u0111\u01b0\u1ee3c t\u1ea3i khi c\u1ea7n, thay v\u00ec t\u1ea3i to\u00e0n b\u1ed9 bundle c\u00f9ng m\u1ed9t l\u00fac. C\u00f3 th\u1ec3 chia nh\u1ecf code v\u1edbi c\u00e1c c\u00f4ng c\u1ee5 kh\u00e1c nhau, nh\u01b0 Webpack, Rollup ho\u1eb7c Parcel, dynamic imports, lazy loading, route-based splitting.<\/span><\/p>\n<ul>\n<li aria-level=\"1\"><b>S\u1eed d\u1ee5ng b\u1ed9 nh\u1edb \u0111\u1ec7m (caching) v\u00e0 service worker<\/b><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">B\u1ed9 nh\u1edb \u0111\u1ec7m l\u01b0u tr\u1eef c\u00e1c t\u00e0i nguy\u00ean th\u01b0\u1eddng d\u00f9ng, nh\u01b0 h\u00ecnh \u1ea3nh, font ch\u1eef, ho\u1eb7c stylesheet gi\u00fap truy xu\u1ea5t nhanh h\u01a1n. Service workers l\u00e0 c\u00e1c script ch\u1ea1y n\u1ec1n, ch\u1eb7n y\u00eau c\u1ea7u m\u1ea1ng \u0111\u1ec3 \u0111i\u1ec1u khi\u1ec3n c\u00e1ch SPA ph\u1ea3n h\u1ed3i. C\u00f3 th\u1ec3 s\u1eed d\u1ee5ng ch\u00fang \u0111\u1ec3 h\u1ed7 tr\u1ee3 ch\u1ee9c n\u0103ng ngo\u1ea1i tuy\u1ebfn, th\u00f4ng b\u00e1o \u0111\u1ea9y ho\u1eb7c \u0111\u1ed3ng b\u1ed9 n\u1ec1n.<\/span><\/p>\n<ul>\n<li aria-level=\"1\"><b>T\u1ed1i \u01b0u h\u00f3a h\u00ecnh \u1ea3nh v\u00e0 font ch\u1eef<\/b><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">H\u00ecnh \u1ea3nh v\u00e0 font ch\u1eef th\u01b0\u1eddng l\u00e0 t\u00e0i nguy\u00ean l\u1edbn nh\u1ea5t v\u00e0 d\u1ec5 th\u1ea5y nh\u1ea5t trong SPA, v\u00ec v\u1eady t\u1ed1i \u01b0u h\u00f3a ch\u00fang c\u00f3 th\u1ec3 \u1ea3nh h\u01b0\u1edfng \u0111\u00e1ng k\u1ec3 \u0111\u1ebfn hi\u1ec7u su\u1ea5t v\u00e0 t\u00ednh th\u1ea9m m\u1ef9. \u0110\u1ec3 t\u1ed1i \u01b0u h\u00f3a h\u00ecnh \u1ea3nh, b\u1ea1n n\u00ean ch\u1ecdn \u0111\u1ecbnh d\u1ea1ng, k\u00edch th\u01b0\u1edbc v\u00e0 ch\u1ea5t l\u01b0\u1ee3ng ph\u00f9 h\u1ee3p, s\u1eed d\u1ee5ng c\u00f4ng c\u1ee5 n\u00e9n nh\u01b0 ImageOptim, TinyPNG ho\u1eb7c WebP. S\u1eed d\u1ee5ng h\u00ecnh \u1ea3nh ph\u1ea3n h\u1ed3i cho k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh v\u00e0 t\u1ea3i h\u00ecnh \u1ea3nh ch\u1eadm (lazy load) \u0111\u1ec3 ch\u1ec9 t\u1ea3i khi ch\u00fang n\u1eb1m trong viewport. \u0110\u1ed1i v\u1edbi font ch\u1eef, s\u1eed d\u1ee5ng font web c\u00f3 th\u1ec3 t\u00f9y ch\u1ec9nh v\u00e0 \u00e1p d\u1ee5ng ph\u00e2n nh\u00f3m font \u0111\u1ec3 gi\u1ea3m s\u1ed1 l\u01b0\u1ee3ng k\u00fd t\u1ef1 trong t\u1ec7p font.&#8221;<\/span><\/p>\n<ul>\n<li aria-level=\"1\"><b>R\u00fat g\u1ecdn v\u00e0 n\u00e9n code<\/b><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">R\u00fat g\u1ecdn v\u00e0 n\u00e9n code l\u00e0 hai c\u00e1ch \u0111\u01a1n gi\u1ea3n nh\u01b0ng hi\u1ec7u qu\u1ea3 \u0111\u1ec3 gi\u1ea3m k\u00edch th\u01b0\u1edbc SPA v\u00e0 t\u0103ng t\u1ed1c \u0111\u1ed9 t\u1ea3i trang. R\u00fat g\u1ecdn code c\u00f3 ngh\u0129a l\u00e0 lo\u1ea1i b\u1ecf c\u00e1c k\u00fd t\u1ef1 kh\u00f4ng c\u1ea7n thi\u1ebft, nh\u01b0 kho\u1ea3ng tr\u1eafng, ch\u00fa th\u00edch ho\u1eb7c d\u1ea5u ch\u1ea5m ph\u1ea9y v\u00e0 \u0111\u1ed5i t\u00ean bi\u1ebfn, h\u00e0m th\u00e0nh c\u00e1c t\u00ean ng\u1eafn h\u01a1n. N\u00e9n code s\u1eed d\u1ee5ng c\u00e1c thu\u1eadt to\u00e1n nh\u01b0 Gzip ho\u1eb7c Brotli \u0111\u1ec3 gi\u1ea3m s\u1ed1 l\u01b0\u1ee3ng bit c\u1ea7n thi\u1ebft. C\u00f3 th\u1ec3 s\u1eed d\u1ee5ng c\u00e1c c\u00f4ng c\u1ee5 nh\u01b0 UglifyJS, Terser ho\u1eb7c Babel \u0111\u1ec3 r\u00fat g\u1ecdn code JavaScript v\u00e0 HTMLMinifier, CSSNano ho\u1eb7c PurgeCSS \u0111\u1ec3 r\u00fat g\u1ecdn code HTML v\u00e0 CSS.<\/span><\/p>\n<h3><b>S\u1ef1 kh\u00e1c bi\u1ec7t gi\u1eefa k\u1ef9 thu\u1eadt BEM (Block Element Modifier) v\u00e0 c\u00e1c c\u00e1ch ti\u1ebfp c\u1eadn kh\u00e1c trong vi\u1ec7c vi\u1ebft CSS c\u00f3 c\u1ea5u tr\u00fac l\u00e0 g\u00ec?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Ki\u1ebfn tr\u00fac CSS \u0111\u1ec1 c\u1eadp \u0111\u1ebfn c\u00e1c nguy\u00ean t\u1eafc t\u1ed5 ch\u1ee9c, m\u1eabu thi\u1ebft k\u1ebf v\u00e0 ph\u01b0\u01a1ng ph\u00e1p \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 c\u1ea5u tr\u00fac v\u00e0 duy tr\u00ec m\u00e3 CSS m\u1ed9t c\u00e1ch hi\u1ec7u qu\u1ea3. M\u1ed9t ki\u1ebfn tr\u00fac CSS c\u00f3 h\u1ec7 th\u1ed1ng v\u00e0 m\u00f4-\u0111un \u0111\u1ea3m b\u1ea3o r\u1eb1ng m\u00e3 ngu\u1ed3n \u0111\u01b0\u1ee3c t\u1ed5 ch\u1ee9c, m\u1edf r\u1ed9ng v\u00e0 b\u1ea3o tr\u00ec d\u1ec5 d\u00e0ng, \u0111\u1eb7c bi\u1ec7t \u0111\u1ed1i v\u1edbi c\u00e1c d\u1ef1 \u00e1n l\u1edbn v\u00e0 ph\u1ee9c t\u1ea1p.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">M\u1ed9t s\u1ed1 ph\u01b0\u01a1ng ph\u00e1p ki\u1ebfn tr\u00fac CSS ph\u1ed5 bi\u1ebfn bao g\u1ed3m OOCSS (CSS h\u01b0\u1edbng \u0111\u1ed1i t\u01b0\u1ee3ng), BEM (Block Element Modifier), SMACSS (Ki\u1ebfn tr\u00fac m\u00f4-\u0111un v\u00e0 c\u00f3 th\u1ec3 m\u1edf r\u1ed9ng cho CSS) v\u00e0 Atomic Design.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ki\u1ebfn tr\u00fac CSS c\u00f3 th\u1ec3 c\u1ea3i thi\u1ec7n kh\u1ea3 n\u0103ng b\u1ea3o tr\u00ec b\u1eb1ng c\u00e1ch:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>M\u00f4-\u0111un h\u00f3a<\/b><span style=\"font-weight: 400;\">: Khuy\u1ebfn kh\u00edch ph\u01b0\u01a1ng ph\u00e1p m\u00f4-\u0111un b\u1eb1ng c\u00e1ch chia nh\u1ecf c\u00e1c th\u00e0nh ph\u1ea7n v\u00e0 ki\u1ec3u d\u00e1ng th\u00e0nh c\u00e1c \u0111o\u1ea1n m\u00e3 nh\u1ecf, c\u00f3 th\u1ec3 t\u00e1i s\u1eed d\u1ee5ng.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>T\u00ednh nh\u1ea5t qu\u00e1n<\/b><span style=\"font-weight: 400;\">: Th\u00fac \u0111\u1ea9y c\u00e1c quy t\u1eafc \u0111\u1eb7t t\u00ean, c\u1ea5u tr\u00fac th\u01b0 m\u1ee5c v\u00e0 ti\u00eau chu\u1ea9n m\u00e3 h\u00f3a nh\u1ea5t qu\u00e1n, gi\u00fap c\u00e1c th\u00e0nh vi\u00ean trong nh\u00f3m d\u1ec5 d\u00e0ng hi\u1ec3u d\u1ef1 \u00e1n v\u00e0 th\u1ef1c hi\u1ec7n thay \u0111\u1ed5i m\u00e0 kh\u00f4ng g\u00e2y xung \u0111\u1ed9t.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Ph\u00e2n t\u00e1ch m\u1ed1i quan t\u00e2m<\/b><span style=\"font-weight: 400;\">: \u0110\u1ea3m b\u1ea3o r\u1eb1ng c\u1ea5u tr\u00fac m\u00e3 ngu\u1ed3n tu\u00e2n theo m\u1ed9t m\u1eabu ph\u00e2n t\u00e1ch b\u1ed1 c\u1ee5c, ki\u1ec3u ch\u1eef v\u00e0 th\u00e0nh ph\u1ea7n, cho ph\u00e9p l\u1eadp tr\u00ecnh vi\u00ean l\u00e0m vi\u1ec7c \u0111\u1ed9c l\u1eadp m\u00e0 kh\u00f4ng \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn c\u00e1c ph\u1ea7n kh\u00e1c.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Gi\u1ea3m t\u00ednh \u0111\u1eb7c hi\u1ec7u<\/b><span style=\"font-weight: 400;\">: Gi\u1ea3m thi\u1ec3u s\u1ef1 ph\u1ee5 thu\u1ed9c v\u00e0o c\u00e1c b\u1ed9 ch\u1ecdn qu\u00e1 \u0111\u1eb7c hi\u1ec7u, \u0111i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 d\u1eabn \u0111\u1ebfn m\u00e3 ph\u00ecnh to, lo ng\u1ea1i v\u1ec1 b\u1ea3o tr\u00ec v\u00e0 c\u00e1c hi\u1ec7u \u1ee9ng ph\u1ee5 kh\u00f4ng mong mu\u1ed1n khi c\u1eadp nh\u1eadt.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>T\u1ed1i \u01b0u h\u00f3a hi\u1ec7u su\u1ea5t<\/b><span style=\"font-weight: 400;\">: C\u1ea3i thi\u1ec7n hi\u1ec7u su\u1ea5t trang web b\u1eb1ng c\u00e1ch lo\u1ea1i b\u1ecf m\u00e3 th\u1eeba, th\u00fac \u0111\u1ea9y kh\u1ea3 n\u0103ng t\u00e1i s\u1eed d\u1ee5ng v\u00e0 tu\u00e2n theo c\u00e1c ph\u01b0\u01a1ng ph\u00e1p t\u1ed1t nh\u1ea5t nh\u1eb9 v\u00e0 hi\u1ec7u qu\u1ea3.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>D\u1ec5 d\u00e0ng h\u1ee3p t\u00e1c<\/b><span style=\"font-weight: 400;\">: Gi\u00fap nhi\u1ec1u l\u1eadp tr\u00ecnh vi\u00ean l\u00e0m vi\u1ec7c c\u00f9ng nhau tr\u00ean m\u1ed9t d\u1ef1 \u00e1n m\u00e0 kh\u00f4ng g\u00e2y ra xung \u0111\u1ed9t ho\u1eb7c t\u1ea1o ra c\u00e1c v\u1ea5n \u0111\u1ec1 kh\u00f3 g\u1ee1 l\u1ed7i.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>D\u1ec5 d\u00e0ng m\u1edf r\u1ed9ng v\u00e0 m\u1edf r\u1ed9ng<\/b><span style=\"font-weight: 400;\">: \u0110\u1ea3m b\u1ea3o r\u1eb1ng c\u00e1c m\u1eabu thi\u1ebft k\u1ebf v\u00e0 th\u00e0nh ph\u1ea7n c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c m\u1edf r\u1ed9ng, c\u1eadp nh\u1eadt ho\u1eb7c m\u1edf r\u1ed9ng v\u1edbi n\u1ed7 l\u1ef1c t\u1ed1i thi\u1ec3u, gi\u00fap d\u1ec5 d\u00e0ng th\u00eam, s\u1eeda \u0111\u1ed5i ho\u1eb7c lo\u1ea1i b\u1ecf c\u00e1c ph\u1ea7n t\u1eed khi c\u1ea7n thi\u1ebft.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;div class=\"button\"&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;span class=\"button__text\"&gt;Click me&lt;\/span&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span><\/pre>\n<h3><b> Animation CSS ho\u1ea1t \u0111\u1ed9ng nh\u01b0 th\u1ebf n\u00e0o v\u00e0 c\u00f3 nh\u1eefng thu\u1ed9c t\u00ednh li\u00ean quan \u0111\u1ebfn animation n\u00e0o?<\/b><i><\/i><\/h3>\n<p><span style=\"font-weight: 400;\">CSS animation cho ph\u00e9p th\u1ef1c hi\u1ec7n ho\u1ea1t \u1ea3nh cho c\u00e1c ph\u1ea7n t\u1eed m\u00e0 kh\u00f4ng c\u1ea7n JavaScript.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh animation ch\u1ec9 \u0111\u1ecbnh c\u00e1c keyframe c\u1ee7a ho\u1ea1t \u1ea3nh, th\u1eddi gian, h\u00e0m th\u1eddi gian, \u0111\u1ed9 tr\u1ec5 v\u00e0 s\u1ed1 l\u1ea7n l\u1eb7p l\u1ea1i. C\u00e1c thu\u1ed9c t\u00ednh li\u00ean quan \u0111\u1ebfn animation bao g\u1ed3m @keyframes, animation-timing-function, animation-delay v\u00e0 animation-iteration-count.<\/span><\/p>\n<blockquote><p>\u0110\u1ecdc th\u00eam: <a href=\"https:\/\/itviec.com\/blog\/animation-css\/\" target=\"_blank\" rel=\"noopener\"><strong>Animation CSS: T\u1ed5ng h\u1ee3p 11 hi\u1ec7u \u1ee9ng Animation CSS ph\u1ed5 bi\u1ebfn<\/strong><\/a><\/p><\/blockquote>\n<h3><b>L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 th\u00eam hi\u1ec7u \u1ee9ng chuy\u1ec3n m\u00e0u (gradient) trong CSS?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 th\u00eam hi\u1ec7u \u1ee9ng chuy\u1ec3n m\u00e0u (gradient) trong CSS c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng gradient tuy\u1ebfn t\u00ednh (Linear Gradients) ho\u1eb7c gradient radial.<\/span><\/p>\n<p><b>Gradient tuy\u1ebfn t\u00ednh (Linear Gradients)<\/b><span style=\"font-weight: 400;\">: Bao g\u1ed3m c\u00e1c chuy\u1ec3n ti\u1ebfp m\u00e0u m\u01b0\u1ee3t m\u00e0 theo h\u01b0\u1edbng l\u00ean, xu\u1ed1ng, tr\u00e1i, ph\u1ea3i v\u00e0 ch\u00e9o. C\u1ea7n \u00edt nh\u1ea5t hai m\u00e0u \u0111\u1ec3 t\u1ea1o ra m\u1ed9t gradient tuy\u1ebfn t\u00ednh. C\u00f3 th\u1ec3 s\u1eed d\u1ee5ng nhi\u1ec1u h\u01a1n hai m\u00e0u trong gradient tuy\u1ebfn t\u00ednh. \u0110i\u1ec3m b\u1eaft \u0111\u1ea7u v\u00e0 h\u01b0\u1edbng l\u00e0 c\u1ea7n thi\u1ebft cho hi\u1ec7u \u1ee9ng gradient.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n<pre>background-image: linear-gradient(direction, color-stop1, color-stop2, ...);<\/pre>\n<p><b>Gradient radial<\/b><span style=\"font-weight: 400;\"> kh\u00e1c v\u1edbi gradient tuy\u1ebfn t\u00ednh. N\u00f3 b\u1eaft \u0111\u1ea7u t\u1eeb m\u1ed9t \u0111i\u1ec3m duy nh\u1ea5t v\u00e0 t\u1ecfa ra ngo\u00e0i. Theo m\u1eb7c \u0111\u1ecbnh, m\u00e0u \u0111\u1ea7u ti\u00ean b\u1eaft \u0111\u1ea7u t\u1eeb v\u1ecb tr\u00ed trung t\u00e2m c\u1ee7a ph\u1ea7n t\u1eed v\u00e0 sau \u0111\u00f3 m\u1edd d\u1ea7n \u0111\u1ebfn m\u00e0u cu\u1ed1i c\u00f9ng v\u1ec1 ph\u00eda c\u1ea1nh c\u1ee7a ph\u1ea7n t\u1eed. S\u1ef1 m\u1edd d\u1ea7n x\u1ea3y ra \u1edf t\u1ed1c \u0111\u1ed9 b\u1eb1ng nhau cho \u0111\u1ebfn khi \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n<pre>background-image: radial-gradient(shape size at position, start-color, ...);<\/pre>\n<h3><b>L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 t\u1ea1o b\u1ed1 c\u1ee5c mansory ch\u1ec9 s\u1eed d\u1ee5ng CSS \u0111\u1ec3 hi\u1ec3n th\u1ecb c\u00e1c th\u00e0nh ph\u1ea7n c\u00f3 chi\u1ec1u cao thay \u0111\u1ed5i?\u00a0<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">B\u1ed1 c\u1ee5c x\u00e2y d\u1ef1ng (masonry layout) l\u00e0 m\u1ed9t ki\u1ec3u b\u1ed1 c\u1ee5c linh ho\u1ea1t, th\u01b0\u1eddng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng trong c\u00e1c trang web nh\u01b0 Pinterest, Instagram, n\u01a1i c\u00e1c ph\u1ea7n t\u1eed c\u00f3 chi\u1ec1u cao kh\u00e1c nhau x\u1ebfp ch\u1ed3ng l\u00ean nhau theo c\u1ed9t, t\u1ea1o ra m\u1ed9t hi\u1ec7u \u1ee9ng t\u1ef1 nhi\u00ean v\u00e0 h\u1ea5p d\u1eabn. Lo\u1ea1i b\u1ed1 c\u1ee5c n\u00e0y r\u1ea5t ph\u1ed5 bi\u1ebfn trong c\u00e1c trang web hi\u1ec3n th\u1ecb nhi\u1ec1u n\u1ed9i dung c\u00f3 k\u00edch th\u01b0\u1edbc kh\u00e1c nhau nh\u01b0 h\u00ecnh \u1ea3nh, b\u00e0i vi\u1ebft, s\u1ea3n ph\u1ea9m,&#8230;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 t\u1ea1o b\u1ed1 c\u1ee5c masonry ch\u1ec9 s\u1eed d\u1ee5ng CSS cho c\u00e1c th\u00e0nh ph\u1ea7n c\u00f3 chi\u1ec1u cao thay \u0111\u1ed5i, l\u1eadp tr\u00ecnh vi\u00ean c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng <\/span><b>CSS Grid<\/b><span style=\"font-weight: 400;\"> ho\u1eb7c <\/span><b>flexbox<\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h3><b>T\u1ea1o l\u1eadp h\u1ed9p ki\u1ec3m t\u00f9y ch\u1ec9nh ch\u1ec9 b\u1eb1ng CSS nh\u01b0 th\u1ebf n\u00e0o?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">D\u01b0\u1edbi \u0111\u00e2y l\u00e0 c\u00e1ch t\u1ea1o m\u1ed9t checkbox t\u00f9y ch\u1ec9nh b\u1eb1ng CSS:<\/span><\/p>\n<p>HTML:<\/p>\n<pre><span style=\"font-weight: 400;\">&lt;label class=\"custom-checkbox\"&gt;\u00a0<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;input type=\"checkbox\" hidden\/&gt;\u00a0<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;span class=\"checkmark\"&gt;&lt;\/span&gt;\u00a0<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/label&gt;<\/span><\/pre>\n<p>CSS:<\/p>\n<pre><span style=\"font-weight: 400;\">.custom-checkbox input[type=\"checkbox\"] {\u00a0<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0visibility: hidden;\u00a0<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">.custom-checkbox .checkmark {\u00a0<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0height: 20px;\u00a0<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0width: 20px;\u00a0<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0background-color: #eee;\u00a0<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0display: inline-block;\u00a0<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">.custom-checkbox input[type=\"checkbox\"]:checked + .checkmark {\u00a0<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0background-color: blue;\u00a0<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<p>CSS n\u00e0y \u1ea9n checkbox m\u1eb7c \u0111\u1ecbnh v\u00e0 s\u1eed d\u1ee5ng m\u1ed9t span \u0111\u1ec3 t\u1ea1o d\u1ea5u ki\u1ec3m t\u00f9y ch\u1ec9nh. B\u1ed9 ch\u1ecdn :checked \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 thay \u0111\u1ed5i h\u00ecnh th\u1ee9c c\u1ee7a checkbox khi n\u00f3 \u0111\u01b0\u1ee3c ch\u1ecdn.<\/p>\n<h3><b>C\u00e1ch t\u1ed1t nh\u1ea5t \u0111\u1ec3 \u0111\u01b0a t\u1ec7p CSS v\u00e0o HTML l\u00e0 g\u00ec? T\u1ea1i sao n\u00ean s\u1eed d\u1ee5ng @import?<\/b><i><\/i><\/h3>\n<p><b>T\u1ec7p ki\u1ec3u d\u00e1ng b\u00ean ngo\u00e0i &#8211; The External Style Sheet (s\u1eed d\u1ee5ng th\u1ebb &lt;link&gt; HTML)<\/b><span style=\"font-weight: 400;\"> l\u00e0 ph\u01b0\u01a1ng ph\u00e1p t\u1ed1t nh\u1ea5t \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 li\u00ean k\u1ebft c\u00e1c y\u1ebfu t\u1ed1. Vi\u1ec7c duy tr\u00ec v\u00e0 t\u00e1i s\u1eed d\u1ee5ng t\u1ec7p CSS tr\u00ean c\u00e1c trang kh\u00e1c nhau d\u1ec5 d\u00e0ng v\u00e0 hi\u1ec7u qu\u1ea3. Th\u1ebb &lt;link&gt; \u0111\u01b0\u1ee3c \u0111\u1eb7t trong ph\u1ea7n &lt;head&gt; c\u1ee7a HTML. \u0110\u1ec3 ch\u1ec9 \u0111\u1ecbnh m\u1ed9t ki\u1ec3u ph\u01b0\u01a1ng ti\u1ec7n type=&#8221;text\/css&#8221; cho m\u1ed9t Cascading Style Sheet, thu\u1ed9c t\u00ednh &lt;type&gt; \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 b\u1ecf qua c\u00e1c ki\u1ec3u b\u1ea3ng ki\u1ec3u kh\u00f4ng \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 trong tr\u00ecnh duy\u1ec7t.<\/span><\/p>\n<p><b>Quy t\u1eafc @import:<\/b><span style=\"font-weight: 400;\"> Quy t\u1eafc @import \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 nh\u1eadp m\u1ed9t b\u1ea3ng ki\u1ec3u v\u00e0o m\u1ed9t b\u1ea3ng ki\u1ec3u kh\u00e1c. Quy t\u1eafc n\u00e0y c\u0169ng h\u1ed7 tr\u1ee3 c\u00e1c truy v\u1ea5n media \u0111\u1ec3 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 nh\u1eadp b\u1ea3ng ki\u1ec3u ph\u1ee5 thu\u1ed9c v\u00e0o media. Quy t\u1eafc @import ph\u1ea3i \u0111\u01b0\u1ee3c khai b\u00e1o \u1edf \u0111\u1ea7u t\u00e0i li\u1ec7u sau b\u1ea5t k\u1ef3 khai b\u00e1o @charset n\u00e0o.<\/span><\/p>\n<p><b>\u0110\u1eb7c \u0111i\u1ec3m c\u1ee7a @import:<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Quy t\u1eafc @import \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 nh\u1eadp m\u1ed9t b\u1ea3ng ki\u1ec3u v\u00e0o m\u1ed9t trang HTML ho\u1eb7c m\u1ed9t b\u1ea3ng ki\u1ec3u kh\u00e1c.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Quy t\u1eafc @import c\u0169ng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 th\u00eam c\u00e1c truy v\u1ea5n media, do \u0111\u00f3 vi\u1ec7c nh\u1eadp ph\u1ee5 thu\u1ed9c v\u00e0o media.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">N\u00f3 lu\u00f4n \u0111\u01b0\u1ee3c khai b\u00e1o \u1edf \u0111\u1ea7u t\u00e0i li\u1ec7u.<\/span><\/li>\n<\/ul>\n<p><b>C\u00fa ph\u00e1p:<\/b><\/p>\n<pre>@import url|string list-of-mediaqueries;<\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Tong_ket_cau_hoi_phong_van_CSS\"><\/span><b>T\u1ed5ng k\u1ebft c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n CSS<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">B\u1ea1n \u0111\u00e3 tr\u1ea3 l\u1eddi \u0111\u00fang bao nhi\u00eau c\u00e2u trong s\u1ed1 40 c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n CSS \u0111\u01b0\u1ee3c ITviec t\u1ed5ng h\u1ee3p trong b\u00e0i vi\u1ebft n\u00e0y? Hy v\u1ecdng r\u1eb1ng v\u1edbi b\u1ed9 c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n CSS n\u00e0y, b\u1ea1n \u0111\u00e3 c\u00f3 m\u1ed9t c\u00e1i nh\u00ecn t\u1ed5ng quan v\u00e0 s\u00e2u s\u1eafc h\u01a1n v\u1ec1 CSS.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ngo\u00e0i c\u00e1c c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n CSS tr\u00ean, h\u00e3y ti\u1ebfp t\u1ee5c t\u00ecm hi\u1ec3u v\u1ec1 c\u00e1c kh\u00eda c\u1ea1nh kh\u00e1c c\u1ee7a CSS v\u00e0 chu\u1ea9n b\u1ecb m\u1ed9t portfolio th\u1eadt ch\u1ec9n chu \u0111\u1ec3 ghi \u0111i\u1ec3m v\u1edbi nh\u00e0 tuy\u1ec3n d\u1ee5ng nh\u00e9.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Trong b\u00e0i vi\u1ebft n\u00e0y, ITviec \u0111\u00e3 t\u1ed5ng h\u1ee3p 40 c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n CSS, t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao, d\u00e0nh cho c\u00e1c Frontend Developer, t\u1eeb c\u1ea5p \u0111\u1ed9 \u0111\u1ea7u v\u00e0o (Junior) \u0111\u1ebfn c\u1ea5p cao (Senior). H\u00e3y \u0111\u1ecdc t\u1eebng c\u00e2u h\u1ecfi v\u00e0 th\u1eed tr\u1ea3 l\u1eddi tr\u01b0\u1edbc khi xem \u0111\u00e1p \u00e1n \u0111\u1ec3 ki\u1ec3m tra ki\u1ebfn th\u1ee9c tr\u01b0\u1edbc [&hellip;]<\/p>\n","protected":false},"author":213,"featured_media":82252,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"categories":[109,105],"tags":[],"class_list":["post-82077","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-chuyen-mon-it","category-phong-van-it"],"blocksy_meta":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.8 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Top 30+ c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n CSS t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao - ITviec Blog<\/title>\n<meta name=\"description\" content=\"L\u01b0u ngay 40 c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n CSS, t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao, d\u00e0nh cho c\u00e1c Frontend Developer, t\u1eeb Junior \u0111\u1ebfn Senior.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-css\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Top 30+ c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n CSS t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao\" \/>\n<meta property=\"og:description\" content=\"Trong b\u00e0i vi\u1ebft n\u00e0y, ITviec \u0111\u00e3 t\u1ed5ng h\u1ee3p 40 c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n CSS, t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao, d\u00e0nh cho c\u00e1c Frontend Developer, t\u1eeb c\u1ea5p \u0111\u1ed9 \u0111\u1ea7u v\u00e0o (Junior) \u0111\u1ebfn\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-css\/\" \/>\n<meta property=\"og:site_name\" content=\"ITviec Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ITviec\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-28T09:25:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/11\/cau-hoi-phong-van-CSS-vippro.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"790\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Linh Trao\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ITviec\" \/>\n<meta name=\"twitter:site\" content=\"@ITviec\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Linh Trao\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"38 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Top 30+ c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n CSS t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao - ITviec Blog","description":"L\u01b0u ngay 40 c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n CSS, t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao, d\u00e0nh cho c\u00e1c Frontend Developer, t\u1eeb Junior \u0111\u1ebfn Senior.","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:\/\/itviec.com\/blog\/cau-hoi-phong-van-css\/","og_locale":"vi_VN","og_type":"article","og_title":"Top 30+ c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n CSS t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao","og_description":"Trong b\u00e0i vi\u1ebft n\u00e0y, ITviec \u0111\u00e3 t\u1ed5ng h\u1ee3p 40 c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n CSS, t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao, d\u00e0nh cho c\u00e1c Frontend Developer, t\u1eeb c\u1ea5p \u0111\u1ed9 \u0111\u1ea7u v\u00e0o (Junior) \u0111\u1ebfn","og_url":"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-css\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2024-11-28T09:25:03+00:00","og_image":[{"width":1500,"height":790,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/11\/cau-hoi-phong-van-CSS-vippro.jpg","type":"image\/jpeg"}],"author":"Linh Trao","twitter_card":"summary_large_image","twitter_creator":"@ITviec","twitter_site":"@ITviec","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Linh Trao","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"38 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-css\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-css\/"},"author":{"name":"Linh Trao","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/6d1bcbfa05475cbc5a2eaf0727501a16"},"headline":"Top 30+ c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n CSS t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao","datePublished":"2024-11-28T09:25:03+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-css\/"},"wordCount":10176,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-css\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/11\/cau-hoi-phong-van-CSS-vippro.jpg","articleSection":["Chuy\u00ean m\u00f4n IT","Ph\u1ecfng v\u1ea5n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-css\/","url":"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-css\/","name":"Top 30+ c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n CSS t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-css\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-css\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/11\/cau-hoi-phong-van-CSS-vippro.jpg","datePublished":"2024-11-28T09:25:03+00:00","description":"L\u01b0u ngay 40 c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n CSS, t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao, d\u00e0nh cho c\u00e1c Frontend Developer, t\u1eeb Junior \u0111\u1ebfn Senior.","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-css\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/cau-hoi-phong-van-css\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-css\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/11\/cau-hoi-phong-van-CSS-vippro.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/11\/cau-hoi-phong-van-CSS-vippro.jpg","width":1500,"height":790,"caption":"c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n css - itviec blog"},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Chuy\u00ean m\u00f4n IT","item":"https:\/\/itviec.com\/blog\/chuyen-mon-it\/"},{"@type":"ListItem","position":2,"name":"Top 30+ c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n CSS t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao"}]},{"@type":"WebSite","@id":"https:\/\/itviec.com\/blog\/#website","url":"https:\/\/itviec.com\/blog\/","name":"ITviec Blog","description":"IT Jobs &amp; People in Vietnam","publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itviec.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/itviec.com\/blog\/#organization","name":"ITviec","url":"https:\/\/itviec.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","width":1800,"height":1800,"caption":"ITviec"},"image":{"@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ITviec","https:\/\/x.com\/ITviec","https:\/\/www.linkedin.com\/company\/itviec","https:\/\/www.youtube.com\/channel\/UCYthAQ3bcGr57M_ag5gHDvQ"]},{"@type":"Person","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/6d1bcbfa05475cbc5a2eaf0727501a16","name":"Linh Trao","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/trao-thi-tung-linh-author-e1709892478113-100x100.jpg","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/trao-thi-tung-linh-author-e1709892478113-100x100.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/trao-thi-tung-linh-author-e1709892478113-100x100.jpg","caption":"Linh Trao"},"url":"https:\/\/itviec.com\/blog\/author\/linh-trao\/"}]}},"_links":{"self":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/82077","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/users\/213"}],"replies":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/comments?post=82077"}],"version-history":[{"count":0,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/82077\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/82252"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=82077"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=82077"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=82077"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}