Quy tắc chọn CSS. Giá trị thuộc tính bắt đầu bằng văn bản cụ thể. Bộ chọn lớp và id

Igor. Cập nhật: ngày 30 tháng 10 năm 2018.

Trong bài viết mở đầu phần nàyđã được đưa ra thông tin chung liên quan, bao gồm mô tả về cách kết nối các kiểu với mã HTML của trang web (tài liệu), xác định sự hiện diện của các thành phần nhất định trên trang web.

Trong ấn phẩm này, chúng ta sẽ xem xét cách soạn và viết chính xác Thuộc tính CSS cho tất cả các phần tử để trình duyệt có thể nhận dạng và hiển thị chúng một cách chính xác trên trang.

Cụ thể, chúng ta hãy xem quy tắc một kiểu nói chung là gì, bao gồm bộ chọn, cũng như các thuộc tính và giá trị của chúng.

Cú pháp và các tùy chọn viết quy tắc CSS

Vì các biểu định kiểu xếp tầng, mặc dù là một ngôn ngữ chuyên biệt, nhưng vẫn là một ngôn ngữ, nên có thể đưa ra sự tương đồng giữa tập hợp các quy tắc CSS và trong văn bản thuần túy, trong đó mỗi từ bao gồm các chữ cái, câu bao gồm các từ và đoạn văn bản- từ các đề xuất.

Với sự liên kết trực quan này, chúng ta có thể rút ra một chuỗi logic liên quan đến cấu trúc CSS (theo ý kiến khiêm tốn của tôi, đây là cách tối ưu nhất):

giá trị (hoặc tham số), được thể hiện bằng số, mã màu, tên phông chữ, v.v., theo cách tương tự của chúng tôi, có thể được coi là các chữ cái;
Đơn vị cấu trúc của CSS là tài sản, xác định phần diện mạo của một thành phần trên trang (màu sắc, phông chữ văn bản, kích thước, mức thụt lề, vị trí, v.v.), tương ứng với các giá trị cụ thể (một hoặc nhiều). Ở đây, sự kết hợp giữa tên thuộc tính và tham số của nó có thể được so sánh với một từ (cũng có thể bao gồm một hoặc nhiều chữ cái) trong một đoạn văn bản tiêu chuẩn;
Quy tắc CSS - bộ chọn(tên kiểu) cùng với tập hợp thuộc tính CSSđối với mỗi phần tử, nó xác định hoàn toàn thiết kế và vị trí của nó trên trang. Được liên kết về mặt cấu trúc với một câu (một tập hợp các từ riêng lẻ trong văn bản thông thường);
một bộ sưu tập đầy đủ tất cả các quy tắc CSSđối với một tài liệu cụ thể (trang web) đảm bảo nó hiển thị chính xác trong trình duyệt. Hãy so sánh điều này với một đoạn văn bản đã hoàn thành.

Có lẽ sự liên kết mà tôi đề xuất hơi xa vời nhưng tôi nghĩ nó vẫn sẽ giúp người mới bắt đầu hiểu được cấu trúc chung của ngôn ngữ CSS.

Vì vậy, mỗi thuộc tính được gán một giá trị (tham số) cụ thể và có thể có một vài giá trị trong số đó. Tập thuộc tính (quy tắc) tương ứng được áp dụng cho một bộ chọn cụ thể. Về mặt sơ đồ, một quy tắc CSS có thể được hiển thị như sau::

Một bộ chọn được đặt phía trước, sau đó đặt các dấu ngoặc nhọn (mở và đóng), giữa đó có các thuộc tính CSS với các giá trị được gán, tên của mỗi thuộc tính được phân tách khỏi tham số tương ứng của nó bằng dấu hai chấm. Tất cả các thuộc tính cùng với giá trị của chúng được phân tách bằng dấu chấm phẩy. Hãy xem một ví dụ trực tiếp:

