Diễn Đàn SEO Panda - SEO Panda Forum

Diễn Đàn SEO Panda Dành Cho Các SEOers Tự Do Thảo Luận SEO - SEO Panda Forum - Free SEO Forum to share your knowledge to the world
 
HomeCalendarFAQSearchMemberlistUsergroupsRegisterLog in
Search
 
 

Display results as :
 
Rechercher Advanced Search
Latest topics

Share | 
 

 Thiết kế web CSS

View previous topic View next topic Go down 
AuthorMessage
khiemsound



Posts : 1016
Points : 11640
Join date : 2012-03-27

PostSubject: Thiết kế web CSS   Wed Mar 28, 2012 8:07 am

Thiết kế web CSS là gì ?

CSS (Cascading Style Sheets) là một ngôn ngữ cho giao diện để định nghĩa tính chất các thành phần trong HTML layout. Một ví dụ, Với CSS bạn có thể tạo kiểu cho fonts, chỉnh màu sắc, canh lề, kẻ bảng, định chiều cao, chiều dọc, hình nền, và xác định vị trí cho đổi tượng cùng nhiều thứ khác
Tại sao ta nên dùng thiết kế web CSS?
Khi thiết kế web, một câu hỏi đặt ra đó là những tùy chỉnh về fonts, chỉnh màu sắc , canh lề, kẻ bảng,.. bên HTML mình vẫn có thể làm được vậy tại sao không dùng mà phải dùng CSS:
- Bạn có thể quản lý toàn bộ các thành phần (giao diện) của trang web bạn thông qua 1 file CSS
- Điều khiển chính xác hơn cách trình bày Layout.
- Quan trọng nhất là tái sử dụng, tôi thích cái này nhất
- Sử dụng được các kỹ thuật tiên tiến, phức tạp mà HTML không làm được.

Bắt đầu với thiết kế web CSS như thế nào ?

Cần những gì để viết được thiết kế web CSS? Trước tiên muốn thiết kế web CSS thì các bạn cũng cần có một lượng kiến thức về HTML một tý, vì các tag dùng để thiết kế web CSS hầu như y chang bên HTML. Về công cụ để thiết kế web CSS, không cần một công cụ chuyên dụng nào cả, các bạn có thể viết với Notepad, WordPad, WinWord,… Nhưng tôi khuyên bạn nên dùng một TextEditor nào có khả năng chuyển màu ( Sẽ ít bị lỗi khi viết).

Thiết kế web CSS làm việc như thế nào?

Chúng ta thử làm một ví dụ về nó theo các bước sau:
Tạo một file html và gán thuộc tính màu nền (bgcolor) và màu chữ cho nó xem.

