Trang Trí Website Bằng CSS – Tự Học Thiết kế Web Tại Nhà: Bài 23-2

Bài 23 phần 2 hôm nay, chúng ta tiếp tục tìm hiểu cách trang trí website bằng CSS thông qua tìm hiểu những vấn đề quan trọng xoay quanh CSS. Nói về code thì chúng ta có rất nhiều thứ cần phải học, nhưng mình nghĩ trong CSS bạn chỉ cần tìm hiểu 4 vấn đề là đủ cho bạn thiết kế web tại nhà. Phần trước chúng ta tìm hiểu về cấu trúc của CSS và cách viết 1 lệnh CSS rồi, bài hôm nay mình sẽ tìm hiểu không gian và cấp bậc CSS.

Trang trí website bằng CSS với không gian đối tượng

Một đối tượng bất kỳ trên website ngoài các thuộc tính hiển thị bên ngoài như kích thước, màu sắc, hiệu ứng,… còn có các thuộc tính khác không thể thiếu đó là vị trí. Nói về vị trí đối tượng thì có vị trí trên trang web, vị trí trong một đối tượng khác và vị trí so với đối tượng khác. Tất cả những vị trí đó thuộc về không gian đối tượng.

Cấu tạo của một đối tượng trên website.

Xét hình ảnh minh họa dưới đây ta thấy một đối tượng gồm các thành phần sau:

 tự học thiết kế website tại nhà

Thành phần của 1 đối tượng bố cục trên website (click xem ảnh lớn)

Đối tượng là một hình ảnh nếu thấy thực tế trên website là một hình ảnh bình thường và có tên là: “.hinh-anh-demo-1

Khi kiểm tra trên mã nguồn ta thấy bên ngoài đối tượng xuất hiện thêm 1 khung màu xanh lá và 1 khung màu cam. Vậy ta thấy đối tượng .hinh-anh-demo-1 này gồm có 4 thành phần như sau:

  1. Phần nội dung đối tượng hiển thị, còn được gọi là nội dung: là phần hiển thị đối tượng chính mà chúng ta thấy khi nó xuất hiện trên website.
  2. Phần bao quanh nội dung (có màu xanh lá khi kiểm tra) gọi là padding: Đây là phần không gian bao quanh đối tượng nhưng nó sẽ trong suốt, chúng ta không thể nhìn thấy nó. Padding có 4 loại là: padding-top, padding-bottom, padding-left, padding-right ứng với 4 hướng trên, dưới, trái, phải của đối tượng.
  3. Phần bao quanh phía ngoài của padding (màu cam khi kiểm tra) được gọi là margin: Là phần không gian bao quanh ngoài cùng của đối tượng, tương tự padding, margin cũng có 4 loại là margin-top, margin-bottom, margin-left, margin-right ứng với trên, dưới, trái, phải đối tượng.
  4. Phần nằm giữa padding và margin được gọi là border: Nếu ta không nhìn thấy viền bao quanh đối tượng, thì border đang bằng 0 nên nó sẽ không hiển thị. Border cũng có 4 loại là border-top, border-bottom, border-left, border-right.

Cách viết trên CSS của các thành phần của đối tượng

Cách viết 1: Tất cả các thông số padding bằng nhau, các thông số border bằng nhau và thông số margin bằng nhau:

 .hinh-anh-demo-1 { 

          padding: 100px;

        margin: 50px;

                     border: 1px solid #000000;

}              

