Sau khi trải qua thời gian gian khổ chỉ thực hiện công việc với HTML, trong phần tới đây của giáo trình, tôi xin phép được tranh luận với các bạn về sơ lược ngôn ngữ CSS. Đây là ngôn ngữ bổ trợ cho HTML để giúp chúng ta trình bày bố cụ và giao diện trang web. Dành cho mọi người lo âu khi cần tìm hiểu thêm 1 ngôn ngữ nữa, tôi hứa là nó hoàn toàn không hề khó hơn HTML.
Tóm tắt lịch sử sơ lược ngôn ngữ CSS
Như đã nhắc đến ở đầu giáo trình, con người sẽ cùng học 2 ngôn ngữ khác nhau. Dù vẫn còn cực kì nhiều thứ phải học tuy nhiên chúng ta cũng đã phần nào quen dần với HTML trong chương trước. Bây giờ là lúc chúng ta tiếp tục nghiên cứu về CSS.
CSS (Cascading Style Sheets) là ngôn ngữ dùng để hoàn thành cho HTML. Nó có nhiệm vụ giúp chúng ta giải thích bố cục trang web.
Sơ lược ngôn ngữ CSS là gì?
Là ngôn ngữ cho phép con người chọn màu cho văn bản hiển thị. Cũng ngôn ngữ đó cho phép con người chọn kiểu chữ dùng trong nội dung.
Là ngôn ngữ cho phép tùy chỉnh kích thước chữ, căn lề, chỉnh nền, vv…
Tóm lại, đó là ngôn ngữ để chúng ta giải thích bố cục cho trang web, chẳng hạn như như khi các bạn mong muốn đặt thanh công cụ ở bên trái với 1 chiều rộng nhất định hay khi con người muốn phần đầu với tên trang website luôn hiển thị trong tầm nhìn của trình duyệt web, vv…
Cơ cấu bộ quy tắc CSS
Bộ chọn (Selector)
Tên phần tử HTML tiếp tục của bộ quy tắc. Nó chọn (các) phần tử được tạo kiểu (trong hoàn cảnh này là phần tử p). Để tạo kiểu cho một phần tử khác, chỉ phải thay đổi bộ chọn.
Tuyên bố (Declaration)
Một quy tắc duy nhất như: color: red; lựa chọn tính chất của phần tử nào bạn mong muốn tạo kiểu.
Thuộc tính (Properties)
Những bí quyết mà bạn có thể tạo kiểu cho một phần tử HTML. (Trong trường hợp này, color là một tính chất của phần tử
.) Trong CSS, bạn chọn thuộc tính nào bạn muốn tác động trong quy tắc của mình.
Thành quả thuộc tính
Ở bên phải của tính chất sau dấu hai chấm(:), chúng ta có thành quả thuộc tính, mà chọn một trong số nhiều lần xuất hiện có thể cho một tính chất cụ thể (color có vô số giá trị ngoài red).
Lưu ý các phần đặc biệt khác của cú pháp:
- Mỗi bộ quy tắc (ngoài bộ chọn) phải được bao bọc bởi các dấu ngoặc nhọn (
{}). - Trong mỗi khai báo, bạn phải sử dụng dấu hai chấm (
:) để tách thuộc tính khỏi các thành quả của nó. - Trong mỗi bộ quy tắc, bạn phải sử dụng dấu chấm phẩy (
;) để phân biệt cho mỗi bộ quy tắc khai báo tiếp theo.
>>>Xem thêm: Mã nguồn mở là gì? Tổng hợp các mã nguồn mở tốt nhất hiện nay
Viết mã CSS ở đâu ?
Con người có 3 sự xác định chỗ viết mã CSS :
- Trong 1 file
.cssriêng biệt (đây là cách được khuyến khích hơn cả) - Trong phần đầu tệp HTML, bên trong thẻ
- Trực tiếp bên trong các thẻ HTML thông qua tính chất style (cách có thể tránh dùng bất cứ lúc nào có thể).
Tôi đã liệt kê 3 sự xác định theo thứ tự với đôk khuyến khích dùng ít đi. Cách đầu tiên tôi cho là tốt nhất.
Trong CSS, phức tạp lớn nhất là làm sao nhắm chuẩn xác nhất vào mục tiêu chúng ta muốn thay đổi. Con người gọi đó là phép chọn (selector). con người đã cùng biết tới trong phần trước của bài học 1 vài phép chọn cơ bản. Hãy cùng tóm lược lại chút.
Các phép chọn mà chúng ta đã đề cập trong phần trước đều là các phép chọn thông dụng nhất, cần phải được học thuộc lòng. Hãy bắt đầu từ phép chọn tối cơ bản.
- p
… Có nghĩa là chúng ta muốn chọn riêng các khổ văn bản.
Chúng ta cũng đã gặp
- h1, em
… Có nghĩa là chọn tất cả các tiêu đề và các đoạn quan trọng. Trong phép chọn này, con người chọn đồng thời 2 loại đối tượng mục tiêu không giống nhau.
Cuối cùng, con người đã tìm hiểu việc chọn ra 1 thẻ xác định nhờ việc đặt ra các định danh phụ thuộc vào thuộc tính class và id.
- .class
- #id
Ngoài những phép chọn trên, con người còn cả tá cách khác để chọn ra các thành phần để dùng CSS. Chúng ta sẽ không nhắc đến toàn bộ chúng. Hãy tích tụ 1 vài phép chọn giúp chúng ta xác định đạt hiệu quả nhất.
Dùng CSS cho các lớp và id
1 Điểm yếu của phương thức chúng ta vừa dùng là những đối tượng thuộc cùng loại thẻ (trong ví dụ là thể) thì sẽ chịu những thay đổi hình thức giống nhau.
Vậy phải làm cách nào khi chúng ta mong muốn 1 số khổ văn bản trở thành sai biệt so với các khổ văn bản khác vốn thuộc cùng 1 loại thẻ ?
Đương nhiên là con người có khả năng dùng cách chèn mã CSS vào tính chất style của các thẻ để đạt được mục tiêu này. Thế nhưng như đã nói, đây là cách thức mà con người có thể tránh sử dụng.
1 phương án khác đã được đưa ra để giúp chúng ta xử lý nỗi lo này, đó là sử dụng các tính chất sẵn có trong tất cả các thẻ, là 2 tính chất sau :
- Tính chất id
- Tính chất class
>>>Xem thêm: Những phần mềm viết Code tốt nhất cho lập trình viên hiện nay
Tóm lược bài học :
- CSS là 1 ngôn ngữ bổ trợ cho HTML dùng để bố trí bố cục cho trang web.
- Cần chú ý đến tính phù hợp của các trình duyệt web với các chức năng khác nhau của CSS3. Khi 1 trình duyệt không giúp đỡ công dụng nào đó thì nó sẽ giản đơn là bỏ qua tính năng đó.
- Chúng ta có khả năng viết mã CSS ở nhiều chỗ không giống nhau. Tốt nhất là viết trong 1 tệp riêng với phần mở rộng là
.css, ví dụ như style.css. - Trong CSS, con người dùng mã nguồn để chọn ra 1 thành phần trong trang mà con người muốn thay đổi và trình bày nó thông qua các tính chất
Bài viết trên, mình đã chia sẻ tới các bạn những sơ lược ngôn ngữ CSS trong lập trình web. Cảm ơn các bạn đã theo dõi bài viết!
>>Xem thêm: Tổng hợp các loại mã nguồn làm web phổ biến nhất hiện nay
Mỹ Phượng-Tổng hợp
Tham khảo: (developer, thachpham,…)
