Tạo bởi: Bùi Xuân Hà

25/05/2021

Lập trình html Lập trình web

Bài 15: Cách sử dụng Outline trong css

Nội dung bài viết

Cách sử dụng Outline trong css

Outline trong CSS được sử dụng để tạo ra một đường viền xung quanh phần tử, tương tự như border. Tuy nhiên, outline không phải là một phần của kích thước của phần tử, vì vậy nó không ảnh hưởng đến vị trí của phần tử và không làm thay đổi layout.

Để sử dụng Outline trong CSS, bạn có thể sử dụng thuộc tính outline với các giá trị sau:

1. outline-width: Độ dày của đường viền. Giá trị mặc định là medium.

2. outline-style: Kiểu của đường viền. Các giá trị có thể là dotted, dashed, solid, double, groove, ridge, inset, và outset. Giá trị mặc định là none.

3. outline-color: Màu sắc của đường viền. Giá trị mặc định là màu giống với màu chữ của phần tử đó.

4. outline-offset: Khoảng cách giữa đường viền và phần tử. Giá trị mặc định là 0.

Ví dụ, để tạo một đường viền đỏ đậm với độ dày 2px cho một button, bạn có thể sử dụng mã CSS sau đây:

button {
  outline: 2px solid red;
}

Lưu ý rằng outline có thể bị ảnh hưởng bởi thuộc tính border-radius nếu được sử dụng trên một phần tử có góc bo tròn. Trong trường hợp này, đường viền sẽ không được bo tròn như phần tử, mà sẽ hiển thị với góc cạnh.

Nội dung thảo luận

Họ Và Tên

=> Phần mềm là tập hợp một hoặc nhiều khối lệnh logic được viết bằng một hoặc nhiều ngôn ngữ khác nhau sau đó mã hóa để máy tính, điện thoại, vi điều khiển,... gọi chung là phần cứng có thể thực thi được.

Bỏ

Tốt

Trả lời

Họ Và Tên

Bình luận

Khóa học CSS

Cung cấp đầy đủ kiến thức cơ bản nền về CSS, tạo nền tảng vững chắc khi lập trình sản phẩm.

72h45'

44 bài

Bài 1: Nhập môn CSS Nhập môn CSS

Bài 2: Tổng quan về CSS Tổng quan về CSS

Bài 3: Cài đặt và công cụ viết CSS Cài đặt và công cụ viết CSS

Bài 4: Cấu trúc câu lệnh css Cấu trúc câu lệnh css

100

Bài 5: Cách đưa css vào trang Cách đưa css vào trang

Bài 6: Lựa chọn và áp dụng css cho thẻ Lựa chọn và áp dụng css cho thẻ

Bài 7: Cách sử dụng Comments trong css Cách sử dụng Comments trong css

Bài 8: Cách sử dụng màu(color) trong css Cách sử dụng màu(color) trong css

Bài 9: Cách sử dụng thuộc tính Backgrounds trong css Cách sử dụng thuộc tính Backgrounds trong css

Bài 10: Cách sử dụng Borders trong css Cách sử dụng Borders trong css

Bài 11: Cách sử dụng Margins trong css Cách sử dụng Margins trong css

Bài 12: Cách sử dụng Padding trong css Cách sử dụng Padding trong css

Bài 13: Cách sử dụng Height và Width trong css Cách sử dụng Height và Width trong css

Bài 14: Cách sử dụng Box Model trong css Cách sử dụng Box Model trong css

Bài 15: Cách sử dụng Outline trong css Cách sử dụng Outline trong css

Bài 16: Cách sử dụng Text trong css Cách sử dụng Text trong css

Bài 17: Cách sử dụng Fonts trong css Cách sử dụng Fonts trong css

Bài 18: Cách sử dụng Icons trong css Cách sử dụng Icons trong css

Bài 19: Cách sử dụng Links trong css Cách sử dụng Links trong css

Bài 20: Cách sử dụng line-height trong css Cách sử dụng Icons trong css

Bài 21: Cách sử dụng Flex trong css Cách sử dụng Links trong css

Bài 22: Cách sử dụng Lists trong css Cách sử dụng Lists trong css

100

Bài 23: Cách sử dụng Tables trong css Cách sử dụng Tables trong css

100

Bài 24: Cách sử dụng Display trong css Cách sử dụng Display trong css

100

Bài 25: Cách sử dụng Position trong css Cách sử dụng Position trong css

100

Bài 26: Cách sử dụng Overflow trong css Cách sử dụng Overflow trong css

Bài 27: Cách sử dụng Float trong css Cach-su-dung-Float-trong-css

100

Bài 28: Cách sử dụng Inline-block trong css Cách sử dụng Inline-block trong css

Bài 29: Cách sử dụng Align trong css Cách sử dụng Align trong css

100

Bài 30: Cách sử dụng Combinators trong css Cách sử dụng Combinators trong css

Bài 31: Cách sử dụng Pseudo-classes trong css Cách sử dụng Pseudo-classes trong css

100

Bài 32: Cách sử dụng Pseudo-elements trong css Cách sử dụng Pseudo-elements trong css

100

Bài 33: Cách sử dụng Opacity trong css Cách sử dụng Opacity trong css

Bài 34: Cách sử dụng Navigation Bar trong css Cách sử dụng Navigation Bar trong css

100

Bài 35: Cách sử dụng Dropdowns trong css Cách sử dụng Dropdowns trong css

Bài 36: Cách sử dụng Image Gallery Bar trong css Cách sử dụng Image Gallery Bar trong css

100

Bài 37: Cách sử dụng Image Sprites trong css Cách sử dụng Image Sprites trong css

100

Bài 38: Cách sử dụng Attribute Selectors trong css Cách sử dụng Attribute Selectors trong css

100

Bài 39: Cách sử dụng Forms trong css Cách sử dụng Forms trong css

100

Bài 40: Cách sử dụng Counters trong css Cách sử dụng Counters trong css

100

Bài 41: Cách sử dụng Website Layout trong css Cách sử dụng Website Layout trong css

100

Bài 42: Cách sử dụng Units trong css Cách sử dụng Units trong css

100

Bài 43: Cách sử dụng Specificity trong css Cách sử dụng Specificity trong css

100

Bài 44: Cách sử dụng important trong css Cách sử dụng important trong css

100

Bài 15: Cách sử dụng Outline trong css

Nội dung bài viết

Nội dung thảo luận

Dự án

Sơ đồ trang

Giới thiệu