Tạo và áp dụng kiểu

Quan trọng:  Bài viết này là dịch máy, hãy xem tuyên bố miễn trừ trách nhiệm. Bạn hãy tìm phiên bản tiếng Anh của bài viết này tại đây để tham khảo.

Một kiểu là một tập hợp các định dạng đặc tính được xác định trong một biểu định kiểu xếp tầng (CSS). Bạn có thể áp dụng kiểu nội dung trong một trang Web, bao gồm văn bản (ký tự riêng lẻ hoặc toàn bộ đoạn văn), đồ họa tầng, bảng, và thậm chí lại nội dung trang Web toàn bộ. Kiểu cho phép bạn một cách hiệu quả tái sử dụng một bộ thuộc tính và giá trị mà không cần phải đặt thuộc tính mỗi lần bạn muốn sử dụng chúng.

Các kiểu một CSS xóa xếp tầng trong nghĩa toàn cầu kiểu quy tắc áp dụng cho các thành phần HTML, trừ khi quy tắc cục bộ kiểu ghi đè chúng. Nói chung, cục bộ kiểu quy tắc có mức ưu tiên qua chung kiểu quy tắc. Ví dụ, một kiểu đã xác định trong một CSS nội bộ trong một trang Web sẽ ghi đè kiểu đã xác định trong một CSS bên ngoài. Tương tự, một tại chỗ CSS xác định trong một thành phần HTML duy nhất trên trang Web sẽ ghi đè bất kỳ kiểu đã xác định cho cùng một phần tử đó trong CSS nội bộ hoặc bên ngoài trang Web. Các phần của quy tắc toàn cầu kiểu không mâu thuẫn bằng cục bộ CSS kiểu quy tắc áp dụng cho các thành phần HTML ngay cả khi Cục bộ kiểu được áp dụng.

Trong bài viết này

Các loại kiểu

Tạo một kiểu

Áp dụng kiểu

Các loại kiểu

