{"id":1167,"date":"2012-12-06T10:54:19","date_gmt":"2012-12-06T10:54:19","guid":{"rendered":"http:\/\/congnghepc.com\/2012\/12\/06\/chen-css-vao-trang-web\/"},"modified":"2023-08-28T16:42:14","modified_gmt":"2023-08-28T09:42:14","slug":"chen-css-vao-trang-web","status":"publish","type":"post","link":"https:\/\/tapchicntt.com\/chen-css-vao-trang-web\/","title":{"rendered":"Ch\u00e8n CSS v\u00e0o trang Web"},"content":{"rendered":"\n

Khi tr\u00ecnh duy\u1ec7t \u0111\u1ecdc \u0111\u1ebfn CSS, th\u00ec to\u00e0n b\u1ed9 Website s\u1ebd \u0111\u01b0\u1ee3c \u0111\u1ecbnh d\u1ea1ng theo c\u00e1c thu\u1ed9c t\u00ednh \u0111\u00e3 \u0111\u01b0\u1ee3c khai b\u00e1o trong ph\u1ea7n CSS. C\u00f3 ba c\u00e1ch cho ph\u00e9p ch\u00fang ta ch\u00e8n \u0111\u1ecbnh d\u1ea1ng CSS v\u00e0o trong Website.<\/p>\n\n\n\n

1. CSS \u0111\u01b0\u1ee3c khai b\u00e1o trong file ri\u00eang.<\/h2>\n\n\n\n

To\u00e0n b\u1ed9 m\u00e3 CSS \u0111\u01b0\u1ee3c ch\u1ee9a trong file ri\u00eang c\u00f3 ph\u1ea7n m\u1edf r\u1ed9ng .css l\u00e0 m\u1ed9t \u00fd t\u01b0\u1edfng \u0111\u01b0\u1ee3c d\u00f9ng khi m\u1ed9t file CSS s\u1ebd \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng cho nhi\u1ec1u trang kh\u00e1c nhau. B\u1ea1n c\u00f3 th\u1ec3 thay \u0111\u1ed5i c\u00e1ch hi\u1ec3n th\u1ecb c\u1ee7a to\u00e0n b\u1ed9 site m\u00e0 ch\u1ec9 c\u1ea7n thay \u0111\u1ed5i m\u1ed9t file CSS. Trong c\u00e1ch n\u00e0y th\u00ec file CSS s\u1ebd \u0111\u01b0\u1ee3c ch\u00e8n v\u00e0o v\u0103n b\u1ea3n HTML th\u00f4ng qua th\u1ebb <link> . . . <\/link><\/span><\/strong>. Ta c\u00f3 c\u00fa ph\u00e1p nh\u01b0 sau:<\/p>\n\n\n

\n<html>\n\u00a0 <head>\n\u00a0\u00a0\u00a0 <link rel="stylesheet" type="text\/css" href="mystyle.css"\n\u00a0\u00a0\u00a0 medial="all" \/>\n\u00a0 <\/head>\n<body>\n\u00a0 <\/body>\n<\/html>\n<\/pre><\/div>\n\n\n
Tr\u00ecnh duy\u1ec7t s\u1ebd \u0111\u1ecdc to\u00e0n b\u1ed9 c\u00e1c \u0111\u1ecbnh d\u1ea1ng \u0111\u01b0\u1ee3c quy \u0111\u1ecbnh trong file mystyle.css<\/strong> v\u00e0 \u0111\u1ecbnh d\u1ea1ng cho v\u0103n b\u1ea3n HTML.<\/p>\n\n\n\n
File CSS c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c so\u1ea1n th\u1ea3o b\u1eb1ng m\u1ed9t s\u1ed1 tr\u00ecnh duy\u1ec7t kh\u00e1c nhau. Trong file kh\u00f4ng \u0111\u01b0\u1ee3c ch\u1ee9a m\u00e3 HTML, khi ghi l\u1ea1i ch\u00fang ta b\u1eaft bu\u1ed9c ph\u1ea3i ghi l\u1ea1i v\u1edbi ph\u1ea7n m\u1edf r\u1ed9ng l\u00e0 .css<\/strong>. Gi\u1ea3 s\u1eed ch\u00fang trong file mystyle.css<\/strong> \u1edf tr\u00ean ch\u1ee9a \u0111o\u1ea1n m\u00e3 sau:<\/p>\n\n\n
\nhr { color: sienna }\np { margin-left: 20px }\nbody { background-image: url("images\/back40.gif") }\n<\/pre><\/div>\n\n\n
Kh\u00f4ng bao gi\u1edd s\u1eed d\u1ee5ng kho\u1ea3ng tr\u1eafng trong nh\u00e3n, gi\u1ea3 s\u1eed r\u1eb1ng n\u1ebfu b\u1ea1n d\u00f9ng margin-left: 20 px;<\/strong> thay cho margin-left: 20px;<\/strong> th\u00ec IE6 s\u1ebd hi\u1ec3u c\u00f2n c\u00e1c tr\u00ecnh duy\u1ec7t nh\u01b0 Firefox, Opera s\u1ebd kh\u00f4ng hi\u1ec3u.<\/p>\n\n\n\n
2. Ch\u00e8n CSS trong t\u00e0i li\u1ec7u HTML<\/h2>\n\n\n\n
Ch\u00e8n th\u1eb3ng CSS trong t\u00e0i li\u1ec7u \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng trong tr\u01b0\u1eddng h\u1ee3p nh\u1eefng \u0111\u1ecbnh d\u1ea1ng CSS n\u00e0y ch\u1ec9 gi\u00e0nh ri\u00eang cho t\u00e0i li\u1ec7u HTML \u0111\u00f3. Khi b\u1ea1n ch\u00e8n tr\u1ef1c ti\u1ebfp th\u00ec \u0111o\u1ea1n m\u00e3 c\u1ee7a b\u1ea1n ph\u1ea3i \u0111\u1eb7t trong th\u1ebb <style><\/strong> v\u00e0 \u0111\u1eb7t trong ph\u1ea7n <head><\/span><\/strong>.<\/p>\n\n\n
\n<head>\n    <style type="text\/css">\n        hr { color: sienna }\n        p { margin-left: 20px }\n        body { background-image: url("images\/back40.gif") }\n    <\/style>\n<\/head>\n<\/pre><\/div>\n\n\n
C\u00f3 m\u1ed9t s\u1ed1 tr\u00ecnh duy\u1ec7t c\u0169 s\u1ebd kh\u00f4ng hi\u1ec3u th\u1ebb <style><\/strong><\/span>, n\u00f3 s\u1ebd b\u1ecf qua th\u1ebb n\u00e0y. Tuy nhi\u00ean, n\u1ed9i dung trong th\u1ebb <style><\/strong><\/span> v\u1eabn hi\u1ec3n th\u1ecb ra trang HTML. V\u00ec v\u1eady, ch\u00fang ta ph\u1ea3i d\u00f9ng \u0111\u1ecbnh d\u1ea1ng ch\u00fa th\u00edch trong HTML \u0111\u1ec3 ch\u1ee9a ph\u1ea7n n\u1ed9i dung c\u1ee7a th\u1ebb <style><\/span><\/strong>.<\/p>\n\n\n
\n<head>\n     <style type="text\/css">\n          <!--\n               hr { color: sienna }\n               p { margin-left: 20px }\n               body { background-image: url("images\/back40.gif") }\n          -->\n     <\/style>\n<\/head>\n<\/pre><\/div>\n\n\n
3. Ch\u00e8n tr\u1ef1c ti\u1ebfp v\u00e0o th\u1ebb c\u1ee7a HTML (inline style)<\/h2>\n\n\n\n
Inline style<\/strong> \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng nhi\u1ec1u trong tr\u01b0\u1eddng h\u1ee3p m\u1ed9t th\u1ebb HTML n\u00e0o \u0111\u00f3 c\u1ea7n c\u00f3 style ri\u00eang cho n\u00f3.
Inline style<\/strong> \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng cho ch\u00ednh th\u1ebb HTML \u0111\u00f3, c\u00e1ch n\u00e0y s\u1ebd c\u00f3 \u0111\u1ed9 \u01b0u ti\u00ean l\u1edbn nh\u1ea5t so v\u1edbi hai c\u00e1ch tr\u00ean. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u1ed9t v\u00ed d\u1ee5 m\u00e0 ch\u00fang ta d\u00f9ng Inline style<\/strong><\/p>\n\n\n
\n<p style="color: sienna; margin-left: 20px">\n     N\u1ed9i dung\n<\/p>\n<\/pre><\/div>\n\n\n
4. Nhi\u1ec1u Stylesheet<\/h2>\n\n\n\n
Trong tr\u01b0\u1eddng h\u1ee3p m\u00e0 c\u00f3 m\u1ed9t s\u1ed1 th\u1ebb c\u00f3 c\u00f9ng \u0111\u1ecbnh d\u1ea1ng, ch\u00fang ta c\u00f3 th\u1ec3 g\u1ed9p ch\u00fang l\u1ea1i v\u1edbi nhau. Gi\u1ea3 s\u1eed nh\u01b0 sau:<\/p>\n\n\n
\nh1, h2, h3 {\n     margin-left: 10px;\n     font-size: 150%;\n     . . .\n}\n<\/pre><\/div>\n\n\n
Gi\u1ed1ng \u0111o\u1ea1n m\u00e3 tr\u00ean th\u00ec c\u1ea3 ba th\u1ebb h1, h2, h3 \u0111\u1ec1u c\u00f3 c\u00f9ng thu\u1ed9c t\u00ednh.<\/p>\n\n\n\n
Ghi ch\u00fa<\/strong><\/span><\/u><\/em>: \u0110\u1ed9 \u01b0u ti\u00ean c\u1ee7a CSS s\u1ebd \u0111\u01b0\u1ee3c t\u00ednh nh\u01b0 sau:<\/p>\n\n\n\n
    \n
  1. Tr\u1ef1c ti\u1ebfp t\u1eeb th\u1ebb HTML (Inline style).<\/li>\n\n\n\n
  2. Trong th\u1ebb <style><\/strong> trong ph\u1ea7n <head><\/strong>.<\/li>\n\n\n\n
  3. File CSS<\/strong>.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
    Khi tr\u00ecnh duy\u1ec7t \u0111\u1ecdc \u0111\u1ebfn CSS, th\u00ec to\u00e0n b\u1ed9 Website s\u1ebd \u0111\u01b0\u1ee3c \u0111\u1ecbnh d\u1ea1ng theo c\u00e1c thu\u1ed9c t\u00ednh \u0111\u00e3 \u0111\u01b0\u1ee3c […]<\/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-1167","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"views":398,"_links":{"self":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/1167","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=1167"}],"version-history":[{"count":11,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/1167\/revisions"}],"predecessor-version":[{"id":7830,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/1167\/revisions\/7830"}],"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=1167"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/categories?post=1167"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/tags?post=1167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}