Trong phần này mình sẽ nhằm giới thiệu cho các bạn một số các thuộc tính cơ bản trong CSS. Nhằm giúp các bạn có kiến thức nền tảng trong ứng dụng thiết kế website.
Thuộc tính CSS được đưa vào file HTML bằng 3 cách.
1. Viết trực tiếp.
- Cách thêm thuộc tính CSS màu nền, màu chữ trực tiếp vào thẻ body. Khi bạn thêm thuộc tính CSS tại đây nó sẽ làm thay đổi toàn bộ màu nền và màu chữ của toàn website:
<body style="color:red; background-color:black"> </body>
- Cách thêm thuộc tính CSS màu nền, màu chữ vào thẻ H1. Đối với cách thể hiện này thì nó chỉ có tác dụng cho màu nền và màu chữ của thẻ H1:
<h1 style="color:red; background-color:green"> Đây là cách 1</h1>
2. Viết trong thể style. Đối với Thẻ style này bạn phải thêm nó vào trong cặp thẻ <head></head> của website:
<style>h1{background-color:black;} body{background-color:gray;color:white;}</style>
Giải thích thuộc tính CSS của cặp thẻ Style: Màu nền của website là màu xám, màu chữ của website là màu trắng. Nhưng riêng màu nền của thẻ H1 lại là màu đen.
3. Viết trong File riêng. Đây là cách thường hay sử dụng nhất, bạn chỉ cần tạo file CSS một lần, nhưng có thể ứng dụng trên nhiều website khác nhau. Một file CSS có thể ứng dụng cho hàng nghìn website khác nhau.Khi bạn thay đổi file CSS này thì hàng nghìn website khác thay đổi theo.
- Đối với cách 3 này bạn tạo một file CSS riêng, ví dụ 5.CSS với nội dung trong file CSS như sau: h3{color:red; background:gray;}. Đối với nội dung CSS này nó chỉ áp dụng cho tất cả cặp thẻ H3 trong trang web.
- Sau đó bạn vào file HTM, thêm cặp thẻ link vào trong cặp thẻ head. Ví dụ: <head><link rel="stylesheet" href="5.css"></head>. Như vậy, bạn đã áp dụng được file 5.CSS vào trang web. Bất cứ thay đổi nào trong file CSS cũng làm cho trang web thay đổi theo.
12 thuộc tính cơ bản trong CSS.
1. Màu chữ: color:green; hoặc color:#414141.
2. Màu nền: background-color:gray
3. Ảnh nền: backgound-image:url(tenanh.jpg)
4. Thuộc tính căn lề trong viền: padding:10px = căn lề trong viền tổng thể; padding-left:20px = căn lề trong viền trái; padding-right:50px = Căn lề trong viền phải.; padding-top:100px = căn lề trong viền trên; padding-bottom:200px = căn lề trong viền dưới;
5. Thuộc tính căn lề ngoài viên: margin:10px = căn lề ngoài tổng thể; margin-left:10px = căn lề ngoài trái; margin-right:10px = căn lề ngoài phải; margin-top:10px = căn lề ngoài trên; margin-buttom:10px = căn lề ngoài dưới;
Lưu ý: Nếu không tạo đường viền thì bạn có thể sử dụng padding hoặc margin cũng được.
6. Thuộc tính Viền: border:1px solid gray. Boder = viền; 1px = độ dày của viền; gray = màu của viền; solid = nét liền. Ngoài ra một nét thông dụng khác như: dashed = nét đứt; dotted = nét chấm.
7. Thuộc tính liên quan đến font chữ: Vd: font-family:arial hoặc font-family:segoe ui light
8. Thuộc tính cỡ chữ: font-size:30px
9. Thuộc tính đậm chữ: font-weight:bold
10. Thuộc tính căn ảnh: float:left = ảnh sang bến trái chữ tự động sang phả; float:right = ảnh sang phải chữ tự động sang trái
11. Thuộc tính gạch chân: text-decoration:none = bõ gạch chân; text-decoration:underline = có gạch chân;
12. Thuộc tính dãn dòng: line-height:20px;
Mong rằng qua các thuộc tính căn bản này sẽ giúp ích cho các bạn trong việc tìm hiểu về kiến thức thiết kế website.
DANH SÁCH BÀI TRONG SERIE
>>> Hướng Dẫn Cài Đặt Sublime Tex
>>> Các Thể HTML Cơ Bản Nhất
>>> Các Thuộc Tính CSS Cơ Bản
>>> Cách Phối Hợp HTML Với CSS Để Tạo Một Khối Tin
>>> Một Số Thuộc Tính CSS Nâng Cao
 |
