Kiểu nội tuyến CSS

Dưới đây là các ví dụ về kiểu nội tuyến CSS

ví dụ 1

thân hình {

màu nền. bột màu xanh;

}

h1 {

màu sắc. màu xanh da trời;

}

P {

màu sắc. màu đỏ;

}

ví dụ 2. Đối với đường viền CSS

<. LOẠI TÀI LIỆU html>

<đầu>

P {

biên giới. 4px màu đỏ đặc;

}

Đây là tiêu đề

Đây là đoạn 1.

Đây là đoạn 2.

Đây là đoạn 3.

đầu ra

ví dụ 3. Ký quỹ CSS

Mã mẫu này chỉ định lề bên ngoài đường viền

<. LOẠI TÀI LIỆU html>

<đầu>

P {

biên giới. bột màu xanh đặc 2px;

lề. 50px;

}

Đây là tiêu đề

Đây là đoạn 1.

Đây là đoạn 2.

Đây là đoạn 3.

Đây là đoạn 4.

đầu ra

Kiểu nội tuyến trong React

Để xác định kiểu của phần tử bằng thuộc tính kiểu nội tuyến, bên dưới là các ví dụ về đối tượng Javascript

ví dụ 1. Chèn một đối tượng với các chi tiết tạo kiểu

lớp MyHeader mở rộng React. Thành phần {

kết xuất () {

trở về (

);

}

}

ví dụ 2. Đối tượng JavaScript

Ở đây, trong ví dụ này, chúng ta có thể xác định đối tượng với các chi tiết kiểu dáng bằng cách sử dụng thuộc tính style

lớp TestHeader mở rộng React. Thành phần {

kết xuất () {

const Kiểu kiểm tra = {

màu sắc. "trắng",

màu nền. "DodgerBlue",

đệm. "10px",

phông chữGia đình. "Arial"

};

trở về (

);

}

}

Nhược điểm của CSS nội tuyến

• Việc thêm các quy tắc CSS nội tuyến vào từng thành phần HTML tốn nhiều thời gian và cho kết quả lộn xộn trên trang HTML
• Việc triển khai nhiều yếu tố kiểu dáng có thể ảnh hưởng đến kích thước và thời gian tải xuống của trang HTML
• Nó cung cấp các phiên bản khác nhau như CSS, CSS 1, CSS 2 và CSS 3, điều này có thể khiến các nhà phát triển bối rối khi đưa ra quyết định về phiên bản họ cần tham khảo và có thể đưa ra kết quả sai trong trình duyệt web
• sự phân mảnh. Nó gây ra sự cố không tương thích cho trình duyệt, tôi. e. , nó có thể hoạt động với một trình duyệt và có thể không hoạt động trên một loại trình duyệt khác
• Thiếu bảo mật

Nâng cao sự nghiệp của bạn với tư cách là nhà phát triển MEAN stack với Nhà phát triển Web Full Stack - Chương trình Thạc sĩ MEAN Stack. đăng ký ngay bây giờ

Sự kết luận

Chúng tôi hy vọng bài viết này đã giúp bạn hiểu Inline CSS. Trong bài viết này, chúng tôi đã thảo luận về các khái niệm khác nhau của CSS Inline bằng một số ví dụ. Bài viết này sẽ hữu ích cho các nhà phát triển chuyên nghiệp từ Java và. nền mạng, kiến ​​trúc ứng dụng, chuyên gia đám mây, người thử nghiệm và những người học khác đang tìm kiếm các cách sử dụng HTML5 và CSS khác nhau

Bên cạnh việc theo đuổi các khóa học đa dạng của Simplilearn, bạn cũng có thể đăng ký trên nền tảng SkillUp của chúng tôi, một sáng kiến ​​của Simplilearn. Nền tảng này cung cấp nhiều khóa học trực tuyến miễn phí để trợ giúp về kiến ​​thức cơ bản của nhiều ngôn ngữ lập trình, bao gồm HTML và CSS. Bạn cũng có thể chọn tham gia Khóa học Chứng chỉ Phát triển Web Full-Stack của chúng tôi để trở thành một nhà công nghệ toàn diện và cải thiện triển vọng nghề nghiệp của bạn