Các thuộc tính cơ bản trong CSS3

Các thuộc tính cơ bản trong CSS3

Các thuộc tính cơ bản trong CSS3 giúp cho việc thiết kế giao diện web trở lên nhanh hơn với các câu lệnh đơn giản và dễ dàng hơn. Với nhiều bạn mới học lập trình web HTML CSS, việc ghi nhớ được hết các thuộc tính trong CSS3 là một điều không hề đơn giản. Trong bài viết mình sẽ hỗ trợ các bạn tổng hợp lại các thuộc tính cũng như các sử dụng các thuộc tính trong CSS3. Chúc bạn học lập trình web vui vẻ.

Các thuộc tính và giá trị trong CSS3:

Thuộc tính giá trị Ví dụ Mô tả
Thuộc tính định dạng
border-color mã màu
tên màu
Giá trị rgb
border-color: #ff0000;
border-color: red;
border-color: rgb(255,0,0);
Xác định màu sắc của đường viền.
border-style kiểu border border-style: solid; Xác định hình dạng của đường viền.
border-width px
thin
medium
thick
border-width: 5px; Xác định bề dày của đường viền.
Thuộc tính vị trí
border-top Một hoặc nhiều giá trị của các thuộc tính định dạng. border-top: #ff0000 solid 2px; Xác định đường viền bên trên.
border-right Một hoặc nhiều giá trị của các thuộc tính định dạng. border-right: #ff0000 solid 2px; Xác định đường viền bên phải.
border-bottom Một hoặc nhiều giá trị của các thuộc tính định dạng. border-bottom: #ff0000 solid 2px; Xác định đường viền bên dưới.
border-left Một hoặc nhiều giá trị của các thuộc tính định dạng. border-left: #ff0000 solid 2px; Xác định đường viền bên trái.
border Một hoặc nhiều giá trị của các thuộc tính định dạng. border: #ff0000 solid 2px; Xác định tất cả các đường viền xung quanh.
Kết hợp giữa thuộc tính vị trí và thuộc tính định dạng
border-top-color mã màu
tên màu
Giá trị rgb
border-top-color: #ff0000;
border-top-color: red;
border-top-color: rgb(255,0,0);
Xác định màu sắc cho đường viền bên trên.
border-top-style kiểu border border-top-style: solid; Xác định hình dạng cho đường viền bên trên.
border-top-width px
thin
medium
thick
border-top-width: 5px; Xác định bề dày cho đường viền bên trên.
border-right-color mã màu
tên màu
Giá trị rgb
border-right-color: #ff0000;
border-right-color: red;
border-right-color: rgb(255,0,0);
Xác định màu sắc cho đường viền bên phải.
border-right-style kiểu border border--right-style: solid; Xác định hình dạng cho đường viền bên phải.
border-right-width px
thin
medium
thick
border-right-width: 5px; Xác định bề dày cho đường viền bên phải.
border-bottom-color mã màu
tên màu
Giá trị rgb
border-bottom-color: #ff0000;
border-bottom-color: red;
border-bottom-color: rgb(255,0,0);
Xác định màu sắc cho đường viền bên dưới.
border-bottom-style kiểu border border-bottom-style: solid; Xác định hình dạng cho đường viền bên dưới.
border-bottom-width px
thin
medium
thick
border-bottom-width: 5px; Xác định bề dày cho đường viền bên dưới.
border-left-color mã màu
tên màu
Giá trị rgb
border-left-color: #ff0000;
border-left-color: red;
border-left-color: rgb(255,0,0);
Xác định màu sắc cho đường viền bên trái.
border-left-style kiểu border border-left-style: solid; Xác định hình dạng cho đường viền bên trái.
border-left-width px
thin
medium
thick
border-left-width: 5px; Xác định bề dày cho đường viền bên trái.
border-color mã màu
tên màu
Giá trị rgb
border-color: #ff0000;
border-color: red;
border-color: rgb(255,0,0);
Xác định màu sắc cho tất cả các đường viền xung quanh.
border-style kiểu border border-style: solid; Xác định hình dạng cho tất cả các đường viền xung quanh.
border-width px
thin
medium
thick
border-width: 5px; Xác định chiều rộng cho tất cả các đường viền xung quanh.

