Bạn đang xem : danh sách định nghĩa kiểu css

CSS:

Định dạng Danh sách Định nghĩa

Với sự trở lại của ‘đánh dấu ngữ nghĩa’, mọi người lại một lần nữa tìm kiếm
thẻ phù hợp sẽ được sử dụng cho các loại thông tin khác nhau là gì.
Ví dụ: danh sách không có thứ tự để điều hướng và các bảng chỉ nơi
hoàn toàn cần thiết. Một tùy chọn thường bị bỏ qua để đánh dấu
bảng chú giải thuật ngữ và danh sách định nghĩa là thuộc tính dl .

Danh sách Định nghĩa (DL)

Chúng tôi biết đầu ra DL cơ bản trông như thế nào – không hấp dẫn lắm –
đó là lý do tại sao chúng hiếm khi được các quản trị viên web sử dụng. Ở đây bạn có thể thấy một
danh sách chưa được định dạng với một số nội dung mẫu:

mục đầu tiên
định nghĩa cho mục đầu tiên trong danh sách
mục thứ hai
định nghĩa cho mục thứ hai trong danh sách
mở rộng trên nhiều dòng
mục thứ ba
định nghĩa cho mục thứ ba trong danh sách

Có hai tùy chọn để thêm một số định dạng. Đầu tiên là
bắt đầu thêm các thẻ HTML như & lt; b & gt; & lt; / b & gt; cho ‘thuật ngữ dữ liệu’
( dt ) và có thể kích thước phông chữ nhỏ hơn hoặc in nghiêng cho ‘data
định nghĩa ‘( đ ). Nhưng chúng tôi có thể làm tất cả những điều đó và tốt hơn nhiều
sử dụng CSS.

Ví dụ 1

Hãy bắt đầu với một số kiểu CSS đơn giản:

dt {
font-weight: bold;
text-decoration: gạch chân;
}
đ {
lề: 0;
đệm: 0 0 0,5em 0;
}

Danh sách đơn giản của chúng tôi bây giờ trông hơi khác một chút. Việc thụt lề đã được
đã loại bỏ, một số đệm dọc được chèn và các điều khoản dữ liệu đã được
in đậm và gạch chân:

mục đầu tiên
định nghĩa cho mục đầu tiên trong danh sách
mục thứ hai
định nghĩa cho mục thứ hai trong danh sách
mở rộng trên nhiều dòng
mục thứ ba
định nghĩa cho mục thứ ba trong danh sách

Đó là một bước đi đúng hướng, nhưng có lẽ vẫn chưa đủ
để thuyết phục mọi người về giá trị của phương pháp này. Sau
ví dụ sẽ thuyết phục hơn.

Ví dụ 2

Trong ví dụ đầu tiên, chúng tôi chỉ đang nghiên cứu các cạnh của những gì
có thể bằng cách sử dụng CSS. Ví dụ này sử dụng mã nâng cao hơn một chút để
nâng cao hơn nữa sự xuất hiện của danh sách:

dl {
viền: 3px đôi #ccc;
đệm lót: 0,5em;
}
dt {
float: trái;
rõ ràng: trái;
chiều rộng: 100px;
text-align: phải;
font-weight: bold;
màu xanh lá cây;
}
dt :: sau {
Nội dung: ":";
}
đ {
lề: 0 0 0 110px;
đệm: 0 0 0,5em 0;
}

Danh sách bây giờ xuất hiện như thể các mục được đặt trong một bảng:

mục đầu tiên
định nghĩa cho mục đầu tiên trong danh sách
mục thứ hai
định nghĩa cho mục thứ hai trong danh sách
mở rộng trên nhiều dòng
mục thứ ba
định nghĩa cho mục thứ ba trong danh sách

Ngay cả quản trị viên web đa nghi nhất bây giờ cũng nên bắt đầu suy nghĩ lại
vị trí của họ.

Ưu điểm của định dạng CSS so với HTML

Vậy tại sao chúng tôi lại làm điều này? Có một số lý do:

tách nội dung khỏi định dạng
đây là ‘chén thánh’ cho các lập trình viên css. Như minh họa bởi
các trang web như css
Zen Garden
, tách biệt có nghĩa là giao diện của một trang web có thể
được thay đổi đáng kể mà không có thay đổi đối với mã HTML cơ bản.
được tối ưu hóa cho trình thu thập thông tin công cụ tìm kiếm
trả tiền để trở nên thân thiện với nhện vì chúng là cách duy nhất để có được
trang web của bạn xuất hiện trong các trang kết quả của công cụ tìm kiếm (SERPs). Nhiều hơn
các trình thu thập thông tin nâng cao hiện đang bắt đầu chú ý đến nội dung cách thức
được đánh dấu và cách thông tin đó có thể được kết hợp vào
thuật toán tìm kiếm.
tiết kiệm băng thông
bạn cũng giảm số lượng HTML cần thiết mỗi khi một danh sách
đã trình bày. Nếu CSS được lấy từ một tệp bên ngoài thì nó chỉ có
để tải xuống một lần và trình duyệt có thể sử dụng phiên bản đã lưu trong bộ nhớ cache cho lần sau
các trang.

Có thể mất một khoảng thời gian để ‘dọn dẹp’ mã HTML hiện tại của bạn và
chuyển đổi danh sách và các phần tử khác sang CSS nhưng những ưu điểm hiện tại và
đang diễn ra khiến nó trở nên đáng giá.

