NTM Solutions

Facebook Youtube Google+

Thứ Bảy, 3 tháng 12, 2016

Tự học HTML - Bài 9 - HTML vs CSS

Trong bài này chúng ta sẽ học những mục sau:
  • Sử dụng thuộc tính style bên trong thẻ HTML.
  • Sử dụng thẻ <style> để khai báo CSS nội bộ.
  • Sử dụng thẻ <link> để khai báo tham chiếu đến CSS file.
  • Khai báo trong thẻ <head> 2 thẻ CSS <style> và <link>
  • Sử dụng CSS để định màu chữ.
  • Sử dụng CSS để định kiểu chữ.
  • Sử dụng CSS định cỡ chữ.
  • Sử dụng CSS để tạo đường viền.
  • Sử dụng CSS để thụt lề trong đường viền.
  • Sửu dụng CSS để canh lề.

Định kiểu dáng trong HTML với CSS

CSS (Cascading Style Sheets)
CSS mô tả cách các thẻ HTML hiển thị trên trình duyệt, giấy, hoặc các thiết bị khác.
CSS tiết kiệm rất nhiều công sức. Nó có thể điều khiển giao diện của nhiều trang web 1 lúc.
CSS có thể thêm vào HTML bằng 3 cách sau:
  • Bên trong thẻ tag – thông qua sử dụng thuộc tính style của thẻ.
  • Nội bộ – sử dụng thẻ <style> khai báo trong thẻ <head>
  • Ngoại vi – tham chiếu đến 1 file CSS
Cách thông dụng nhất để thêm CSS là dùng 1 file có đuôi .css lưu trữ riêng ra( cách số 3).Tuy nhiên ở đây trong các ví dụ chúng ta thường dùng cách 1 và 2 cho dễ thao tác và quan sát.
Ghi chú:Tôi sẽ có bài viết riêng chuyên về CSS sau.

CSS trong thẻ tag

CSS trong thẻ tag dùng để định kiểu cho phần nội dung trong 1 thẻ HTML duy nhất thông qua thuộc tính style.
Ví dụ sau sẽ đổi màu của phần nội dung trong thẻ <h1> sang xanh:

Ví dụ

<h1 style="color:blue;">Đây là 1 tiêu đề màu xanh dương</h1>

CSS nội bộ

CSS nội bộ nghĩa là chỉ dùng định kiểu cho 1 trang HTML.
CSS nội bộ được khai báo trong thẻ <style> đặt trong thẻ <head>

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
body 
{background-color: powderblue;}
h1   
{color: blue;}
p    
{color: red;}
</style>
</head>
<body>

<h1>Đây là 1 tiêu đề</h1>
<p>Đây là 1 đoạn văn.</p>

</body>
</html>

CSS ngoại vi

CSS ngoại vi được dùng để định dạng cho nhiều trang HTML 1 lúc.
CSS ngoại vi có thể giúp bạn thay đổi kiểu toàn bộ site thông qua 1 file.
Để sử dụng CSS ngoại vi bạn khai báo như trong ví dụ dưới đây.

Ví dụ

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>Đây là 1 tiêu đề</h1>
<p>Đây là 1 đoạn văn.</p>

</body>
</html>
CSS ngoại vi có thể được viết bằng bất kỳ trình soạn thảo văn bản đơn giản nào (Ví dụ: Notepad) nhưng phải lưu dạng .css và viết theo 1 cú pháp nhất định.
Đây là ví dụ 1 file "styles.css" mẫu:
body {
    background-color
: powderblue;
}
h1 {
    color
: blue;
}
{
    color
: red;
}

CSS Kiểu chữ

Thuộc tính color trong CSS dùng định màu chữ.
Thuộc tính font-family trong CSS dùng định kiểu chữ.
Thuộc tính font-size trong CSS dùng định cỡ chữ.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
h1 
{
    color
: blue;
    font-family
: verdana;
    font-size
: 300%;
}
p  
{
    color
: red;
    font-family
: courier;
    font-size
: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

CSS đường viền

Thuộc tính border trong CSS dùng để định đường viền xung quanh 1 thẻ HTML.

Ví dụ

{
    border
: 1px solid powderblue;
}

CSS thụt lề

Thuộc tính padding xác định khoảng cách từ chữ đến đường viền.

Ví dụ

{
    border
: 1px solid powderblue;
    padding
: 30px;
}

CSS Canh lề

Thuộc tính margin dùng để xác định lề bên ngoài đường viền.

Ví dụ

{
    border
: 1px solid powderblue;
    margin
: 50px;
}

Thuộc tính id

Xác định 1 kiểu riêng cho 1 đối tượng duy nhất và thêm 1 thuộc tính id cho đối tượng đó:
<p id="p01">I am different</p>
sau đó mô tả kiểu cho id đó trong phần khai báo CSS:

Ví dụ

#p01 {
    color
: blue;
}
Ghi chú: giá trị id trong 1 trang không được trùng nhau.

Thuộc tính class (lớp)

Dùng để xác định kiểu riêng cho nhiều đối tượng, thêm thuộc tính class vào đối tượng HTML:
<p class="error">I am different</p>
sau đó định kiểu cho lớp trong phần khai báo CSS:

Ví dụ


p.error {
    color
: red;
}