search

So sánh biểu định kiểu nội tuyến, nhúng và bên ngoài với ví dụ

Ngày đăng: 01/02/2023
Trả lời: 0
Lượt xem: 30

Trước đó

Show

Kế tiếp

So sánh biểu định kiểu nội tuyến, nhúng và bên ngoài với ví dụ

CSS

Using CSS(Cascading Style Sheets), chúng ta có thể tạo kiểu cho các trang web của mình. Chúng ta có thể sử dụng các thuộc tính màu nền, cỡ chữ, họ phông chữ, màu viền, chiều rộng, chiều cao để tạo kiểu cho tài liệu HTML của mình

Người ta có thể thiết kế các trang web đơn giản bằng cách sử dụng biểu định kiểu nội tuyến trong HTML. Nhưng để tạo trang web hấp dẫn và đáp ứng hơn, hãy sử dụng CSS

Dưới đây là một số loại biểu định kiểu HTML khác nhau
Quy tắc 1 . Biểu định kiểu nội tuyến – Trong  biểu định kiểu này, quy tắc kiểu được nội tuyến với các thành phần HTML. Điều này có nghĩa là phong cách được định nghĩa là các yếu tố được mô tả.

Quy tắc 2 . Embedded stylesheet  – Tại đây, quy tắc kiểu được nhúng trong Tiêu đề của HTML. Điều này có nghĩa là phong cách xác định trong thẻ như – phong cách….

Quy tắc 2 . Biểu định kiểu bên ngoài–  Biểu định kiểu  stylesheet này tạo trang tài liệu kiểu riêng biệt và biểu định kiểu này chứa thông tin kiểu của các thành phần HTML. Các phần tử kiểu này chỉ chứa CSS nhưng không có thẻ HTML nào ở đây. Và biểu định kiểu bên ngoài liên kết trở lại trang HTML chính trong phần bằng cách sử dụng thẻ 

Cung cấp màu nền bằng cách sử dụng kiểu Nội tuyến

Sử dụng biểu định kiểu nội tuyến như trong ví dụ bên dưới

Thí dụ

<h1 style="color:green;font-size:40px;"> Example for inline stylesheet in heading tagh1> 

<p style="color:blue;font-size:16px;"> Paragraph tag contains Inline stylep>

Chạy mã

Theo dõi @tutorial_brain

Màu nền kiểu HTML sử dụng kiểu nhúng

Sử dụng thuộc tính Màu nền CSS để tạo màu nền cho trang

So sánh biểu định kiểu nội tuyến, nhúng và bên ngoài với ví dụ

Thí dụ

.styleval { 
  background:skyblue;
  width:500px;
  text-align: center;
  border-radius:5px;
}

Chạy mã

Thông tin Ví dụ trên sử dụng kiểu nhúng. Theo cách tương tự, bạn có thể đặt màu nền bằng cách sử dụng kiểu nội tuyến hoặc biểu định kiểu bên ngoài × Bỏ qua cảnh báo

Biểu định kiểu bên ngoài trong HTML

Bạn có thể sử dụng Biểu định kiểu bên ngoài để liên kết các kiểu với tài liệu HTML của mình

Nội dung của biểu định kiểu bên ngoài sẽ chứa các thuộc tính tạo kiểu. Giả sử, tên của biểu định kiểu của bạn là 'biểu định kiểu. css', thì bạn cần liên kết biểu định kiểu đó trong tài liệu HTML của mình như bên dưới –

Thí dụ

<head>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
head>

Chạy mã

Một ví dụ về nội dung của biểu định kiểu bên ngoài (trong trường hợp này là biểu định kiểu. css) là –

h1 { 
color: gray; 
margin-left: 20px; 
}

h4 { 
color: gold; 
}

p {
color:aqua;
font-size:20px;
}

Theo dõi @tutorial_brain

Thuộc tính họ phông chữ trong CSS

Chúng tôi có thể tìm thấy các loại phông chữ khác nhau bằng cách sử dụng thuộc tính họ phông chữ kiểu của tài liệu HTML của chúng tôi

Thí dụ

<h4 style="font-family:Broadway;">Broadwayh4>

<h4 style="font-family:Times new roman;">Times new romanh4>

<h4 style="font-family:Chiller;">Chillerh4>

Chạy mã

Màu văn bản kiểu HTML

Chúng tôi có thể cung cấp màu cho văn bản được chỉ định bằng thuộc tính màu CSS

Thí dụ

<p style="color:tomato;">Tomato colorp>
<p style="color:Brown;">Brown colorp>
<p style="color:Slateblue;">Slateblue colorp>

Chạy mã

Cách cung cấp kích thước phông chữ trong HTML

Thuộc tính kích thước phông chữ mô tả kích thước của văn bản trong tài liệu HTML

Thí dụ

<p style="font-size:80px;">First font 80pxp>
<p style="font-size:400%;">Second Font 400%p>
<p style="font-size:3em;">Third font size is 3emp>

Chạy mã

Theo dõi @tutorial_brain

Căn chỉnh văn bản kiểu HTML

Sử dụng thuộc tính CSS text-align để căn chỉnh văn bản của bạn

So sánh biểu định kiểu nội tuyến, nhúng và bên ngoài với ví dụ

Thí dụ

<p style="text-align:center;">Aligned in the centerp>

<p style="text-align:center;">It is aligned in the centerp>

<p style="text-align:center;">Aligned in the centerp>

Chạy mã

Câu hỏi & Trả lời phỏng vấn

  1. Sự khác biệt giữa HTML và CSS là gì?

1. HTML là một ngôn ngữ đánh dấu được sử dụng để mô tả các tài liệu web

CSS được sử dụng để thiết kế tài liệu web

2. Ngôn ngữ đánh dấu (HTML) được sử dụng để tạo nội dung thực tế của trang, chẳng hạn như văn bản viết

Cascade Styling Sheet (CSS) chịu trách nhiệm về thiết kế hoặc phong cách của trang web, bao gồm bố cục, hiệu ứng hình ảnh và màu nền

3. HTML được sử dụng để tạo ra các trang web

CSS được sử dụng để kiểm soát kiểu dáng và bố cục của các trang web

4. Chúng ta có thể sử dụng CSS trong tệp HTML

Chúng tôi không thể sử dụng HTML trong biểu định kiểu CSS

5. HTML bao gồm thẻ xung quanh nội dung

CSS bao gồm một bộ chọn theo sau là một khối khai báo

2. Làm cách nào để nhúng CSS vào HTML?

To embed CSS in HTML we use