Thiết kế web cho Trẻ em: CSS

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Chào mừng đến với bài học thứ năm trong loạt bài Thiết kế Web cho Trẻ em, tất cả về CSS.

Chúng ta đã làm việc rất chăm chỉ trên nội dung HTML của chúng ta, vì vậy bây giờ là lúc để làm cho nó trông đẹp hơn! Chúng ta sẽ thêm các thứ vào trong trang HTML của chúng ta tại đây, cũng như bắt đầu với một tập tin mới: một tài liệu CSS.

Hãy nhìn vào trang web đã hoàn thiện mà chúng ta đang xây dựng. Các tập tin cho bài học này có thể được tải về tại đây và đừng quên hỏi bất kỳ câu hỏi nào trong phần bình luận ở dưới cùng của trang này.

CSS chính xác là gì?

Trước khi chúng ta bắt đầu viết mã, đầu tiên hãy chắc chắn rằng chúng ta hiểu CSS là gì. CSS là viết tắt của Cascading Style Sheets và nó là một ngôn ngữ mà sẽ giúp chúng ta thay đổi cách mà trang HTML của chúng ta hiển thị.

Trong hình ở trên, trình duyệt ở bên trái cho thấy một trang web không có CSS, không có phong cách, trong khi các trang web bên phải có phong cách. Phong cách đã được viết bên trong một tập tin CSS tốt hơn rất nhiều!

CSS được viết bên trong một tập tin riêng biệt bằng cách sử dụng trình soạn thảo văn bản của chúng ta. Tài liệu HTML của chúng ta đã được lưu với một phần mở rộng tập tin .html, nhưng tài liệu CSS của chúng ta sẽ được lưu với phần mở rộng .css.

Tạo một tập tin CSS

Chúng ta sẽ bắt đầu với một tài liệu hoàn toàn mới mới trong trình soạn thảo văn bản của chúng ta và lưu nó thành "tutstown.css" trong thư mục "tutsfolder"; bên cạnh "index.html" và thư mục "images".

HTML & CSS

Để cho tài liệu CSS áp dụng phong cách vào tài liệu HTML của chúng ta, chúng ta cần phải liên kết chúng lại với nhau. Điều này được thực hiện thông qua một phần tử <link> bên trong phần tử head ở trên cùng của tài liệu HTML.

Chúng ta sẽ thêm liên kết này trực tiếp bên dưới tiêu đề của chúng ta:

1	<head>
2	<title>Tuts Town</title>
3	<link type="text/css" rel="stylesheet" href="tutstown.css" />
4	</head>

Có một vài thuộc tính quan trọng để thêm vào trong thẻ tự đóng này, đầu tiên là type. Thuộc tính type nói cho trình duyệt biết loại nội dung mà chúng ta đang liên kết. Trong trường hợp này nó là một tập tin text/css.

Thuộc tính thứ hai mà chúng ta thấy ở đây là rel, nó nói cho trình duyệt biết rằng mối quan hệ là giữa HTML và tài liệu được liên kết (CSS của chúng ta). Tài liệu CSS là một stylesheet cho HTML của chúng ta, vì vậy nó sẽ là thứ mà chúng ta sẽ thêm ở đây.

Cuối cùng, chúng ta có href, thứ mà bạn có thể còn nhớ từ các phần tử <a>. Nó trỏ tới một nơi nào đó. Trong trường hợp này nó nói cho trình duyệt biết nơi để tìm tập tin CSS mà chúng ta đã liên kết đến.

Nếu mọi thứ được liên kết hợp lý, thì trang web sẽ trông khác đi khi bạn làm mới nó trong trình duyệt:

Các lớp

Trong tập tin CSS chúng ta có thể liệt kê các phần tử HTML mà chúng ta đã sử dụng và bảo với chúng cách hiển thị mà chúng ta muốn. Có rất nhiều cách trỏ đến các phần tử mà chúng ta muốn, và các lớp HTML là một trong các cách đó.

Các lớp HTML là các thuộc tính mà chúng ta muốn thêm vào các phần tử. Mộ khi một phần tử có một tên lớp, chúng ta có thể sử dụng điều này trong CSS của chúng ta.

Tên lớp được chọn nên là một từ hoặc nhiều từ mà mô tả nội dung trong phần tử đó.

Thêm một lớp vào <header> có thể trông giống thế này:

1	<header class="primary-header"> </header>

