Các loại CSS trong HTML

Cascading Style Sheet (CSS) được sử dụng để đặt kiểu trong các trang web có chứa các phần tử HTML. Nó đặt thuộc tính màu nền, cỡ chữ, họ phông chữ, màu sắc, v.v. của các thành phần trên trang web


Các loại CSS trong HTML

Có ba loại CSS được đưa ra dưới đây

  • CSS nội tuyến

  • CSS nội bộ hoặc nhúng

  • CSS bên ngoài


CSS nội tuyến

CSS nội tuyến chứa thuộc tính CSS trong phần nội dung được gắn với phần tử được gọi là CSS nội tuyến. Loại kiểu này được chỉ định trong thẻ HTML bằng thuộc tính kiểu

Thí dụ

<!DOCTYPE html>
<html>
    <head>
        <title>Inline CSS</title>
    </head>
     
    <body>
        <p style = "color:Blue; font-size:70px;
                font-style:Lucida Console; text-align:center;">
            The Tech Platform
        </p>
 
    </body>
</html>          



đầu ra

Các loại CSS trong HTML



CSS nội bộ hoặc nhúng

Điều này có thể được sử dụng khi một tài liệu HTML phải được tạo kiểu duy nhất. Bộ quy tắc CSS phải nằm trong tệp HTML trong phần đầu tôi. e. , CSS được nhúng trong tệp HTML

Thí dụ

<!DOCTYPE html>
<html>
    <head>
        <title>Internal CSS</title>
        <style>
            .main {
                text-align:center;
            }
            .one {
                color:Blue;
                font-size:350%;
                font-weight:bold;
            }
            .two {
                font-style:bold;
                font-size:100%;
            }
        </style>
    </head>
    <body>
        <div class = "main">
            <div class ="one">The Tech Platform</div>
             
            <div class ="two">
                Where Technology meets at one point
            </div>
        </div>
    </body>
</html>
             


đầu ra

Các loại CSS trong HTML



CSS bên ngoài

CSS bên ngoài chứa tệp CSS riêng chỉ chứa thuộc tính kiểu với sự trợ giúp của các thuộc tính thẻ (Ví dụ: lớp, id, tiêu đề, v.v.). Thuộc tính CSS được viết trong một tệp riêng với. css và phải được liên kết với tài liệu HTML bằng thẻ liên kết. Điều này có nghĩa là đối với mỗi phần tử, kiểu chỉ có thể được đặt một lần và kiểu đó sẽ được áp dụng trên các trang web

Thí dụ. Tệp được cung cấp bên dưới chứa thuộc tính CSS. Tập tin này lưu với. phần mở rộng css. Dành cho người yêu cũ. công nghệ. css

body {
    background-color:lightblue;
}
.main {
    text-align:center;   
}
.one {
    color:Blue;
    font-size:70px;
    font-weight:Italic;
}
#two {
    font-style:bold;
    font-size:20px;
}



Dưới đây là tệp HTML đang sử dụng biểu định kiểu bên ngoài đã tạo

  • thẻ liên kết được sử dụng để liên kết biểu định kiểu bên ngoài với trang web html

  • Thuộc tính href được sử dụng để chỉ định vị trí của tệp biểu định kiểu bên ngoài


<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="tech.css"/>
    </head>
 
    <body>
        <div class = "main">
            <div class ="one">The Tech Platform</div>
            <div id ="two">
                Where Technology meets at one point.
            </div>
        </div>
    </body>
</html> 



đầu ra

Các loại CSS trong HTML



Thuộc tính của CSS

CSS nội tuyến có mức độ ưu tiên cao nhất, sau đó đến Nội bộ/Được nhúng, tiếp theo là CSS bên ngoài có mức độ ưu tiên thấp nhất. Nhiều biểu định kiểu có thể được xác định trên một trang. Nếu đối với thẻ HTML, các kiểu được xác định trong nhiều biểu định kiểu thì thứ tự bên dưới sẽ được tuân theo

  • Vì Nội tuyến có mức độ ưu tiên cao nhất, bất kỳ kiểu nào được xác định trong biểu định kiểu bên trong và bên ngoài đều bị ghi đè bởi Kiểu nội tuyến

  • Internal hoặc Embedded đứng thứ hai trong danh sách ưu tiên và ghi đè các kiểu trong style sheet bên ngoài

  • Biểu định kiểu bên ngoài có mức độ ưu tiên thấp nhất. Nếu không có kiểu nào được xác định trong biểu định kiểu nội tuyến hoặc nội bộ thì các quy tắc biểu định kiểu bên ngoài sẽ được áp dụng cho các thẻ HTML

    2 phần của CSS là gì?

    Một quy tắc CSS bao gồm hai phần chính. bộ chọn ('h1') và phần khai báo ('màu. đỏ') . Trong HTML, tên phần tử không phân biệt chữ hoa chữ thường nên 'h1' hoạt động tốt như 'H1'.

    Các loại ngôn ngữ CSS là gì?

    CSS là từ viết tắt của Cascade Styling Sheets. Tóm lại, đó là ngôn ngữ kiểu trang tính , là loại ngôn ngữ bạn có thể sử dụng để mô tả cách trình bày của ngôn ngữ đánh dấu – trong trường hợp này, .

    Loại CSS nào tốt nhất?

    5 Khung CSS hàng đầu dành cho nhà phát triển và nhà thiết kế .
    Bootstrap
    CSS đuôi gió
    Sự thành lập
    Bulma
    bộ xương

    4 khả năng của CSS là gì?

    CSS có thể xác định màu sắc, phông chữ, căn chỉnh văn bản, kích thước, đường viền, khoảng cách, bố cục và nhiều đặc điểm chính tả khác và có thể làm như vậy .