Kiểu cho border:

giá trị Ví dụ Mô tả Hiển thị
none border: none; Xác định thành phần sẽ không có đường viền.

Đường viền hiển thị

hidden border: hidden; Giống như giá trị none, nhưng được dùng cho table.

Đường viền hiển thị

dotted border: dotted; Xác định đường viền cho thành phần là dấu chấm (dotted).

Đường viền hiển thị

dashed border: dashed; Xác định đường viền cho thành phần là gạch ngang (dashed).

Đường viền hiển thị

solid border: solid; Xác định đường viền cho thành phần là đường thẳng nét (solid).

Đường viền hiển thị

double border: double; Xác định đường viền cho thành phần là 2 đường thẳng nét (double).

Đường viền hiển thị

groove border: groove; Xác định đường viền cho thành phần là đường rãnh (groove).

Đường viền hiển thị

ridge border: ridge; Xác định đường viền cho thành phần là đường chóp (ridge).

Đường viền hiển thị

inset border: inset; Xác định đường viền cho thành phần là đường bóng bên trong (inset).

Đường viền hiển thị

outset border: outset; Xác định đường viền cho thành phần là đường bóng bên ngoài (outset).

Đường viền hiển thị

inherit border: inherit; Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

Đường viền hiển thị

Tuy sử dụng rất nhiều thuộc tính như vậy, nhưng chúng ta chỉ cần chú ý đến các "thuộc tính vị trí" là có thể sử dụng được tất cả các dạng cần thiết, chỉ những trường hợp riêng biệt mới cần sử dụng tới các "thuộc tính định dạng".

Cấu trúc như sau:

tag {
    Thuộc tính: width style color;
}

Chú ý: width, style, color có thể theo thứ tự bất kỳ.

Ví dụ về thuộc tính border-top

HTML viết:

<html>
<head></head>
<body>
<p>Đây là tag p có border top 2px dạng solid màu đỏ.</p>
</body>
</html>

CSS viết:

p { 
    border-top: 2px solid #ff0000;
}

Hiển thị trình duyệt:

Đây là tag p có border top 2px dạng solid màu đỏ.

Ví dụ thuộc tính border-right

HTML viết:

<html>
<head></head>
<body>
<p>Đây là tag p có border right 2px dạng solid màu đỏ.</p>
</body>
</html>

CSS viết:

p { 
    border-right: 2px solid #ff0000;
}

Hiển thị trình duyệt:

Đây là tag p có border right 2px dạng solid màu đỏ.

Ví dụ thuộc tính border-bottom

HTML viết:

<html>
<head></head>
<body>
<p>Đây là tag p có border bottom 2px dạng solid màu đỏ.</p>
</body>
</html>

CSS viết:

p { 
    border-bottom: 2px solid #ff0000;
}

Hiển thị trình duyệt:

Đây là tag p có border bottom 2px dạng solid màu đỏ.

Ví dụ thuộc tính border-left

HTML viết:

<html>
<head></head>
<body>
<p>Đây là tag p có border left 2px dạng solid màu đỏ.</p>
</body>
</html>

CSS viết:

p { 
    border-left: 2px solid #ff0000;
}

Hiển thị trình duyệt:

Đây là tag p có border left 2px dạng solid màu đỏ.

Ví dụ thuộc tính border

HTML viết:

<html>
<head></head>
<body>
<p>Đây là tag p có border 2px dạng solid màu đỏ.</p>
</body>
</html>

CSS viết:

p { 
    border: 2px solid #ff0000;
}

Đây là dạng kết hợp của 4 thuộc tính vị trí trên, bao gồm cả: border-top, border-right, border-bottom, border-left.

Hiển thị trình duyệt:

Đây là tag p có border 2px dạng solid màu đỏ.

 

Lịch khai giảng gần nhất
Tháng 3
16
Tháng 3
16
Thời lượng: 3 Buổi