Sự khác biệt giữa CSS2 và CSS3

Hiểu những thay đổi lớn đối với CSS3

Sự khác biệt lớn nhất giữa CSS2 và CSS3 là CSS3 đã được chia thành các phần khác nhau, được gọi là các mô-đun. Mỗi mô-đun đang thực hiện theo cách của mình thông qua W3C trong các giai đoạn khác nhau của quy trình đề xuất. Quá trình này đã làm cho nó dễ dàng hơn nhiều cho các phần khác nhau của CSS3 được chấp nhận và thực hiện trong trình duyệt bởi các nhà sản xuất khác nhau.

Nếu bạn so sánh quy trình này với những gì đã xảy ra với CSS2, nơi mọi thứ được gửi dưới dạng một tài liệu duy nhất với tất cả thông tin Cascading Style Sheets bên trong nó, bạn bắt đầu thấy những ưu điểm của việc chia nhỏ đề xuất thành từng phần nhỏ hơn. Vì mỗi mô-đun đang được làm việc riêng lẻ, chúng tôi có một phạm vi hỗ trợ trình duyệt rộng hơn cho các mô-đun CSS3.

Như với bất kỳ đặc tả mới và thay đổi nào, hãy đảm bảo kiểm tra kỹ các trang CSS3 của bạn trong nhiều trình duyệt và hệ điều hành nhất có thể. Hãy nhớ rằng mục tiêu không phải là tạo các trang web trông giống hệt nhau trong mọi trình duyệt, nhưng để đảm bảo rằng mọi kiểu bạn sử dụng, bao gồm kiểu CSS3, trông tuyệt vời trong các trình duyệt hỗ trợ chúng và chúng trở lại duyên dáng cho các trình duyệt cũ hơn đừng.

Bộ chọn CSS3 mới

CSS3 cung cấp một loạt các cách mới để bạn có thể viết các quy tắc CSS với các bộ chọn CSS mới, cũng như một bộ kết hợp mới và một số phần tử giả mới.

Ba bộ chọn thuộc tính mới:

• Thuộc tính bắt đầu khớp chính xác phần tử [foo ^ = "bar"] Phần tử có thuộc tính được gọi là foo bắt đầu bằng "bar" ví dụ
• Thuộc tính kết thúc khớp chính xác với phần tử [foo $ = "bar"] Phần tử có thuộc tính được gọi là foo kết thúc bằng "bar" ví dụ
• Thuộc tính chứa phần tử kết hợp [foo * = "bar"] Phần tử có thuộc tính được gọi là foo chứa chuỗi "thanh", ví dụ:

16 lớp giả mới:

• :nguồn gốc
  • Phần tử gốc của tài liệu. Trong HTML, điều này luôn xảy ra.
• : nth-child (n)
  • Sử dụng điều này để khớp chính xác các phần tử con hoặc sử dụng các biến để nhận các kết quả trùng khớp xen kẽ.
• : nth-cuối-con (n)
  • Kết hợp các phần tử con chính xác đếm từ phần tử con cuối cùng.
• : nth-of-type (n)
  • Phù hợp với các phần tử anh chị em có cùng tên trước nó trong cây tài liệu.
• : nth-last-of-type (n)
  • Phù hợp với các yếu tố anh chị em với cùng một tên đếm từ phía dưới.
• :con cuối cùng
  • Phù hợp với phần tử con cuối cùng của phụ huynh.
• : loại đầu tiên
  • Phù hợp với phần tử anh chị em đầu tiên của loại đó.
• : cuối cùng của loại
  • Phù hợp với phần tử anh chị em cuối cùng của loại đó.
• :con một
  • Phù hợp với yếu tố đó là con duy nhất của cha mẹ của nó.
• : chỉ loại
  • Phù hợp với phần tử là phần tử duy nhất thuộc loại của nó.
• :trống
  • Phù hợp với phần tử không có con (bao gồm cả các nút văn bản).
• :Mục tiêu
  • Khớp một phần tử là mục tiêu của URI giới thiệu.
• : đã bật
  • Khớp phần tử khi được bật.
• :tàn tật
  • Khớp phần tử khi nó bị tắt.
• :đã kiểm tra
  • Khớp phần tử khi được chọn (nút radio hoặc hộp kiểm).

• :không S)
  • Khớp khi phần tử không khớp với bộ chọn đơn giản.

Một bộ phối hợp mới:

• elementA ~ elementB
  • Phù hợp khi elementB theo sau đâu đó sau elementA, không nhất thiết phải ngay lập tức.

Thuộc tính mới