Một kiểu đó nằm trong một CSS bên ngoài hoặc nội bộ có thể dựa trên lớp, dựa trên thành phần hoặc dựa trên id. Kiểu được xác định bằng cách thiết lập quy tắc của mình, bao gồm một bộ chọn, theo sau một khối các thuộc tính khai báo xuất hiện giữa ngoặc móc nhọn trái ({}) và dấu ngoặc nhọn} nhọn phải (}). Mỗi loại kiểu được phân biệt từ loại kiểu khác bằng bộ chọn; dấu chấm (.) xảy ra trước bộ chọn cho một kiểu dựa trên lớp; một số đăng (#) xảy ra trước bộ chọn cho một kiểu dựa trên id; và bộ chọn cho một kiểu dựa trên thành phần chỉ bao gồm một thành phần HTML, chẳng hạn như thành phần H1.

Kiểu dựa trên lớp học

Sử dụng kiểu dựa trên lớp học để xác định một bộ thuộc tính mà bạn muốn sử dụng trên một hoặc nhiều mục trong một trang Web. Nếu bạn muốn sửa đổi kiểu, bạn có thể sửa kiểu quy tắc bộ và tất cả các mục bạn đã áp dụng kiểu để tự động sẽ phản ánh các thay đổi.

Trong ví dụ sau, "giới thiệu" là chọn vào kiểu, và "phông, kích cỡ: nhỏ" là khai báo một thuộc tính, theo sau là một khai báo thuộc tính thứ hai.

Ví dụ về một quy tắc được đặt cho một kiểu dựa trên lớp

.introduction {font-size: small; color: white}

Ví dụ về một lớp học dựa trên kiểu được áp dụng cho < p > thẻ

<p class="introduction">

Kiểu dựa trên thành phần

Sử dụng kiểu dựa trên thành phần để xác định một bộ thuộc tính mà bạn muốn từng thể hiện của một thành phần HTML cụ thể để dùng trong một trang Web. Ví dụ, để tạo một lề 25 điểm ảnh xung quanh tất cả đoạn văn (nội dung bao quanh bởi < p > thẻ) trong trang Web của bạn, bạn tạo một phần tử dựa trên kiểu thành phần p sẽ sử dụng làm bộ chọn của nó chứa khai báo cho lề thuộc tính, như minh họa trong mã sau đây.

Ví dụ về một quy tắc được đặt cho một kiểu dựa trên thành phần

p { margin-left: 25px; margin-right: 25px }

Kiểu dựa trên ID

Sử dụng một kiểu dựa trên id khi bạn muốn xác định một bộ thuộc tính cho một mục đơn lẻ hoặc khối của mục mà bạn muốn phân biệt với tất cả các nội dung khác trong một hoặc nhiều trang Web. Sử dụng một kiểu dựa trên id khi bạn muốn kiểu thành phần HTML duy nhất trong một trang Web.

Ví dụ về một quy tắc được đặt cho một kiểu dựa trên id

#footer {background-color: #CCCCCC; margin: 15px}

Ví dụ về một id dựa trên kiểu được áp dụng cho < p > thẻ

<p id="footer">

Kiểu tại chỗ

Sử dụng một kiểu tại chỗ khi bạn muốn xác định một bộ thuộc tính cho một mục đơn lẻ hoặc khối các mục trong một trang Web và không muốn dùng lại kiểu đó. Không giống như kiểu dựa trên id, dựa trên thành phần và dựa trên lớp học, có các thuộc tính được xác định trong một trong hai phần đầu của trang Web (nội bộ CSS) hoặc trong một tệp CSS bên ngoài, các thuộc tính kèm theo một kiểu (hoặc tại chỗ CSS) được xác định trực tiếp trong thành phần HTML mà bạn muốn sử dụng kiểu.

Ví dụ về một quy tắc được đặt cho một kiểu tại chỗ

<p style="font-weight: bold; font-style: italic; color: #FF0000">

Đầu trang

Tạo một kiểu

Bạn có thể tạo kiểu mới từ đầu hoặc bằng cách sao chép một kiểu hiện có. Một trong hai cách, hộp thoại kiểu mới cho phép bạn xác định mọi thông tin về kiểu mới của bạn, bao gồm bộ chọn kiểu, thuộc tính, và biểu định kiểu sẽ chứa kiểu. Khi bạn muốn tạo kiểu tại chỗ mới, bạn cũng có thể sử dụng ngăn tác vụ Thuộc tính CSS . Khi bạn muốn nhanh chóng tạo và áp dụng một kiểu mới trong trang của bạn mà không cần thiết đặt bất kỳ thuộc tính cho kiểu, bạn cũng có thể dùng thanh công cụ kiểu .

Tạo một kiểu bằng cách dùng hộp thoại kiểu mới

  1. Hãy thực hiện một trong những thao tác sau:

    • Để thêm kiểu cho một CSS bên ngoài, hãy mở tệp .css.

    • Để thêm kiểu cho một CSS nội bộ, hãy mở trang Web.

    • Để thêm một kiểu tại chỗ, hãy mở trang Web, sau đó chọn nội dung bạn muốn tạo kiểu.

  2. Hãy thực hiện một trong những thao tác sau:

    • Để tạo kiểu mới    Bấm kiểu mới trong một trong các vị trí: ngăn tác vụ Áp dụng kiểu hoặc ngăn tác vụ Quản lý kiểu , thanh công cụ kiểu hoặc menu định dạng .

    • Để sao chép một kiểu hiện có    Thực hiện một trong các thao tác sau:

      • Trong ngăn tác vụ Áp dụng kiểu , trỏ tới kiểu mà bạn muốn sao chép, hãy bấm vào mũi tên xuống xuất hiện, và sau đó chọn Sao chép kiểu mới.

      • Trong ngăn tác vụ Quản lý kiểu hoặc Thuộc tính CSS ngăn tác vụ, bấm chuột phải vào kiểu mà bạn muốn sao chép, sau đó chọn Sao chép kiểu mới.

  3. Trong hộp thoại kiểu mới , hãy thực hiện các thao tác sau:

Sử dụng

Cách thực hiện

Bộ chọn

  • Để sử dụng một bộ chọn lớp học, hãy nhập một dấu chấm (.) theo sau là tên duy nhất.

  • Để sử dụng một bộ chọn id, hãy nhập một số đăng (#) theo sau là tên duy nhất.

    Ghi chú: Bộ chọn tên Class và id không thể chứa khoảng trắng, trừ khi bạn đang tạo một bộ chọn phức tạp.

  • Để sử dụng một bộ chọn thành phần, hãy nhập tên của một thành phần HTML hoặc bấm hộp thả xuống chọn và chọn một tên thành phần.

  • Để sử dụng một bộ chọn tại chỗ, hãy chọn kiểu tại chỗ.

  • Để tạo một bộ chọn phức tạp, hãy nhập vào bộ chọn.

Xác định trong

Chọn một trong những mục sau đây:

  • Trang hiện tại sẽ thêm kiểu mới CSS nội bộ trong trang Web hiện tại.

  • Biểu định kiểu mới thêm vào kiểu mới vào một CSS ngoài trống mới.

  • Biểu định kiểu hiện có thêm kiểu mới vào một CSS bên ngoài hiện có mà bạn xác định.

Áp dụng kiểu mới vào vùng chọn tài liệu

Áp dụng kiểu cho vùng chọn hiện tại trong trang Web hiện tại.

URL

Nếu bạn đã chọn biểu định kiểu hiện có trong các định nghĩa trong, hãy nhập URL cho tệp .css.

Thể loại

Chọn bất kỳ thao tác sau, và sau đó đặt thuộc tính xuất hiện ở bên phải trong hộp thoại:

Mẹo: Thể loại xuất hiện trong đậm trong danh sách thể loại chứa đặt thuộc tính.

  • Phông thiết đặt thuộc tính phông, bao gồm kích cỡ, độ dày, trang trí và màu.

  • Khối đặt chiều cao dòng, căn chỉnh văn bản, văn bản thụt lề và dãn cách văn bản.

  • Nền đặt nền màu và nền thuộc tính ảnh.

  • Viền thiết đặt viền và thuộc tính của nó.

  • Hộp tập hợp các thuộc tính phần đệm và lề của hộp và các thành phần khối mức.

  • Vị trí đặt kích thước và vị trí của hộp và các thành phần khối mức.

  • Bố trí sẽ đặt khả năng hiển thị, trôi nổi và gói hành vi, hình cắt từ và các thuộc tính khác của bố trí của hộp và các thành phần khối mức.

  • Danh sách sẽ đặt các thuộc tính danh sách thành phần, bao gồm kiểu, vị trí và hình ảnh.

  • Bảng sẽ đặt các thuộc tính của thành phần liên quan đến bảng, bao gồm dãn cách, bố trí, thuộc tính viền.

Ghi chú: Bạn cũng có thể sao chép một kiểu từ một CSS khác. Trong ngăn tác vụ Quản lý kiểu , hãy kéo kiểu từ CSS có chứa kiểu đó vào một trong hai tên CSS bạn muốn sao chép nó vào, hoặc vào một điểm cụ thể trong danh sách kiểu trong đích CSS.

Tạo một kiểu tại chỗ bằng cách sử dụng ngăn tác vụ thuộc tính CSS

  1. Trong dạng xem thiết kế hoặc dạng xem mã trong trang Web của bạn, chọn nội dung bạn muốn thêm một kiểu tại chỗ.

  2. Trong ngăn tác vụ Thuộc tính CSS , bên dưới Áp dụng quy tắc, hãy bấm chuột phải vào bộ chọn bạn muốn áp dụng kiểu tại chỗ, hoặc, nếu "(không áp dụng quy tắc)" sẽ xuất hiện, bấm chuột phải vào bất kỳ chỗ nào bên dưới Áp dụng quy tắc, sau đó bấm Kiểu tại chỗ mới trên menu lối tắt.

  3. Bên dưới Thuộc tính CSS, đặt thuộc tính bạn muốn.

Tạo và áp dụng không xác định kiểu mới

Bạn có thể tạo kiểu và áp dụng chúng cho mục, và sau đó xác định các kiểu sau này. Ví dụ, nếu bạn muốn làm việc với trình thiết kế để tạo diện mạo của trang của bạn, bạn có thể áp dụng kiểu không xác định cho các mục trong trang của bạn, sau đó ngồi với trình thiết kế để xác định các kiểu sau này.

  1. Trong dạng xem thiết kế hoặc dạng xem mã trong trang Web của bạn, hãy chọn mục bạn muốn áp dụng một kiểu.

  2. Tạo và áp dụng một kiểu mới mà không cần xác định bất kỳ thuộc tính, trên thanh công cụ kiểu , trong hộp hoặc lớp học hoặc ID , nhập tên duy nhất cho kiểu mới.

Đầu trang

Áp dụng kiểu

Bạn có thể sử dụng ngăn tác vụ Áp dụng kiểu , ngăn tác vụ Quản lý kiểu hoặc thanh công cụ kiểu để áp dụng kiểu dựa trên lớp hoặc dựa trên id từ của bạn và bên ngoài xếp tầng biểu định kiểu (CSS). Ngăn tác vụ Áp dụng kiểu cho phép bạn áp dụng nhiều kiểu vào một vùng chọn, trong khi Quản lý kiểu ngăn tác vụ và thanh công cụ kiểu bị giới hạn áp dụng một kiểu. Thanh công cụ kiểu cho phép bạn nhanh chóng tên và áp dụng kiểu mới không xác định trong trang của bạn.

Bạn không cần phải áp dụng kiểu dùng một phần tử cho một bộ chọn (thành phần dựa trên kiểu) vì loại kiểu tự động được áp dụng cho thành phần liên kết trong toàn bộ trang Web. Ngăn tác vụ Áp dụng kiểu danh sách kiểu dựa trên thành phần bên dưới Theo ngữ cảnh ghépvà cùng với các tác vụ Quản lý kiểu ngăn Hiển thị một dấu chấm màu lam bên cạnh tên của kiểu. Thanh công cụ kiểu không vào danh sách kiểu dựa trên thành phần.

  1. Trong dạng xem thiết kế hoặc dạng xem trong trang Web của bạn, hãy chọn mục bạn muốn áp dụng một kiểu.

  2. Hãy thực hiện một trong những thao tác sau:

    • Để áp dụng nhiều kiểu hiện có    Trong ngăn tác vụ Áp dụng kiểu , hãy nhấn CTRL trong khi bạn bấm vào từng kiểu mà bạn muốn.

    • Để áp dụng kiểu hiện có duy nhất    Thực hiện một trong các thao tác sau:

      • Trong ngăn tác vụ Áp dụng kiểu , bấm vào class hoặc id kiểu bạn muốn.

      • Trên thanh công cụ kiểu , trong lớp học hoặc ID hộp thả xuống, hãy bấm vào kiểu bạn muốn.

      • Trong ngăn tác vụ Quản lý kiểu , bấm chuột phải vào class hoặc id kiểu bạn muốn, sau đó bấm Áp dụng kiểu trên menu lối tắt.

    • Tạo và áp dụng một kiểu mới mà không cần xác định bất kỳ thuộc tính    Trên thanh công cụ kiểu , trong hộp hoặc lớp học hoặc ID , nhập tên duy nhất cho kiểu mới.

Đầu trang

Ghi chú: Tuyên bố miễn trừ trách nhiệm Dịch Máy: Bài viết này do một hệ thống máy tính dịch mà không có sự can thiệp của con người. Microsoft cung cấp những bản dịch máy này để giúp người dùng không nói tiếng Anh hiểu nội dung về các sản phẩm, dịch vụ và công nghệ của Microsoft. Do bài viết này được dịch máy nên có thể có các lỗi về từ vựng, cú pháp hoặc ngữ pháp.

Phát triển các kỹ năng của bạn
Khám phá nội dung đào tạo
Sở hữu tính năng mới đầu tiên
Tham gia Người dùng nội bộ Office

Thông tin này có hữu ích không?

Cảm ơn phản hồi của bạn!

Cảm ơn bạn đã phản hồi! Để trợ giúp tốt hơn, có lẽ chúng tôi sẽ kết nối bạn với một trong những nhân viên hỗ trợ Office của chúng tôi.

×