Trình tự Css của ứng dụng quy tắc. Ưu tiên kiểu dáng trong CSS

Chương này giải thích chi tiết tại sao bảng xếp tầng các kiểu (Cascading Style Sheets, CSS) được gọi là xếp tầng. Trước tiên, hãy nhớ cách bạn có thể thêm kiểu vào một trang web:

• kết nối một bảng định kiểu bên ngoài;
• thêm biểu định kiểu nội bộ vào tài liệu HTML thông qua thẻ. Kết quả là màu sắc của thẻ

  Nó sẽ có màu đỏ.

  Đây là một cách để kiểm soát tầm quan trọng của phong cách. Một cách khác để tăng mức độ ưu tiên là tăng trọng lượng của bộ chọn một cách cụ thể, chẳng hạn bằng cách thêm ID hoặc lớp vào nó.

  Thông báo!quan trọng

  Nếu bạn gặp phải khẩn cấp và bạn cần tăng tầm quan trọng của một thuộc tính, bạn có thể thêm một khai báo!important vào nó:

  P (màu: đỏ !quan trọng;) p (màu: xanh lá cây;)

  Ngoài ra!quan trọng sẽ ghi đè các kiểu nội tuyến. Nhiều nhà phát triển không khuyến khích việc sử dụng!important quá thường xuyên. Hầu hết, thông báo này Theo thông lệ, chỉ sử dụng nó khi xung đột về phong cách không thể khắc phục được bằng các biện pháp khác.

  Đặt lại kiểu bằng reset.css

  Trong chương trước, chúng tôi đã đề cập rằng mỗi trình duyệt đều có các kiểu tài liệu HTML tích hợp riêng được thiết kế để cải thiện khả năng đọc. Có thể bạn đã từng thấy một trang web trần trụi trông như thế nào trong trình duyệt: các liên kết được gạch chân màu xanh lam, phông chữ màu đen, tiêu đề in đậm, v.v.

  Mỗi trình duyệt có sự khác biệt riêng về kiểu dáng tích hợp: ví dụ: IE không có thụt lề từ cạnh trên của cửa sổ, nhưng Firefox thì có. Có rất nhiều sự khác biệt như vậy. Để chúng không ảnh hưởng đến khả năng tương thích giữa các trình duyệt khi viết phong cách riêng CSS, bạn có thể sử dụng phương pháp đặt lại kiểu nội tuyến.

  Công cụ đặt lại kiểu về cơ bản là cùng một bảng CSS mô tả các quy tắc đặt lại kiểu tích hợp của trình duyệt bằng cách đặt giá trị cơ bản của cải. Bảng này được gọi là reset.css và được sử dụng để bạn có thể bắt đầu tạo kiểu từ đầu. Đây là một ví dụ bảng tiêu chuẩn cài lại:

  Html, nội dung, div, span, applet, đối tượng, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, từ viết tắt, địa chỉ, lớn, trích dẫn, mã, del, dfn, em, img, ins, kbd, q, s, samp, nhỏ, đình công, mạnh mẽ, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, hình thức, nhãn, chú giải, bàn, Chú thích, tbody, tfoot, thead, tr, th, td, bài báo, sang một bên, Tranh sơn dầu, chi tiết, Nhúng, nhân vật, Figcaption, Chân trang, Tiêu đề, hgroup, menu, Nav, Đầu ra, Ruby, phần, tóm tắt, thời gian, dấu, âm thanh, video ( lề: 0; đệm: 0; viền: 0; cỡ chữ: 100%; phông chữ: kế thừa; căn chỉnh dọc: đường cơ sở; ) /* Đặt lại vai trò hiển thị HTML5 cho các trình duyệt cũ hơn */ bài viết, sang một bên, chi tiết, figcaption, hình, chân trang, tiêu đề, hgroup, menu, điều hướng, phần ( display: block; ) body ( line-height: 1; ) ol, ul ( list-style: none; ) blockquote, q ( dấu ngoặc kép: không có; ) blockquote:trước, blockquote:after, q:trước, q:after ( nội dung: ""; nội dung: không có; ) bảng ( border-collapse: thu gọn; khoảng cách đường viền: 0; )

  Bất kỳ chuyên gia nào trong lĩnh vực của mình đều phải thông thạo thuật ngữ. Nếu bạn đang tham gia vào việc bố cục, bạn có thể trả lời câu hỏi ở tiêu đề bài viết mà không ngần ngại không?

  Có lẽ bây giờ bạn sẽ khám phá được điều gì đó mới mẻ. Hãy thực hiện một bước quyết định hướng tới sự chuyên nghiệp :)

  Di sản

  Hãy bắt đầu với khái niệm dễ hiểu nhất, CSS. Bản chất của nó là các kiểu được gán cho một phần tử nhất định được kế thừa tất cả phần tử con (phần tử lồng nhau) trừ khi chúng được ghi đè rõ ràng. Ví dụ: kích thước phông chữ và màu sắc chỉ cần được áp dụng cho phần mô tả nội dung để tất cả các phần tử bên trong đều có thuộc tính giống nhau. Tuy nhiên, đối với các tiêu đề h1-h6, kích thước phông chữ sẽ không được chỉ định vì trình duyệt có biểu định kiểu mặc định riêng cho chúng và các kiểu kế thừa có mức ưu tiên thấp nhất. Tình trạng tương tự với màu sắc của các liên kết.

  Vì vậy, sự kế thừa cho phép bạn giảm bớt bảng CSS. Nhưng đồng thời, nếu có nhiều kiểu thì theo dõi xem kiểu nào phần tử cha thiết lập một số thuộc tính, nó trở nên khá phức tạp.

  Xếp tầng

  Quy tắc xếp tầng cho phép bạn giải quyết các tình huống khi một số kiểu được chỉ định cho một phần tử. Xếp tầng dựa trên việc chỉ định mức độ ưu tiên nhất định cho từng quy tắc. Các biểu định kiểu của tác giả có mức độ ưu tiên cao nhất, các biểu định kiểu tùy chỉnh có mức ưu tiên thấp nhất và các biểu định kiểu mặc định của trình duyệt có mức ưu tiên thấp nhất. Người dùng có khả năng ghi đè quy tắc của tác giả bằng cách thêm cờ!important vào quy tắc của mình.

  Các quy tắc xếp tầng xác định các mức độ ưu tiên sau:

  1. phong cách tùy chỉnh được đánh dấu! quan trọng
  2. phong cách của tác giả được đánh dấu!quan trọng
  3. phong cách của tác giả
  4. phong cách tùy chỉnh
  5. kiểu mặc định

  Sau khi xếp tầng, các quy tắc được sắp xếp dựa trên tính đặc hiệu của bộ chọn.

  Tính đặc hiệu

  Tính đặc hiệu là một con số trong hệ thống có cơ số cao vô hạn, phản ánh mức độ ưu tiên của một quy tắc. Nó được tính toán dựa trên tính đặc hiệu mỗi bộ chọn có trong quy tắc CSS.

  Độ đặc hiệu của selector được chia thành 4 nhóm - a b c d:

  • nếu kiểu là nội tuyến, tức là được định nghĩa là style="", thì a=1
  • giá trị của b bằng số lượng bộ chọn id
  • giá trị của c bằng số lượng lớp, lớp giả và bộ chọn thuộc tính
  • giá trị của d bằng với số lượng bộ chọn loại

  Ví dụ để tính độ đặc hiệu:

  Bộ chọn	Tính đặc hiệu	Tính đặc thù trong hệ thống với cơ sở 10
  Phong cách=""	1,0,0,0	1000
  #wrapper #content()	0,2,0,0	200
  #content.datePosted()	0,1,1,0	110
  div#nội dung()	0,1,0,1	101
  #nội dung()	0,1,0,0	100
  p.comment.datePosted()	0,0,2,1	21
  p.bình luận()	0,0,1,1	11
  div p()	0,0,0,2	2
  P()	0,0,0,1	1

  Cơ số cao vô hạn của hệ thống số là hệ quả của việc người ta không biết trước các số a, b, c, d sẽ lớn đến mức nào. Nếu chúng nhỏ hơn 10 thì sử dụng SS thập phân sẽ thuận tiện hơn.

  Gần hai giờ sáng, không ít câu hỏi muôn thuở ập đến với những suy nghĩ về cái vĩnh hằng - “ý nghĩa của cuộc sống là gì?”, “Tại sao một người lại ngủ?” hoặc "Tại sao #%^$ này không hoạt động?" và càng gần sáng, câu hỏi cuối cùng này càng bắt đầu khiến tôi lo lắng.

  Dưới đây tôi sẽ nói về lý do tại sao các bộ chọn css chết tiệt đôi khi không hoạt động theo cách chúng ta cho là đúng và về cách chúng thực sự nên hoạt động.

  Chương một - đi thẳng nhé!

  Bộ chọn được tính trọng số để xác định kiểu nào sẽ được áp dụng khi nhiều bộ chọn bằng cách nào đó trỏ đến cùng một phần tử và cố gắng thay đổi cùng một kiểu. Ai nặng hơn thì có phong cách, và quy luật cân đơn giản hơn hàng nghìn lần so với những quy luật có vẻ thuần túy thực nghiệm.

  Vì vậy, hãy cân nó - trước tiên hãy tưởng tượng một cặp hàng 8 số:

  0,1,0,0,0,0,0,0
  1,0,0,0,0,0,0,0

  Làm quen - đây là cách một số hai bộ chọn nhìn vào các con số, để không ai đoán được gì, tôi sẽ gọi chúng theo cách thông thường là “trên” và “dưới”

  Để biết cái nào nặng hơn, bạn cần làm những hành động sau và đừng nhầm lẫn bất cứ điều gì:

  1. Chúng tôi nhìn vào những con số ngoài cùng bên trái
  2. Hãy chọn hầu hết trong số họ. - bộ chọn này sẽ nặng nhất
  3. Nếu các số giống nhau, hãy di chuyển một số sang phải và lặp lại hướng dẫn từ bước 2.
  4. Nếu tất cả các số đều giống nhau thì các kiểu từ bộ chọn được khai báo lần cuối sẽ được áp dụng

  Bí mật tồi tệ nhất

  Nếu bạn đọc được điều này, sự bình yên trong tâm hồn sẽ mãi mãi rời xa bạn, nhưng ít nhất bạn sẽ có thể ngủ vào ban đêm.

  Tiết lộ bí mật tồi tệ nhất, tôi sẽ cho bạn biết làm thế nào để thực sự biến một bộ chọn thông thường thành những con số rõ ràng và đẹp mắt như vậy? Mọi thứ luôn rất đơn giản:

  1. ThẻĐối với mỗi thẻ trong bộ chọn, bạn có thể thêm một thẻ vào số ngoài cùng bên phải:

     A là 0,0,0,0,0,0,0,1 div a là 0,0,0,0,0,0,0,2

  2. Các lớp học, đối với mỗi lớp hoặc lớp giả trong bộ chọn, bạn có thể thêm một vào số thứ hai từ bên phải

     Head .logo là 0,0,0,0,0,0,2,0 .logo.big là 0,0,0,0,0,0,2,0 div:con đầu lòng là 0,0, 0 ,0,0,0,1,1 .logog > .big – và đây cũng là 0,0,0,0,0,0,2,0
     Vâng, bạn đã hiểu mọi thứ một cách chính xác. Bộ chọn CSS không quan tâm đến tất cả những thứ ưa thích của bạn như dấu cách hoặc “>”.

  3. Cho mọi NHẬN DẠNG trong bộ chọn, thêm một vào số thứ ba từ bên phải.

     #đầu là 0,0,0,0,0,1,0,0 #đầu #logo cũng là 0,0,0,0,0,2,0,0

  Tôi nghĩ bạn đã hiểu rồi, bây giờ bạn có thể làm một bài kiểm tra nhỏ để kiểm tra:

  Đố

  
  Câu hỏi: Nền của đoạn văn sẽ có màu gì?
  Trả lời:Đúng vậy, màu đỏ, bởi vì bộ chọn không quan tâm đến những gì bạn nghĩ ở đó và nó không quan tâm đến khoảng cách giữa các thẻ. Và vì trọng lượng của các thẻ bằng nhau nên thẻ cuối cùng sẽ được áp dụng.
  ?
  
  Câu hỏi: Nền của div của chúng ta sẽ có màu gì?
  Trả lời:Đúng rồi, màu đỏ, vì khi đo sâu trọng lượng, bạn vẫn đặt khoảng cách giữa các lớp, dấu lớn hơn hoặc viết sát nhau. Trọng số của tất cả các bộ chọn này là như nhau, có nghĩa là bộ chọn cuối cùng sẽ được sử dụng.
  ?
  
  Câu hỏi: Tất cả đều giống nhau.
  Trả lời: Và câu trả lời cho một sự thay đổi là khác: diva của chúng ta sẽ có màu xám. Bởi vì, như tôi đã đề cập ở trên, bộ chọn hoàn toàn không quan tâm đến ý của bạn ở đó. Bộ chọn đầu tiên có trọng số cao hơn và không ai quan tâm rằng đây có thể không phải là hành vi mà bạn mong đợi.

  Chúng tôi tiếp tục tiết lộ bí mật

  Chúng tôi vẫn còn rất nhiều con số và có lẽ chúng tôi thực sự muốn tìm hiểu ý nghĩa của chúng - chúng tôi tiếp tục tiết lộ bí mật.
  1. Bộ chọn * hoàn toàn không trọng lượng, nghĩa là hoàn toàn.
  2. Bộ chọn thuộc tínhđây là lớp giả phổ biến nhất và nó có trọng lượng tương đương với các lớp thông thường
  3. Bất kỳ kiểu nội tuyến nàođược viết bằng thuộc tính style=”” của một phần tử sẽ tự động được ưu tiên 0,0,0,0,1,0,0,0 , điều này ngay lập tức khiến anh ấy trở nên rất ngầu.
  4. Và bốn chữ số tiếp theo đều là bạn cũ của chúng ta chỉ với thuộc tính !quan trọng

     Div ( Background-color: grey !important; ) Có trọng số khi xác định thuộc tính Background-color - 0,0,0,1,0,0,0,0 .header ( Background-color: grey !important; ) 0, 0 ,1,0,0,0,0,0

  Tất cả chúng ta đều yêu thích các câu đố

  ?