3 loại css giải thích với ví dụ là gì?

Question

Chúng ta sẽ xem qua Cascading Style Sheets thường được gọi là CSS. CSS là thứ biến Ngôn ngữ đánh dấu siêu văn bản hàng ngày của bạn, HTML, thành một biểu thức có một không hai khiến mọi người ngưỡng mộ

Nội dung chính Show

Tạo kiểu trong CSS
Khi nào nên sử dụng từng phong cách
Phần kết luận
CSS là gì và các loại của nó với các ví dụ?
3 thành phần chính của quy tắc CSS là gì?

Về bản thân, HTML được xem như một khung từ (trên trang web) có thể dễ dàng được viết trên Microsoft word và tiết kiệm rất nhiều thời gian. CSS bổ sung cho HTML để giúp đưa ra nhiều thiết kế khác nhau giúp trang web nổi bật

Từ màu nền, cỡ chữ, độ dày phông chữ, họ phông chữ, v.v., thiết kế của một trang web chỉ bị giới hạn bởi trí tưởng tượng của bạn

CSS là sân chơi chính cho bất kỳ nhà phát triển nào. Nói một cách tương tự, CSS giống như tất cả các loại gia vị bạn có thể thêm vào thức ăn của mình để tạo cho thức ăn có hương vị đậm đà, mùi thơm hấp dẫn và cách trình bày như mong muốn khi cuối cùng bạn dọn món ăn lên. Tuy nhiên, chỉ ném mọi thứ vào đó một cách ngẫu nhiên không đảm bảo sự tuyệt vời

Bạn vẫn phải hiểu cái gì đi đôi với cái gì, khi nào nên áp dụng một phong cách cụ thể hay khi nào điều gì đó không phù hợp. Cách bạn triển khai CSS có thể tạo hoặc phá vỡ trang web của bạn. Dưới đây chúng ta sẽ xem xét các tùy chọn tạo kiểu khác nhau trong CSS, cách áp dụng chúng và thời điểm tốt nhất để triển khai từng kiểu

Tạo kiểu trong CSS

Có 3 phương pháp riêng biệt để tạo kiểu trong CSS, Kiểu cục bộ, Kiểu cấp độ trang và Kiểu bên ngoài. Mỗi cấp độ kiểu dáng được ưu tiên theo thứ bậc khác nhau (khi áp dụng) và được sử dụng vì những lý do khác nhau

3 phương pháp được nhóm lại thành hai loại. Cụ thể là CSS nội bộ và CSS bên ngoài. CSS nội bộ bao gồm Kiểu cục bộ và Kiểu cấp trang trong khi CSS bên ngoài giống như tên của nó

1. phong cách địa phương

Còn được gọi là nội tuyến. Biểu mẫu này được xác định trong các thẻ/phần tử HTML của bạn. Nó chủ yếu được sử dụng để tạo kiểu cho các phần tử cụ thể trong mã của bạn

  <html>
    <head>
      <title>Cascading Style Sheetstitle>
    head>
    <body>
      <p style = "font-family: sans-serif;
          font-size: 1.2em
          font-style: italic;">
          This paragraph is an example of a local style.
        p>
        <p>This is an Unaffected paragraphp>
    body>
  html>

Đoạn mã này chỉnh sửa phông chữ của thẻ p trong nội dung. Tuy nhiên, nó chỉ thay đổi nội dung của thẻ p đầu tiên. Thẻ p thứ hai duy trì kiểu mặc định của trang web

Bằng cách sử dụng thẻ kiểu trong phần tử HTML p, chúng tôi có thể thay đổi phông chữ, cỡ chữ và kiểu chỉ cho p đầu tiên. Đối với phần tử p thứ hai, nó vẫn giữ kiểu mặc định

2. Kiểu cấp độ trang

Các kiểu cấp độ trang được xác định tại khu vực tiêu đề của tệp HTML. Tất cả các thẻ tương tự, cho dù các phần tử là thành viên của lớp hoặc bộ chọn ID trong phần nội dung của HTML sẽ trải qua các thay đổi cùng một lúc. Mỗi bộ chọn ID chỉ có thể xác định một phần tử trong khi bộ chọn Lớp có thể xác định nhiều hơn một phần tử cùng một lúc

  <html>
    <head>
      <title>Cascading Style Sheetstitle>
      <meta charset="utf-8">
      <style type="text/css">
         body{
           color: yellow;
           background-color: red;
         }
         p{
           color: red;
           background-color: yellow;
         }
      style>
    head>
    <body>
      <h1>Headingh1>
      <p>This paragraph has been styled using page level styling.p>
    body>
  html>

Lần này, chúng tôi đã xác định kiểu trong các thẻ HTML đầu. Bằng cách đó, các thành phần được xác định trong thẻ kiểu sẽ tự động áp dụng kiểu được xác định cho chúng. Điều này có nghĩa là tất cả các phần tử p trên trang sẽ có màu đỏ và màu nền là vàng

Mặt khác, cơ thể sẽ có màu vàng và màu nền đỏ. Các nhà phát triển có thể triển khai điều này khi cố gắng cung cấp cho trang web một chủ đề khác hoặc sống động trong đó phần nền và các đoạn văn bổ sung cho nhau để mang lại giao diện hấp dẫn

3. Phong cách bên ngoài

Các kiểu được sử dụng cho trang web được đặt trong một tệp hoàn toàn khác. Tệp khác này hoàn toàn chứa mã CSS và được lưu với một. phần mở rộng css. Các. Tệp HTML được liên kết với. tệp css có thể được nhập để sửa đổi kiểu trang web

Khi phát triển một trang web có nhiều trang, kiểu dáng này thường có ích. Điều này là do thực tế là chỉ một tệp CSS có thể được triển khai trên nhiều trang, giúp duy trì tính đồng nhất dễ dàng hơn

  
  <html>
    <head>
        <meta charset="utf-8">
        <title>External Stylestitle>
        <link rel="stylesheet" type="text/css" href="css/myStyle.css"/>
    head>
    <body>
      <h1>Headingh1>
        <p>This is an example of External CSSp>
    body>
  html>

Trong đoạn mã trên, không có thẻ kiểu nào được xác định trong. Tuy nhiên, kiểu dáng được sử dụng cho trang web đã được viết trong một tệp khác (nội dung được hiển thị bên dưới) và được liên kết với tệp này bằng các thẻ liên kết

  /*This is the CSS file called myStyle.css*/
  body{
    background-color: black;
    color: white;
  }
  p{
    color: purple;
  }

CSS được viết trong tệp này, mystyle. css, được sử dụng trong đoạn mã trên để triển khai thiết kế

Khi nào nên sử dụng từng phong cách

Với ba tùy chọn kiểu dáng này trong CSS, cách tốt nhất là tránh CSS bên trong và triển khai CSS bên ngoài. Như được giải thích thêm bên dưới, bên ngoài mang lại tính đồng nhất và mã sạch sẽ giúp thực hiện thay đổi dễ dàng hơn

Phong cách cục bộ không phải là lựa chọn đầu tiên xuất hiện trong đầu khi xử lý CSS. Tại một số thời điểm, việc tạo kiểu cho từng thành phần riêng lẻ trở thành gánh nặng quá lớn. Vào thời điểm bạn kết thúc dự án của mình, toàn bộ tệp là một mớ hỗn độn. Điều đó cuối cùng sẽ kéo dài thời gian cần thiết để hoàn thành dự án, do đó khiến bạn phải kéo dài thời hạn hoặc dành nhiều thời gian hơn chỉ để theo kịp

Tuy nhiên, điều này không có nghĩa là không nên sử dụng phong cách. Nó thường hoạt động tốt khi bạn đang thử nghiệm một phong cách mới trên một yếu tố giúp dễ dàng xác định xem phong cách đó có phù hợp với thiết kế hay không

Luôn ghi nhớ rằng các kiểu cục bộ có mức độ ưu tiên cao hơn các kiểu cấp độ trang và bên ngoài. Điều này có nghĩa là chúng sẽ ghi đè bất kỳ thuộc tính kiểu nào được xác định trong cấp độ trang và bên ngoài

Chúng sẽ đóng vai trò là kiểu chính cho thẻ cụ thể. Ví dụ: nếu thẻ p có kiểu cấp độ trang hoặc kiểu bên ngoài trong đó màu của thẻ được đặt là màu đỏ nhưng nhà phát triển đã thêm kiểu cục bộ vào cùng thẻ đó với màu xanh lam, thì trang web sẽ hiển thị màu xanh lam

ưu

Dễ dàng kiểm tra thiết kế trên các yếu tố riêng lẻ
Bạn có thể sử dụng một tài liệu để tải các kiểu CSS

Nhược điểm

Có thể mất nhiều thời gian để tải hoặc hiển thị một trang vì nhiều thành phần riêng lẻ được tạo kiểu bên trong
Tệp cuối cùng này sẽ trông lộn xộn, do đó khó đọc hơn

Kiểu cấp độ trang là kiểu cục bộ phiên bản sạch, nơi bạn có mọi thứ nằm ở một vị trí trung tâm trong tiêu đề của tệp HTML. Điều này mang lại kết quả tốt nhất đặc biệt là khi bạn đang trong giai đoạn phát triển của dự án. Điều này là do các trình duyệt không lưu trữ các kiểu cấp độ trang giống như các kiểu bên ngoài

ưu

Dễ dàng quản lý trong các giai đoạn phát triển ban đầu
Lập trình viên không cần phải liên tục chuyển đổi tệp để thực hiện các điều chỉnh nhỏ

Nhược điểm

Thêm mã vào tài liệu làm tăng kích thước của tệp
Để thao tác thiết kế trang web, bạn sẽ phải lấy tất cả các tệp có chứa CSS

Kiểu bên ngoài cung cấp cho bạn phạm vi triển khai rộng hơn. Vì tất cả mã được sử dụng trong kiểu dáng trang được lưu trữ trên một tệp riêng biệt, nó cho phép một người thực hiện các thay đổi toàn cầu đối với dự án vì một biểu định kiểu dáng có thể kiểm soát nhiều trang

Tôi thích sử dụng kiểu dáng bên ngoài khi bắt đầu dự án hoặc làm việc với một trang web trực tiếp. Nâng cấp dễ dàng hơn vì các tham số thiết kế của toàn bộ trang web được xác định trong một tệp duy nhất

ưu

Một biểu định kiểu điều khiển nhiều trang
Tách nội dung và thiết kế

Nhược điểm

Bạn không thể hiển thị trang cho đến khi toàn bộ tệp CSS được tải xuống
Liên kết nhiều tệp CSS với trang có thể dẫn đến thời gian chết

Phần kết luận

Cho dù đó là thử nghiệm một phong cách mới trên một phần tử, xây dựng trang web một trang đơn giản hay xây dựng trang web công ty yêu cầu thiết kế thống nhất từ đầu đến cuối, bạn có thể tìm hiểu CSS nội tuyến, kiểu cấp độ trang hoặc kiểu bên ngoài tương ứng

Trường hợp nội tuyến cho phép bạn thử nghiệm các mẫu thiết kế mới nhưng trở thành quá nhiều khối lượng công việc khi triển khai trên toàn bộ trang. Cấp độ trang cho phép bạn khám phá toàn bộ thiết kế trang web mà không cần rời khỏi trang nhưng tỏ ra bất lợi khi xử lý nhiều trang. Mặc dù các kiểu bên ngoài có thể mang lại cho trang web của bạn cảm giác về một chủ đề hoàn toàn mới

CSS là gì và các loại của nó với các ví dụ?

Cascading Style Sheets (CSS) là ngôn ngữ đánh dấu chịu trách nhiệm về giao diện trang web của bạn. Nó kiểm soát màu sắc, phông chữ và bố cục của các thành phần trang web của bạn. Ngôn ngữ biểu định kiểu này cũng cho phép bạn thêm hiệu ứng hoặc hoạt ảnh vào trang web của mình

3 thành phần chính của quy tắc CSS là gì?

Các thành phần của kiểu css là. .

bộ chọn. Tên phần tử HTML, tên id, tên lớp

Tài sản. Nó giống như một thuộc tính như màu nền, cỡ chữ, vị trí, căn chỉnh văn bản, màu sắc, đường viền, v.v.

giá trị. xác định thuộc tính hoặc giá trị phân bổ cho thuộc tính

programming css

3 loại css giải thích với ví dụ là gì?

Tạo kiểu trong CSS

1. phong cách địa phương

2. Kiểu cấp độ trang

3. Phong cách bên ngoài

Khi nào nên sử dụng từng phong cách

Phần kết luận

CSS là gì và các loại của nó với các ví dụ?

3 thành phần chính của quy tắc CSS là gì?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội