{"id":344,"date":"2020-04-16T09:40:00","date_gmt":"2020-04-16T02:40:00","guid":{"rendered":"https:\/\/thietkewebdalat.net\/blog\/?p=344"},"modified":"2020-04-16T09:40:51","modified_gmt":"2020-04-16T02:40:51","slug":"cu-phap-css-cascading-style-sheets-2020","status":"publish","type":"post","link":"https:\/\/thietkewebdalat.net\/blog\/cu-phap-css-cascading-style-sheets-2020\/","title":{"rendered":"C\u00fa ph\u00e1p CSS &#8211; Cascading Style Sheets"},"content":{"rendered":"<p><span style=\"color: #000000;\">CSS bao g\u1ed3m c\u00e1c quy t\u1eafc \u0111\u01b0\u1ee3c tr\u00ecnh duy\u1ec7t di\u1ec5n gi\u1ea3i v\u00e0 sau \u0111\u00f3 \u00e1p d\u1ee5ng cho c\u00e1c th\u00e0nh ph\u1ea7n t\u01b0\u01a1ng \u1ee9ng trong t\u00e0i li\u1ec7u c\u1ee7a b\u1ea1n. M\u1ed9t quy t\u1eafc \u0111\u01b0\u1ee3c t\u1ea1o th\u00e0nh t\u1eeb ba ph\u1ea7n:<\/span><\/p>\n<p><span style=\"color: #000000;\">Selector &#8211; V\u00f9ng ch\u1ecdn l\u00e0 m\u1ed9t th\u1ebb HTML m\u00e0 t\u1ea1i \u0111\u00f3 m\u1ed9t ki\u1ec3u thu\u1ed9c t\u00ednh s\u1ebd \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng. \u0110\u00e2y c\u00f3 th\u1ec3 l\u00e0 b\u1ea5t k\u1ef3 th\u1ebb n\u00e0o nh\u01b0 &lt;h1&gt; ho\u1eb7c &lt;b\u1ea3ng&gt;, v.v.<\/span><\/p>\n<p><span style=\"color: #000000;\">Thu\u1ed9c t\u00ednh &#8211; L\u00e0 m\u1ed9t lo\u1ea1i thu\u1ed9c t\u00ednh c\u1ee7a th\u1ebb HTML. N\u00f3i m\u1ed9t c\u00e1ch \u0111\u01a1n gi\u1ea3n, t\u1ea5t c\u1ea3 c\u00e1c thu\u1ed9c t\u00ednh HTML \u0111\u01b0\u1ee3c chuy\u1ec3n \u0111\u1ed5i th\u00e0nh c\u00e1c thu\u1ed9c t\u00ednh CSS. Ch\u00fang c\u00f3 th\u1ec3 l\u00e0 m\u00e0u s\u1eafc, \u0111\u01b0\u1eddng vi\u1ec1n , v.v<\/span><\/p>\n<p><span style=\"color: #000000;\">Gi\u00e1 tr\u1ecb &#8211; Gi\u00e1 tr\u1ecb \u0111\u01b0\u1ee3c g\u00e1n cho c\u00e1c thu\u1ed9c t\u00ednh. V\u00ed d\u1ee5: thu\u1ed9c t\u00ednh m\u00e0u c\u00f3 th\u1ec3 c\u00f3 gi\u00e1 tr\u1ecb l\u00e0 red ho\u1eb7c # F1F1F1, v.v.<\/span><\/p>\n<p><span style=\"color: #000000;\">B\u1ea1n c\u00f3 th\u1ec3 \u0111\u1eb7t C\u00fa ph\u00e1p Quy t\u1eafc Ki\u1ec3u CSS nh\u01b0 sau:<\/span><\/p>\n<p><span style=\"color: #ff0000;\"><strong>selector { property: value }<\/strong><\/span><\/p>\n<figure id=\"attachment_345\" aria-describedby=\"caption-attachment-345\" style=\"width: 755px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-345\" src=\"https:\/\/thietkewebdalat.net\/blog\/wp-content\/uploads\/2020\/04\/syntax.jpg\" alt=\"css-syntax\" width=\"755\" height=\"234\" srcset=\"https:\/\/thietkewebdalat.net\/blog\/wp-content\/uploads\/2020\/04\/syntax.jpg 600w, https:\/\/thietkewebdalat.net\/blog\/wp-content\/uploads\/2020\/04\/syntax-300x93.jpg 300w\" sizes=\"auto, (max-width: 755px) 100vw, 755px\" \/><figcaption id=\"caption-attachment-345\" class=\"wp-caption-text\">css-syntax<\/figcaption><\/figure>\n<ul>\n<li><span style=\"color: #000000;\">V\u00ed d\u1ee5: &#8211; B\u1ea1n c\u00f3 th\u1ec3 x\u00e1c \u0111\u1ecbnh \u0111\u01b0\u1eddng vi\u1ec1n b\u1ea3ng nh\u01b0 sau:<\/span><\/li>\n<\/ul>\n<p><span style=\"color: #000000;\">table{ border :1px solid #C00; }<\/span><br \/>\n<span style=\"color: #000000;\">\u1ede \u0111\u00e2y b\u1ea3ng l\u00e0 m\u1ed9t b\u1ed9 ch\u1ecdn v\u00e0 \u0111\u01b0\u1eddng vi\u1ec1n l\u00e0 m\u1ed9t thu\u1ed9c t\u00ednh v\u00e0 gi\u00e1 tr\u1ecb \u0111\u00e3 cho 1px solid # C00 l\u00e0 gi\u00e1 tr\u1ecb c\u1ee7a thu\u1ed9c t\u00ednh \u0111\u00f3.<\/span><\/p>\n<p><span style=\"color: #000000;\">B\u1ea1n c\u00f3 th\u1ec3 x\u00e1c \u0111\u1ecbnh b\u1ed9 ch\u1ecdn theo nhi\u1ec1u c\u00e1ch \u0111\u01a1n gi\u1ea3n kh\u00e1c nhau sao cho ph\u00f9 h\u1ee3p. H\u00e3y \u0111\u1ec3 t\u00f4i \u0111\u1eb7t t\u1eebng b\u1ed9 ch\u1ecdn m\u1ed9t.<\/span><\/p>\n<h2>The Type Selectors<\/h2>\n<p><span style=\"color: #000000;\">M\u1ed9t v\u00ed d\u1ee5 n\u1eefa \u0111\u1ec3 \u0111\u01b0a ra m\u00e0u cho t\u1ea5t c\u1ea3 c\u00e1c ti\u00eau \u0111\u1ec1 1:<\/span><\/p>\n<p><span style=\"color: #000000;\">h1 {<\/span><br \/>\n<span style=\"color: #000000;\">color: #36CFFF; <\/span><br \/>\n<span style=\"color: #000000;\">}<\/span><\/p>\n<h2>The Universal Selectors<\/h2>\n<p><span style=\"color: #000000;\">Thay v\u00ec ch\u1ecdn c\u00e1c th\u00e0nh ph\u1ea7n c\u1ee7a m\u1ed9t lo\u1ea1i c\u1ee5 th\u1ec3, b\u1ed9 ch\u1ecdn ph\u1ed5 qu\u00e1t ho\u00e0n to\u00e0n kh\u1edbp v\u1edbi t\u00ean c\u1ee7a b\u1ea5t k\u1ef3 lo\u1ea1i ph\u1ea7n t\u1eed n\u00e0o: V\u00ed d\u1ee5<\/span><\/p>\n<p><span style=\"color: #000000;\">* { <\/span><br \/>\n<span style=\"color: #000000;\">color: #000000; <\/span><br \/>\n<span style=\"color: #000000;\">}<\/span><br \/>\n<span style=\"color: #000000;\">Quy t\u1eafc n\u00e0y l\u00e0m cho n\u1ed9i dung c\u1ee7a m\u1ecdi y\u1ebfu t\u1ed1 trong t\u00e0i li\u1ec7u c\u00f3 m\u00e0u \u0111en.<\/span><\/p>\n<h2>The Descendant Selectors<\/h2>\n<p><span style=\"color: #000000;\">Gi\u1ea3 s\u1eed b\u1ea1n mu\u1ed1n \u00e1p d\u1ee5ng quy t\u1eafc ki\u1ec3u cho m\u1ed9t ph\u1ea7n t\u1eed c\u1ee5 th\u1ec3 ch\u1ec9 khi n\u00f3 n\u1eb1m trong m\u1ed9t ph\u1ea7n t\u1eed c\u1ee5 th\u1ec3. Nh\u01b0 \u0111\u01b0\u1ee3c \u0111\u01b0a ra trong v\u00ed d\u1ee5 sau, quy t\u1eafc ki\u1ec3u s\u1ebd ch\u1ec9 \u00e1p d\u1ee5ng cho ph\u1ea7n t\u1eed &lt;em&gt; khi n\u00f3 n\u1eb1m trong th\u1ebb &lt;ul&gt;.<\/span><\/p>\n<p><span style=\"color: #000000;\">ul em {<\/span><br \/>\n<span style=\"color: #000000;\">color: #000000; <\/span><br \/>\n<span style=\"color: #000000;\">}<\/span><\/p>\n<h2>The Class Selectors<\/h2>\n<p><span style=\"color: #000000;\">B\u1ea1n c\u00f3 th\u1ec3 x\u00e1c \u0111\u1ecbnh quy t\u1eafc ki\u1ec3u d\u1ef1a tr\u00ean thu\u1ed9c t\u00ednh l\u1edbp c\u1ee7a c\u00e1c ph\u1ea7n t\u1eed. T\u1ea5t c\u1ea3 c\u00e1c ph\u1ea7n t\u1eed c\u00f3 l\u1edbp \u0111\u00f3 s\u1ebd \u0111\u01b0\u1ee3c \u0111\u1ecbnh d\u1ea1ng theo quy t\u1eafc \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh.<\/span><\/p>\n<p><span style=\"color: #000000;\">.black {<\/span><br \/>\n<span style=\"color: #000000;\">color: #000000; <\/span><br \/>\n<span style=\"color: #000000;\">}<\/span><\/p>\n<p><span style=\"color: #000000;\">Quy t\u1eafc n\u00e0y l\u00e0m cho n\u1ed9i dung m\u00e0u \u0111en cho m\u1ecdi th\u00e0nh ph\u1ea7n v\u1edbi thu\u1ed9c t\u00ednh l\u1edbp \u0111\u01b0\u1ee3c \u0111\u1eb7t th\u00e0nh m\u00e0u \u0111en trong t\u00e0i li\u1ec7u B\u1ea1n c\u00f3 th\u1ec3 l\u00e0m cho n\u00f3 m\u1ed9t ch\u00fat \u0111\u1eb7c bi\u1ec7t h\u01a1n. V\u00ed d\u1ee5:<\/span><\/p>\n<p><span style=\"color: #000000;\">h1.black {<\/span><br \/>\n<span style=\"color: #000000;\">color: #000000; <\/span><br \/>\n<span style=\"color: #000000;\">}<\/span><br \/>\n<span style=\"color: #000000;\">Quy t\u1eafc n\u00e0y hi\u1ec3n th\u1ecb n\u1ed9i dung m\u00e0u \u0111en ch\u1ec9 cho c\u00e1c ph\u1ea7n t\u1eed &lt;h1&gt; v\u1edbi thu\u1ed9c t\u00ednh l\u1edbp \u0111\u01b0\u1ee3c \u0111\u1eb7t th\u00e0nh m\u00e0u \u0111en .<\/span><\/p>\n<p><span style=\"color: #000000;\">B\u1ea1n c\u00f3 th\u1ec3 \u00e1p d\u1ee5ng nhi\u1ec1u h\u01a1n m\u1ed9t b\u1ed9 ch\u1ecdn l\u1edbp cho ph\u1ea7n t\u1eed \u0111\u00e3 cho. H\u00e3y xem x\u00e9t v\u00ed d\u1ee5 sau:<\/span><\/p>\n<p><span style=\"color: #000000;\">&lt;p class = &#8220;center bold&#8221;&gt;<\/span><br \/>\n<span style=\"color: #000000;\">This para will be styled by the classes center and bold.<\/span><br \/>\n<span style=\"color: #000000;\">&lt;\/p&gt;<\/span><\/p>\n<h2>The ID Selectors<\/h2>\n<p><span style=\"color: #000000;\">B\u1ea1n c\u00f3 th\u1ec3 x\u00e1c \u0111\u1ecbnh quy t\u1eafc ki\u1ec3u d\u1ef1a tr\u00ean thu\u1ed9c t\u00ednh id c\u1ee7a c\u00e1c ph\u1ea7n t\u1eed. T\u1ea5t c\u1ea3 c\u00e1c y\u1ebfu t\u1ed1 c\u00f3 id \u0111\u00f3 s\u1ebd \u0111\u01b0\u1ee3c \u0111\u1ecbnh d\u1ea1ng theo quy t\u1eafc \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh.<\/span><\/p>\n<p><span style=\"color: #000000;\">#black {<\/span><br \/>\n<span style=\"color: #000000;\">color: #000000; <\/span><br \/>\n<span style=\"color: #000000;\">}<\/span><\/p>\n<p><span style=\"color: #000000;\">Quy t\u1eafc n\u00e0y hi\u1ec3n th\u1ecb n\u1ed9i dung m\u00e0u \u0111en cho m\u1ecdi th\u00e0nh ph\u1ea7n v\u1edbi thu\u1ed9c t\u00ednh id \u0111\u01b0\u1ee3c \u0111\u1eb7t th\u00e0nh m\u00e0u \u0111en trong t\u00e0i li\u1ec7u c\u1ee7a ch\u00fang t\u00f4i. B\u1ea1n c\u00f3 th\u1ec3 l\u00e0m cho n\u00f3 m\u1ed9t ch\u00fat \u0111\u1eb7c bi\u1ec7t h\u01a1n. V\u00ed d\u1ee5:<\/span><\/p>\n<p><span style=\"color: #000000;\">h1#black {<\/span><br \/>\n<span style=\"color: #000000;\">color: #000000; <\/span><br \/>\n<span style=\"color: #000000;\">}<\/span><br \/>\n<span style=\"color: #000000;\">Quy t\u1eafc n\u00e0y hi\u1ec3n th\u1ecb n\u1ed9i dung m\u00e0u \u0111en ch\u1ec9 cho c\u00e1c ph\u1ea7n t\u1eed &lt;h1&gt; v\u1edbi thu\u1ed9c t\u00ednh id \u0111\u01b0\u1ee3c \u0111\u1eb7t th\u00e0nh m\u00e0u \u0111en .<\/span><\/p>\n<p><span style=\"color: #000000;\">S\u1ee9c m\u1ea1nh th\u1ef1c s\u1ef1 c\u1ee7a b\u1ed9 ch\u1ecdn id l\u00e0 khi ch\u00fang \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng l\u00e0m n\u1ec1n t\u1ea3ng cho b\u1ed9 ch\u1ecdn h\u1eadu du\u1ec7, v\u00ed d\u1ee5:<\/span><\/p>\n<p><span style=\"color: #000000;\">#black h2 {<\/span><br \/>\n<span style=\"color: #000000;\">color: #000000; <\/span><br \/>\n<span style=\"color: #000000;\">}<\/span><br \/>\n<span style=\"color: #000000;\">Trong v\u00ed d\u1ee5 n\u00e0y, t\u1ea5t c\u1ea3 c\u00e1c ti\u00eau \u0111\u1ec1 c\u1ea5p 2 s\u1ebd \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb m\u00e0u \u0111en khi c\u00e1c ti\u00eau \u0111\u1ec1 \u0111\u00f3 n\u1eb1m trong c\u00e1c th\u1ebb c\u00f3 thu\u1ed9c t\u00ednh id \u0111\u01b0\u1ee3c \u0111\u1eb7t th\u00e0nh m\u00e0u \u0111en .<\/span><\/p>\n<h2>The Child Selectors<\/h2>\n<p><span style=\"color: #000000;\">B\u1ea1n \u0111\u00e3 th\u1ea5y c\u00e1c b\u1ed9 ch\u1ecdn h\u1eadu du\u1ec7. C\u00f3 th\u00eam m\u1ed9t lo\u1ea1i b\u1ed9 ch\u1ecdn, r\u1ea5t gi\u1ed1ng v\u1edbi con ch\u00e1u nh\u01b0ng c\u00f3 ch\u1ee9c n\u0103ng kh\u00e1c nhau. H\u00e3y xem x\u00e9t v\u00ed d\u1ee5 sau &#8211;<\/span><\/p>\n<p><span style=\"color: #000000;\">body &gt; p {<\/span><br \/>\n<span style=\"color: #000000;\">color: #000000; <\/span><br \/>\n<span style=\"color: #000000;\">}<\/span><br \/>\n<span style=\"color: #000000;\">Quy t\u1eafc n\u00e0y s\u1ebd hi\u1ec3n th\u1ecb t\u1ea5t c\u1ea3 c\u00e1c \u0111o\u1ea1n m\u00e0u \u0111en n\u1ebfu ch\u00fang l\u00e0 ph\u1ea7n t\u1eed con tr\u1ef1c ti\u1ebfp c\u1ee7a ph\u1ea7n t\u1eed &lt;body&gt;. C\u00e1c \u0111o\u1ea1n kh\u00e1c \u0111\u01b0\u1ee3c \u0111\u1eb7t b\u00ean trong c\u00e1c y\u1ebfu t\u1ed1 kh\u00e1c nh\u01b0 &lt;div&gt; ho\u1eb7c &lt;td&gt; s\u1ebd kh\u00f4ng c\u00f3 b\u1ea5t k\u1ef3 \u1ea3nh h\u01b0\u1edfng n\u00e0o c\u1ee7a quy t\u1eafc n\u00e0y.<\/span><\/p>\n<h2>The Attribute Selectors<\/h2>\n<p><span style=\"color: #000000;\">B\u1ea1n c\u0169ng c\u00f3 th\u1ec3 \u00e1p d\u1ee5ng c\u00e1c ki\u1ec3u cho c\u00e1c ph\u1ea7n t\u1eed HTML v\u1edbi c\u00e1c thu\u1ed9c t\u00ednh c\u1ee5 th\u1ec3. Quy t\u1eafc ki\u1ec3u b\u00ean d\u01b0\u1edbi s\u1ebd kh\u1edbp v\u1edbi t\u1ea5t c\u1ea3 c\u00e1c th\u00e0nh ph\u1ea7n \u0111\u1ea7u v\u00e0o c\u00f3 thu\u1ed9c t\u00ednh lo\u1ea1i v\u1edbi gi\u00e1 tr\u1ecb v\u0103n b\u1ea3n:<\/span><\/p>\n<p><span style=\"color: #000000;\">input[type = &#8220;text&#8221;] {<\/span><br \/>\n<span style=\"color: #000000;\">color: #000000; <\/span><br \/>\n<span style=\"color: #000000;\">}<\/span><br \/>\n<span style=\"color: #000000;\">\u01afu \u0111i\u1ec3m c\u1ee7a ph\u01b0\u01a1ng ph\u00e1p n\u00e0y l\u00e0 ph\u1ea7n t\u1eed &lt;input type = &#8220;submit&#8221; \/&gt; kh\u00f4ng b\u1ecb \u1ea3nh h\u01b0\u1edfng v\u00e0 m\u00e0u ch\u1ec9 \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng cho c\u00e1c tr\u01b0\u1eddng v\u0103n b\u1ea3n mong mu\u1ed1n.<\/span><\/p>\n<p><span style=\"color: #000000;\">C\u00f3 c\u00e1c quy t\u1eafc sau \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng cho b\u1ed9 ch\u1ecdn thu\u1ed9c t\u00ednh.<\/span><\/p>\n<p><span style=\"color: #000000;\">p [lang] &#8211; Ch\u1ecdn t\u1ea5t c\u1ea3 c\u00e1c th\u00e0nh ph\u1ea7n \u0111o\u1ea1n c\u00f3 thu\u1ed9c t\u00ednh lang .<\/span><\/p>\n<p><span style=\"color: #000000;\">p [lang = &#8220;fr&#8221;] &#8211; Ch\u1ecdn t\u1ea5t c\u1ea3 c\u00e1c ph\u1ea7n t\u1eed \u0111o\u1ea1n c\u00f3 thu\u1ed9c t\u00ednh lang c\u00f3 gi\u00e1 tr\u1ecb ch\u00ednh x\u00e1c l\u00e0 &#8220;fr&#8221;.<\/span><\/p>\n<p><span style=\"color: #000000;\">p [lang ~ = &#8220;fr&#8221;] &#8211; Ch\u1ecdn t\u1ea5t c\u1ea3 c\u00e1c th\u00e0nh ph\u1ea7n \u0111o\u1ea1n c\u00f3 thu\u1ed9c t\u00ednh lang ch\u1ee9a t\u1eeb &#8220;fr&#8221;.<\/span><\/p>\n<p><span style=\"color: #000000;\">p [lang | = &#8220;en&#8221;] &#8211; Ch\u1ecdn t\u1ea5t c\u1ea3 c\u00e1c ph\u1ea7n t\u1eed \u0111o\u1ea1n c\u00f3 thu\u1ed9c t\u00ednh lang ch\u1ee9a c\u00e1c gi\u00e1 tr\u1ecb ch\u00ednh x\u00e1c l\u00e0 &#8220;en&#8221; ho\u1eb7c b\u1eaft \u0111\u1ea7u b\u1eb1ng &#8220;en-&#8220;.<\/span><\/p>\n<h2>Multiple Style Rules<\/h2>\n<p><span style=\"color: #000000;\">B\u1ea1n c\u00f3 th\u1ec3 c\u1ea7n x\u00e1c \u0111\u1ecbnh nhi\u1ec1u quy t\u1eafc ki\u1ec3u cho m\u1ed9t th\u00e0nh ph\u1ea7n css. B\u1ea1n c\u00f3 th\u1ec3 x\u00e1c \u0111\u1ecbnh c\u00e1c quy t\u1eafc n\u00e0y \u0111\u1ec3 k\u1ebft h\u1ee3p nhi\u1ec1u thu\u1ed9c t\u00ednh v\u00e0 gi\u00e1 tr\u1ecb t\u01b0\u01a1ng \u1ee9ng th\u00e0nh m\u1ed9t kh\u1ed1i nh\u01b0 \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a trong v\u00ed d\u1ee5 sau:<\/span><\/p>\n<p><span style=\"color: #000000;\">h1 {<\/span><br \/>\n<span style=\"color: #000000;\">color: #36C;<\/span><br \/>\n<span style=\"color: #000000;\">font-weight: normal;<\/span><br \/>\n<span style=\"color: #000000;\">letter-spacing: .4em;<\/span><br \/>\n<span style=\"color: #000000;\">margin-bottom: 1em;<\/span><br \/>\n<span style=\"color: #000000;\">text-transform: lowercase;<\/span><br \/>\n<span style=\"color: #000000;\">}<\/span><\/p>\n<p><span style=\"color: #000000;\">\u1ede \u0111\u00e2y t\u1ea5t c\u1ea3 c\u00e1c c\u1eb7p thu\u1ed9c t\u00ednh v\u00e0 gi\u00e1 tr\u1ecb \u0111\u01b0\u1ee3c ph\u00e2n t\u00e1ch b\u1eb1ng d\u1ea5u ch\u1ea5m ph\u1ea9y (;) . B\u1ea1n c\u00f3 th\u1ec3 gi\u1eef ch\u00fang trong m\u1ed9t d\u00f2ng ho\u1eb7c nhi\u1ec1u d\u00f2ng. \u0110\u1ec3 d\u1ec5 \u0111\u1ecdc h\u01a1n, ch\u00fang t\u00f4i gi\u1eef ch\u00fang trong c\u00e1c d\u00f2ng ri\u00eang bi\u1ec7t.<\/span><\/p>\n<p><span style=\"color: #000000;\">Trong m\u1ed9t th\u1eddi gian, \u0111\u1eebng b\u1eadn t\u00e2m v\u1ec1 c\u00e1c thu\u1ed9c t\u00ednh \u0111\u01b0\u1ee3c \u0111\u1ec1 c\u1eadp trong kh\u1ed1i tr\u00ean. C\u00e1c thu\u1ed9c t\u00ednh n\u00e0y s\u1ebd \u0111\u01b0\u1ee3c gi\u1ea3i th\u00edch trong c\u00e1c ch\u01b0\u01a1ng s\u1eafp t\u1edbi v\u00e0 b\u1ea1n c\u00f3 th\u1ec3 t\u00ecm th\u1ea5y chi ti\u1ebft \u0111\u1ea7y \u0111\u1ee7 v\u1ec1 c\u00e1c thu\u1ed9c t\u00ednh trong T\u00e0i li\u1ec7u tham kh\u1ea3o CSS.<\/span><\/p>\n<h2>Grouping Selectors<\/h2>\n<p><span style=\"color: #000000;\">B\u1ea1n c\u00f3 th\u1ec3 \u00e1p d\u1ee5ng m\u1ed9t ki\u1ec3u cho nhi\u1ec1u b\u1ed9 ch\u1ecdn n\u1ebfu b\u1ea1n th\u00edch. Ch\u1ec9 c\u1ea7n t\u00e1ch c\u00e1c b\u1ed9 ch\u1ecdn b\u1eb1ng d\u1ea5u ph\u1ea9y, nh\u01b0 trong v\u00ed d\u1ee5 sau:<\/span><\/p>\n<p><span style=\"color: #000000;\">h1, h2, h3 {<\/span><br \/>\n<span style=\"color: #000000;\">color: #36C;<\/span><br \/>\n<span style=\"color: #000000;\">font-weight: normal;<\/span><br \/>\n<span style=\"color: #000000;\">letter-spacing: .4em;<\/span><br \/>\n<span style=\"color: #000000;\">margin-bottom: 1em;<\/span><br \/>\n<span style=\"color: #000000;\">text-transform: lowercase;<\/span><br \/>\n<span style=\"color: #000000;\">}<\/span><br \/>\n<span style=\"color: #000000;\">Quy t\u1eafc \u0111\u1ecbnh ngh\u0129a ki\u1ec3u n\u00e0y c\u0169ng s\u1ebd \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng cho ph\u1ea7n t\u1eed h1, h2 v\u00e0 h3. Th\u1ee9 t\u1ef1 c\u1ee7a danh s\u00e1ch l\u00e0 kh\u00f4ng li\u00ean quan. T\u1ea5t c\u1ea3 c\u00e1c y\u1ebfu t\u1ed1 trong b\u1ed9 ch\u1ecdn s\u1ebd c\u00f3 c\u00e1c khai b\u00e1o t\u01b0\u01a1ng \u1ee9ng \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng cho ch\u00fang.<\/span><\/p>\n<p><span style=\"color: #000000;\">B\u1ea1n c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p c\u00e1c b\u1ed9 ch\u1ecdn id kh\u00e1c nhau v\u1edbi nhau nh\u01b0 hi\u1ec3n th\u1ecb b\u00ean d\u01b0\u1edbi :<\/span><\/p>\n<p><span style=\"color: #000000;\">#content, #footer, #supplement {<\/span><br \/>\n<span style=\"color: #000000;\">position: absolute;<\/span><br \/>\n<span style=\"color: #000000;\">left: 510px;<\/span><br \/>\n<span style=\"color: #000000;\">width: 200px;<\/span><br \/>\n<span style=\"color: #000000;\">}<\/span><\/p>\n<p>B\u00e0i vi\u1ebft kh\u00e1c:<\/p>\n<p><a href=\"https:\/\/thietkewebdalat.net\/blog\/css-la-gi\/\">CSS l\u00e0 g\u00ec?<\/a><\/p>\n<p><a href=\"https:\/\/thietkewebdalat.net\/blog\/\">Thi\u1ebft k\u1ebf web gi\u00e1 r\u1ebb<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS bao g\u1ed3m c\u00e1c quy t\u1eafc \u0111\u01b0\u1ee3c tr\u00ecnh duy\u1ec7t di\u1ec5n gi\u1ea3i v\u00e0 sau \u0111\u00f3 \u00e1p d\u1ee5ng cho c\u00e1c th\u00e0nh ph\u1ea7n t\u01b0\u01a1ng \u1ee9ng trong t\u00e0i li\u1ec7u c\u1ee7a b\u1ea1n. M\u1ed9t quy t\u1eafc \u0111\u01b0\u1ee3c t\u1ea1o th\u00e0nh t\u1eeb ba ph\u1ea7n: Selector &#8211; V\u00f9ng ch\u1ecdn l\u00e0 m\u1ed9t th\u1ebb HTML m\u00e0 t\u1ea1i \u0111\u00f3 m\u1ed9t ki\u1ec3u thu\u1ed9c t\u00ednh s\u1ebd \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":346,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"amp_status":"","footnotes":""},"categories":[16,14],"tags":[122,128,117,130,129],"class_list":{"0":"post-344","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-css","8":"category-html-css-js","9":"tag-css","10":"tag-css-can-ban","11":"tag-css-la-gi","12":"tag-cu-phap-css","13":"tag-hoc-thiet-ke-web"},"_links":{"self":[{"href":"https:\/\/thietkewebdalat.net\/blog\/wp-json\/wp\/v2\/posts\/344","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thietkewebdalat.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thietkewebdalat.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thietkewebdalat.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thietkewebdalat.net\/blog\/wp-json\/wp\/v2\/comments?post=344"}],"version-history":[{"count":2,"href":"https:\/\/thietkewebdalat.net\/blog\/wp-json\/wp\/v2\/posts\/344\/revisions"}],"predecessor-version":[{"id":348,"href":"https:\/\/thietkewebdalat.net\/blog\/wp-json\/wp\/v2\/posts\/344\/revisions\/348"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thietkewebdalat.net\/blog\/wp-json\/wp\/v2\/media\/346"}],"wp:attachment":[{"href":"https:\/\/thietkewebdalat.net\/blog\/wp-json\/wp\/v2\/media?parent=344"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thietkewebdalat.net\/blog\/wp-json\/wp\/v2\/categories?post=344"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thietkewebdalat.net\/blog\/wp-json\/wp\/v2\/tags?post=344"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}