{"id":1090,"date":"2012-09-11T02:28:51","date_gmt":"2012-09-11T02:28:51","guid":{"rendered":"http:\/\/congnghepc.com\/2012\/09\/11\/mot-so-quy-uoc-ve-cach-viet-css\/"},"modified":"2023-08-28T16:40:10","modified_gmt":"2023-08-28T09:40:10","slug":"mot-so-quy-uoc-ve-cach-viet-css","status":"publish","type":"post","link":"https:\/\/tapchicntt.com\/mot-so-quy-uoc-ve-cach-viet-css\/","title":{"rendered":"B\u00e0i 2: M\u1ed9t S\u1ed1 Quy \u01af\u1edbc V\u1ec1 C\u00e1ch Vi\u1ebft CSS"},"content":{"rendered":"\n<p>Nh\u00ecn qua v\u00ed d\u1ee5 tr\u00ean \u00edt nhi\u1ec1u ch\u00fang ta c\u0169ng th\u1ea5y \u0111\u01b0\u1ee3c m\u1ed1i t\u01b0\u01a1ng \u0111\u1ed3ng gi\u1eefa c\u00e1c thu\u1ed9c t\u00ednh trong HTML v\u00e0 CSS cho n\u00ean n\u1ebfu b\u1ea1n \u0111\u00e3 h\u1ecdc qua HTML th\u00ec c\u0169ng s\u1ebd r\u1ea5t d\u1ec5 d\u00e0ng ti\u1ebfp thu CSS. Nh\u01b0ng kh\u00f4ng sao c\u1ea3, b\u00e2y gi\u1edd h\u00e3y nh\u00ecn v\u00e0o v\u00ed d\u1ee5 c\u1ee7a ch\u00fang ta v\u00e0 c\u00e1c b\u1ea1n xem n\u00f3 c\u00f3 gi\u1ed1ng v\u1edbi c\u1ea5u tr\u00fac sau kh\u00f4ng nh\u00e9.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">C\u00fa ph\u00e1p CSS c\u01a1 b\u1ea3n<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\nSelector { property:value; }\n<\/pre><\/div>\n\n\n<p><strong>Trong \u0111\u00f3<\/strong>:<\/p>\n\n\n\n<p>+<em><strong> Selector<\/strong><\/em>: C\u00e1c \u0111\u1ed1i t\u01b0\u1ee3ng m\u00e0 ch\u00fang ta s\u1ebd \u00e1p d\u1ee5ng c\u00e1c thu\u1ed9c t\u00ednh tr\u00ecnh b\u00e0y. N\u00f3 l\u00e0 c\u00e1c tag HTML, class hay id (ch\u00fang ta s\u1ebd h\u1ecdc v\u1ec1 2 th\u00e0nh ph\u1ea7n n\u00e0y \u1edf b\u00e0i h\u1ecdc sau).<\/p>\n\n\n\n<p><strong>V\u00ed d\u1ee5<\/strong>:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\nbody, h2, p, img, #title, #content, .username,\u2026\n<\/pre><\/div>\n\n\n<p>Trong CSS ngo\u00e0i vi\u1ebft t\u00ean selector theo t\u00ean tag, class, id. Ch\u00fang ta c\u00f2n c\u00f3 th\u1ec3 vi\u1ebft t\u00ean selector theo ph\u00e2n c\u1ea5p nh\u01b0 \u0111\u1ec3 ch\u1ec9 c\u00e1c \u1ea3nh \u1edf trong #entry, ch\u00fang ta vi\u1ebft selector l\u00e0 #entry img, nh\u01b0 v\u1eady th\u00ec c\u00e1c thu\u1ed9c t\u00ednh ch\u1ec9 \u0111\u1ecbnh s\u1ebd ch\u1ec9 \u00e1p d\u1ee5ng ri\u00eang cho c\u00e1c \u1ea3nh n\u1eb1m trong #entry.<\/p>\n\n\n\n<p>Khi vi\u1ebft t\u00ean cho class, \u0111\u00f4i khi s\u1ebd c\u00f3 nhi\u1ec1u th\u00e0nh ph\u1ea7n c\u00f3 c\u00f9ng class \u0111\u00f3, v\u00ed d\u1ee5 nh\u01b0 th\u1ebb img v\u00e0 th\u1ebb a c\u00f9ng c\u00f3 class t\u00ean vistors nh\u01b0ng \u0111\u00e2y l\u1ea1i l\u00e0 hai \u0111\u1ed1i t\u01b0\u1ee3ng kh\u00e1c nhau, 1 c\u00e1i l\u00e0 \u1ea3nh c\u1ee7a ng\u01b0\u1eddi th\u0103m, 1 c\u00e1i l\u00e0 li\u00ean k\u1ebft t\u1edbi trang ng\u01b0\u1eddi th\u0103m.<\/p>\n\n\n\n<p>N\u00ean n\u1ebfu khi vi\u1ebft CSS ta ghi l\u00e0 <strong>.visitors { width:50; }<\/strong> th\u00ec s\u1ebd \u1ea3nh h\u01b0\u1edfng t\u1edbi c\u1ea3 hai th\u00e0nh ph\u1ea7n.<\/p>\n\n\n\n<p>N\u00ean trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y, n\u1ebfu b\u1ea1n c\u00f3 \u00fd d\u00f9ng CSS \u0111\u00f3 ch\u1ec9 ri\u00eang ph\u1ea7n \u1ea3nh th\u00ec ch\u1ec9 n\u00ean ghi l\u00e0 <strong>img.visitors<\/strong> th\u00f4i.<\/p>\n\n\n\n<p>M\u1ed9t l\u1ed1i vi\u1ebft t\u00ean selector n\u1eefa \u0111\u00f3 l\u00e0 d\u1ef1a tr\u00ean t\u00ean c\u00e1c thu\u1ed9c t\u00ednh c\u00f3 trong HTML. V\u00ed d\u1ee5 trong HTML ta c\u00f3 \u0111o\u1ea1n m\u00e3 nh\u01b0 sau:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;input name=\u201dSearch\u201d type=\u201dText\u201d value=\u201dKey Word\u201d&gt;\n<\/pre><\/div>\n\n\n<p>\u0110\u1ec3 \u00e1p d\u1ee5ng thu\u1ed9c t\u00ednh CSS cho ri\u00eang \u00f4 t\u00ecm ki\u1ebfm n\u00e0y ch\u00fang ta s\u1ebd d\u00f9ng selector <strong>input[name=\u201dSearch\u201d]<\/strong>.<\/p>\n\n\n\n<p>Ngo\u00e0i vi\u1ec7c vi\u1ebft t\u00ean selector c\u1ee5 th\u1ec3, ch\u00fang ta c\u0169ng c\u00f3 th\u1ec3 d\u00f9ng m\u1ed9t selector \u0111\u1ea1i di\u1ec7n nh\u01b0 <strong>* { color:red } <\/strong>s\u1ebd t\u00e1c \u0111\u1ed9ng \u0111\u1ebfn t\u1ea5t c\u1ea3 c\u00e1c th\u00e0nh ph\u1ea7n c\u00f3 tr\u00ean trang web l\u00e0m cho ch\u00fang c\u00f3 text m\u00e0u \u0111\u1ecf.<\/p>\n\n\n\n<p>+ <strong>Property<\/strong>: Ch\u00ednh l\u00e0 c\u00e1c thu\u1ed9c t\u00ednh quy \u0111\u1ecbnh c\u00e1ch tr\u00ecnh b\u00e0y. V\u00ed d\u1ee5: <strong>backgroundcolor, font-family, color, padding, margin,\u2026<\/strong><\/p>\n\n\n\n<p>M\u1ed7i thu\u1ed9c t\u00ednh CSS ph\u1ea3i \u0111\u01b0\u1ee3c g\u00e1n m\u1ed9t gi\u00e1 tr\u1ecb. N\u1ebfu c\u00f3 nhi\u1ec1u h\u01a1n m\u1ed9t thu\u1ed9c t\u00ednh cho m\u1ed9t selector th\u00ec ch\u00fang ta ph\u1ea3i d\u00f9ng m\u1ed9t d\u1ea5u <strong>; (ch\u1ea5m ph\u1ea9y)<\/strong> \u0111\u1ec3 ph\u00e2n c\u00e1ch c\u00e1c thu\u1ed9c t\u00ednh. T\u1ea5t c\u1ea3 c\u00e1c thu\u1ed9c t\u00ednh trong m\u1ed9t selector s\u1ebd \u0111\u01b0\u1ee3c \u0111\u1eb7t trong m\u1ed9t <strong>c\u1eb7p ngo\u1eb7c nh\u1ecdn { }<\/strong> sau selector.<\/p>\n\n\n\n<p><strong>V\u00ed d\u1ee5<\/strong>:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\nbody {\n  background:#FFF;\n  color:#FF0000;\n  font-size:14pt;\n}\n<\/pre><\/div>\n\n\n<p>\u0110\u1ec3 d\u1ec5 \u0111\u1ecdc h\u01a1n, b\u1ea1n n\u00ean vi\u1ebft m\u1ed7i thu\u1ed9c t\u00ednh CSS \u1edf m\u1ed9t d\u00f2ng. Tuy nhi\u00ean, n\u00f3 s\u1ebd l\u00e0m t\u0103ng dung l\u01b0\u1ee3ng l\u01b0u tr\u1eef CSS c\u1ee7a b\u1ea1n.<\/p>\n\n\n\n<p><strong>V\u00ed d\u1ee5:<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\nbody {\n  background:#FFF;\n  color:#FF0000;\n  font-size:14pt;\n}\n<\/pre><\/div>\n\n\n<p>\u0110\u1ed1i v\u1edbi m\u1ed9t trang web c\u00f3 nhi\u1ec1u th\u00e0nh ph\u1ea7n c\u00f3 c\u00f9ng m\u1ed9t s\u1ed1 thu\u1ed9c t\u00ednh, ch\u00fang ta c\u00f3 th\u1ec3 th\u1ef1c hi\u1ec7n gom g\u1ecdn l\u1ea1i nh\u01b0 sau:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\nh1 {\n\u00a0\u00a0 \u00a0color:#0000FF;\n\u00a0\u00a0\u00a0 text-transform:uppercase;\n}\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\nh2 {\n\u00a0\u00a0\u00a0 color:#0000FF;\n\u00a0\u00a0\u00a0 text-transform:uppercase;\n}\n\nh3 {\n\u00a0\u00a0 \u00a0color:#0000FF;\n\u00a0\u00a0 \u00a0text-transform:uppercase;\n}\n<\/pre><\/div>\n\n\n<p>Ch\u00fang ta gom c\u00e1c thu\u1ed9c t\u00ednh l\u1ea1i v\u1edbi nhau nh\u01b0 sau:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\nh1, h2, h3 {\n\u00a0\u00a0 \u00a0color:#0000FF;\n\u00a0\u00a0 \u00a0text-transform:uppercase;\n}\n<\/pre><\/div>\n\n\n<p><strong>+ Value<\/strong>: Gi\u00e1 tr\u1ecb c\u1ee7a thu\u1ed9c t\u00ednh. V\u00ed d\u1ee5: nh\u01b0 v\u00ed d\u1ee5 tr\u00ean value ch\u00ednh l\u00e0 #FFF d\u00f9ng \u0111\u1ec3 \u0111\u1ecbnh m\u00e0u tr\u1eafng cho n\u1ec1n trang.<\/p>\n\n\n\n<p>\u0110\u1ed1i v\u1edbi m\u1ed9t gi\u00e1 tr\u1ecb c\u00f3 kho\u1ea3ng tr\u1eafng, b\u1ea1n n\u00ean \u0111\u1eb7t t\u1ea5t c\u1ea3 trong m\u1ed9t d\u1ea5u ngo\u1eb7c k\u00e9p. V\u00ed d\u1ee5: font-family:\u201dTimes New Roman\u201d.<\/p>\n\n\n\n<p>\u0110\u1ed1i v\u1edbi c\u00e1c gi\u00e1 tr\u1ecb l\u00e0 \u0111\u01a1n v\u1ecb \u0111o, kh\u00f4ng n\u00ean \u0111\u1eb7t m\u1ed9t kho\u1ea3ng c\u00e1ch gi\u1eefa s\u1ed1 \u0111o v\u1edbi \u0111\u01a1n v\u1ecb c\u1ee7a n\u00f3. V\u00ed d\u1ee5: width:100 px. N\u00f3 s\u1ebd l\u00e0m CSS c\u1ee7a b\u1ea1n b\u1ecb v\u00f4 hi\u1ec7u tr\u00ean Mozilla\/Firefox hay Netscape.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ch\u00fa th\u00edch trong CSS<\/h2>\n\n\n\n<p>C\u0169ng nh\u01b0 nhi\u1ec1u ng\u00f4n ng\u1eef web kh\u00e1c. Trong CSS, ch\u00fang ta c\u0169ng c\u00f3 th\u1ec3 vi\u1ebft ch\u00fa th\u00edch cho c\u00e1c \u0111o\u1ea1n code \u0111\u1ec3 d\u1ec5 d\u00e0ng t\u00ecm, s\u1eeda ch\u1eefa trong nh\u1eefng l\u1ea7n c\u1eadp nh\u1eadt sau.<\/p>\n\n\n\n<p>Ch\u00fa th\u00edch trong CSS \u0111\u01b0\u1ee3c vi\u1ebft nh\u01b0 sau:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n\/* N\u1ed9i dung ch\u00fa th\u00edch *\/\n<\/pre><\/div>\n\n\n<p><strong>V\u00ed d\u1ee5<\/strong>:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n\/* M\u00e0u ch\u1eef cho trang web *\/\n\nbody {\n   color: red;\n}\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"<p>Nh\u00ecn qua v\u00ed d\u1ee5 tr\u00ean \u00edt nhi\u1ec1u ch\u00fang ta c\u0169ng th\u1ea5y \u0111\u01b0\u1ee3c m\u1ed1i t\u01b0\u01a1ng \u0111\u1ed3ng gi\u1eefa c\u00e1c thu\u1ed9c t\u00ednh trong [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":8515,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[147],"tags":[],"class_list":["post-1090","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"views":417,"_links":{"self":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/1090","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/comments?post=1090"}],"version-history":[{"count":8,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/1090\/revisions"}],"predecessor-version":[{"id":8529,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/1090\/revisions\/8529"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/media\/8515"}],"wp:attachment":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/media?parent=1090"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/categories?post=1090"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/tags?post=1090"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}