25/05/2018, 00:42
Web standard
Trong công việc thiết kế web thì một trong những vấn đề quan trọng đó là làm sao đảm bảo trang web của bạn có thể hiển thị tốt trên hầu hết các trình duyệt. Hiểu rõ vấn đề này W3C (World Wide Web Consortium) – một tổ chức có nhiệm vụ quản lý và đặc ra các ...
Trong công việc thiết kế web thì một trong những vấn đề quan trọng đó là làm sao đảm bảo trang web của bạn có thể hiển thị tốt trên hầu hết các trình duyệt. Hiểu rõ vấn đề này W3C (World Wide Web Consortium) – một tổ chức có nhiệm vụ quản lý và đặc ra các tiêu chuẩn web cùng với các đối tác khác như Microsof, Mozilla Foundation,… đã đ ặt ra các tiêu chuẩn về mã cho web. Nó cho phép nhà phát triển web có thể tự tin hơn khi thực hiện dự án cũng như đảm bảo cho các trang web thỏa mãn tiêu chuẩn có thể hiển thị tốt ở nhiều trình duyệt.
Để dễ dàng hơn. Trong CSS, W3C đã tạo ra một công cụ gọi là CSS Validator để đọc và thẩm định tính hợp chuẩn cho CSS của bạn.
Đầu tiên, các bạn truy cập vào địa chỉ sau click[link]here.
Đặt url file CSS của bạn ở ô url rồi nhấn nút “click to check stylesheet” để chương trình đọc file CSS của bạn. Sau khi đọc xong, nếu file CSS của bạn không phù hợp tiêu chuẩn, chương trình sẽ hiển thị danh sách lỗi. Nếu file CSS của bạn hợp chuẩn thì chương trình sẽ hiện ra bức ảnh chứng nhận. Bạn có thể đặt bức ảnh đó trên click to edit paragraphtrang web của bạn để thể hiện nó đã được xây dựng trên các mã chuẩn.
| Thuộc tính | Mô tả | Giá trị |
| Background | ||
| background | Thuộc tính rút gọn cho tất cả các thuộc tính nền. | background-colorbackground-image background-repeat background-attachment background-position |
| backgroundcolor | Thiết lập màu nền cho đốitượng. | <color>transparent |
| backgroundimage | Thiết lập ảnh nền cho đốitượng. | urlnone |
| background-repeat | Thiết lập chế độ lặp ảnh nền. | repeatrepeat-xrepeat-yno-repeat |
| background-attachment | Thiết lập ảnh nền cuộn/cốđịnh. | scroll fixed |
| background-position | Thiết lập vị trí thể hiện ảnhnền. | top left top centertop rightcenter leftcenter centercenter rightbottom leftbottom centerbottom rightx% y%x y |
| Font | ||
| font | Thuộc tính ngắn cho tất cảcác thiết lập về font. | font-stylefont-variant |
| font-weightfont-sizefont-family | ||
| font-style | Thiết lập chế độ in nghiêng,xiên hay bình thường. | normal italicoblique |
| font-variant | Thiết lập font bình thườnghay small-caps | normal small-caps |
| font-weight | Thiết lập in đậm, thường. | normal boldbolder lighter100 – 900 |
| font-size | Thiết lập kích cỡ font. | xx-smallx-smallsmallmediumlargex-largexx-largesmallerlarger<length>% |
| font-family | Thiết lập loại font hiển thịtrang web/ đối tượng web. | family-namegeneric-family |
| Text | ||
| color | Thiết lập màu chữ. | <color> |
| texxt-indent | Thiết lập khoảng thụt đầudòng. | <length>% |
| text-align | Thiết lập chế độ canh vănbản. | left rightcenter justify |
| letter-spacing | Thiết lập khoảng cách giữacác ký tự. | normal <length> |
| text- decoration | Thêm hiệu ứng đặc biệt chovăn bản. | none underline |
| overline line-through blink | ||
| text- transform | Change case văn bản. | noneupperlowercapitalize |
| Pseudo-classes | ||
| : link | Liên kết chưa thăm. | |
| :hover | Mouse over 1 thành phần. | |
| :visited | Liên kết đã thăm. | |
| :active | Kích hoạt 1 thành phần | |
| Margin | ||
| margin | Thuộc tính ngắn cho các thiếtlập margin. | margin-topmargin-right margin-bottom margin-left |
| margin-top | Thiết lập canh lề trên cho mộtthành phần. | auto <length>% |
| margin-right | Thiết lập canh lề phải chomột thành phần. | auto <length>% |
| margin-bottom | Thiết lập canh lề dưới chomột thành phần. | auto <length>% |
| margin-left | Thiết lập canh lề trái cho mộtthành phần. | auto <length>% |
| Padding | ||
| padding | Thuộc tính ngắn cho các thiếtlập padding. | padding-toppadding -right padding -bottom padding -left |
| padding-top | Thiết lập đệm trên cho mộtthành phần. | <length>% |
| padding- right | Thiết lập đệm phải cho mộtthành phần. | <length>% |
| padding-bottom | Thiết lập đệm dưới cho mộtthành phần. | <length>% |
| padding-left | Thiết lập đệm trái cho mộtthành phần. | <length>% |
| Border | ||
| border | Thuộc tính ngắn cho tất cả các thiết lập border cho một thành phần. | border-awidthborder-color border-style |
| border- awidth | Thiết lập độ rộng đường viền. | thinmediumthick<length> |
| border-color | Thiết lập màu cho đườngviền. | <color> |
| border-style | Thiết lập kiểu đường viền. | none hidden, solid, dotted, dashed, double, groove, ridge, inset, outset |
| border-top-awidth | Thiết lập độ rộng viền phíatrên. | <border-awidth> |
| border-top-color | Thiết lập màu viền phía trên. | <border-color> |
| border-top-style | Thiết lập kiểu viền phía trên. | <border-style> |
| border-right-awidth | Thiết lập độ rộng viền phải. | <border-awidth> |
| border-right-color | Thiết lập màu viền phải. | <border-color> |
| border-right-style | Thiết lập kiểu viền phải. | <border-style> |
| border-bottom-awidth | Thiết lập độ rộng viền bêndưới. | <border-awidth> |
| border-bottom-color | Thiết lập màu viền bên dưới. | <border-color> |
| border-bottom-style | Thiết lập kiểu viền bên dưới. | <border-style> |
| border-left-awidth | Thiết lập độ rộng viền trái. | <border-awidth> |
| border-left-color | Thiết lập màu viền trái. | <border-color> |
| border-left-style | Thiết lập kiểu viền trái. | <border-style> |
| Width | ||
| awidth | Thiết lập chiều rộng đốitượng. | auto <length>% |
| max-awidth | Thiết lập chiều rộng tối đacho đối tượng. | none <length>% |
| min-awidth | Thiết lập chiều rộng tối thiểucho một đối tượng. | <length>% |
| Height | ||
| height | Thiết lập chiều cao cho mộtđối tượng. | auto <length>% |
| max-height | Thiết lập chiều cao tối đa chomột đối tượng. | none <length>% |
| min-height | Thiết lập chiều cao tối thiểucho một đối tượng. | <length>% |
| Layout Position | ||
| float | Cố định đối tượng. | leftrightnone |
| clear | Cách thức xử sự của một đốitượng liên quan với đối tượng floated. | leftright both none |
| position | định vị đối tượng | relativeabsolute |
| top | Thiết lập tọa độ đỉnh đốitượng. | auto<length>% |
| right | Thiết lập tọa độ bên phải đốitượng. | auto<length>% |
| bottom | Thiết lập tọa độ đáy đốitượng. | auto<length>% |
| left | Thiết lập tọa độ bên trái đốitượng. | auto<length>% |
| z-index | Định lớp đối tượng. | autonumber |
