Cách tạo mẫu CSS từ đầu

Question

Tôi muốn tạo mẫu CSS cho trí tưởng tượng của mình: điều này có nghĩa là từ SCRATCH.

Tôi muốn làm như thể tôi đang làm bằng bút, nhưng chỉ bằng chuột. Tôi không có ý tưởng về lĩnh vực này (css), đó là lý do tại sao tôi hỏi. Nhiều nhà phát triển đã tạo ra các mẫu tuyệt vời mà đá.

Tôi muốn biết cách tạo mẫu CSS của bạn? (nếu bạn đã làm) Bạn có bắt đầu chúng từ đầu, sử dụng một khuôn khổ, sử dụng một ứng dụng? Điều đó thật khó hay dễ?

Chỉ đơn giản là cách bạn thực hiện?

Answer 1

Mọi thứ và bất cứ điều gì bạn muốn tìm hiểu về css đều có thể tìm thấy tại a list apart. Bạn cũng có thể thích css garden. Các ví dụ tuyệt vời trong thế giới thực, bạn có thể tách rời và hack.

Answer 2

Bạn có thể muốn đọc trên CSS.

Answer 3

tôi bắt đầu tôi từ đầu, chỉ cần gõ nó sử dụng VS hoặc Aptana, vv

tôi làm việc ra cách bố trí cơ bản, ví dụ 3 cột.

Sau đó, tôi sử dụng kiểu nội tuyến để tạo bố cục cơ bản, thêm đánh dấu và html cho đến khi tôi có nó theo cách tôi thích. Sau đó tôi tiếp tục theo cách này cho đến khi tôi có bộ xương cơ bản của trang web của mình.

Từ đây tôi đặt css vào một tệp bên ngoài và bắt đầu thêm các phần tử, kiểu dáng của tôi khi tôi đi.

Trước khi bạn biết điều đó, bạn sẽ có thứ gì đó trông thật ngọt ngào, nó diễn ra nhanh đến đáng kinh ngạc!

Answer 4

* 
{ 
    margin: 0; 
    padding: 0; 
    border: 0; 
    border-collapse: collapse; 
} 

Cue tưởng tượng

Answer 5

Đừng tái phát minh ra bánh xe, tìm một cơ sở css lập tốt và xây dựng dựa trên nó.

Answer 6

nhiên tiêu biểu của tôi về hành động:

1. Áp dụng một CSS reset
2. Tìm một layout template
3. Tìm một color scheme
4. ???
5. Lợi nhuận!

Answer 7

Tôi giả định bạn sẽ sử dụng lại điều này, vì bạn đã gọi nó là mẫu, vì vậy tôi đảm bảo rằng bạn sắp xếp/nhóm các thành phần css theo cách hợp lý (văn bản, bố cục, v.v.) Bạn sẽ muốn một cái gì đó bạn có thể nhanh chóng đọc và tùy chỉnh sau này.

Chắc chắn lề mặc định rõ ràng và miếng đệm không, bởi vì trình duyệt khác nhau (ho IE) có những ý tưởng riêng của họ về những gì lề và miếng đệm không yếu tố khác nhau nên có.

Cuối cùng, hãy thực hiện sử dụng tỷ lệ phần trăm và ems. Điều này sẽ làm giảm đáng kể sự sao chép của bạn. Ví dụ...

body { font-size: 12px }; 
.wrapper { width: 800px; } 

Bây giờ bạn có cơ sở để mọi thứ khác có thể tham khảo. Vì vậy, tôi có thể làm những việc như sau:

h1 { font-size: 2em; } 
.content { font-size: 1.2em; } 
.sidebar { font-size: 1em; } 

.content { width: 70%; } 
.sidebar { width: 30%; } 

Nếu bạn quyết định 800px là mũ cũ, bạn có thể thay đổi chiều rộng thành 900px và mọi thứ vẫn hoạt động.

Answer 8

Hoàn toàn phụ thuộc vào tình huống. Nếu tôi phải tạo một mẫu cho một trang hiện có đang sử dụng CSS, thường được tạo ra bởi một trình soạn thảo hoặc một cái gì đó, tôi sẽ sử dụng nó như là một điểm bắt đầu và thay đổi bit và miếng cho đến khi nó làm những gì tôi muốn. Điều này sẽ đi cho wordpress và loại ứng dụng quá.

Khi tôi không có một css để bắt đầu, tôi làm việc từ số 'Nội dung' và làm việc theo cách của tôi xuống con cái của trẻ em vv. Từ lớn đến nhỏ.

Tôi thích sử dụng công cụ hiển thị đại diện trực quan của thẻ css tôi đang chỉnh sửa để tôi có thể thấy nó trông như thế nào. Tôi thích Expression Web vì nó có thể điều hướng đến các kiểu rất dễ dàng và cho tôi thấy nó trông như thế nào.

Answer 9

Bạn đã nói trong nhận xét của mình là this reply mà bạn muốn có thể tinh chỉnh dễ dàng?

Tôi khuyên bạn nên sử dụng một số tiện ích mở rộng của firefox cho mục đích này. Firebug là tuyệt vời để nhanh chóng nhìn thấy css đằng sau một cái gì đó hoặc cho tinh chỉnh css. Nếu bạn di chuột qua một cái gì đó trong firebug nó sẽ hiển thị css, và cho phép bạn tắt các dòng riêng lẻ của css và xem cách trình duyệt hiển thị nó.