[.NET] Giới thiệu một số thuộc tính CSS3

1.  Một số thuộc tính CSS3 thông dụng

1. Border-radius

Dùng để định dạng các dạng bo góc của border (có thể bo tuỳ chỉnh, trên dưới, trái phải).

Ví dụ: 

border:10px dotted #cc0000;

border-radius:10px

2. Word-wrap

Sẽ làm cho những từ dài xuống hàng mà không làm vỡ layout.

Ví dụ:

word-wrap:break-word;

word-wrap: normal;

3. word-break

Sẽ làm cho những chữ trong một từ không còn là một thể thống nhất, nghĩa là có thể xuống hàng bất cứ vị trí nào trong từ.

Ví dụ:

word-break:break all;

word-break:hyphenate;

word-break:normal;

4. transition

Xác định một quá trình chuyển đổi khi có một hành động

Ví dụ:

transition:3s;

5. text-overflow

Cắt bớt 1 đoạn text (có thể thay thế bằng dấu 3 chấm hoặc đoạn text khác).

Ví dụ:

text-overflow: ellipsis;

6. opacity

Hiển thị chế độ trong suốt cho thành phần.

Ví dụ:

opacity: 0.5;

7. background-size

Xác định lại chiều rộng và chiều cao cho background.

Ví dụ:

background-size: cover(contain);

background-size: 100px 10px;

background-zie: 100%;

8. box-shadow

Định dạng bóng cho thành phần.

Ví dụ:

box-shadow:10px 10px

#cc0000 inset;

box-shadow: 10px 10px;

box-shadow: 10px 10px 10px;

2. BOOTSTRAP

Là một Framework CSS, giúp phát triển nhanh giao diện web dựa trên giao diện chuẩn của Twitter. 

Sử dụng Bootstrap giúp:

- Tiết kiệm thời gian.

- Tuỳ biến cao.

- Hỗ trợ Responsive.

B1 Trong Project, tạo một Controller với tên là DemoCSSController. 

B2 Tạo 1 Action đặt tên là Demo. 

B3 Tạo 1 View kế thừa từ HomeLayout từ bài viết trước.

B4 Tạo giao diện với body gồm 6 sản phẩm(6 cột).

- Đầu tiên tạo 1 div đặt tên id="Content" và css cho chiều cao của div là 500px;

- Trong div content tạo 1 div con đặt tên là class là row (sử dụng class trong bootstrap framework).

- Trong div row ta lần lượt tạo ra khoảng 6 div con (có thể tạo ít hơn hoặc nhiều hơn tuỳ bạn). Tại 6 div đó ta tiến hành chia cột bằng cách đặt tên class của framework boostrap. Class đó có tên là col-md-2 (số 2 tuỳ thuộc vào bạn chia, miễn sao tổng các class con nằm trong class row nhỏ hơn hoặc bằng 12).

B5. Tiến hành CSS cho từng bức ảnh.