{"id":322,"date":"2013-07-16T17:23:00","date_gmt":"2013-07-16T17:23:00","guid":{"rendered":"https:\/\/kiencang.net\/2013\/07\/16\/cu-phap-cua-css-phan-tach-ro-rang-bo-chon-khai-bao-thuoc-tinh-gia-tri\/"},"modified":"2022-08-20T21:33:57","modified_gmt":"2022-08-20T14:33:57","slug":"cu-phap-cua-css","status":"publish","type":"post","link":"https:\/\/kiencang.net\/cu-phap-cua-css\/","title":{"rendered":"C\u00fa ph\u00e1p c\u1ee7a CSS: ph\u00e2n t\u00e1ch r\u00f5 r\u00e0ng b\u1ed9 ch\u1ecdn, khai b\u00e1o, thu\u1ed9c t\u00ednh, gi\u00e1 tr\u1ecb"},"content":{"rendered":"\n
Gi\u1ed1ng nh\u01b0 b\u1ea5t k\u1ef3 ng\u00f4n ng\u1eef n\u00e0o, CSS c\u0169ng c\u00f3 c\u00fa ph\u00e1p ri\u00eang c\u1ee7a n\u00f3. C\u00fa ph\u00e1p c\u1ee7a CSS kh\u00f4ng ph\u1ee9c t\u1ea1p, n\u00f3 r\u00f5 r\u00e0ng v\u00e0 khoa h\u1ecdc. <\/p>\n\n\n\n
Ki\u1ebfn th\u1ee9c trong b\u00e0i n\u00e0y tuy c\u01a1 b\u1ea3n nh\u01b0ng quan tr\u1ecdng, gi\u00fap ch\u00fang ta r\u1ea5t nhi\u1ec1u n\u1ebfu mu\u1ed1n h\u1ecdc s\u00e2u h\u01a1n.<\/p>\n\n\n\n
\u0110\u00e2y l\u00e0 m\u1ed9t m\u1eabu code CSS chu\u1ea9n:<\/p>\n\n\n\n
p {\nfont-size: 18px;\ncolor: red;\n}<\/code><\/pre>\n\n\n\n- p ch\u00ednh l\u00e0 th\u1ebb p<\/a> \u2013 l\u00e0 th\u1ebb \u0111\u01b0\u1ee3c ch\u1ecdn<\/em> \u0111\u1ec3 t\u00e1c \u0111\u1ed9ng b\u1eb1ng CSS c\u00f2n \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 selector<\/a>. Ngo\u00e0i c\u00e1ch d\u00f9ng t\u00ean th\u1ebb trong HTML, b\u1ea1n c\u0169ng c\u00f3 th\u1ec3 d\u00f9ng id ho\u1eb7c class c\u1ee7a th\u1ebb \u0111\u00f3 \u0111\u1ec3 t\u00e1c \u0111\u1ed9ng. M\u1ed9t c\u00e1ch t\u1ed5ng qu\u00e1t, ng\u01b0\u1eddi ta g\u1ecdi c\u00e1i n\u00e0y l\u00e0 selector, d\u1ecbch l\u00e0 b\u1ed9 ch\u1ecdn.<\/li>
font-size: 18px<\/code> \u2013 c\u1ea3 d\u00f2ng n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 m\u1ed9t khai b\u00e1o<\/em>. T\u01b0\u01a1ng t\u1ef1 nh\u01b0 v\u1eady color: red c\u0169ng l\u00e0 m\u1ed9t khai b\u00e1o kh\u00e1c.<\/li>- Trong m\u1ed9t khai b\u00e1o th\u00ec lu\u00f4n bao g\u1ed3m 2 ph\u1ea7n, c\u00e1i b\u00ean tr\u00e1i l\u00e0 thu\u1ed9c t\u00ednh<\/em>, c\u00e1i b\u00ean ph\u1ea3i l\u00e0 gi\u00e1 tr\u1ecb<\/em>, v\u00e0 ng\u0103n c\u00e1ch nhau b\u1eb1ng d\u1ea5u hai ch\u1ea5m. Trong v\u00ed d\u1ee5 tr\u00ean font-size l\u00e0 thu\u1ed9c t\u00ednh, 18px l\u00e0 gi\u00e1 tr\u1ecb. T\u01b0\u01a1ng t\u1ef1 nh\u01b0 v\u1eady color l\u00e0 thu\u1ed9c t\u00ednh, red l\u00e0 gi\u00e1 tr\u1ecb.<\/li>
- C\u00e1c khai b\u00e1o ng\u0103n c\u00e1ch nhau b\u1eb1ng d\u1ea5u ch\u1ea5m ph\u1ea9y ;<\/em><\/li><\/ol>\n\n\n\n
\n\n\n\n\u1ede tr\u00ean c\u00e1c khai b\u00e1o \u0111\u01b0\u1ee3c \u0111\u1eb7t tr\u00ean c\u00e1c d\u00f2ng kh\u00e1c nhau cho r\u00f5 r\u00e0ng, n\u1ebfu mu\u1ed1n t\u00edch ki\u1ec7m dung l\u01b0\u1ee3ng file CSS (minify) b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ec3 n\u00f3 tr\u00ean c\u00f9ng m\u1ed9t d\u00f2ng nh\u01b0 th\u1ebf n\u00e0y:<\/p>\n\n\n\n
p{font-size: 18px; color: red;}<\/code><\/pre>\n\n\n\nD\u1ea5u ch\u1ea5m ph\u1ea9y \u1edf khai b\u00e1o cu\u1ed1i c\u00f9ng l\u00e0 kh\u00f4ng b\u1eaft bu\u1ed9c nh\u01b0ng n\u00ean c\u00f3 \u0111\u1ec3 l\u1ea7n sau b\u1ea1n th\u00eam c\u00e1c khai b\u00e1o kh\u00e1c v\u00e0o th\u00ec \u0111\u1ee1 b\u1ecb qu\u00ean d\u1ea5u ng\u0103n c\u00e1ch n\u00e0y.<\/p>\n\n\n\n
N\u1ebfu m\u1ed9t th\u1ebb \u0111\u01b0\u1ee3c khai b\u00e1o nhi\u1ec1u l\u1ea7n c\u00e1c gi\u00e1 tr\u1ecb kh\u00e1c nhau c\u1ee7a c\u00f9ng m\u1ed9t thu\u1ed9c t\u00ednh, th\u00ec khai b\u00e1o cu\u1ed1i c\u00f9ng s\u1ebd quy\u1ebft \u0111\u1ecbnh c\u00e1ch hi\u1ec3n th\u1ecb c\u1ee7a th\u1ebb \u0111\u00f3. Ch\u1eb3ng h\u1ea1n \u0111\u1ea7u ti\u00ean b\u1ea1n khai b\u00e1o th\u1ebf n\u00e0y:<\/p>\n\n\n\n
p {\nfont-size: 18px; color: red;\n} <\/code><\/pre>\n\n\n\nR\u1ed3i \u1edf c\u00e1c d\u00f2ng CSS ph\u00eda sau b\u1ea1n vi\u1ebft:<\/p>\n\n\n\n
p {\nfont-size: 18px; color: blue;\n} <\/code><\/pre>\n\n\n\nTh\u1ebf th\u00ec k\u1ebft qu\u1ea3 t\u1ed5ng h\u1ee3p c\u1ee7a 2 \u0111o\u1ea1n CSS tr\u00ean s\u1ebd l\u00e0:<\/p>\n\n\n\n
p {\nfont-size: 18px; color: blue;\n}<\/code><\/pre>\n\n\n\nN\u00f3i c\u00e1ch kh\u00e1c thu\u1ed9c t\u00ednh color v\u1edbi gi\u00e1 tr\u1ecb l\u00e0 red \u0111\u00e3 b\u1ecb ghi \u0111\u00e8<\/i> b\u1edfi thu\u1ed9c t\u00ednh color v\u1edbi gi\u00e1 tr\u1ecb l\u00e0 blue.<\/p>\n\n\n\n
Lu\u00f4n nh\u1edb quy t\u1eafc l\u00e0 khi tr\u00ecnh duy\u1ec7t \u0111\u1ecdc m\u1ed9t file HTML, n\u00f3 s\u1ebd t\u1ed5ng h\u1ee3p t\u1ea5t c\u1ea3 CSS m\u00e0 n\u00f3 nh\u1eadn th\u1ea5y tr\u00ean trang HTML. Theo \u0111\u00f3 c\u00e1c gi\u00e1 tr\u1ecb \u0111\u01b0\u1ee3c khai b\u00e1o sau s\u1ebd ghi \u0111\u00e8 l\u00ean gi\u00e1 tr\u1ecb \u0111\u01b0\u1ee3c khai b\u00e1o tr\u01b0\u1edbc \u0111\u1ea5y. <\/p>\n\n\n\n