Các lớp thì không là duy nhất, vì thế các phần tử khác nhau có thể có cùng tên lớp. Điều này làm cho việc thêm các phong cách giống nhau vào nhiều phần tử trở nên đơn giản hơn; chúng ta sẽ thấy điều này thực tế khi chúng ta đến với các hình ảnh của cửa hàng!

Cách CSS được viết

Cách mà bạn viết mã được gọi là cú pháp của nó. Cũng như với HTML, CSS cần được viết theo cách đúng đắn để có thể hoạt động được.

Hãy vào tập tin CSS của chúng ta, chỉ là để thử, thay đổi background-color của header thành blue.

1	.primary-header {
2	background-color: blue;
3	}

Có rất nhiều phần phải làm cho đúng!

Vì thế CSS của chúng ta hiểu rằng những gì mà chúng ta đang nhắm tới là một tên lớp, chúng ta cần làm một số thứ:

Chúng ta cần đặt một dấu chấm . phía trước tên.
Các chỉ dẫn phong cách được chứa bên trong cặp dấu ngoặc nhọn, {}.
Những gì mà chúng ta sẽ định phong cách (background-color) ở ngay phía sau một dấu hai chấm :
Sau đó chúng ta thêm giá trị (blue trong trường hợp này).
Mỗi phong cách phải được kết thúc với một dấu chấm phẩy ;

Rất dễ quên những thứ này!

Lưu tập tin CSS này và làm mới trình duyệt; nếu bạn chưa mở tập tin này bạn có thể làm điều này bằng cách nhấp đúp vào tập tin "index.html" trong thư mục "tutsfolder". Đơn giản làm sao?!

Quan trọng! Bây giờ hãy xoá các phong cách này vì trang của chúng ta không có một header màu xanh!

Thêm Chú thích

CSS cũng cho phép chúng ta thêm các chú thích trong tập tin của chúng ta mà trình duyệt sẽ bỏ qua, nhưng chúng sẽ trông khác một tí so với các phần tử HTML của chúng ta.

Một chú thích CSS được chứa bên trong các biểu tượng này: /* */

1	/* This is a comment in CSS */

Tài liệu CSS trong các tập tin bài tập sẽ chứa một số chú thích hữu ích để giải thích thêm các thứ.

Phần Body

Phong cách thật sự đầu tiên mà chúng ta muốn áp dụng là background-color thành màu vàng nhạt đáng yêu đó. Có một số giá trị màu sắc có thể được viết trong CSS, giống như blue như trong ví dụ ở trên, và trình duyệt sẽ hiểu. Đối với các màu sắc ít thông dụng khác chúng ta sẽ cần thêm số thập lục phân của màu sắc.

Tất cả các màu sắc có một con số thập lục phân tương ứng. Trình duyệt không hiểu nhiều màu sắc khi chúng được viết ra, nhưng chúng hiểu các số thập lục phân rất tốt. Số thập lục phân cho màu vàng nhạt là #FAF8DA, và chúng ta muốn áp dụng điều đó vào <body>, để tô màu cho toàn bộ trang.

1	body {
2	background-color: #FAF8DA;
3	}

Quan trọng! Không cần một dấu chấm phía trước của body ở đây bởi vì nó không phải là một tên lớp. Thay vào đó, chúng ta chỉ thẳng đến phần tử body.

Nếu bạn tò mò về giá trị thập lục phân của các màu sắc khác thì trang web color-hex này sẽ rất hữu ích.

Phông chữ

Chúng ta cũng có thể thiết lập phông chữ (phong cách của các ký tự) cho trang web sử dụng body trong CSS của chúng ta.

Tất cả những gì chúng ta cần biết tại thời điểm hiện tại đó là chúng ta cần liên kết đến một phông chữ từ Google tới tài liệu HTML của chúng ta. Một khi điều này được liên kết, trình duyệt sẽ hiểu và chúng ta có thể sử dụng nó.

Dưới đây là một hình ảnh về liên kết mà chúng ta cần thêm vào bên trong <head> của HTML (cùng nơi mà chúng ta liên kết tài liệu CSS của chúng ta!)

1	<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Sau đó chúng ta có thể lưu điều này và đi đến tài liệu CSS của chúng ta:

1	body {
2	font-family: 'Open Sans';
3	}

Điều này sẽ thiết lập phông chữ cho tất cả văn bản trên trang thành Open Sans.

Header

Bên trong header chúng ta sẽ thay đổi màu và kích thước văn bản cũng như kích thước hình ảnh của Thị trấn.

