HTML – Style Sheet, Cascading Style Sheets (CSS) mô tả cách tài liệu được trình bày trên màn hình, trong bản in hoặc có thể là cách chúng được phát âm. W3C đã tích cực thúc đẩy việc sử dụng

Bạn đang xem: cách tạo biểu định kiểu bên ngoài

HTML – Biểu định kiểu

Quảng cáo

Trang tính kiểu xếp tầng (CSS) mô tả cách tài liệu được trình bày trên màn hình, trong bản in hoặc có thể là cách chúng được phát âm. W3C đã tích cực thúc đẩy việc sử dụng các biểu định kiểu trên Web kể từ khi tập đoàn được thành lập vào năm 1994.

Trang tính kiểu xếp tầng (CSS) cung cấp các lựa chọn thay thế dễ dàng và hiệu quả để chỉ định các thuộc tính khác nhau cho các thẻ HTML. Sử dụng CSS, bạn có thể chỉ định một số thuộc tính kiểu cho một phần tử HTML nhất định. Mỗi thuộc tính có một tên và một giá trị, được phân tách bằng dấu hai chấm (:). Mỗi khai báo thuộc tính được phân tách bằng dấu chấm phẩy (;).

Ví dụ

Trước tiên, hãy xem xét một ví dụ về tài liệu HTML sử dụng & lt; font & gt; thẻ và các thuộc tính liên quan để chỉ định màu văn bản và kích thước phông chữ –

Lưu ý – Thẻ không được dùng nữa và nó sẽ bị xóa trong phiên bản HTML trong tương lai. Vì vậy, chúng không nên được sử dụng đúng hơn, bạn nên sử dụng các kiểu CSS để thao tác với phông chữ của bạn. Nhưng vẫn nhằm mục đích học tập, chương này sẽ làm việc với một ví dụ bằng cách sử dụng thẻ phông chữ.

& lt;! DOCTYPE html & gt;
& lt; html & gt;

   & lt; đầu & gt;
      & lt; title & gt; HTML CSS & lt; / title & gt;
   & lt; / head & gt;

   & lt; body & gt;
      & lt; p & gt; & lt; font color = "green" size = "5" & gt; Hello, World! & lt; / font & gt; & lt; / p & gt;
   & lt; / body & gt;

& lt; / html & gt;

Chúng ta có thể viết lại ví dụ trên với sự trợ giúp của Style Sheet như sau –

& lt;! DOCTYPE html & gt;
& lt; html & gt;

   & lt; đầu & gt;
      & lt; title & gt; HTML CSS & lt; / title & gt;
   & lt; / head & gt;

   & lt; body & gt;
      & lt; p style = "color: green; font-size: 24px;" & gt; Xin chào, Thế giới! & lt; / p & gt;
   & lt; / body & gt;

& lt; / html & gt;

Điều này sẽ tạo ra kết quả sau –

Bạn có thể sử dụng CSS theo ba cách trong tài liệu HTML của mình –

  • Trang định kiểu bên ngoài – Xác định quy tắc biểu định kiểu trong một tệp .css riêng biệt và sau đó đưa tệp đó vào tài liệu HTML của bạn bằng cách sử dụng liên kết HTML & lt; & gt; thẻ.

  • Trang Định kiểu Nội bộ – Xác định các quy tắc của Biểu định kiểu trong phần tiêu đề của tài liệu HTML bằng cách sử dụng & lt; style & gt; thẻ.

  • Inline Style Sheet – Xác định trực tiếp các quy tắc của biểu định kiểu cùng với các phần tử HTML bằng cách sử dụng thuộc tính style .

Xem Thêm  Đệ quy trong Java - ví dụ về đệ quy trong java

Hãy lần lượt xem tất cả ba trường hợp với sự trợ giúp của các ví dụ phù hợp.

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

Nếu bạn cần sử dụng biểu định kiểu của mình cho các trang khác nhau, thì bạn nên xác định biểu định kiểu chung trong một tệp riêng biệt. Tệp biểu định kiểu xếp tầng sẽ có phần mở rộng là .css và nó sẽ được đưa vào các tệp HTML bằng cách sử dụng & lt; liên kết & gt; thẻ.

Ví dụ

Hãy xem xét chúng tôi xác định tệp định kiểu style.css có các quy tắc sau –

.màu đỏ {
   màu đỏ;
}
.đặc {
   font-size: 20px;
}
.màu xanh lá {
   màu xanh lá cây;
}

