CSS Là Gì? Trang Trí Website Bằng CSS – Tự Học Làm Web: Bài 23 – 1

Bài này mình và các bạn đi tìm hiểu CSS là gì và cách trang trí website bằng CSS. Trong quá tự học và thực hành thiết kế website, bạn không thể thiếu kiến thức cơ bản về CSS để đơn giản và nhẹ nhàng hơn cho công việc của bạn. Cũng như bạn có thể tùy biến nâng cao website một cách chuyên nghiệp. Bài 23 này khá dài nên mình chia làm 2 phần, đây là phần thứ nhất của CSS cơ bản cho website.

CSS là gì? Trang trí website bằng CSS như thế nào?

Mình sẽ không sử dụng các từ ngữ chuyên ngành và các khái niệm chuyên ngành để nói cho các bạn nghe, vì nó quá trừu tượng sẽ làm chúng ta mơ hồ. Điều mình cần là các bạn hiểu và biết cách thực hành, chứ hok cần bạn phải có cái đầu thông thái chứa đầy sách.

CSS là một đoạn mã (code) dùng để định dạng, trang trí, bố cục lại các chi tiết trên website.Các chi tiết này bao gồm hình ảnh, âm thanh, văn bản, ký hiệu, ký tự,… Mỗi chi tiết như thế chúng ta sẽ gọi là đối tượng.

Vậy trang trí website bằng CSS như thế nào? Chúng ta muốn một đối tượng bất kỳ trên website ví dụ như bức ảnh, hay logo to nhỏ theo ý chúng ta, thì dùng CSS để sửa kích thước của nó. Ví dụ bạn muốn văn bản to nhỏ, màu sắc, nghiêng, đậm, gạch chân, đổi font,… chúng ta sẽ dùng CSS để sửa đổi. Hoặc các bạn muốn có các hiệu ứng như rê chuột, di chuyệt, nền động,… Bạn cũng có thể dùng CSS để tạo.

css là gì - cách trang trí website bằng css

Vào Giao diện > Tùy biến > Css tùy chỉnh là nơi chúng ta thêm CSS (click xem ảnh lớn)

Cấu tạo của CSS cơ bản và cách viết của CSS.

Cấu tạo của CSS cơ bản theo cách hiểu nôm na

Css gồm có 3 phần, theo cách hiểu nôm na đơn giản dễ nhớ nhất như sau:

  1. Gọi tên đối tượng: Phần này chúng ta muốn sửa đối tượng nào theo ý chúng ta thì bạn phải gọi đúng tên đối tượng đó. Điều này liên tưởng tới việc chúng ta muốn bảo ai làm việc gì đó thì phải gọi tên người đó.
  2. Ra lệnh đối tượng: Chúng ta sẽ dùng tiếng Anh được quy định sẵn trong CSS để ra lệnh cho đối tượng đó làm theo chúng ta. Ví dụ: Bạn gọi tên cái logo bạn muốn nó có chiều rộng lớn hơn thì sau khi gọi tên logo bạn sẽ ra lệnh là: Width (chiều rộng). Hoặc chiều cao to hơn thì là Height (cao). Bạn đừng lo mình không biết tiếng Anh hoặc từ nào mới sử dụng được. Bạn có thể lên google.com.vn tìm cụm từ: “(ra lệnh đối tượng) trong CSS” ví dụ “đổi chiều rộng hình ảnh trong CSS”… Là sẽ có hàng tá gợi ý, hướng dẫn dành cho bạn.
  3. Kế quả câu lệnh: Phần này là ý muốn của bạn khi ra lệnh cho đối tượng làm theo. Như ví dụ trên thì ta thấy, gọi tên logo rồi ra lệnh cho chiều rộng của nó và kế quả của câu lệnh này là kích thước bạn muốn (ví dụ như 100px, 100pt, 100mm, 100cm hoặc 100%) đó là kết quả mà bạn mong muốn.

Cách viết câu lệnh CSS cơ bản

Nếu như 3 khái niệm của 3 phần trên mà bạn vẫn chưa hiểu được CSS là gì thì bạn xem cách viết CSS dưới đây, chắc chắn là sẽ hiểu ra:

gọi tên đối tượng {ra lệnh: kết quả câu lệnh;}

Đó là cách viết cơ bản của CSS trên 1 dòng, bạn cũng có thể viết CSS theo cách bố trí sau để dễ nhìn hơn:

gọi tên đối tượng {

 ra lệnh: kết quả;

                

Nếu bạn cho 1 đối tượng thực hiện nhiều lệnh khác nhau ví dụ như chiều rộng, chiều cao, màu sắc,…. ta bố trí như sau:

gọi tên đối tượng {

                  ra lệnh 1: kết quả 1;

                  ra lệnh 2: kết quả 2;

                  ra lệnh 3: kết quả 3;

} 

Tương tự có bao nhiêu câu lệnh ta viết bấy nhiêu câu ra lệnh, mỗi câu ra lệnh cách nhau bằng dấu chấm phẩy “ ; ” để kết thúc câu lệnh.

cách trang trí website bằng css

Đoạn CSS mẫu gồm cả 3 phần: Gọi tên đối tượng (.logo-thuong-hieu), Ra lệnh (width, heidght, margin), Kết quả câu lệnh (150px, auto, 0px) Các câu lệnh nằm trong { }, Sau khi ra lệnh dùng dấu : , kết thúc lệnh dùng dấu ; , ưu tiên áp dụng (!important)

Trường hợp trong HTML thì viết css ra sao

Nếu bạn không viết được HTML thì bạn không cần xem, nhưng đôi khi chúng ta cũng sử dụng trực tiếp trong đoạn mã html để sửa nhanh đối tượng nên mình sẽ nói thêm phần này để lỡ gặp trường hợp trên ta sẽ có cách xử lý:

Ví dụ ta có 1 code html như sau:

<div><p>định nghĩa css cơ bản</p></div>

Ta có 1 dòng văn bản chưa có tên riêng và có nội dung là “định nghĩa css cơ bản”. Bạn có muốn định dạng cho văn bản này ví dụ size tăng lên 14pt, màu xanh lá cho nó. Thì bạn phải đặt tên riêng cho nó để sửa trên CSS tùy biến hoặc thêm trực tiếp vào html luôn, không cần đặt tên, ta làm như sau:

<div class="dinh-nghia"><p>định nghĩa css cơ bản</p></div>    (đặt tên cho đoạn văn bản này là dinh-nghia)

<div style="font-size: 14pt; color: green;"><p>định nghĩa css cơ bản</p></div>   (Dùng css cho cữ chữ 14pt, màu xanh lá mà không cần đặt tên)

<div class="dinh-nghia" style="font-size: 14pt; color: green;"><p>định nghĩa css cơ bản</p></div>    (Vừa đặt tên vừa dùng css trực tiếp)

Cả 3 trường hợp đều dùng được nhé.

Trường hợp nếu có 1 CSS khác đã điều chỉnh đối tượng rồi thì phải làm sao

Trường hợp này xảy ra rất nhiều, thông thường demo giao diện được nhà cung cấp viết sẵn và định dạng sẵn kèm theo trong style.css. Nếu bạn ra lệnh cho đối tượng và câu ra lệnh bị trùng thì kết quả sẽ không áp dụng. Trường hợp này bạn cần thêm đoạn “!important” phía sau câu lệnh để bảo đối tượng ưu tiên thực hiện lệnh mà bạn đặt. Cách thêm như sau:

gọi tên đối tượng {

                  ra lệnh: kết quả !important;

}                

cách trang trí website bằng css

Css là gì? Áp dụng ưu tiên ta sẽ dùng !important ở cuối lệnh CSS (click xem ảnh lớn)

Cách gọi tên một đối tượng thông thường trong CSS

Cách nhận biết và tìm tên của đối tượng

Biết css là gì vẫn chưa đủ, bạn còn phải bố trí đúng cách viết như trên và còn gọi đúng tên đối tượng thì nó mới áp dụng. Trong trang web của bạn hãy ấn phìm F12 hoặc click chuột phải chọn kiểm tra. Mã nguồn trang web sẽ hiện ra có dạng như sau: Trong ảnh dướng đây là một đoạn html và tên đối tượng sẽ được bôi màu cho bạn nhận biết.

css là gì - cách trang trí website bằng css

Ân phìm F12 để xem mã, ta thấy rất nhiều tên chung và nhiều tên riêng của đối tượng (click xem ảnh lớn)

Màu xanh lá là tên riêng của đối tượng, còn màu xanh lam là tên chung. Tên riêng của đối tượng là chỉ 1 mình đối tượng đó mang, còn tên chung chính là tên của 1 hoặc 1 nhóm hoặc nhiều đối tượng trùng nhau. Nếu bạn gọi tên chung để sửa CSS thì tất cả các đối tượng khác thuộc tên chung đó cũng sẽ áp dụng theo. 1 đối tượng vừa có tên riêng, vừa có cả tên chung, nên bạn cần cân nhắc để chọn cho đúng.

Cách tìm tên của 1 đối tượng bất kỳ

Sau khi bạn F12 trên trang web hoặc right click chọn kiểm tra, bạn xem phía trên bên trái của cột mã nguồn hiện ra có mũi tên, bạn chọn nó và rê vào đối tượng (rê chứ không click nhé, chỉ click khi chọn đúng đối tượng để xem code tìm tên). Xem hình sau:

cách trang trí website bằng css

Cách tìm tên của một đối tượng (trong hình là 1 hình ảnh). Thứ tự theo 6 bước như hình (click xem ảnh lớn)

Hình trên ta thấy đối tượng có tên riêng là: ” .aligncenter.wp-image-557.size-full ” và tên chung là: “ img “. Nếu ta lấy tên chung đó để sửa css thì các đối tượng khác có tên chung giống vậy cũng áp dụng theo. Nên nếu chỉ sửa 1 đối tượng, ta chỉ chọn tên riêng, sửa nhiều đối tượng cùng lúc thì ta dùng tên chung. Trường hợp tên riêng cũng bị trùng thì ta xét tới đối tượng cha. Mình sẽ nói tới đối tượng cha, đối tượng con ở phần 2.

Cách gọi tên đối tượng trong CSS

Nhìn hình phía trên ta thấy có 3 cách gọi tên của đối tượng khác nhau như sau:

Nếu các bạn thấy tên chung của đối tượng là thẻ html như: "<div>, <span>, <p>, <a>, <i>,....." tất cả các chữ nằm trong dấu lớn-bé ” < > “ này thì tên của nó sẽ là chính những ký tự trong dấu đó: Ví dụ tên là “div, span, p, a, i,......“.

ví dụ (các đối tượng có tên div sẽ có màu nền (ra lệnh: background-color) là màu trắng (kết quả câu lệnh, màu trắng #ffffff hoặc white)) :

div {

                             background-color: #ffffff;

}    

Nếu các bạn thấy đoạn code có dạng class="abc-xyz_123" thì bạn sẽ gọi tên nó là ký tự bên trong dấu ngoặc kép kèm theo dấu chấm ” . “ ở đầu dòng: .abc-xyz_123

Ví dụ (các đối tượng có tên trong code class=”abc-xyz” có chiều rộng (lệnh width) là 100px và ưu tiên áp dụng):

.abc-xyz {

                       width: 100px !important;

}        

Nếu các bạn thấy đoạn code có dạng id="abc-xyz_123" thì bạn sẽ  gọi tên nó là ký tự bên trong dấu ngoặc kép kèm theo dấu thăng “#” ở đầu dòng: #abc-xyz_123

Ví dụ (các đối tượng trong code id=”abc_xyz” canh sang lề (lệnh float) bên phải (kết quả: right), cao (lệnh height) 100px (kết quả: 100px):

#abc_xyz {

             float: right;

              height: 100px;

}        

Như vậy đó là 3 cách gọi tên đối tượng có kèm theo ví dụ minh họa. Tuy nhiên có trường hợp bạn cần phải sửa tên của đối tượng trong class hoặc id khi bạn gọi nó ra ngoài khi bạn thấy bên trong nó có khoảng trống (dấu cách). Thì bạn thay thế dấu cách đó bằng dấu chấm nhé. Ví dụ

class="abc.xyz mnp-def" thì ta gọi tên là: .abc.yxz.mnp-def

id="abc xyz-123" thì gọi tên là: #abc.xyz-123

Trên đây là những lý thuyết về CSS cần hiểu và nhớ kỹ. Bạn có thể xem minh họa ngay bên trong video trên đầu trang. Nếu còn bạn nào chưa hiểu về css là gì? có thể comment cho mình nhé. Trong bài này bạn cần nắm được cách viết của css, cách tìm tên của đối tượng và cách gọi tên của đối tượng.

Chúng ta sẽ tiếp tục đi sâu hơn vào CSS ở phần 2 nhé.

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