| Các Thuộc Tính Cơ Bản Trong CSS |
Thuộc tính CSS được đưa vào file HTML bằng 3 cách.
1. Viết trực tiếp.
- Cách thêm thuộc tính CSS màu nền, màu chữ trực tiếp vào thẻ body. Khi bạn thêm thuộc tính CSS tại đây nó sẽ làm thay đổi toàn bộ màu nền và màu chữ của toàn website:
<body style="color:red; background-color:black"> </body>
- Cách thêm thuộc tính CSS màu nền, màu chữ vào thẻ H1. Đối với cách thể hiện này thì nó chỉ có tác dụng cho màu nền và màu chữ của thẻ H1:
<h1 style="color:red; background-color:green"> Đây là cách 1</h1>
2. Viết trong thể style. Đối với Thẻ style này bạn phải thêm nó vào trong cặp thẻ <head></head> của website:
<style>h1{background-color:black;} body{background-color:gray;color:white;}</style>
Giải thích thuộc tính CSS của cặp thẻ Style: Màu nền của website là màu xám, màu chữ của website là màu trắng. Nhưng riêng màu nền của thẻ H1 lại là màu đen.
3. Viết trong File riêng. Đây là cách thường hay sử dụng nhất, bạn chỉ cần tạo file CSS một lần, nhưng có thể ứng dụng trên nhiều website khác nhau. Một file CSS có thể ứng dụng cho hàng nghìn website khác nhau.Khi bạn thay đổi file CSS này thì hàng nghìn website khác thay đổi theo.
- Đối với cách 3 này bạn tạo một file CSS riêng, ví dụ 5.CSS với nội dung trong file CSS như sau: h3{color:red; background:gray;}. Đối với nội dung CSS này nó chỉ áp dụng cho tất cả cặp thẻ H3 trong trang web.
- Sau đó bạn vào file HTM, thêm cặp thẻ link vào trong cặp thẻ head. Ví dụ: <head><link rel="stylesheet" href="5.css"></head>. Như vậy, bạn đã áp dụng được file 5.CSS vào trang web. Bất cứ thay đổi nào trong file CSS cũng làm cho trang web thay đổi theo.
12 thuộc tính cơ bản trong CSS.
1. Màu chữ: color:green; hoặc color:#414141.
2. Màu nền: background-color:gray
3. Ảnh nền: backgound-image:url(tenanh.jpg)
4. Thuộc tính căn lề trong viền: padding:10px = căn lề trong viền tổng thể; padding-left:20px = căn lề trong viền trái; padding-right:50px = Căn lề trong viền phải.; padding-top:100px = căn lề trong viền trên; padding-bottom:200px = căn lề trong viền dưới;
5. Thuộc tính căn lề ngoài viên: margin:10px = căn lề ngoài tổng thể; margin-left:10px = căn lề ngoài trái; margin-right:10px = căn lề ngoài phải; margin-top:10px = căn lề ngoài trên; margin-buttom:10px = căn lề ngoài dưới;
Lưu ý: Nếu không tạo đường viền thì bạn có thể sử dụng padding hoặc margin cũng được.
6. Thuộc tính Viền: border:1px solid gray. Boder = viền; 1px = độ dày của viền; gray = màu của viền; solid = nét liền. Ngoài ra một nét thông dụng khác như: dashed = nét đứt; dotted = nét chấm.
7. Thuộc tính liên quan đến font chữ: Vd: font-family:arial hoặc font-family:segoe ui light
8. Thuộc tính cỡ chữ: font-size:30px
9. Thuộc tính đậm chữ: font-weight:bold
10. Thuộc tính căn ảnh: float:left = ảnh sang bến trái chữ tự động sang phả; float:right = ảnh sang phải chữ tự động sang trái
11. Thuộc tính gạch chân: text-decoration:none = bõ gạch chân; text-decoration:underline = có gạch chân;
12. Thuộc tính dãn dòng: line-height:20px;
Mong rằng qua các thuộc tính căn bản này sẽ giúp ích cho các bạn trong việc tìm hiểu về kiến thức thiết kế website.
DANH SÁCH BÀI TRONG SERIE
>>> Hướng Dẫn Cài Đặt Sublime Tex
>>> Các Thể HTML Cơ Bản Nhất
>>> Các Thuộc Tính CSS Cơ Bản
>>> Cách Phối Hợp HTML Với CSS Để Tạo Một Khối Tin
>>> Một Số Thuộc Tính CSS Nâng Cao
Nguyễn Hưng
0 Comments