CSS3 cũng giới thiệu một số thuộc tính CSS mới. Nhiều người trong số các thuộc tính này là tạo ra các kiểu trực quan có khả năng kết hợp nhiều hơn với một chương trình đồ họa như Photoshop. Một số trong số này, như bán kính đường viền hoặc hộp đổ bóng, đã có mặt kể từ khi giới thiệu nếu CSS3. Những người khác, như flexbox hoặc thậm chí CSS Grid là các kiểu mới hơn mà vẫn thường được coi là bổ sung CSS3.

Trong CSS3, mô hình hộp đã không thay đổi. Nhưng có một loạt các thuộc tính phong cách mới có thể giúp bạn tạo kiểu cho nền và đường viền của các hộp của bạn.

Nhiều nền tôi mages

Sử dụng hình nền, hình nền và kiểu lặp lại nền bạn có thể chỉ định nhiều hình nền được xếp chồng lên nhau trong hộp. Hình ảnh đầu tiên là lớp gần nhất với người dùng, với những hình ảnh sau được vẽ phía sau. Nếu có màu nền, nó được vẽ bên dưới tất cả các lớp hình ảnh.

Thuộc tính kiểu nền mới

Ngoài ra còn có một số thuộc tính nền mới trong CSS3.

• background-clip
  • Thuộc tính này xác định cách cắt bớt ảnh nền. Mặc định là hộp viền, nhưng nó có thể được thay đổi thành hộp đệm hoặc hộp nội dung.
• nguồn gốc
  • Thuộc tính này xác định xem nền phải là vị trí trong hộp đệm, hộp đường viền hay hộp nội dung.
• background-size
  • Thuộc tính này cho phép bạn chỉ ra kích thước của hình nền. Nó cho phép bạn kéo dài các hình ảnh nhỏ hơn để vừa với trang.

Thay đổi đối với Thuộc tính Kiểu nền Hiện tại

Ngoài ra còn có một vài thay đổi đối với thuộc tính nền hiện có:

• Bối cảnh Lặp lại
  • Có hai giá trị mới cho thuộc tính này: khoảng trắng và tròn. Không gian không gian hình ảnh lát gạch đồng đều trong hộp mà không bị cắt bớt. Vòng rescales hình nền để nó sẽ gạch toàn bộ số lần trong hộp.
• background-attachment
  • Giá trị mới "cục bộ" được thêm vào để nền sẽ cuộn với nội dung của phần tử khi phần tử đó có thanh cuộn.
• lý lịch
  • Thuộc tính viết tắt nền cho biết thêm về kích thước và thuộc tính gốc.

Thuộc tính đường viền CSS3

Trong đường viền CSS3 có thể là các kiểu mà chúng ta thường sử dụng (solid, double, dashed, etc.) hoặc chúng có thể là một hình ảnh. Thêm vào đó, CSS3 mang đến khả năng tạo các góc tròn. Hình ảnh đường viền rất thú vị vì bạn tạo một hình ảnh của tất cả bốn đường viền và sau đó cho CSS biết cách áp dụng hình ảnh đó vào đường viền của bạn.

Thuộc tính kiểu đường viền mới

Có một số thuộc tính border mới trong CSS3:

• bán kính biên giới
  • border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , đường viền-trên-trái-bán kính
  • Các thuộc tính này cho phép bạn tạo các góc tròn trên đường viền của bạn.
• border-image-source
  • Chỉ định tệp nguồn hình ảnh được sử dụng thay cho các kiểu đường viền đã được xác định.
• border-image-slice
  • Đại diện cho các khoảng cách bên trong từ các cạnh hình ảnh biên giới
• chiều rộng hình ảnh đường viền
  • Xác định giá trị của chiều rộng cho hình ảnh đường viền của bạn.
• border-image-outset
  • Chỉ định số tiền mà khu vực hình ảnh biên giới mở rộng ra ngoài hộp biên giới.
• viền hình ảnh
  • Xác định cách các cạnh và phần giữa của hình ảnh đường viền phải được lát hoặc chia tỷ lệ.
• border-image
  • Thuộc tính viết tắt cho tất cả các thuộc tính hình ảnh đường viền.

Các thuộc tính CSS3 bổ sung liên quan đến đường viền và nền

Khi một hộp bị hỏng khi ngắt trang, ngắt cột để ngắt dòng (đối với phần tử nội tuyến) thuộc tính box-decoration-break xác định cách hộp mới được bao bọc bằng đường viền và đệm. Các hình nền có thể được chia ra giữa nhiều hộp bị hỏng sử dụng thuộc tính này.

Ngoài ra còn có một thuộc tính hộp bóng có thể được sử dụng để thêm các phần tử đổ bóng vào hộp.