Ở đây, chúng tôi đã xác định ba quy tắc CSS sẽ áp dụng cho ba lớp khác nhau được xác định cho các thẻ HTML. Tôi khuyên bạn không nên bận tâm về cách các quy tắc này được định nghĩa bởi vì bạn sẽ học chúng trong khi nghiên cứu CSS. Bây giờ, hãy sử dụng tệp CSS bên ngoài ở trên trong tài liệu HTML sau của chúng tôi –

& lt;! DOCTYPE html & gt;
& lt; html & gt;

   & lt; đầu & gt;
      & lt; title & gt; HTML CSS bên ngoài & lt; / title & gt;
      & lt; link rel = "stylesheet" type = "text / css" href = "/html/style.css">
   & lt; / head & gt;

   & lt; body & gt;
      & lt; p class = "red" & gt; Đây là màu đỏ & lt; / p & gt;
      & lt; p class = "dầy" & gt; Cái này thật dày & lt; / p & gt;
      & lt; p class = "green" & gt; Đây là màu xanh lá cây & lt; / p & gt;
      & lt; p class = "dầy màu xanh lá cây" & gt; Đây là màu xanh lá cây và dày & lt; / p & gt;
   & lt; / body & gt;

& lt; / html & gt;

Điều này sẽ tạo ra kết quả sau –

Biểu định kiểu nội bộ

Nếu bạn chỉ muốn áp dụng các quy tắc Biểu định kiểu cho một tài liệu, thì bạn có thể đưa các quy tắc đó vào phần tiêu đề của tài liệu HTML bằng cách sử dụng & lt; style & gt; thẻ.

Các quy tắc được xác định trong biểu định kiểu nội bộ sẽ ghi đè các quy tắc được xác định trong tệp CSS bên ngoài.

Ví dụ

Hãy viết lại ví dụ trên một lần nữa, nhưng ở đây chúng ta sẽ viết các quy tắc về biểu định kiểu trong cùng một tài liệu HTML bằng cách sử dụng & lt; style & gt; thẻ –

& lt;! DOCTYPE html & gt;
& lt; html & gt;
 
   & lt; đầu & gt;
      & lt; title & gt; HTML Nội bộ CSS & lt; / title & gt;
      
      & lt; style type = "text / css" & gt;
         .màu đỏ {
            màu đỏ;
         }
         .đặc{
            font-size: 20px;
         }
         .màu xanh lá {
            màu xanh lá cây;
         }
      & lt; / style & gt;
   & lt; / head & gt;

   & lt; body & gt;
      & lt; p class = "red" & gt; Đây là màu đỏ & lt; / p & gt;
      & lt; p class = "dầy" & gt; Cái này thật dày & lt; / p & gt;
      & lt; p class = "green" & gt; Đây là màu xanh lá cây & lt; / p & gt;
      & lt; p class = "dầy màu xanh lá cây" & gt; Đây là màu xanh lá cây và dày & lt; / p & gt;
   & lt; / body & gt;

& lt; / html & gt;

Điều này sẽ tạo ra kết quả sau –

Xem Thêm  Cách thụt lề mã HTML - Và tại sao nó lại quan trọng - html cách thụt lề

Biểu định kiểu nội tuyến

Bạn có thể áp dụng quy tắc biểu định kiểu trực tiếp cho bất kỳ phần tử HTML nào bằng cách sử dụng thuộc tính style của thẻ có liên quan. Việc này chỉ nên được thực hiện khi bạn muốn thực hiện một thay đổi cụ thể chỉ trong bất kỳ phần tử HTML nào.

Các quy tắc được xác định nội dòng với phần tử sẽ ghi đè các quy tắc được xác định trong tệp CSS bên ngoài cũng như các quy tắc được xác định trong & lt; style & gt; phần tử.

Ví dụ

Hãy viết lại ví dụ trên một lần nữa, nhưng ở đây chúng ta sẽ viết các quy tắc về biểu định kiểu cùng với các phần tử HTML bằng cách sử dụng thuộc tính style của các phần tử đó.

& lt;! DOCTYPE html & gt;
& lt; html & gt;
 
   & lt; đầu & gt;
      & lt; title & gt; HTML Nội tuyến CSS & lt; / title & gt;
   & lt; / head & gt;
 
   & lt; body & gt;
      & lt; p style = "color: red;" & gt; Đây là màu đỏ & lt; / p & gt;
      & lt; p style = "font-size: 20px;" & gt; Cái này dày & lt; / p & gt;
      & lt; p style = "color: green;" & gt; Đây là màu xanh lá cây & lt; / p & gt;
      & lt; p style = "color: green; font-size: 20px;" & gt; Cái này dày và xanh & lt; / p & gt;
   & lt; / body & gt;
 
& lt; / html & gt;

Điều này sẽ tạo ra kết quả sau –