Đầu tiên, chúng ta cần thêm các lớp HTML phù hợp vào các phần tử trong header, vì thế chúng ta có thể sử dụng chúng trong CSS của chúng ta.

Bên trong thẻ mở <h1> hãy thêm một lớp main-heading và bên trong thẻ <img> chúng ta sẽ thêm một lớp town-preview:

1	<header>
2	<h1 class="main-heading">Welcome To Tuts+ Town</h1>
3	<img class="town-preview" src="images/townheader.svg" alt="An illustration of Tuts Town tower." />
4	</header>

Trong tài liệu CSS chúng ta có thể trỏ đến các phần tử này thông qua tên lớp mà chúng ta thiết lập và bắt đầu định phong cách.

Chúng ta thiết lập một phông chữ font-size hơi lớn hơn 70px. px, hoặc pixels, giống như một chấm trên màn hình. Chấm này được tô màu và được sử dụng như là một đơn vị đo lường. Tấm hình của thị trấn cũng khá lớn, vì thế chúng ta sẽ thiết lập chiều rộng nó thành 650px.

Thuộc tính color thiết lập màu của văn bản, ở đây (#305D76) là một màu xanh đậm.

.main-heading {
    font-size: 70px;
    color: #205D76;
}

.town-preview {
    width: 650px;
}

Main

Nên nhớ rằng, bên trong phần main chúng ta có các phần nhỏ hơn chứa một hình ảnh và văn bản. Chúng ta sẽ cần thiết lập một kích thước trên những tấm ảnh này và định phong cách các heading và danh sách với CSS.

Hình ảnh

Điều đầu tiên chúng ta cần làm là thiết lập kích thước các tấm hình toà nhà. Để thiết lập kích thước tất cả các tấm ảnh cùng nhau chúng ta có thể sử dụng cùng một tên lớp cho nhiều phần tử.

Chúng ta sẽ muốn thêm tên lớp giống nhau, building, vào tất cả ba tấm hình cửa hàng trong HTML của chúng ta, và sau đó thay đổi kích thước tất cả chúng một lần trong CSS, giống như thế này:

1	.building {
2	width: 200px;
3	}

Các Heading

Ba heading nhỏ hơn của chúng ta cũng có thể có cùng tên lớp và chúng ta sẽ sử dụng nó để thay đổi color và font-size của văn bản.

1	.category-heading {
2	color: #205D76;
3	font-size: 30px;
4	}

Danh sách và Liên kết

Sau phần heading bên trong mỗi phần chúng ta có danh sách không thứ tự các cửa hàng - còn nhớ chúng chứ? Ngoài ra để thay đổi kích thước và màu sắc của các liên kết ở đây, chúng ta cũng sẽ cần thay đổi màu của các biểu tượng đầu dòng của danh sách.

Hãy thêm một lớp store-list vào <ul> và store-link vào <a> trong tài liệu HTML của chúng ta và sau đó lưu nó.

.store-list {
    color: #FFC122; /* Changes list’s bullet point color */
}

.store-link {
    color: #EA6E2F;
    font-size: 20px;
}

Bạn có thể để ý rằng, khi nhìn vào trang web của chúng ta trong trình duyệt, ở đó không có nhiều khoảng trống giữa các phần tử của danh sách, làm cho nó trông hơi chât chội. Chúng ta sẽ nói tất cả về khoảng cách và thêm một số ở đây trong bài hướng dẫn sau về layout (bố cục).

Footer

Sau khi chúng ta thêm một lớp primary-footer vào <footer> và created-by vào phần tử <p> bên trong footer này chúng ta có thể khai báo background-color cũng như color và font-size:

.primary-footer {
    background-color: #FFC122;
}

.created-by {
    color: #FFFFFF;
    font-size: 20px;
}

Kết luận

Trong bài học này chúng ta đã tìm hiểu tất cả về cách liên kết một tài liệu HTML và CSS với nhau và sau đó thêm các phong cách đáng yêu vào các phần tử thông qua các lớp. Ở thời điểm hiện tại những gì mà chúng ta thấy trong trình duyệt sẽ không giống hoàn toàn với bản xem trước của trang web mà chúng ta đã được tham khảo, nhưng hãy nhìn vào những gì mà một sự khác biệt về màu sắc và kích thước có thể làm! Nó sẽ tốt hơn.

Tiếp theo chúng ta sẽ sắp đặt nội dung của chúng ta trên màn hình sử dụng một số kỹ thuật bố cục CSS thông minh hơn.

Hẹn gặp bạn trong Thị trấn!