Để định dạng một website chúng ta cần xác định xem thành phần nào cần định dạng, khi sơn nhà nếu yêu cầu sơn nhà tắm không thể chui vào nhà ăn để sơn được. Vì vậy chúng ta có khái niệm bộ chọn( Tức là chọn thằng nào để định dạng). Cấu trúc như sau( đối với CSS ngoài và CSS trong):
Chúng ta sẽ làm quen 3 bộ chọn chính trong CSS( Các bộ chọn khác tôi sẽ giới thiệu ở các bài sau):
- Cách 1: CSS ngoài, tạo 1 file style.css ngang hàng file index.html bên trên( đừng quên đoạn code liên
kết hướng dẫn ở phần 3.1 nhé). Nội dung của file style.css như sau: Bộ_chọn chính là thẻ html cần
định dạng, ở đây là thẻ p, thuộc tính giả sửa là định màu chữ nên thuộc tính là color, giá trị là red(
màu đỏ). Như vậy áp dụng “công thức” bên trên ta có:
cặp thẻ <head></head>
Minh họa:
Trong css, để định dạng các thành phần giống nhau chúng ta đặt các thẻ html thuộc tính class. Với các thẻ html có chung 1 giá trị class sẽ được định dạng như nhau. Giống như việc sơn 10 ngôi nhà ở khu chung cư A có tường màu xanh, cửa màu đỏ thì chúng ta sẽ đặt thuộc tính class=“tên_lớp” cho các ngôi nhà đó.
Đối với bọ chọn lớp thì Bộ_chọn là .tên_lớp rồi tiếp tục thay vào “công thức”
Ví dụ: Định dạng màu chữ cho các lớp có class=“mauchu”, ở bên dưới dòng thứ 2 không chuyển qua màu đỏ vì nó không có class=“mauchu”
Minh họa
Là bộ chọn trong đó các thẻ HTML cần định dạng được đặt 1 thuộc tính id=“tên_id”. Khác với class, ID chỉcó một( Tức là thẻ này không được dùng chung id của thẻ kia), vì vậy id được đặt cho các thành phần duynhất trong HTML.
Ví dụ:
Ví dụ:
Bài tập:
Bài 1. Các bạn chuyển đoạn văn sau sang màu đỏ, biết thuộc tính là color màu là red( Sử dụng CSS với bộ chọn thẻ) <div>Việt Blogger - Share your passions</div>
HƯỚNG DẪN: 3 bài trên các bạn áp dụng “công thức” để định dạng. Để sẵn sàng cho các bài học sau các
bạn cần nắm rõ kiến thức về các bộ chọn trong CSS và cách khai báo CSS( Cách dùng).
Chúc các bạn học tập tốt!
Thân,
Bộ_chọn{Đối với CSS nội tuyến: <tên_thẻ style=“thuộc_tính:giá_trị; thuộc_tính_2: giá_trị;”></tên_thẻ>
Thuộc_tính: Giá_trị;
}
Chúng ta sẽ làm quen 3 bộ chọn chính trong CSS( Các bộ chọn khác tôi sẽ giới thiệu ở các bài sau):
1. Bộ chọn thẻ:
Tức là chọn thẻ cần định dạng, ở đây Bộ_chọn chính là tên thẻ HTML chúng ta định
dạng. Ví dụ cần định dạng đoạn sau trong file index.php <p> Đoạn chữ cần định dạng</p>
Chúng ta làm như sau:
dạng. Ví dụ cần định dạng đoạn sau trong file index.php <p> Đoạn chữ cần định dạng</p>
Chúng ta làm như sau:
- Cách 1: CSS ngoài, tạo 1 file style.css ngang hàng file index.html bên trên( đừng quên đoạn code liên
kết hướng dẫn ở phần 3.1 nhé). Nội dung của file style.css như sau: Bộ_chọn chính là thẻ html cần
định dạng, ở đây là thẻ p, thuộc tính giả sửa là định màu chữ nên thuộc tính là color, giá trị là red(
màu đỏ). Như vậy áp dụng “công thức” bên trên ta có:
p{- Cách 2: CSS trong, ta chỉ việc thêm đoạn code định dạng trên vào cặp thẻ <style></style> rồi cho vào
color:red;
}
cặp thẻ <head></head>
Minh họa:
2. Bộ chọn lớp:
Trong css, để định dạng các thành phần giống nhau chúng ta đặt các thẻ html thuộc tính class. Với các thẻ html có chung 1 giá trị class sẽ được định dạng như nhau. Giống như việc sơn 10 ngôi nhà ở khu chung cư A có tường màu xanh, cửa màu đỏ thì chúng ta sẽ đặt thuộc tính class=“tên_lớp” cho các ngôi nhà đó.
Đối với bọ chọn lớp thì Bộ_chọn là .tên_lớp rồi tiếp tục thay vào “công thức”
Ví dụ: Định dạng màu chữ cho các lớp có class=“mauchu”, ở bên dưới dòng thứ 2 không chuyển qua màu đỏ vì nó không có class=“mauchu”
Minh họa
3. Bộ chọn mã
Là bộ chọn trong đó các thẻ HTML cần định dạng được đặt 1 thuộc tính id=“tên_id”. Khác với class, ID chỉcó một( Tức là thẻ này không được dùng chung id của thẻ kia), vì vậy id được đặt cho các thành phần duynhất trong HTML.
Ví dụ:
- Đúng: <div id=“header”> Nội dung</div>- Sai: Sai do 2 thành phần lại đặt cùng 1 id, trường hợp này chúng ta thay id thành class
<div id=“content”> Nội dung 1</div>Đối với bộ chọn mã khi xử dụng ta thêm ký tự thăng ( # ) vào trước tên_id
<p id=“content”> Nội dung 2</p>
Ví dụ:
Bài tập:
Bài 1. Các bạn chuyển đoạn văn sau sang màu đỏ, biết thuộc tính là color màu là red( Sử dụng CSS với bộ chọn thẻ) <div>Việt Blogger - Share your passions</div>
Bài 2. Định dạng thành phần thứ 1 và thứ 3( Cặp thẻ div thứ 1 và cặp thẻ p thứ 3) bên dưới có độ rộng là 400px biết thuộc tính là width và màu nền là xanh( green), biết thuộc tính là background. ( Sử dụng bộ chọn lớp)
<div> Ban Lập trình web</div>
<p> CLB Tin học</p>
<p> Trường ĐH Công nghệ thông tin& Truyền thông</p>
<div> Ban Lập trình web</div>
<p> CLB Tin học</p>
<p> Trường ĐH Công nghệ thông tin& Truyền thông</p>
Bài 3. Định dạng thành phần thứ 2 bên dưới có màu nền đỏ, chữ màu trắng( biết giá trị màu trắng là white) <p>Bài 2: Bộ chọn trong CSS</p> ;<p> Chúc các bạn học tập tốt!</p>
HƯỚNG DẪN: 3 bài trên các bạn áp dụng “công thức” để định dạng. Để sẵn sàng cho các bài học sau các
bạn cần nắm rõ kiến thức về các bộ chọn trong CSS và cách khai báo CSS( Cách dùng).
Chúc các bạn học tập tốt!
Thân,
Không có nhận xét nào:
Đăng nhận xét