Ta thấy nếu ta sửa code như thế thì padding trên dưới trái và phải của đối tượng sẽ dãn đều ra 100px; margin cũng đều có kích thước 50px và viền của đối tượng có độ dày 1px, đường nét liền (solid) và màu đen (#000000). Đối tượng hiển thị như sau:

 tự học thiết kế website tại nhà

Cách trang trí website bằng CSS padding, margin và border(click xem ảnh lớn)

Cách viết 2:  Các thông số khác nhau: Ta cũng có 2 cách viết trong trường hợp này:

 .hinh-anh-demo-1 { 

          padding-top: 10px;

            padding-bottom: 0px;

           padding-left: 10px;

           padding-right: 0px;

        margin-top: 5px;

           margin-bottom: 8px;

          margin-left: 15px;

           margin-right: 20px;

                       border-left: 1px solid #000000;

                        border-right: 3px solid #319b07;

}                       

Bạn thấy, khi trang trí website bằng CSS với cách viết này quá dài nên chúng ta còn có cách viết khác của trường hợp này như sau:

  .hinh-anh-demo-1 {  

               padding: 5px 0px 10px 0px;

               margin: 5px 20px 8px 15px;

                    border-left: 1px solid #000000;

                     border-right: 3px solid #319b07;

}                 

Cách viết này gọn hơn nhiều và ta thấy mỗi thông số đều cách nhau theo thứ tự: top, right, bottom và left. Kết quả như ảnh sau:

 tự học thiết kế website tại nhà

Tùy biến vị trí bức ảnh và viền ảnh theo ý muốn (click xem ảnh lớn)

Phân cấp bặc trong CSS: Đối tượng cha và đối tượng con.

Các cấp bật trong CSS

Trên các trang web, các đối tượng luôn được xếp theo kiểu đối tượng nằm trong đối tượng. Ví dụ trong hình dưới đây ta thấy 2 đối tượng  A  nằm trong 2 trang tên là “  .khung-1  ” và “ .khung-2 “. Vậy 2 khung bao ngoài tuy là không có nội dung gì nhưng cũng là một đối tượng riêng biệt so với 2 đối tượng  . 2 đối tượng A cũng là 2 đối tượng khác nhau, chỉ trùng tên với nhau.

 tự học thiết kế website tại nhà

2 đối tượng cùng tên trên 2 trang khác nhau (click xem ảnh lớn)

Trường hợp này ta có thể xem đối tượng  là con của đối tượng “  .khung-1 ” và đối tượng  A  kia cũng là con của đối tượng “ .khung-2 “.

Trên mã nguồn khi kiểm tra thì cấp bậc thể hiện như thế nào?

Một website hoặc demo sau khi thiết kế và trang trí bằng CSS thì ta có cách nhận biết như sau.

Trang trí website bằng css cơ bản

Khi kiểm tra, ta thấy code phân cấp như thế này là theo từng cấp bậc (click xem ảnh lớn)

Trong hình ta thấy các đối tượng xếp theo dòng, càng xuống dưới và càng vào sâu bên trong thì đối tượng sẽ có cấp càng nhỏ. Hơn nữa các đối tượng này thuộc các đối tượng nằm ngoài nó từ ít nhất 1 bặc.

Ý nghĩa và cách “gọi tên” trong CSS của cấp bậc đối tượng.

Việc phân bậc đối tượng giúp cho ta dễ dàng chọn đúng đối tượng cần chỉnh sửa trong CSS. Giải quyết được khó khăn khi bị trùng tên đối tượng. Ví dụ như 2 đối tượng  A  và “ .khung-1 “, “ .khung-2 ” ở trên. Nếu ta sửa cho A bên trái to ra còn bên phải nhỏ lại, nếu không có dùng đối tượng cha mà chỉ gọi tên đối tượng A ra thì cả 2 sẽ cùng to hoặc cùng nhỏ như nhau. website không thể phân biệt được cái nào cần to và cái nào cần nhỏ theo ý bạn.

Vậy nên ta có cách “gọi tên” để viết CSS như sau:

.khung-1 A {

         width: 100px;

         height: auto;

        margin: 0px;

         padding: 0px;

}            

.khung-2 A {

          width: 20px;

          height: auto;

         margin: 0px;

         padding: 0px;

}           

Trang trí website bằng css cơ bản

Để 2 ảnh cùng tên có 2 thuộc tính khác nhau thì phải gọi tên đối tượng cha kèm theo (click xem ảnh lớn)

Trong code trên ta thấy khi gọi tên đối tượng cha là “ .khung-1 ” hoặc “ .khung-2 ” và tên đối tượng con là     ta sẽ có 1 dấu cách ở giữa. “  .khung-1 A  ” khác hoàn toàn so với “  .khung-1A  ” Và khác hoàn toàn với “  .khung-1.A  “.

Trong bài hôm trước, nếu ta tìm thấy tên của 1 đối tượng và khi gọi tên đối tượng đó xuất hiện 1 khoản trắng ở giữa, thì ta thay khoảng trắng đó bằng dấu chấm ” . “. Còn nếu là 2 tên của 2 đối tượng thì bắt buộc phải có khoảng trắng ở giữa để phân biệt cấp bậc của đối tượng đó.

Tổng kết trang trí website bằng CSS cơ bản

Bây giờ mình sẽ tóm tắc lại những gì cần nhớ khi bạn viết CSS cho một đối tượng để trang trí website:

Cấu tạo của CSS gồm có 3 phần: Phần gọi tên, phần ra lệnh và phần kết quả câu lệnh. Được viết như sau:

Gọi tên {

                ra lệnh: kết quả;

}       

Cách gọi tên gồm có: Nếu 1 tên đặt trong tham số class=”tendoituong” thì ta gọi nó là .tendoituong còn trong tham số id=”tendoituong” thì ta gọi tên nó là #tendoituong và các thẻ nằm trong dấu “ <tendoituong> ” sẽ được gọi thẳng tên của chính nó là tendoituong .

Một đối tượng bất kỳ trên website gồm có 4 phần: Nội dung đối tượng, padding là khoảng cách từ nội dung đối tượng đến viền đối tượng. Border là viền của đối tượng và margin là khoảng cách từ viền đối tượng đến biên (giáp với đối tượng khác).

Nếu các đối tượng trùng tên nhau, nếu bạn muốn sửa CSS của đối tượng này mà không ảnh hưởng đến đối tượng trùng tên khác, thì ta sẽ gọi thêm tên của đối tượng cha của nó và đặt trước. Giữa các đối tượng khác nhau cần phải có khoảng trắng ở giữa để phân biệt.

Trên đây là 4 nội dung cần nhớ khi trang trí website bằng CSS cơ bản. Hãy cố gắn thực hành nhiều để dễ nhớ nhé.

Chúc bạn thành công!