Khi thiết kế web, một phần quan trọng không thể thiếu là CSS. VS 2012 hỗ trợ nhiều công cụ và chức năng cho phép chúng ta tạo, quản lí và sử dụng các files CSS một cách hiệu quả nhất. Chương này sẽ tìm hiểu các công cụ và chức năng này.

Môi trường Visual Studio 2019 Community

Công cụ CSS Editor

Hỗ trợ nhiều tính năng như intelliSense, tính cấu trúc, chú thích, color picker,…

Thực hành dùng CSS Editor

  • Vào (tạo) thư mục Styles chọn file style.css sẽ trông như sau:

  • Chọn selector h1 và trong  cặp ngoặc {} gõ từ color (thuộc tính tạo màu văn bản) và nếu chúng ta gõ dấu : thì một danh sách màu hiện ra (tiếng Anh) như sau:

  • Nếu chúng ta ngại tiếng Anh thì có thể dùng công cụ color picker bằng cách gõ dấu # sau dấu : sẽ xuất hiện color picker hỗ trợ chúng ta chọn màu như sau:

  • Nhấp vào mũi tên hướng xuống bên góc phải để bung hộp màu như sau:

 

Chọn một màu tuỳ ý, gõ dấu ; kết thúc và enter.

  • Gõ chữ t thì chức năng IntelliSense được kích hoạt và sẽ hiển thị tất cả các thuộc tính bắt đầu bằng chữ t:

  • Nếu gõ thêm chữ d thì sẽ xuất hiện:

  • Đây là một chức năng thông minh vì không chỉ đơn thuần hiện ra tất cả các thuộc tính bắt đầu bằng t hay chứa td mà nó hỗ trợ chức năng gọi là title case search tạo danh sách các thuộc tính chứa các từ bắt đầu bằng các kí tự đang tìm kiếm, ví dụ từ gõ td sẽ hiện ra text-decoration hay transition-delay. Nếu ta gõ thêm chữ c nữa tức là tdc thì danh sách hiện ra là:

  • Tương tự nếu gõ bc thì:

  • Thêm các luật định dạng như sau:

  • CSS Editor hỗ trợ khả năng gọi là hierarchical-indent (thụt dòng phân cấp), điều này giúp chúng ta quản lí mã CSS dễ dàng hơn. Nếu không thích chức năng này, ta có thể vào Tools -> Options -> Text Editor -> CSS -> Formatting và bỏ dấu check trong mục Hierarchical Indentation:

  • Khi code css trở nên quá dài, cồng kềnh, chúng ta có thể bị rối khi cần xem hay kiểm tra lại và để tăng việc quản lí hiệu quả, CSS Editor cũng hỗ trợ hai tính năng hữu ích khác là region (phân vùng) và comment (chú thích). Chú thích trong CSS bắt đầu bằng /* và kết thúc là */ và phân vùng trong css với cú pháp:

/*#region ten_vung */

………code css

/*#endregion*/

Tạo CSS nhúng và inline

VS cho phép tạo CSS nhúng và inline; đồng thời cũng cho phép di chuyển những file này (nhúng và inline) đến file ngoài (external) để các trang khác có thể dùng lại.