Quảng cáo


Xem thêm những thông tin liên quan đến chủ đề cách tạo bảng định kiểu bên ngoài

Chứng khoán hôm nay|Nhận định thị trường:24/06:1188.88. Tăng mạnh vol thấp. Phân tích thị trường

  • Tác giả: Ngoc Nam Invest
  • Ngày đăng: 2022-06-23
  • Đánh giá: 4 ⭐ ( 1308 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chứng khoán hôm nay|Nhận định thị trường:24/06:1188.88. Tăng mạnh vol thấp. Phân tích thị trường
    Hỗ trợ danh mục – Tư vấn giải đáp :
    Ngọc Nam – GĐ.TVĐT VPS HCM
    Phone/zalo để hợp tác : 03.9999.7909

    Liên hệ Trợ lý để vào room VIP tư vấn :

    KaThy : 0933069650
    Anh Thư : 0345 455 279
    Thùy Linh : 0964 383 128
    Lệ Hoa

    Kênh Tiktok NgocNamInvest :https://www.tiktok.com/@ngocnaminvest

    Room Phái Sinh :https://zalo.me/g/neqadh183

    Room Chia Sẻ :https://zalo.me/g/fbmnvx894

    Room Mở Tài Khoản VPS : https://zalo.me/g/mldsmc261

    ​Facebook cá nhân: https://www.facebook.com/namvps26

    Đăng ký mở TK bằng eKYC :https://www.youtube.com/watch?v=VUHejXaZFoM&t=4s​ ​ ID người giới thiệu : B238 Đặng Thị Hà Giang – đây cũng là ID của Nam – anh PHẢI gắn ID Này Nam mới hỗ trợ được ạ.

    Dòng tiền tăng trong nghi ngờ :https://www.youtube.com/watch?v=fXsFD…​…
    ================================================
    chứngkhoán​​​​​​​​​​​, chungkhoan​​​​​​​​​​​ , đầutưchứngkhoán​​​​​​​​​​​
    ==================================================
    Video chỉ Mang tính chất hỗ trợ góc nhìn đầu tư cá nhân – Không quyết định đến việc mua bán của anh chị nhà đầu tư – Chúc anh chị đầu tư thành công

Cách tạo bảng trong Word và định dạng bảng chi tiết đơn giản nhất

  • Tác giả: www.dienmayxanh.com
  • Đánh giá: 3 ⭐ ( 9745 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bảng trong Word là một công cụ hữu ích, giúp bạn trình bày nội dung rõ ràng. Điện máy XANH sẽ hướng dẫn bạn tạo bảng, định dạng và xóa bảng trong Word 2016 chi tiết nhé!

Cách tạo bảng trong word tiện lợi, nhanh chóng nhất

  • Tác giả: teky.edu.vn
  • Đánh giá: 5 ⭐ ( 5435 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách tạo bảng trong word tiện lợi, nhanh chóng được TEKY cập nhật trong bài viêt sau. Tham khảo ngay đừng bỏ lỡ thông tin hữu ích!

Bảng định kiểu bên ngoài là gì?

  • Tác giả: www.greelane.com
  • Đánh giá: 5 ⭐ ( 6733 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Biểu định kiểu bên ngoài xác định giao diện của một trang web. Nó có thể chỉ định cách trình bày văn bản và menu hoặc bố cục của một trang.

Cách tạo bảng trong Excel 2019 – Hướng dẫn chi tiết cho

  • Tác giả: downvn.net
  • Đánh giá: 5 ⭐ ( 7117 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách tạo bảng trong Excel 2019,thủ thuật tin học, downvn.net , download không giới hạn ,Hướng dẫn chi tiết cho người mới bắt đầu

Cách tạo bảng, định dạng và xóa bảng trong Word cực đơn giản

  • Tác giả: www.thegioididong.com
  • Đánh giá: 5 ⭐ ( 6026 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn tạo bảng trong Word, chỉnh sửa bảng: gộp ô, tách ô, tô màu, thay đổi kiểu đường viền, màu viền, căn lề text trong bảng, xóa 1 ô, 1 hàng, 1 cột, xóa cả bảng,…

Cách tạo đường viền, làm khung, border, trong văn bản Word 2007, 2013,

  • Tác giả: thuthuat.taimienphi.vn
  • Đánh giá: 4 ⭐ ( 2827 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách tạo viền word, tạo khung word, tạo đường viền trong văn bản Word chỉ với vài thao tác đơn giản sau đây bạn dễ dàng tạo khung cho văn bản word

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Cách tải và sử dụng phông chữ tùy chỉnh với CSS - cách thêm phông chữ vào css trang web

By ads_php