2] An internal style sheet—CSS styles are written in the HTML file in the element using the element; and
3] Một phong cách nội tuyến
We will focus on the third way in this lesson. An inline CSS style applies to a single element. The CSS code is written in the ''style'' attribute of the HTML element to which you want to apply that style. For example, if you want your
element to be in a blue color, you'll write the inline CSS as follows:
Đây là Tiêu đề h1
Ví dụ này có một kiểu CSS nội tuyến được áp dụng để thay đổi màu phông chữ của tiêu đề h1 bằng cách đặt thuộc tính màu thành màu xanh lam, nhưng nếu bạn muốn áp dụng thêm thì sao? . Theo cách này, bạn có thể viết bao nhiêu cặp thuộc tính hoặc giá trị để tạo kiểu cho phần tử bằng cách tách từng cặp bằng dấu chấm phẩy
Ví dụ: nếu bạn muốn đoạn văn của mình được căn giữa với đường viền màu đen rộng 2 pixel, bạn có thể viết CSS nội tuyến như thế này
Bacon ipsum dolor amet hamburger boudin bò leberkas, giăm bông gà đùi bresaola
Landjaeger đuôi thịt viên. Jowl Landjaeger lợn, kevin kielbasa ức thăn ngắn ribeye trâu
Burgdoggen đất tròn picanha tri-tip trâu. T-bone prosciutto mông bóng, thịt lợn hamburger
dùi trống leberkas bánh hamburger bít tết alcatra thăn thịt viên boudin ức.
Viết nội tuyến CSS thật dễ dàng và bạn biết chính xác phong cách sẽ áp dụng cho phần tử nào. Nhưng đây không phải là phương pháp ưa thích vì nó trộn nội dung được đánh dấu bằng HTML với phần trình bày được thực hiện bằng CSS. Lý tưởng nhất là chúng tôi muốn giữ hai cái đó riêng biệt. Đây là lý do tại sao bạn nên cố gắng đặt tất cả các kiểu của mình trong một biểu định kiểu bên ngoài. Điều này không có nghĩa là bạn không bao giờ nên sử dụng kiểu nội tuyến. Rất hữu ích để kiểm tra một cái gì đó bằng cách sử dụng kiểu nội tuyến một cách nhanh chóng. Ngoài ra, nếu bạn có một trang rất đơn giản, bạn có thể chọn sử dụng kiểu nội tuyến và tránh sử dụng tệp biểu định kiểu bên ngoài riêng biệt
Đã xảy ra lỗi khi tải video này
Hãy thử làm mới trang hoặc liên hệ với bộ phận hỗ trợ khách hàng
Bạn phải cC tạo một tài khoản để tiếp tục xem
Đăng ký để xem bài học này
Bạn là học sinh hay giáo viên?
tôi là học sinh tôi là giáo viên
Tạo tài khoản của bạn để tiếp tục xem
Là thành viên, bạn cũng sẽ có quyền truy cập không giới hạn vào hơn 84.000 bài học về toán, tiếng Anh, khoa học, lịch sử, v.v. Ngoài ra, nhận các bài kiểm tra thực hành, câu đố và huấn luyện được cá nhân hóa để giúp bạn thành công
Nhận quyền truy cập không giới hạn vào hơn 84.000 bài học
Thử ngay bây giờChỉ mất vài phút để thiết lập và bạn có thể hủy bất cứ lúc nào
Đã đăng ký?Tài nguyên do giáo viên tạo ra cho giáo viên
Hơn 30.000 bài học video & tài nguyên giảng dạy‐tất cả ở một nơi.
bài học video
Câu đố và Bảng tính
Tích hợp lớp học
kế hoạch bài học
Tôi chắc chắn sẽ giới thiệu Study. com đến các đồng nghiệp của tôi. Nó giống như một giáo viên vung cây đũa thần và làm việc cho tôi. Tôi cảm thấy như đó là một cứu cánh
CSS nội tuyến là kỹ thuật xác định một phần tử với các biểu định kiểu chèn trong tài liệu HTML. Chúng tôi có thể thêm CSS theo ba cách tiếp cận. Nội tuyến, Nội bộ và Bên ngoài
Nó có phong cách tương tác và độc đáo để tạo một phần tử HTML duy nhất;
Đây là ví dụ cú pháp cơ bản với đầu ra
Đây là phần giữ chỗ của tiêu đề
Đây là phần giữ chỗ cho đoạn văn.
đầu ra
Chương trình sau đại học. Phát triển web đầy đủ ngăn xếp
hợp tác với Caltech CTME Đăng ký ngayHTML 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
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
- bộ chọn hậu duệ [khoảng trắng]
- bộ chọn con [>]
- bộ chọn anh chị em liền kề [+]
- bộ chọn anh chị em chung [~]
bộ chọn hậu duệ [khoảng trắng]
div {
màu nền. trái cam;
}
Đây là mẫu Bộ chọn hậu duệ
Đoạn 1 trong div.
Đoạn 2 trong div.
Đoạn 3 trong div.
Đ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
Tìm hiểu Git Command, Angular, NodeJS, Maven và hơn thế nữa Đăng ký ngaybộ chọn con [>]
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 1 trong div.
Đoạn 2 trong div.
Đoạn 3 trong div [bên trong phần tử section].
Đoạn 4 trong div.
Đ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ề [+]
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 1 trong div.
Đoạn 2 trong div.
Đoạn 3. Sau một div.
Đoạn 4. Sau một div.
Đoạn 5 trong div.
Đoạn 6 trong div.
Đoạn 7. Sau một div.
Đoạn 8. Sau một div.
đầu ra
Bộ chọn anh chị em chung [~]
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 2.
Đ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ọcKiể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
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
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ề [
Đây là ví dụ về CSS nội tuyến sử dụng React Style.
Vui lòng thêm một kiểu.
];
}
}
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ề [
Xin chào Phong cách.
Thêm một chút phong cách.
];
}
}
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
Tìm Chương trình sau đại học của chúng tôi trong Chương trình đào tạo trực tuyến về phát triển web Full Stack tại các thành phố hàng đầu
NameDatePlacePost Chương trình sau đại học về phát triển web toàn ngăn xếp Nhóm bắt đầu vào ngày 10 tháng 1 năm 2023,Đợt cuối tuầnChi tiết CityView của bạnChương trình sau đại học về Phát triển web ngăn xếp đầy đủ, SingaporeCohort bắt đầu vào ngày 25 tháng 1 năm 2023,
Weekend batchSingaporeView DetailsPost Graduate Program in Full Stack Web DevelopmentCohort starts on 14th Feb 2023,
Weekend batchYour CityView Details
Thông tin về các Tác giả
Simplilearn là một trong những nhà cung cấp dịch vụ đào tạo trực tuyến hàng đầu thế giới về Tiếp thị kỹ thuật số, Điện toán đám mây, Quản lý dự án, Khoa học dữ liệu, CNTT, Phát triển phần mềm và nhiều công nghệ mới nổi khác