Với CSS3, bây giờ bạn có thể dễ dàng thiết lập một trang web với nhiều cột không có bảng hoặc cấu trúc thẻ div phức tạp. Bạn chỉ cần nói cho trình duyệt biết có bao nhiêu cột mà phần tử cơ thể nên có và độ rộng của chúng. Ngoài ra, bạn có thể thêm đường viền (quy tắc), màu nền trải dài theo chiều cao của cột và văn bản của bạn sẽ tự động chảy qua tất cả các cột.

Cột CSS3 - Xác định số và chiều rộng của các cột

Có ba thuộc tính mới cho phép bạn xác định số lượng và chiều rộng của các cột:

• chiều rộng cột
  • Xác định chiều rộng cột của bạn nên được. Sau đó trình duyệt sẽ chuyển văn bản để lấp đầy không gian bằng các cột rộng.
• số cột
  • Xác định số cột trên trang. Sau đó trình duyệt sẽ tạo các cột đủ rộng để vừa với không gian, nhưng chỉ có số bạn chỉ định.
• cột
  • Thuộc tính viết tắt nơi bạn có thể xác định chiều rộng hoặc số (hoặc cả hai, nhưng điều đó hiếm khi có ý nghĩa).

Các lỗ hổng và quy tắc cột CSS3

Khoảng trống và quy tắc được đặt giữa các cột trong cùng một kịch bản nhiều cột. Khoảng trống sẽ đẩy các cột ra, nhưng các quy tắc không chiếm bất kỳ không gian nào. Nếu một quy tắc cột rộng hơn khoảng trống của nó, nó sẽ chồng chéo các cột liền kề. có năm thuộc tính mới cho các quy tắc cột và khoảng trống:

• khoảng trống cột
  • Xác định chiều rộng của khoảng trống giữa các cột.
• màu quy tắc cột
  • Xác định màu của quy tắc.
• kiểu quy tắc cột
  • Xác định kiểu của quy tắc (rắn, chấm, đôi, v.v.).
• chiều rộng quy tắc cột
  • Xác định chiều rộng của quy tắc.
• quy tắc cột
  • Một thuộc tính viết tắt xác định tất cả ba thuộc tính quy tắc cột cùng một lúc.

CSS3 cột Breaks, cột Spanning, và điền cột

Ngắt cột sử dụng cùng các tùy chọn CSS2 được sử dụng để xác định các ngắt trong nội dung được phân trang, nhưng với ba thuộc tính mới: ngắt trước , ngắt sau và ngắt bên trong .

Giống như với các bảng, bạn có thể thiết lập các phần tử cho các cột span với thuộc tính span-column. Điều này cho phép bạn tạo tiêu đề trải dài nhiều cột giống như một tờ báo.

Cột điền sẽ quyết định lượng nội dung sẽ nằm trong mỗi cột. Cột cân bằng cố gắng đặt cùng một lượng nội dung trong mỗi cột trong khi tự động chỉ lưu nội dung vào cho đến khi cột đầy và sau đó chuyển sang cột tiếp theo.

Các tính năng khác trong CSS3 Không được bao gồm trong CSS2

Có rất nhiều tính năng bổ sung trong CSS3 không tồn tại trong CSS2, bao gồm:

• Mô-đun bố cục mẫu CSS và mô-đun định vị lưới CSS3 : Tạo lưới bằng CSS.
• Mô-đun văn bản CSS3: Văn bản phác thảo và thậm chí tạo bóng thả với CSS.
• Mô-đun màu CSS3 : Hiện tại với độ mờ đục.
• Thay đổi đối với mô hình hộp : Bao gồm thuộc tính vùng chọn hoạt động giống như thẻ IE.
• Mô-đun giao diện người dùng CSS3 : Cung cấp cho bạn các con trỏ mới, các phản hồi đối với các hành động, các trường bắt buộc và thậm chí thay đổi kích thước các phần tử .
• Truy vấn phương tiện : Truy vấn phương tiện cho phép bạn linh hoạt hơn khi xác định cách sử dụng biểu định kiểu. Ví dụ: bạn có thể xác định một biểu định kiểu chỉ dành cho các thiết bị cầm tay có chế độ xem lớn hơn 20em.
• Mô-đun Ruby3 của Ruby : Cung cấp hỗ trợ cho các ngôn ngữ sử dụng ruby ​​văn bản để chú thích tài liệu.
• CSS3 Paged Media module : Để được hỗ trợ nhiều hơn cho phương tiện truyền thông paged (giấy, trong suốt, vv).
• Nội dung được tạo : L chạy đầu trang và chân trang, chú thích và nội dung khác được tạo theo chương trình, đặc biệt là đối với phương tiện được phân trang.
• Mô-đun giọng nói CSS3 : Thay đổi đối với CSS âm thanh.