Minh hoạ tạo CSS nhúng và inline

  • Trở lại trang Default.aspx trong chế độ Design View.
  • Click chuột vào thẻ h1 và vào mục Format chọn New Style, hộp thoại New Style xuất hiện:

  • Tại đỉnh của hộp thoại trong mục Selector chọn hàng đầu tiên (inline style)

  • Chuyển đến mục Box trong Category

 

  • Tại đây chúng ta có thể thay đổi padding hay margin, có thể dùng chung giá trị cho tất cả các thuộc tính top, right, bottom hay left (cho cả margin và padding) bằng cách chọn Same for all, hoặc có thể tuỳ chọn như trong hình sau:

 

  • Nhấp OK để áp dụng các thông số vừa chọn, mở trang sang chế độ Source thì thấy thẻ h1 sẽ trông như sau:

  • Trở lại chế độ Design View chọn dòng đầu tiên, tức là ta đang chọn thẻ p, như hình sau:

  • Vào Format chọn New Style, tại mục Selector gõ .introduction và check Apply new style to document selection và chọn italic từ font-style như sau:

  • Nhấp OK, lúc này toàn bộ đoạn văn bản sẽ có dạng in nghiêng.
  • Vẫn chọn thẻ <p>, vào mục View > CSS Properties mở CSS Properties Grid để xem thông tin về các thuộc tính CSS như hình dưới:

  • Với CSS Properties, chúng ta có thể xem các thuộc tính CSS, các thuộc tính, các luật CSS vừa thiết lập; và trong CSS Properties chúng ta cũng thay đổi các giá trị thuộc tính. Lớp .introduction chúng ta đã thiết lập giá trị thuộc tính font-style là italic và chúng ta có thể thay đổi giá trị bằng cách nhấp vào thuộc tính font-style trong CSS Properties sau đó nhấp vảo mũi tên ở ô lưới bên phải để thay đổi thuộc tính cho phù hợp như hình:

  • Thêm thuộc tính color vào lớp .introduction và chọn giá trị màu (Navy) bằng cách nhấp chuột vào color như sau:

  • Các giá trị thuộc tính sau khi chọn và mã CSS:

  • Lưu tất cả và xem kết quả bằng trình duyệt web:

Áp dụng các luật CSS cho bất kì phần tử nào trong trang

Khi chúng ta tạo ra các luật CSS (như lớp .introduction ở trên), chúng ta có thể áp dụng chúng cho bất kì phần tử nào trong trang.

Ví dụ minh hoạ cách dùng lớp .introduction cho đoạn văn bản thứ hai

  • Trong Default.aspx, chọn đoạn thứ hai trong Design View. Chú ý phải có thẻ <p> xuất hiện bên thanh dưới, nếu chưa chọn như sau:

  • Vào View > Apply Styles sẽ xuất hiện cửa sổ Apply Styles như sau:

 

  • Nhấp đôi chuột vào lớp .introduction, VS sẽ thêm thuộc tính class vào thẻ <p> như sau:

(Chú ý: nếu bạn muốn chọn nhiều class thì chọn các class kết hợp nhấn phím Ctrl)

  • Xoá các luật CSS sẵn có chúng ta dùng nút nhấn Clear Styles như sau:

Quản lý styles

Như ở trên, VS cho phép bạn dễ dàng thêm CSS kiểu inline và nhúng. Tuy nhiên, nếu số lượng trang và nội dung ngày càng nhiều, thì việc quản lí các styles cũng phải được cân nhắc. Các tính năng Manage Styles và Apply Styles sẽ cho phép bạn chuyển các styles kiểu nhúng hay inline thành kiểu external (file css đôc lập) để thuận lợi cho việc sử dụng.

Thực hành với Manage Styles và Apply Styles

Phần thực hành này sẽ chuyển các styles chúng ta đã tạo ở phần trên (h1, .introduction,..) đến file styles.css để có thể được sử dụng bởi nhiều trang.

  • Mở trang Default.aspx ở chế độ Design và chọn <h1>
  • Mở cửa sổ Apply Styles bằng cách vào View>Apply Styles, một cửa sổ hiện ra với kiểu inline được chọn như hình sau:

  • Kích chuột phải vào Inline Style chọn New Style Copy. Cửa sổ New Style xuất hiện cho phép tạo một style mới:

  • Điền các thông tin vào hộp thoại New Style như sau:

  • Nhấp OK và VS sẽ tạo một bản sao style của h1 và đặt vào file css. Nhấp chuột phải trở lại mục Inline Style chọn Remove Inline Style để xoá tất cả các thuộc tính CSS đã gán cho h1.
  • Vào View > Manage Styles sẽ hiện cửa sổ Manage Styles, như hình sau:

  • Nếu file style.css không xuất hiện thì nhấp chuột vào biểu tượng Attach Style Sheet và chọn file style.css

  • Nhấp và giữ chuột lớp .introduction trong Current Page và kéo nó thả dưới h1 trong vùng css , như hình (chú ý lớp .introduction không còn trong vùng Current Page):

Lúc này lớp .introduction đã nằm trong file style.css.

  • Lưu tất cả kết quả vừa làm được. Kiểm tra lại file style.css sẽ như sau:

ASP.NET Server Controls >