Category Archives: Uncategorized

Class và ID trong CSS

Như chúng ta đã biết mỗi lệnh trong CSS sẽ định dạng cho một hoặc nhiều thành phần HTML nào đó trong trang web (các thẻ trong HTML). Nhưng có khi trong thiết kế chúng ta mong muốn một số thành phần nào đó sẽ có những định dạng khác như khác về màu sắc, đường viên, size chữ. . .

Ví dụ ta viết CSS sau:

1 p {colorblackfont-size12px}

Thì tất cả các thành phần sẽ có màu đen, kích cỡ size 12px. Nhưng chúng ta muốn một số thành phần p có màu xanh, một số thành phần khác lại có màu vàng.

Class và ID được gắn thêm vào thẻ HTML giúp ta có thêm lựa chọn để giải quyết vấn đề trên. Lúc này class và id trở thành các CSS selector.

Cách sử dụng class

Như đã nói ở trên, bây giờ ta sẽ định dạng cho một thành phần p có màu xanh, và một thành phần p có màu vàng. Và một thành phần p được hiển thị bình thường.

Như vậy ta sẽ thêm 2 class blue và yellow như sau:

1 <p>Đoạn văn bản hiển thị bình thường màu đen</p>
2 <p class=”blue”>Đoạn văn bản hiển thị màu xanh</p>
3 <p class=”yellow”>Đoạn văn bản hiển thị màu vàng</p>

Ta sẽ viết css như sau

1 p{ colorblackfont-size13px}

Với mã CSS trên thì tất cả các thành phần p có màu đen, kích cỡ 13px.

Để đoạn thứ 2 có màu xanh ta viết như sau

1 .bluecolorblue}

Để đoạn thứ 3 có màu vàng ta viết CSS như sau

1 .yellow{ color: yellow}

Như vậy ta thấy rằng, cách sử dụng là thêm dấu . trước tên class để gọi CSS selector.

Cách sử dụng ID

Cách sử dụng Id hoàn toàn giống class, ta chỉ thay dấu . bằng dấu # trước tên id

<p id=”red”>Đoạn văn bản hiển thị màu đỏ</p>

1 #redcolorred}

Chú ý:

–  Không đặt tên class bắt đầu bằng số, việc đặt tên class bắt đầu bằng số sẽ chỉ hỗ trợ trong trình duyệt Internet Explorer (IE).

–  Không đặt tên id bắt đầu bằng số, nó sẽ không hoạt động trong trình duyệt Mozilla/Firefox.

Sự khác nhau giữa class và ID

– Sự khác biệt lớn nhất giữa class và Id là ID là duy nhất, còn class thì có nhiều. Trong một trang web không thể tồn tại hai id có cùng tên. Nhưng có thể sử dụng nhiều css có cùng tên cho các thành phần khác nhau.

– Điểm khác biệt thứ 2 giữa class và id là có thể sử dụng nhiều class cho một thành phần nào đó, còn id thì chỉ một. Đoạn mã sau cho thấy cách sử dụng 2 class có tên bor và top cho một thành phần p

1 <p class="bor top">Nhiều class cho một thành phần</p>
Advertisements

1. Dialog là gì?

Dialog là những form mà hiển thị thì form cha của nó sẽ rơi vào tình trạng disable, cho đến khi nào dialog được tắt thì mới có thể tương tác lên form cha. Đối với form thường ta dùng phương thức .Show() để show form, còn đối với dialog ta dùng ShowDialog(). Trong dotnet có hỗ trợ một số control rất hữu ích cho các tác vụ nhất định như open, save file, brower folder… mỗi control có một tác dụng khác nhau nhưng một đặc điểm gần như chung nhất là: Mở một dialog -> thiết lập giá trị nào đó -> close dialog -> áp dụng các giá trị từ dialog cho form chính.

Bên dưới đây ta sẽ tìm hiểu 3 dialog control chính: ColorDialog, FolderBrowerDialog và FontDialog.

2. ColorDialog

Không cần giải thích chắc các bạn cũng biết control này dùng để xác lập giá trị màu sắc cho các biến hoặc các cụ thể là các control khác. Trong ví dụ bên dưới, ta đặt 1 event khi click vào panel tạo trước đó thì sẽ khởi tạo 1 ColorDialog với tên cldlg. Và hiển thị Dialog qua phương thức ShowDialog(). Lưu ý; Đối với các control Dialog chỉ có phương thức ShoaDialog chứ không có phương thức Show như Form thường. Sau đó ta sẽ được Form Color như hình dưới, tại đây ta có thể thiết màu sắc thật dễ dàng. Và cuối cùng sau khi ta chọn OK thì giá trị màu sắc sẽ được lưu trong thuộc tính .Color. Kết quả là panel sẽ có background trùng với màu tương ứng đã chọn trong ColorDialog.

Tiếp theo ta tiến hành phân tích màu đã chọn thành 3 giá trị Red, Green và Blue. Đây cũng là hệ màu được sử dụng trong ứng dụng: Hệ màu RGB.

Dialog Control | Lập trình WindowsForm | Csharp
2. FolderBrowerDialog

FolderBrowerDialog là một dạng dialog Control giúp hỗ trợ trình duyệt cây thư mục trong máy tính và trả về đường dẫn của File đã chọn. Control này thường được chọn khi muốn lấy một thư mục mà trong nó có chứa nhiều file cần xử lý, ví dụ trường hợp bạn cần lấy một thư mục chứa file nhạc để sau đó include các file trong đó vào danh sách bài hát chẳng hạn. Với FolderBrowerDialog ta cần quan tâm đến 2 thuộc tính thường dùng sau:

  • SelectedPath: Trả về đường thư mục đã được chọn
  • RootFolde: Trả về thư mục gốc của hệ thống. Tôi đang dùng Windows7, thư mục gốc của nó là Desktop.

Dialog Control | Lập trình WindowsForm | Csharp
3. FontDialog

Với ví dụ nhỏ bên dưới ta sẽ tìm hiểu về FontDialog – Control hỗ trợ thiết lập các thuộc tính cho Text về font chữ, Font style, size… Cũng tương tự các Dialog control khác, ta chỉ cần khai báo và cho .ShowDialog và khi Dialog kết thúc ta sẽ sẽ dễ dàng lấy các thuộc tính của nó. Ví dụ bên dưới ta sẽ dùng Font Dialog để thay đổi thuộc tính cho text và kết hợp ColorDialog để thay đổi màu chữ và màu nền.
Dialog Control | Lập trình WindowsForm | Csharp

MicrosoftTech.Net

Hello world!

Welcome to WordPress.com! This is your very first post. Click the Edit link to modify or delete it, or start a new post. If you like, use this post to tell readers why you started this blog and what you plan to do with it.

Happy blogging!