Sử dụng Flexbox

Đây là hai ví dụ về bố cục khác, lần này sử dụng Bố cục hộp linh hoạt CSS mang lại cho chúng tôi một cái gì đó
giống như BẢNG chỉ linh hoạt hơn:

mục đầu tiên
định nghĩa cho mục đầu tiên trong danh sách
mục thứ hai
định nghĩa cho mục thứ hai trong danh sách
mở rộng trên nhiều dòng
mục thứ ba
định nghĩa cho mục thứ ba trong danh sách

Kiểu CSS:

& lt; style type = "text / css" & gt;

dl {
hiển thị: flex;
flex-flow: quấn hàng;
viền: solid # 333;
border-width: 1px 1px 0 0;
}
dt {
cơ sở linh hoạt: 20%;
đệm: 2px 4px;
nền: # 333;
text-align: phải;
màu: #fff;
}
đ {
cơ sở linh hoạt: 70%;
flex-mọc: 1;
lề: 0;
đệm: 2px 4px;
border-bottom: 1px solid # 333;
}

& lt; / style & gt;

Và ở đây chúng tôi có bố cục ngang. Điều này không quá gọn gàng vì chúng tôi phải xác định chiều cao cho DL và số lượng mục có thể được hiển thị dưới dạng cột bị giới hạn trừ khi bạn muốn chúng cuộn theo chiều ngang:

mục đầu tiên
định nghĩa cho mục đầu tiên trong danh sách
mục thứ hai
định nghĩa cho mục thứ hai trong danh sách
mở rộng trên nhiều dòng
mục thứ ba
định nghĩa cho mục thứ ba trong danh sách

Kiểu CSS:

& lt; style type = "text / css" & gt;

dl {
hiển thị: flex;
flex-flow: quấn cột;
chiều cao tối đa: 6em;
viền: 1px solid # 333;
}
dt {
đệm: 2px 4px;
nền: # 333;
màu: #fff;
}
đ {
lề: 0;
đệm: 4px;
chiều cao tối thiểu: 3em;
}

& lt; / style & gt;

Trong mọi trường hợp, đánh dấu HTML đều giống nhau.

& lt; CSS

Gửi tin nhắn tới The Art of Web:

Tên của bạn *

Địa chỉ Email *

chỉ được sử dụng để chúng tôi trả lời và hiển thị gravatar của bạn.

Trang web

Tin nhắn *

CAPTCHA * :
& lt; – sao chép các chữ số từ hình ảnh vào hộp này

nhấn & lt; Esc & gt; hoặc nhấp vào bên ngoài hộp này để đóng


Xem thêm những thông tin liên quan đến chủ đề danh sách định nghĩa kiểu css

Bài 5: Phân biệt class và id trong html và css

  • Tác giả: Gola – Góc làm web
  • Ngày đăng: 2018-01-31
  • Đánh giá: 4 ⭐ ( 7655 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: ⭐️ Bài 5: Phân biệt class và id trong html và css

    ⭐️ Chúng ta sẽ tìm hiểu cách phân biệt class và id cũng như công dụng của chúng trong việc kiểm soát và đinh danh các thẻ html. Giúp cho việc code html và css dễ kiểm tra, chỉnh sửa hơn.

    ⭐️ Chi tiết bài viết: https://goclamweb.com/bai-5-phan-biet-class-va-id-trong-html-va-css/

TÌM HIỂU VỀ CSS BASIC

  • Tác giả: www.thuvientailieu.vn
  • Đánh giá: 3 ⭐ ( 5264 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: TÌM HIỂU VỀ CSS BASIC, tim hieu ve css basic

Báo cáo Về các thuộc tính của CSS

  • Tác giả: timtailieu.vn
  • Đánh giá: 3 ⭐ ( 5822 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Báo cáo Về các thuộc tính của CSS – I. Tổng quan về CSS.
    1. Giới thiệu:
    CSS là mẫu quy định cách thức thể hiện các thẻ HTML
    CSS được đưa vào HTML…

Danh sách trong CSS

  • Tác giả: comdy.vn
  • Đánh giá: 5 ⭐ ( 7753 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn này, bạn sẽ học cách định dạng danh sách HTML bằng CSS.

Định kiểu HTML với CSS

  • Tác giả: timoday.edu.vn
  • Đánh giá: 3 ⭐ ( 8550 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: CSS sẽ giúp bạn xây dựng các trang web có giao diện đẹp, đồng nhất và tương thích trên nhiều trình duyệ

Hướng dẫn định nghĩa và áp dụng CSS cho người bắt đầu

  • Tác giả: niithanoi.edu.vn
  • Đánh giá: 5 ⭐ ( 8266 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: CSS là một ngôn ngữ cho phép định nghĩa các bảng kiểu (style sheet) để cung cấp các quy tắc nhằm định nghĩa nên style cho các phần tử của trang. Bài này tôi sẽ hướng dẫn cách định nghĩa và sử dụng CSS cho người mới bắt đầu.

Tạo kiểu, Viết CSS cho List

  • Tác giả: laptrinhvienphp.com
  • Đánh giá: 3 ⭐ ( 6080 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: WordPress

XEM THÊM  Kiểm tra một trang WooCommerce - đơn đặt hàng một trang woocommerce

By DEVTEAM