Vậy là bạn có một trang thiết kế web CSS và có màu nền là #FF0000. Thử viết có CSS xem sao nha. Tạo file CSS có nội dung
body {background-color: #FF0000}
h1 {color:# FFFF00}
Lưu lại với tên style.css (cùng cấp với file HTML) Bây giờ ở file HTML ta viết lại như sau :

Bạn thử chạy trên trình duyệt với cả 2 trường hợp xem, không có gì khác đúng không các bạn. Vậy tại sao lại viết thêm 1 file CSS làm gì mắc công ? Nhưng bạn thử nghĩ nếu như bạn có 100 file HTML và mỗi file bạn cần dùng lại thuộc tính nào đó vài lần thôi thì bạn phải lặp đi đoạn code đó trong từng trang là bao nhiêu lần và thử nhân lên con số 100 trang xem. Vì vậy dùng CSS bạn chỉ cần khai báo toàn bộ những thuộc tính đó vào file CSS và các trang HTML dùng file CSS là được đúng không các bạn. Và đây là cái ưu điểm của CSS mà ai cũng thích cả vì nó làm giảm code, ít mất thời gian viết lại những cái đã viết,…

Cách viết mã thiết kế web CSS

Việc viết mã thiết kế web CSS cũng giống như bạn thiết kế web với ngôn ngữ PHP, C#,… tất cả đều cần có một bố cục khoa học, hệ thống để dễ dàng phát triển cũng như kiểm tra phát hiện lỗi (nếu có). Dưới đây là một vài hướng dẫn giúp bạn làm việc với thiết kế web CSS khoa học hơn:

Chú thích cho mã CSS giúp người khác đọc file CSS sẽ biết thêm những thông tin cần thiết về file CSS nói riêng và về tác giả nói chung. Việc chú thích mã ở những ngôn ngữ khác quan trọng ra sao thì chú thích mã ở CSS cũng quan trọng như vậy. Sau đây là mẫu chú thích một đoạn mã CSS rất tốt;
PLAIN TEXT
CSS:
/*------------------------
Screen Stylesheet
version: 1.0
date: 01/03/07
author: [your email]
email: [you at domain dot com]
website: [your domain]
version history: [location of file]
---------------------*/
2. Chia CSS ra thành nhiều phần
Nếu mã CSS của bạn gồm nhiều phần và cho nhiều trang thì bạn nên chia thành nhiều file CSS để dễ quản lí và cũng để giúp cho file CSS của bạn không bị rối. Rất nhiều web developer chưa nhận thức được điều này. Họ gộp tất cả file CSS vào làm một. Và dĩ nhiên, hệ quả là họ mất nhiều thời gian hơn cho việc sửa file CSS của mình.
Chia CSS ra thành nhiều file và sử dụng chúng cùng với CSS chính bằng phương thức sau:
PLAIN TEXT
CSS:
/* Import other stylesheets
---------------------------------------*/
@import url("typography.css");
Bên cạnh đó, phân chia ngay chính trong file CSS cũng quan trọng không kém. Hãy gộp chung những phần có cùng 1 đối tượng.
PLAIN TEXT
CSS:
/* Header
---------------------------------------*/
/* Navigation
---------------------------------------*/
/* Footer
---------------------------------------*/
/* Homepage
---------------------------------------*/
/* Your template
---------------------------------------*/
Xoá các định dạng mặc định
Đây là điều cực kì cần thiết đối với bất kì Web developer nào. Như bạn đã biết thì mỗi trình duyệt (browser) đều hiển thị khác nhau. Phần lớn là do định dạng mặc định ở mỗi browser là khác nhau. Ví dụ sau sẽ giúp bạn xoá định dạng mặc định:
PLAIN TEXT
CSS:
*{margin: 0;padding: 0;border: 0;}
4. Định dạng các đối tượng cơ bản:
Những đối tượng cơ bản hay được sử dụng như h1, h2, h3, … form, table, cần phải được định dạng trước tiên khi bạn bắt đầu viết mã CSS. Thói quen này giúp bạn đồng bộ được giao diện của các trang web.[
PLAIN TEXT
CSS:
/* Forms
---------------------------------------*/
input.text
{
padding: 3px;
border: 1px solid #999999;
}
PLAIN TEXT
CSS:
/* Tables
---------------------------------------*/
table
{
border-spacing: 0;
border-collapse: collapse;
}
td
{
text-align: left;
font-weight: normal;
}
Chú ý: đây không phải là một chuẩn mực viết mã thiết kế web CSS. Vì hiện tại chưa có 1 chuẩn nào cho việc thiết kế web CSS. Dưới đây chỉ là cách viết mã thiết kế web CSS sao cho khoa học được tích luỹ từ những ngày tháng làm việc cùng với thiết kế web CSS. Hi vọng điều này sẽ bố ích cho các bạn.

Về cách viết thiết kế web CSS sao cho tốt, cũng như việc học thiết kế web , việc viết code sao cho đúng chuẩn, các bạn có thể xem slide và clip rất chi tiết sau, slide (Tiếng Anh) và clip minh họa cho slide (Tiếng Việt): http://esun.com.vn/thiet-ke-web/Thiet-ke-web-CSS.html65 (lưu ý là nội dung slide dành cho các bạn đã làm việc với CSS, đã biết thiết kế web CSS rồi), còn mới học hoặc chưa biết gì về thiết kế web CSS có thể xem các link và đọc các bài ở dưới
Back to top Go down
View user profile
 
Thiết kế web CSS
View previous topic View next topic Back to top 
Page 1 of 1
 Similar topics
-
» [Userscript] Giới thiệu User script và cách sử dụng
» [Tips] Normalize.css - Thiết kế web dễ dàng hơn với Reset CSS
» [Quán bar] Thiết kế phẳng là gì? Flat design là gì?

Permissions in this forum:You cannot reply to topics in this forum
Diễn Đàn SEO Panda - SEO Panda Forum :: Search Engine Optimization :: General SEO-
Jump to: