Trong hướng dẫn này, bạn sẽ tìm hiểu cách dễ dàng để thêm thông tin định dạng và kiểu dáng vào các trang web bằng CSS. Tuy nhiên, trước khi chúng tôi bắt đầu, hãy đảm bảo rằng bạn có một số kiến ​​thức về HTML

Nếu bạn mới bắt đầu trong thế giới phát triển web, hãy bắt đầu học từ đây »

Không chần chừ gì nữa, hãy bắt đầu với Cascading Style Sheets (CSS)

Bao gồm CSS trong Tài liệu HTML

CSS có thể được đính kèm dưới dạng một tài liệu riêng biệt hoặc được nhúng trong chính tài liệu HTML. Có ba phương pháp đưa CSS vào tài liệu HTML

• Kiểu nội tuyến — Sử dụng thuộc tính style trong thẻ bắt đầu HTML
• Các kiểu được nhúng — Sử dụng This is a heading

  This is a paragraph of text.

  Mẹo. Thuộc tính type của

  Tương tự, bạn có thể sử dụng quy tắc @import để nhập một biểu định kiểu trong một biểu định kiểu khác

  @import url("css/layout.css");
  @import url("css/color.css");
  body {
      color: blue;
      font-size: 14px;
  }

  Ghi chú. Tất cả các quy tắc @import phải xuất hiện ở đầu biểu định kiểu. Bất kỳ quy tắc kiểu nào được xác định trong biểu định kiểu sẽ ghi đè các quy tắc xung đột trong biểu định kiểu đã nhập. Tuy nhiên, không nên nhập một biểu định kiểu trong một biểu định kiểu khác do vấn đề về hiệu suất

  CSS bên ngoài là một dạng CSS được sử dụng để thêm kiểu dáng cho nhiều trang HTML cùng một lúc. Nó giúp thiết kế bố cục của nhiều trang web HTML cùng một lúc. CSS bên ngoài luôn được lưu với. css và thông qua tệp này, chúng tôi có thể thay đổi kiểu hoàn chỉnh của trang web HTML của mình

  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ý ngay

  CSS là gì?

  CSS là từ viết tắt của Cascading Style Sheets. CSS là ngôn ngữ thiết kế giúp cải thiện giao diện của trang web bằng cách làm cho trang web hấp dẫn hơn so với văn bản đơn giản hoặc không thú vị.  

  CSS so với. HTML

  • CSS xác định cấu trúc hình ảnh và bố cục, trong khi HTML chủ yếu xác định nội dung văn bản.  
  • CSS là ngôn ngữ biểu định kiểu và HTML là ngôn ngữ đánh dấu.  
  • Khi nghĩ đến CSS, chúng ta nghĩ đến sự xuất hiện của các trang HTML

  Nói một cách đơn giản, CSS cải thiện giao diện của các trang web và cho phép bố cục thân thiện hơn với người dùng. Trải nghiệm người dùng được cải thiện khi các nút và nội dung được sắp xếp đẹp mắt ở các vị trí hợp lý

  CSS bên ngoài

  Đây là một trong những biểu mẫu CSS được sử dụng phổ biến nhất để cập nhật, tạo kiểu và sửa đổi các kiểu riêng biệt trong nhiều trang web HTML cùng một lúc. Một biểu định kiểu bên ngoài có thể được gọi vào tài liệu HTML bằng hai phương pháp.  

  • Using the tag in the HTML document head. 
  • Sử dụng kết hợp các chức năng CSS bên ngoài và CSS tích hợp.  

  Một trong những tính năng độc đáo của CSS bên ngoài là chúng ta có thể viết một biểu định kiểu bên ngoài trong bất kỳ trình soạn thảo văn bản nào, nhưng nó phải luôn được lưu với một. css và tệp không được chứa bất kỳ phần tử HTML nào

  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ý ngay

  Làm cách nào để sử dụng CSS bên ngoài?

  Chúng tôi sử dụng biểu định kiểu bên ngoài khi chúng tôi muốn sửa đổi nhiều trang. Sử dụng CSS bên ngoài là tuyệt vời cho tình huống này vì nó cho phép chúng tôi sửa đổi giao diện của toàn bộ trang web chỉ với một lần sửa đổi tệp

  Nó là công cụ khi làm việc trên các dự án lớn hoặc nhiều trang web HTML

  To implement external CSS we have to define the filename of the CSS sheet with “mystyle.css” extension within the element inside the section of the HTML page:

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

  <đầu>

  Đây là tiêu đề

  Đây là một đoạn.

  phong cách của tôi. css

  Trong tệp này, chúng tôi có thể viết mã CSS hoàn chỉnh của mình để tạo kiểu cho trang web HTML

  Thí dụ

  Mã CSS để định kiểu đường viền và thuộc tính lề bên trong trang web HTML

  P {

  biên giới. 5px  màu xanh dương;

  lề. 15px;

  }

  Mã CSS để tạo kiểu cho các thuộc tính đường viền và phần đệm bên trong trang web HTML

  P {

  biên giới. 5px  màu xanh dương;

  đệm. 20px;

  }

  Để triển khai CSS trong một thành phần cụ thể của trang HTML, chúng tôi sử dụng. bộ chọn lớp

  bộ chọn lớp

  Các. bộ chọn lớp chọn các thành phần có thuộc tính lớp nhất định. Viết dấu chấm (. ) ký tự theo sau là tên của lớp để chọn các thành phần với lớp đó

  tầng lớp {

  khai báo css;

  }

  ví dụ 1

  Trong mã CSS dưới đây,. bộ chọn lớp thành phố chọn và tạo kiểu cho tất cả các phần tử với lớp =city

  thành phố {

  màu nền. màu đỏ;

  }

  Khóa học Full Stack Web Developer

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

  ví dụ 2

  Tất cả các thành phần HTML có class="sideway" sẽ có màu đỏ và được căn giữa trong ví dụ này

  Bên lề {

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

  màu. màu xanh lá;

  }

  Bộ chọn ID

  Bộ chọn id sử dụng thuộc tính id của phần tử HTML để chọn một phần tử cụ thể. Vì id của mỗi phần tử là duy nhất trong một trang nên bộ chọn id được sử dụng để chọn chỉ một phần tử.  

  Viết ký tự băm (#) theo sau là id của phần tử để chọn phần tử có id được chỉ định

  ví dụ 1

  Quy tắc này sẽ được áp dụng cho các phần tử HTML có id=change1

  #thay1 {

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

  màu. trái cam;

  }

  Ưu điểm của việc sử dụng CSS bên ngoài

  • Đối với bất kỳ thay đổi nào về kiểu dáng của trang HTML, một sửa đổi duy nhất đối với biểu định kiểu có thể được áp dụng cho tất cả các trang được kết nối, giúp tiết kiệm thời gian và công sức
  • Các kỹ thuật chọn và nhóm được sử dụng để áp dụng các kiểu trong ngữ cảnh phức tạp
  • Nó giúp giữ cho mã của chúng tôi đẹp và dễ đọc vì tất cả mã cho phần tạo kiểu được thực hiện trong một tệp riêng biệt

  Nhược điểm của việc sử dụng CSS bên ngoài

  • Nó không được sử dụng cho số lượng nhỏ định nghĩa kiểu
  • Trang của chúng tôi có thể không hoạt động bình thường cho đến khi tệp CSS bên ngoài được tải
  • Để trích xuất thông tin kiểu dáng từ trang HTML, chúng tôi cần tải xuống một tệp bổ sung

  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

  CSS bên ngoài có lợi cho các trang web HTML nhiều trang. Chúng ta có thể thay đổi kiểu dáng hoàn chỉnh của trang web chỉ bằng cách thay đổi mã trong. css, làm cho thuộc tính này của CSS cực kỳ hữu ích để làm việc trên các dự án lớn. Chúng tôi không thể sử dụng thuộc tính này của CSS trong việc thiết kế trang web HTML một trang

  Nếu bạn muốn tìm hiểu thêm về CSS và các khái niệm liên quan khác, bạn có thể đăng ký Khóa học Chứng chỉ Phát triển Web Full Stack độc quyền của Simplilearn và đẩy nhanh sự nghiệp của bạn với tư cách là nhà phát triển phần mềm. Chương trình bao gồm nhiều khóa học phát triển phần mềm khác nhau, từ các nguyên tắc cơ bản đến các chủ đề nâng cao.  

  Simplilearn cũng cung cấp các khóa học nâng cao kỹ năng trực tuyến miễn phí trong một số lĩnh vực, từ khoa học dữ liệu và phân tích kinh doanh đến phát triển phần mềm, trí tuệ nhân tạo và máy học. Bạn có thể tham gia bất kỳ khóa học nào trong số này để nâng cao kỹ năng và thăng tiến trong sự nghiệp của mình

  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

  Chương trình Sau đại học NameDatePlace trong Nhóm phát triển Web Full Stack bắt đầu vào ngày 16 tháng 2 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 Full Stack, SingaporeCohort bắt đầu vào ngày 1 tháng 3 năm 2023,
  Đợt cuối tuầnSingaporeXem chi tiếtChương trình sau đại học về Phát triển Web Full StackCohort bắt đầu vào ngày 15 tháng 3 năm 2023,
  Lô hàng cuối tuầnChi tiết CityView của bạn

  Thông tin về các Tác giả

  đơn giản

  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

  Biểu định kiểu bên ngoài giải thích biểu định kiểu bên ngoài cho các trang HTML là gì?

  Biểu định kiểu bên ngoài là tệp CSS riêng biệt có thể được truy cập bằng cách tạo liên kết trong phần đầu của trang web . Nhiều trang web có thể sử dụng cùng một liên kết để truy cập biểu định kiểu. Liên kết đến biểu định kiểu bên ngoài được đặt trong phần đầu của trang.

  Thẻ HTML nào được sử dụng để bao gồm biểu định kiểu bên ngoài?

  To add an external style sheet to a web page we use a tag. This tag should be added on those pages where we want to add CSS and this tag is written inside tag.