HTML kiểu nội tuyến

Ưu điểm chính của HTML nội tuyến là nó có ích và cho phép nhiều thuộc tính kiểu cho thẻ HTML với kiểu CSS được xác định của một phần tử

Thí dụ

Đây là đoạn đầu tiên của tôi.

Đây là đoạn thứ hai của tôi.

CSS nội tuyến trong HTML

Với Inline CSS, chúng ta có thể định nghĩa thuộc tính style bằng một phần tử HTML theo ví dụ bên dưới

Chúng tôi cũng có thể xác định CSS nội tuyến và tích hợp nó vào biểu định kiểu. Nó giúp chúng tôi ghi đè các CSS khác nhau

Dưới đây là một ví dụ về việc thêm CSS nội bộ vào HTML với sự trợ giúp của bộ chọn.  

ví dụ 1

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

<đầu>

bộ chọn {

thuộc tính CSS. giá trị;

}

ví dụ 2. Bố cục CSS - hiển thị. chặn Nội tuyến

nhịp. một {

trưng bày. nội tuyến;

bề rộng. 100px;

chiều cao. 100px;

đệm. 5px;

biên giới. 1px màu xanh đặc;

màu nền. màu vàng;

}

nhịp. b{

trưng bày. chặn Nội tuyến;

bề rộng. 100px;

chiều cao. 100px;

đệm. 5px;

biên giới. 1px màu xanh đặc;

màu nền. màu vàng;

}

nhịp. c {

trưng bày. khối;

bề rộng. 100px;

chiều cao. 100px;

đệm. 5px;

biên giới. 1px màu xanh đặc;

màu nền. màu vàng;

}

ví dụ 3. Sử dụng khối nội tuyến để tạo liên kết điều hướng

điều hướng {

màu nền. màu vàng;

kiểu danh sách. không ai;

căn chỉnh văn bản. trung tâm;

đệm. 0;

lề. 0;

}

điều hướng {

trưng bày. chặn Nội tuyến;

cỡ chữ. 20px;

đệm. 20px;

}

Ví dụ 4. Bộ kết hợp CSS

Ở đây, bốn loại bộ chọn CSS có thể bao gồm một bộ chọn đơn giản. Chúng ta có thể liên quan đến một bộ kết hợp giữa các bộ chọn đơn giản

1. bộ chọn hậu duệ (khoảng trắng)
2. bộ chọn con (>)
3. bộ chọn anh chị em liền kề (+)
4. bộ chọn anh chị em chung (~)

bộ chọn hậu duệ (khoảng trắng)

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

<đầu>

div {

màu nền. trái cam;

}

Đây là mẫu Bộ chọn hậu duệ

Đoạn 4. Không phải trong một div.

Đoạn 5. Không phải trong một div.

đầu ra

Khóa học mới. Phát triển Full Stack cho người mới bắt đầu

bộ chọn con (>)

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

<đầu>

div > p {

màu nền. màu xanh lá;

}

Đây là mẫu Bộ chọn con

Bộ chọn con (>) chọn tất cả các phần tử là con của một phần tử đã xác định.

Đoạn 5. Không phải trong một div.

Đoạn 6. Không phải trong một div.

đầu ra

bộ chọn anh chị em liền kề (+)

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

<đầu>

div + p {

màu nền. Hồng;

}

Đây là mẫu Bộ chọn anh chị em liền kề

Bộ chọn + được sử dụng để chọn hoặc chọn một phần tử ngay sau một phần tử đã xác định khác.

Đoạn 3. Sau một div.

Đoạn 4. Sau một div.

Đoạn 7. Sau một div.

Đoạn 8. Sau một div.

đầu ra

Bộ chọn anh chị em chung (~)

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

<đầu>

div ~ p {

màu nền. màu tím;

}

Đây là mẫu Bộ chọn anh chị em chung

Bộ chọn anh chị em chung (~) chọn hoặc chọn mọi phần tử của anh chị em tiếp theo của một phần tử được chỉ định.

Đoạn 1.

Đoạn 3.

Một số mã.

Đoạn 4.

đầu ra

Khóa học Full Stack Web Developer

Để trở thành chuyên gia về MEAN Stack Xem khóa học

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

cơ thể người {

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

}

h1 {

màu. màu xanh da trời;

}

P {

màu. 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ở lại (

);

}

}

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. "trắng",

màu nền. "DodgerBlue",

đệm. "10px",

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

};

trở lại (

);

}

}

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ờ

Phần 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