Nội dung ( cỡ chữ: 14px; nền: #00ff00 url("west.png") lặp lại-x; )

Xin lưu ý rằng thuộc tính nền có một số giá trị: màu nền (#00ff00), đường dẫn đến hình nền ("west.png") và độ phân giải để lặp lại theo chiều ngang (repeat-x). Bạn có thể nhận thấy rằng tùy chọn ghi này hơi khác so với sơ đồ được trình bày ở trên.

Trên thực tế, không có sự mâu thuẫn nào ở đây. Vì CSS không nhạy cảm với dấu cách, ngắt dòng hoặc tab nên các quy tắc kiểu có thể được viết theo nhiều cách khác nhau để phù hợp với các tình huống cụ thể.

Ví dụ: một mục nhập quy tắc mở rộng, một mẫu vừa được trình bày, là thuận tiện nhất cho việc nhận thức và do đó thường được sử dụng để nghiên cứu các kiểu hoặc trong tệp style.css "thô", được tạo cho một mục nhập mới trang web và do đó vẫn chưa được hoàn thiện. Có một biến thể khác của mục nhập quy tắc CSS tương tự này:

Nội dung ( cỡ chữ: 14px; ) nội dung ( nền: #00ff00 url("west.png") lặp lại-x; )

Như bạn có thể thấy, cùng một bộ chọn được lặp lại cho mỗi thuộc tính. Đây không phải là lỗi vì những lý do đã đề cập ở trên, nhưng định dạng viết quy tắc này làm lộn xộn mã và làm phức tạp nhận thức của nó, và do đó thực tế không được sử dụng.

Một phiên bản mở rộng của ký hiệu có thể được trình bày mà không cần gạch nối:

Nội dung ( cỡ chữ: 14px; nền: #00ff00 url("west.png") lặp lại-x; )

Nhưng đó không phải là tất cả. Có thể bỏ qua tất cả dấu cách cũng như ký tự phân tách (dấu chấm phẩy) sau thuộc tính cuối cùng (trước dấu ngoặc nhọn đóng). Điều này cũng khá chính đáng Hình dạng CSS quy tắc, ít đồ sộ hơn, tốt cho việc tối ưu hóa trang web nhưng khó đọc hơn:

Nội dung(cỡ chữ:14px;nền:#00ff00 url("west.png") lặp lại-x)

Sau khi thiết kế trang web đã sẵn sàng và mọi thứ đã được nhập sự thay đổi cần thiết trong các tệp kiểu CSS, chúng được điều chỉnh tương ứng để tối ưu hóa tài nguyên web, đồng thời tất cả các khoảng trắng sẽ tự động bị xóa. Việc này có thể được thực hiện thủ công nhưng tại sao lại lãng phí thời gian quý báu một cách vô lý như vậy? Xét cho cùng, ngay cả đối với một trang web nhỏ, tệp style.css có thể chứa nhiều quy tắc kiểu.

Bộ chọn, Thuộc tính và Áp dụng Kiểu

Tôi đã lưu ý rằng theo thời gian, HTML và CSS ngày càng hội tụ chặt chẽ hơn. Nếu vào buổi bình minh của Internet ở dạng hiện tại, sự xuất hiện của các thành phần trên trang web được mô tả bằng thuộc tính thẻ đánh dấu siêu văn bản, thì những ngày này cũng vậy sử dụng thường xuyên Phương pháp này được xem xét vì mã HTML quá tải thường không góp phần tối ưu hóa đúng cách các trang của trang web, điều này cũng gây hại cho việc quảng bá SEO của nó.

Khối có văn bản màu xanh lá cây được bao quanh bởi khung

CSS (mã định danh được đặt trước biểu tượng băm):

#area (màu: xanh lá cây; đường viền: 2px Solid #d6c99a)

Các tùy chọn sau có thể chứa cả bộ chọn thẻ và các lớp có mã định danh.

Tại sao các tùy chọn kích thước này lại cần thiết? Sự thật là không phải lúc nào cũng vậy giải pháp tốt nhất là việc sử dụng các giá trị tương đối tiêu chuẩn, bao gồm cả tỷ lệ phần trăm. Đôi khi sẽ có lợi hơn nếu liên kết kích thước phông chữ với chiều cao và chiều rộng của cửa sổ trình duyệt. Giả sử, nếu chiều cao khung nhìn là 800px thì 1vh = 8px và nếu chiều rộng là 1500px - 1vw = 15px.

Đơn vị vmin và vmax được xác định bởi giá trị cực tiểu và kích thước tối đa các vùng có chiều cao và chiều rộng. Mẫu: Chiều cao cửa sổ trình duyệt là 700px và chiều rộng là 1300px. Trong trường hợp này vmin = 7px và vmax = 13px.

Khi thiết lập kích thước, bạn phải chỉ định đơn vị (ví dụ: chiều cao: 55px), nếu không trình duyệt sẽ hiển thị không chính xác các phần tử tương ứng. Ý nghĩa, bằng 0, không áp dụng cho quy tắc này, chúng có thể được chỉ định theo hai cách (phần đệm: 0 hoặc phần đệm: 0px), vì lý do hiển nhiên, tùy chọn đầu tiên dẫn đầu với lợi thế áp đảo.

Quan tâm

Tôi quyết định đề cập riêng đến loại đơn vị này. Ở trên tôi đã nói về lợi ích của việc sử dụng giá trị tương đối khi thiết lập thuộc tính. Điều này hoàn toàn áp dụng cho lãi suất.

Bảng (chiều rộng: 100%; /* Chiều rộng bảng tính theo phần trăm */)

Các mục phần trăm được sử dụng khá thường xuyên, đặc biệt khi cần đặt giá trị tương ứng với giá trị gốc hoặc khi kích thước phụ thuộc vào một số trường hợp bên ngoài nhất định. Ví dụ: chiều rộng phần tử bằng 100% sẽ thích ứng với màn hình của nhiều loại thiết bị và được hiển thị chính xác ở đó.

Từ khóa

Chúng ta hãy xem xét một số từ đóng vai trò là tham số thuộc tính và xác định vị trí hoặc hình thức này hoặc hình thức khác của một phần tử. Dưới đây là một số ví dụ minh họa.

P (căn chỉnh văn bản: căn đều)

Ký hiệu này có nghĩa là văn bản đoạn văn được căn chỉnh cả bên trái và bên phải:

2. Màu hiện tại- khớp với giá trị thuộc tính màu của phần tử hiện tại và chỉ định màu cho các khu vực không nhận được màu theo mặc định. Giả sử một thùng chứa có lớp "bl-2" được lồng trong "bl-1":

Giá trị currentColor chỉ định màu nền

Và phong cách được chỉ định cho cả hai:

Bl-1 ( đệm: 10px; /* Lề xung quanh vùng chứa bên trong */ nền: currentColor; /* Màu nền */ ) .bl-2 ( color: blue; /* Màu văn bản */ đệm: 10px; /* Lề xung quanh văn bản */ nền: #ccc; /* Màu nền */ )

Nếu không có màu văn bản nào được chỉ định cho một phần tử (thuộc tính “color”) thì theo mặc định đoạn văn bản sẽ có màu đen (trong hầu hết các phần tử). trình duyệt phổ biến). Trong ví dụ của chúng tôi, đối với vùng chứa bên ngoài (“bl-1”) bị thiếu màu. Kết quả là, khi chỉ định giá trị “currentColor”, nền của vùng chứa này sẽ trở thành màu đen:

3. Thừa kế là từ khóa làm tham số của các giá trị tương ứng của phần tử cha. Vật mẫu:

Giá trị kế thừa xác định sự kế thừa của thuộc tính

Và các quy tắc CSS cho nó:

Bl-1 ( viền: 4px màu đỏ đặc; đệm: 10px; ) .bl-2 ( viền: kế thừa; đệm: kế thừa; )

Kết quả là thiết kế đường viền và phần đệm đã được chuyển từ khối cha (bl-1) sang khối bên trong (bl-2):

4. Ban đầu- được sử dụng trong trường hợp cần thiết lập các tham số ban đầu của thuộc tính. Ví dụ: nó giúp khôi phục các giá trị mặc định do trình duyệt đặt hoặc xác định thông số ban đầu, đã được thay đổi do sự kế thừa. Ví dụ:

Tùy chọn thuộc tính CSS

Có rất nhiều ý nghĩa khác nhau quyết định phong cách nhất định, xác định sự xuất hiện của các thành phần trên trang web.

Đọc thêm chi tiết

Và phong cách cho nó:

H2 ( màu: #2e15d1; họ phông chữ: Verdana, sans-serif; ) p ( màu: xanh lá cây; ) .init ( màu: ban đầu; họ phông chữ: ban đầu; )

Bằng cách sử dụng lớp "init", hình thức của đoạn đoạn p được đính kèm trong thẻ span và tiêu đề dưới cùng H2 được thay đổi để phù hợp với cài đặt kiểu dáng mặc định của chúng.

5. Bỏ đặt là một tham số về cơ bản là sự “lai” giữa kế thừa và ban đầu. Xác định tham số thuộc tính là kế thừa nếu thuộc tính được kế thừa từ cha mẹ, nếu không thì là thuộc tính ban đầu.

ví dụ 1(hoạt động như kế thừa):

Màu văn bản xanh lục - kế thừa giá trị của thuộc tính "color" cho lớp "zzz"

Màu văn bản là màu đỏ theo giá trị của thuộc tính "color" cho thẻ p

P (màu: đỏ) .zzz (màu: xanh lá cây) .xxx p (màu: chưa đặt)

Theo quy tắc CSS thuộc tính màu sắc được kế thừa, vì vậy "unset" trong ví dụ của chúng ta sẽ trả về màu xanh lá cây văn bản cho vùng chứa "xxx" là con của "zzz":

Ví dụ 2(hoạt động như ban đầu):

Màu khung là đen - giá trị mặc định

Màu đường viền (màu xanh) được đặt trong thuộc tính của vùng chứa div

Div ( border: 2px màu xanh đậm; lề-dưới: 10px; lề trên: 10px; phần đệm: 10px; ) .xxx ( border-color: unset; )

Vì theo quy tắc của tờ định kiểu thuộc tính biên giới không được thừa kế, thì “border-color: unset” sẽ trả màu đường viền về giá trị mặc định, tức là nó trở thành màu đen.

URL hoặc địa chỉ

Tham số này chứa và được sử dụng khi bạn cần, ví dụ, để trỏ đến một tệp có hình ảnh (đọc với sử dụng HTML thẻ img). Trong trường hợp này nó được sử dụng từ khóa url(), trong đó giữa dấu ngoặc và đường dẫn đến tệp đồ họa được chỉ định:

Nội dung ( nền: url(https://site/images/star.jpg) không lặp lại; /* Đường dẫn tuyệt đối */ ) div ( nền: url(images/globus.jpg) không lặp lại; /* Đường dẫn tương đối * / )

Thời gian

Được sử dụng, ví dụ, khi thực hiện hiệu ứng hoạt hình(vâng, vâng, trên CSS thuần túy bây giờ bạn có thể tạo những thứ như vậy), trong đó các tham số được chỉ định bằng giây (s) hoặc mili giây (ms). Giá trị có thể là số nguyên hoặc số phân số. Đồng thời, chúng ta phải nhớ rằng không được có khoảng cách giữa số và đơn vị đo (2s, 50ms)./p>

Hãy xem một ví dụ.

Và theo đó, phong cách cho nó:

Đang tải ( width: 440px; lề: auto; đệm: 20px; nền: #c49746; color: #fff; text-align: center; ) .spin ( display: inline-block; width: 70px; Height: 70px; border: 10px double #ccc; border-right: 10px double trong suốt; bán kính đường viền: 70px; /* Animation */ animation: spin 5s tuyến tính 0s vô hạn bình thường; ) /* Đặt xoay */ @keyframes spin ( từ ( biến đổi: xoay( 0deg); ) thành ( biến đổi: xoay(360deg); ) )

TRÊN trang này Bạn không chỉ có thể nhìn vào kết quả mà còn có thể cố gắng chỉnh sửa một số thuộc tính, có thể nói, trong thực tế, nói chung, hãy thử nghiệm. Đương nhiên, những người mới bắt đầu nghiên cứu các biểu định kiểu xếp tầng vẫn khó hiểu và tính đến sự tinh tế của hoạt hình, nhưng chắc chắn sẽ có phần tiếp theo, vì vậy hãy nhớ đăng ký các tài liệu mới để có được thứ bạn muốn đúng hạn. Nhưng hãy tiếp tục.

Dây

Loại tùy chọn này cho phép bạn thêm các đoạn văn bản. Chuỗi phải được đặt trong dấu ngoặc kép (đơn hoặc kép). Hơn nữa, nếu bạn cần đặt một từ hoặc cụm từ trong dấu ngoặc kép bên trong một chuỗi thì có thể kết hợp các loại dấu ngoặc kép này.

Ví dụ: nếu bạn đặt toàn bộ dòng trong dấu ngoặc đơn thì đoạn văn bản bên trong sẽ nằm trong dấu ngoặc kép và ngược lại. Nó cũng được phép sử dụng cùng loại, chỉ trong trường hợp này cần phải thoát dấu ngoặc kép bên trong bằng cách thêm dấu gạch chéo ngược “\” trước chúng:

thuộc tính: "chuỗi 'nội dung'"
thuộc tính: "chuỗi 'nội dung'"
thuộc tính: "chuỗi\"nội dung\""

Để bắt đầu, mã HTML:

Phiên bản hiện tại bài viết.

Và bây giờ là các phong cách:

Mới::sau ( nội dung: "đã cập nhật"; màu: đỏ; )

Màu sắc

Nhiều tham số khác nhau có thể được sử dụng để biểu thị màu sắc cho các thuộc tính khi viết quy tắc CSS. Chúng ta hãy xem xét ngắn gọn về từng người trong số họ:

1. Tên. Đúng, không phải tất cả các sắc thái đều có thể được chỉ định theo cách này mà chỉ một số sắc thái (“đỏ” - đỏ, “xanh” - xanh lá cây, “đen” - đen, “cam” - cam, “vàng” - vàng, “ ô liu” - ô liu và một số loại khác). Chúng cũng có thể được phân loại là từ khóa.

P (màu sắc: xanh lá cây)

2. thập lục phân ( mã thập lục phân) . Cơ sở của hệ thập lục phân, trái ngược với hệ thập phân nổi tiếng, là 16 ký tự: 10 số (từ 0 đến 9) và 6 chữ cái đầu tiên của bảng chữ cái Latinh (A, B, C, D, E, F ). Các chữ cái từ A đến F tương ứng với các số từ 10 đến 15.

P (màu: #f8f9e3)

3.1. RGB— bạn có thể đặt giá trị màu dựa trên hệ thập phân. Tên phương pháp này là tên viết tắt của ba màu chính có liên quan: R ed (màu đỏ), G reen (màu xanh lá cây), B lue (màu xanh). Các sắc thái của mỗi màu nằm trong khoảng từ 0 đến 255. Để sử dụng hệ thống này, bạn cần viết rgb ở phía trước và chỉ ra từng thành phần màu trong ngoặc: rgb (240, 0, 180). Cũng có thể sử dụng tỷ lệ phần trăm:

Div ( màu nền: rgb (210, 0, 90); màu: rgb (100%, 50%, 15%); )

3.2. RGBA- Phiên bản mở rộng của phương pháp RGB trước đó, nó chứa kênh alpha đặt độ trong suốt của phần tử trong phạm vi từ 0 đến 1. Tham số "0" hoàn toàn trong suốt và "1" hoàn toàn mờ đục.

Phần thân (màu nền: rgba (255,255,255,.9))

4.1. HSL— tên của phương pháp này cũng không gì khác hơn là một từ viết tắt bao gồm các chữ cái đầu tiên của ba từ: H ue (hue), S bão hòa (bão hòa) và L sự nhẹ nhàng (sự nhẹ nhàng). Chính những đặc điểm này cùng nhau quyết định màu sắc cuối cùng. Trong trường hợp này, bóng nằm ở một vị trí cụ thể trên bánh xe màu:

Vì toàn bộ vòng tròn là 360°, mỗi màu sắc (sắc độ) tương ứng với một giá trị rất cụ thể theo độ từ 0° đến 359°. Trong trường hợp này, các thông số của các sắc thái chính như sau: 0° - đỏ, 120° - xanh lá cây, 240° - xanh lam.

Độ bão hòa và độ sáng được đo bằng phần trăm (từ 0 đến 100%). Đối với bão hòa, tham số 0 có nghĩa là không dải màu và 100% là màu bão hòa nhất. Làm sao nhiều giá trị hơnđộ sáng, tông màu càng nhạt, 0 tương ứng với màu đen và 100% tương ứng với màu trắng.

Div (màu nền: hsl(40,90%,15%))

4.2. HSLA- tương tự như RGBA, nó là phiên bản mở rộng của HSL, có thêm chỉ báo độ trong suốt.

Div (màu: hsla(120,100%,50%,0.6))

Góc quay hoặc nghiêng

Trong CSS, các đặc điểm góc (dựa trên hình tròn) có thể được sử dụng làm tham số cho một số thuộc tính nhất định. Dưới đây là các đơn vị được sử dụng:

độ - độ(1 vòng tròn đầy đủ là 360 độ);
tốt nghiệp - tốt nghiệp(vòng tròn đầy đủ 400grad);
radian - rad. Toàn bộ một vòng tròn bằng 2π (xấp xỉ 6,2832rad);
lần lượt - xoay(1 lượt bằng 1 lượt đầy đủ).

Điều quan trọng cần lưu ý là giá trị âm có thể được sử dụng. Dưới đây được đưa ra ví dụ minh họa với các thông số của một số góc (xoay):

Để rõ ràng, hãy sử dụng các đặc tính xoay để thực hiện Gradient điền nền và là một trong các thành phần của mẫu, chúng tôi sẽ đặt một số văn bản nhất định trên trang:

Đổ nền gradient.

Bây giờ hãy tạo quy tắc CSS cho nền này:

Nội dung ( nền: #f5e573; nền: gradient tuyến tính(-5deg, #f5e573, #f7f4db 50%, #f7f6eb); )

Bạn có thể đánh giá kết quả tại trang này và thực hành ở đó, chỉnh sửa các kiểu theo ý muốn. Điều này cũng sẽ hữu ích cho việc đạt được các kỹ năng thực tế.

CSS chứa các quy tắc kiểu được trình duyệt diễn giải và sau đó áp dụng cho các thành phần thích hợp trong tài liệu của bạn. Một quy tắc kiểu bao gồm ba phần:

Bộ chọn là thẻ HTML mà kiểu sẽ được áp dụng. Đây có thể là bất kỳ thẻ nào, ví dụ: