Hướng dẫn tạo tên cho CSS. Kế thừa và xếp tầng
Trang chủ - Cài đặt - Cài đặt người dùng và cấu hình hiển thị các biểu ngữ:
Bạn có thể làm khác đi nếu muốn hiển thị các banner khác.
Tên người dùng
Bây giờ chúng ta hãy tiếp tục: " Người dùng» => « Nhóm người dùng» => « Danh sách các nhóm" chọn nhóm mong muốn và hãy bắt đầu tạo kiểu.
Để làm điều này bạn cần thiết lập một phong cách CSS trong điểm " Kiểu CSS cho tên người dùng" Chúng ta sẽ sử dụng style cho văn bản:
màu sắc
- màu biệt danh. Bạn có thể sử dụng các giá trị màu: định dạng RGB- rgb(r, g, b); ký hiệu thập lục phân - #RRGGBB; Định dạng RGBa - rgba(r, g, b, a); Tên màu cơ bản: aqua, đen, xanh, fuchsia, xám ......
họ phông chữ
- Họ phông chữ cho biệt hiệu (Arial, Georgia, Verdana....) Danh sách phông chữ có thể bao gồm một hoặc nhiều tên, cách nhau bằng dấu phẩy. Nếu tên phông chữ chứa khoảng trắng, ví dụ Trebuchet MS, nó phải được đặt trong một hoặc một dấu cách. dấu ngoặc kép. Khi trình duyệt gặp phông chữ đầu tiên trong danh sách, nó sẽ kiểm tra sự hiện diện của phông chữ đó trên máy tính của người dùng. Nếu không có phông chữ như vậy, tên tiếp theo trong danh sách sẽ được lấy và phân tích sự hiện diện. Do đó, nhiều phông chữ làm tăng khả năng ít nhất một trong số chúng sẽ được phát hiện trên máy khách.
cỡ chữ
- kích thước phông chữ biệt danh. Bạn được phép sử dụng bất kỳ hợp lệ Đơn vị CSS: em (chiều cao phông chữ phần tử), ex (chiều cao ký tự x), điểm (pt), pixel (px), tỷ lệ phần trăm (%) v.v. Kích thước phông chữ được lấy là 100% (hoặc không được chỉ định) phần tử cha.
kiểu phông chữ
- xác định kiểu phông chữ của biệt hiệu - bình thường, in nghiêng hoặc xiên (bình thường, in nghiêng, xiên).
độ dày phông chữ
- đặt độ bão hòa (độ đậm) của phông chữ (đậm, đậm hơn, nhạt hơn, bình thường, 100, 200, 300, 400, 500, 600, 700, 800, 900).
Bạn cũng có thể sử dụng bóng văn bản cho biệt hiệu của mình:
bóng văn bản
- bốn tham số được chỉ định: x-shift, y-shift, bán kính mờ và màu sắc (1px 1px 2px đen). Được phép chỉ định một số tham số bóng, phân tách chúng bằng dấu phẩy (1px 1px 2px đen, 0 0 1em đỏ)
Ví dụ:
Chúng tôi chỉ ra CSS phong cách biệt danh:
Màu đỏ; độ dày phông chữ: đậm; cỡ chữ: 12px;
Căn chỉnh biệt hiệu vào giữaCài đặt kiểu>>Thành phần thông báo>>Tên người dùng
Trong khối "Khác" thêm
Căn chỉnh văn bản: giữa;
Những gì chúng tôi có
Nền hoạt hình cho (các) tên người dùng
TRONG "Phong cách CSS cho tên người dùng" thêm nền
Nền: url (thư mục chứa hình ảnh/glitter_001.gif) không lặp lại
Có 14 hình nền khác nhau trong kho lưu trữ bên dưới.
Chức danh người dùng
"Văn bản biểu ngữ người dùng"chúng tôi viết bất kỳ thứ gì, nó sẽ không hiển thị", ví dụ: tên của lớp quản trị viên, V EXTRA.css thiết lập phong cách:
Quản trị viên ( nền: url(thư mục hình ảnh/admin.gif) không lặp lại; hiển thị: khối; chiều rộng: 120px; chiều cao: 30px; màu: rgba(0, 0, 0, 0); lề trái: -5px; )
Hãy xem những gì đã xảy ra
"Văn bản biểu ngữ người dùng"chúng tôi viết tên của nhóm" Một cách khác, sử dụng tên lớp CSS của riêng bạn" - tên lớp chẳng hạn ruy-băng quản trị, V EXTRA.css thiết lập phong cách:
/* Thứ hạng người dùng */ .admin-ribbon, .moder-ribbon, .member-ribbon ( color: #FCE2E3; display: block; font-size: 12px; font-weight: đậm; Height: 38px; line-height: 38px; lề trái: -12px; lề phải: -12px; căn chỉnh văn bản: giữa; bóng văn bản: 0 0 0 trong suốt, 0 0 2px đen; chiều rộng: 134px; ) .admin-ribbon ( nền: url( "styles/default/xenforo/icons/admin_ribbon.png") cuộn không lặp lại 0 0 trong suốt; ) .moder-ribbon ( nền: url("styles/default/xenforo/icons/moder_ribbon.png") cuộn không lặp lại 0 0 trong suốt; ) .member-ribbon ( nền: url("styles/default/xenforo/icons/member_ribbon.png") cuộn không lặp lại 0 0 trong suốt; ) /* END Xếp hạng người dùng */
Trong kho lưu trữ bên dưới, bạn sẽ tìm thấy 3 dải băng cho biểu ngữ.
Màu tùy chỉnh cho biểu ngữ:
Đi đến trang danh sách nhóm: /admin.php?user-groups/ - chọn nhóm bạn cần - Trong trường "Văn bản biểu ngữ người dùng:", nhập tên bạn cần - Trong cài đặt "Thiết kế biểu ngữ người dùng:", chọn tùy chọn "Khác, sử dụng tên CSS của bạn" -class:" và trong trường này, chúng tôi chỉ ra: userBanner theo phong cách của tôi- Chúng tôi lưu toàn bộ điều này vào một mẫu EXTRA.css thêm mã này:
UserBanner.my-style ( color: trắng; màu nền: xanh lá cây; )
hoặc như thế này
UserBanner.my-style ( color: trắng; màu nền: xanh lá cây; màu viền: xanh lá cây; )
Ví dụ về các biểu ngữ sử dụng kiểu CSS.
Hãy tạo biểu ngữ chỉ bằng CSS. Như đã đề cập, để làm điều này, chúng tôi sử dụng "Một cách khác, sử dụng tên lớp CSS của riêng bạn", chúng tôi đặt cho mỗi nhóm một lớp riêng và trong EXTRA.css, chỉ định kiểu cho các lớp này:
Admin_style, .lamer_style, .moder_style, .user_style ( hình nền: Linear-gradient(to top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)); bán kính đường viền: 3px ; bóng hộp: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inet; display: block; cỡ chữ: 11px; lề: 4px 0 5px; đệm: 2px 6px; vị trí: tương đối; căn chỉnh văn bản: giữa; màu: trắng; bóng văn bản: 0 0 0 trong suốt, 1px 1px 1px đen; chiều rộng: 98px; ) .admin_style ( màu nền: rgba(255, 0 , 0, 0.5); đường viền: rgba rắn 1px(255, 0, 0, 0.7); ) .moder_style ( màu nền: rgba(0, 155, 4, 0.5); đường viền: rgba rắn 1px(0, 155, 4, 0.7); ) .user_style ( màu nền: rgba(0, 51, 155, 0.5); đường viền: rgba rắn 1px(0, 51, 155, 0.7); ) .lamer_style ( màu nền: rgba(0 , 158, 217, 0,5); đường viền: rgba rắn 1px (0, 158, 217, 0,7); )
CSS (Cascading Style Sheets) hoặc các biểu định kiểu xếp tầng, được dùng để mô tả vẻ bề ngoài tài liệu được viết bằng ngôn ngữ đánh dấu. Thông thường, các kiểu CSS được sử dụng để tạo và thay đổi kiểu của các thành phần trang web và giao diện người dùng viết vào Ngôn ngữ HTML và XHTML, nhưng cũng có thể được áp dụng cho bất kỳ loại tài liệu XML nào, bao gồm XML, SVG và XUL.
Các biểu định kiểu xếp tầng mô tả các quy tắc định dạng các thành phần bằng cách sử dụng các thuộc tính và các giá trị được phép cho các thuộc tính đó. Đối với mỗi yếu tố bạn có thể sử dụng bộ giới hạn thuộc tính, các thuộc tính khác sẽ không có tác dụng gì với nó.
Một khai báo kiểu bao gồm hai phần: phần tử trang web - bộ chọn và các lệnh định dạng - khối quảng cáo. Bộ chọn cho trình duyệt biết phần tử nào cần định dạng và khối khai báo (mã trong dấu ngoặc nhọn) liệt kê các lệnh định dạng - thuộc tính và giá trị của chúng.
Cơm. 1. Cấu trúc khai báo kiểu CSS Các loại biểu định kiểu xếp tầng và thông số cụ thể của chúng
1. Các loại style sheet
1.1. Bảng kiểu dáng bên ngoài
Bảng kiểu dáng bên ngoàiđại diện tập tin văn bản với phần mở rộng .css, chứa một tập hợp các kiểu CSS cho các phần tử. Tệp được tạo trong trình chỉnh sửa mã, giống như trang HTML. Tệp chỉ có thể chứa các kiểu, không có đánh dấu HTML. Một biểu định kiểu bên ngoài được kết nối với một trang web bằng thẻ , nằm bên trong phần
. Những kiểu này hoạt động cho tất cả các trang của trang web.Bạn có thể đính kèm nhiều style sheet vào mỗi trang web bằng cách thêm nhiều thẻ theo thứ tự , cho biết mục đích của biểu định kiểu này trong thuộc tính thẻ phương tiện. rel="stylesheet" chỉ định loại liên kết (liên kết đến biểu định kiểu).
Thuộc tính type="text/css" không được yêu cầu bởi tiêu chuẩn HTML5 nên có thể bỏ qua. Nếu thuộc tính bị thiếu, giá trị mặc định là type="text/css" .
1.2. Phong cách nội bộ
Phong cách nội bộđược nhúng trong một phần
Tài liệu HTML và được xác định bên trong thẻ. Kiểu bên trong được ưu tiên hơn kiểu bên ngoài, nhưng kém hơn kiểu nội tuyến (được chỉ định thông qua thuộc tính style)....
1.3. Phong cách tích hợp
Khi chúng tôi viết kiểu nội tuyến, chúng tôi viết mã CSS vào tệp HTML, ngay bên trong thẻ phần tử bằng cách sử dụng thuộc tính phong cách:
Hãy chú ý đến văn bản này.
Các kiểu như vậy chỉ ảnh hưởng đến phần tử mà chúng được đặt.
1.4. quy tắc @import
quy tắc @import Cho phép bạn tải các biểu định kiểu bên ngoài. Để lệnh @import hoạt động, nó phải xuất hiện trong biểu định kiểu (bên ngoài hoặc bên trong) trước tất cả các quy tắc khác:
Quy tắc @import cũng được sử dụng để bao gồm các phông chữ web:
@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);
2. Các loại bộ chọn
Bộ chọn thể hiện cấu trúc của một trang web. Chúng giúp tạo ra các quy tắc để định dạng các thành phần trang web. Bộ chọn có thể là các phần tử, lớp và mã định danh của chúng, cũng như các lớp giả và phần tử giả.
2.1. Bộ chọn phổ quát
Phù hợp với bất kỳ phần tử HTML nào. Ví dụ: * (margin: 0;) sẽ đặt lại về 0 lề cho tất cả các thành phần của trang web. Bộ chọn cũng có thể được sử dụng kết hợp với lớp giả hoặc phần tử giả: *:after (kiểu CSS) , *:checked (kiểu CSS) .
2.2. Bộ chọn phần tử
Bộ chọn phần tử cho phép bạn định dạng tất cả các phần tử thuộc loại này trên tất cả các trang của trang web. Ví dụ: h1 (họ phông chữ: Tôm hùm, chữ thảo;) sẽ đặt phong cách chungđịnh dạng tất cả các tiêu đề h1.
2.3. Bộ chọn lớp
Bộ chọn lớp cho phép bạn chỉ định kiểu cho một hoặc nhiều phần tử với cùng tên lớp học nằm ở Những nơi khác nhau trang hoặc trên các trang khác nhauđịa điểm. Ví dụ: để tạo tiêu đề có lớp tiêu đề, bạn cần thêm thuộc tính lớp có tiêu đề giá trị vào thẻ mở
và đặt kiểu cho lớp được chỉ định. Các kiểu được tạo bằng cách sử dụng một lớp có thể được áp dụng cho các thành phần khác, không nhất thiết phải thuộc loại đó.
Hướng dẫn sử dụng máy tính cá nhân
.headline ( chuyển đổi văn bản: chữ hoa; màu: xanh nhạt; )2.4. bộ chọn ID
Bộ chọn ID cho phép bạn định dạng một phần tử cụ thể. Id phải là duy nhất và chỉ có thể xuất hiện một lần trên một trang.
#sidebar ( chiều rộng: 300px; float: trái; )
2.5. Bộ chọn con cháu
Bộ chọn con cháu áp dụng kiểu cho các phần tử trong phần tử vùng chứa. Ví dụ: ul li (text-transform: chữ hoa;) - sẽ chọn tất cả các phần tử li là con của tất cả các phần tử ul.
Nếu bạn cần định dạng con cháu yếu tố cụ thể, phần tử này cần được cấp một lớp kiểu:
p.first a (màu: xanh lá cây;) — phong cách này sẽ áp dụng cho tất cả các liên kết con của một đoạn văn có lớp đầu tiên;
p .first a (color: green;) - nếu bạn thêm khoảng trắng, các liên kết nằm bên trong bất kỳ thẻ lớp .first nào là con của phần tử sẽ được tạo kiểu
Đầu tiên a (color: green;) - kiểu này sẽ được áp dụng cho bất kỳ liên kết nào nằm bên trong một phần tử khác, được chỉ định bởi class.first .
2.6. Bộ chọn con
Phần tử con là phần tử con trực tiếp của phần tử chứa nó. Một phần tử có thể có nhiều phần tử con và mỗi phần tử chỉ có thể có một phần tử cha. Bộ chọn con chỉ cho phép bạn áp dụng kiểu nếu phần tử con xuất hiện ngay sau phần tử cha và không có phần tử nào khác giữa chúng, nghĩa là phần tử con không được lồng trong bất kỳ phần tử nào khác.
Ví dụ: p > strong sẽ chọn tất cả các phần tử mạnh là con của phần tử p.
2.7. Bộ chọn chị em
Tình chị em xảy ra giữa các phần tử có chung cha mẹ. Bộ chọn anh chị em cho phép bạn chọn các phần tử từ một nhóm các phần tử có cùng cấp độ.
h1 + p - sẽ chọn tất cả các đoạn đầu tiên ngay sau bất kỳ thẻ nào
không ảnh hưởng đến các đoạn còn lại;
h1 ~ p - sẽ chọn tất cả các đoạn văn có quan hệ chị em với bất kỳ tiêu đề h1 nào và ngay sau nó.
2.8. Bộ chọn thuộc tính
Bộ chọn thuộc tính chọn các thành phần dựa trên tên thuộc tính hoặc giá trị thuộc tính:
[thuộc tính] - tất cả các phần tử chứa thuộc tính được chỉ định - tất cả các phần tử được chỉ định thuộc tính alt;
selector[attribute] - các phần tử thuộc loại này chứa thuộc tính được chỉ định, img - chỉ những hình ảnh được chỉ định thuộc tính alt;
selector[attribute="value"] - các phần tử thuộc loại này chứa thuộc tính được chỉ định với một giá trị cụ thể, img - tất cả các ảnh có tiêu đề chứa từ hoa;
selector[attribute~="value"] - các phần tử chứa một phần giá trị đã cho, ví dụ: nếu một số lớp được chỉ định cho một phần tử được phân tách bằng dấu cách, p - các đoạn văn có tên lớp chứa tính năng ;
selector[attribute|="value"] - các phần tử có danh sách giá trị thuộc tính bắt đầu bằng từ được chỉ định, p - các đoạn có tên lớp là feature hoặc bắt đầu bằng feature ;
selector[attribute^="value"] - các phần tử có giá trị thuộc tính bắt đầu bằng giá trị được chỉ định, a - tất cả các liên kết bắt đầu bằng http://;
selector[attribute$="value"] - các phần tử có giá trị thuộc tính kết thúc bằng giá trị được chỉ định, img - tất cả hình ảnh ở định dạng png;
selector[attribute*="value"] - các phần tử có giá trị thuộc tính chứa từ được chỉ định ở bất kỳ đâu, a - tất cả các liên kết có tên chứa book .
2.9. Bộ chọn lớp giả
Các lớp giả là các lớp không thực sự được gắn vào thẻ HTML. Chúng cho phép bạn áp dụng các quy tắc CSS cho các phần tử khi một sự kiện xảy ra hoặc tuân theo một quy tắc cụ thể. Các lớp giả mô tả các phần tử với các thuộc tính sau:
:hover - bất kỳ phần tử nào mà con trỏ chuột được di chuột qua;
:tập trung - yếu tố tương tác, được truy cập bằng bàn phím hoặc được kích hoạt bằng chuột;
:active - phần tử được người dùng kích hoạt;
:valid - các trường biểu mẫu có nội dung đã được kiểm tra trong trình duyệt xem có tuân thủ loại dữ liệu đã chỉ định hay không;
:invalid - các trường biểu mẫu có nội dung không khớp với kiểu dữ liệu đã chỉ định;
:enabled - tất cả các trường biểu mẫu đang hoạt động;
:disabled - các trường biểu mẫu bị chặn, tức là ở trạng thái không hoạt động;
:in-range - các trường biểu mẫu có giá trị nằm trong phạm vi được chỉ định;
:out-of-range - các trường biểu mẫu có giá trị không nằm trong phạm vi đã chỉ định;
:lang() - các phần tử có văn bản bằng ngôn ngữ được chỉ định;
:not(selector) - các phần tử không chứa bộ chọn được chỉ định - lớp, mã định danh, tên hoặc loại trường biểu mẫu - :not() ;
:target là một phần tử có ký hiệu # được tham chiếu trong tài liệu;
:checked - các phần tử biểu mẫu đã chọn (do người dùng chọn).
2.10. Bộ chọn lớp giả cấu trúc
Các lớp giả cấu trúc chọn các phần tử con theo tham số được chỉ định trong ngoặc đơn:
:nth-child(odd) - phần tử con lẻ;
:nth-child(even) - ngay cả các phần tử con;
:nth-child(3n) - mọi phần tử thứ ba trong số trẻ em;
:nth-child(3n+2) - chọn mọi phần tử thứ ba, bắt đầu từ phần tử con thứ hai (+2) ;
:nth-child(n+2) - chọn tất cả các phần tử bắt đầu từ phần tử thứ hai;
:nth-child(3) - chọn phần tử con thứ ba;
:nth-last-child() - trong danh sách các phần tử con, chọn phần tử có vị trí được chỉ định, tương tự như:nth-child() , nhưng bắt đầu từ cái cuối cùng, theo hướng ngược lại;
:first-child - cho phép bạn chỉ tạo kiểu cho phần tử con đầu tiên của thẻ;
:last-child - cho phép bạn định dạng phần tử con cuối cùng của thẻ;
:only-child - chọn một phần tử là phần tử con duy nhất;
:empty - chọn các phần tử không có phần tử con;
:root - chọn phần tử gốc trong tài liệu - phần tử html.
2.11. Bộ chọn lớp giả kiểu cấu trúc
Điểm đến loại cụ thể thẻ con:
:nth-of-type() - chọn các phần tử tương tự :nth-child() , nhưng chỉ tính đến loại phần tử;
:first-of-type - chọn con đầu tiên của một loại nhất định;
:last-of-type - chọn phần tử cuối cùng của loại này;
:nth-last-of-type() - chọn một phần tử thuộc loại đã cho trong danh sách các phần tử theo vị trí đã chỉ định, bắt đầu từ cuối;
:only-of-type - chọn phần tử duy nhất thuộc loại được chỉ định trong số các phần tử con của phần tử cha.
2.12. Bộ chọn phần tử giả
Các phần tử giả được sử dụng để thêm nội dung được tạo bằng thuộc tính nội dung:
:first-letter - chọn chữ cái đầu tiên của mỗi đoạn văn, chỉ áp dụng cho các phần tử khối;
:first-line - chọn dòng đầu tiên của văn bản phần tử, chỉ áp dụng cho các phần tử khối;
:trước - chèn nội dung được tạo trước phần tử;
:after - thêm nội dung được tạo sau phần tử.
3. Tổ hợp lựa chọn
Để chọn các thành phần định dạng chính xác hơn, bạn có thể sử dụng kết hợp các bộ chọn:
img:nth-of-type(even) - sẽ chọn tất cả các hình ảnh được đánh số chẵn có văn bản thay thế chứa từ css .
4. Nhóm bộ chọn
Cùng một phong cách có thể được áp dụng cho nhiều phần tử cùng một lúc. Để thực hiện việc này, bạn cần liệt kê các bộ chọn bắt buộc ở bên trái của phần khai báo, phân tách bằng dấu phẩy:
H1, h2, p, span ( màu: cà chua; nền: trắng; )
5. Kế thừa và xếp tầng
Kế thừa và phân tầng là hai khái niệm cơ bản trong CSS có liên quan chặt chẽ với nhau. Kế thừa là nơi các phần tử kế thừa các thuộc tính từ phần tử cha của chúng (phần tử chứa chúng). Dòng thác thể hiện ở chỗ các loại khác nhau các biểu định kiểu được áp dụng cho một tài liệu và cách các quy tắc xung đột ghi đè lên nhau.
5.1. Di sản
Di sản là cơ chế mà một số đặc tính nhất định được truyền từ tổ tiên sang con cháu của nó. Đặc tả CSS cho phép kế thừa các thuộc tính liên quan đến nội dung văn bản của trang, chẳng hạn như màu sắc, phông chữ, khoảng cách chữ, chiều cao dòng, kiểu danh sách, căn chỉnh văn bản, thụt lề văn bản, chuyển đổi văn bản, khả năng hiển thị, màu trắng -dấu cách và khoảng cách giữa các từ. Trong nhiều trường hợp, điều này thuận tiện vì bạn không phải đặt cỡ phông chữ và họ phông chữ cho mọi thành phần trên trang web.
Các thuộc tính liên quan đến định dạng khối không được kế thừa. Đó là nền , đường viền , màn hình , float và clear , chiều cao và chiều rộng , lề , min-max-height và -width , phác thảo , tràn , phần đệm , vị trí , trang trí văn bản , căn chỉnh dọc và chỉ mục z .
Thừa kế cưỡng bức
Bằng cách sử dụng từ khóa kế thừa có thể buộc một phần tử kế thừa bất kỳ giá trị thuộc tính nào của phần tử cha của nó. Điều này hoạt động ngay cả đối với các thuộc tính không được kế thừa theo mặc định.
Cách thiết lập và hoạt động các kiểu CSS
1) Kiểu có thể được kế thừa từ phần tử cha (thuộc tính được kế thừa hoặc sử dụng giá trị kế thừa);
2) Các kiểu nằm trong biểu định kiểu bên dưới sẽ ghi đè các kiểu nằm trong bảng bên trên;
3) Có thể áp dụng kiểu từ một phần tử nguồn khác nhau. Bạn có thể kiểm tra kiểu nào được áp dụng trong chế độ nhà phát triển trình duyệt. Để thực hiện việc này, hãy nhấp vào phần tử click chuột phải chuột và chọn “Xem mã” (hoặc một cái gì đó tương tự). Cột bên phải sẽ liệt kê tất cả các thuộc tính được đặt trên phần tử này hoặc được kế thừa từ phần tử cha, cùng với các tệp kiểu mà chúng được chỉ định và số thứ tự của dòng mã.
Cơm. 2. Chế độ nhà phát triển trong trình duyệt Google Trình duyệt Chrome 4) Khi xác định kiểu, bạn có thể sử dụng bất kỳ kết hợp bộ chọn nào - bộ chọn phần tử, lớp giả phần tử, lớp hoặc mã định danh phần tử.
div (viền: 1px Solid #eee;) #wrap (chiều rộng: 500px;).box (float: left;).clear (clear: cả hai;)
5.2. Thác nước
Xếp tầng là cơ chế kiểm soát kết quả cuối cùng trong trường hợp các quy tắc CSS khác nhau được áp dụng cho một phần tử. Có ba tiêu chí xác định thứ tự các thuộc tính được áp dụng—quy tắc quan trọng, tính cụ thể và thứ tự các biểu định kiểu được đưa vào.
Quy tắc!quan trọng
Trọng số của quy tắc có thể được chỉ định bằng từ khóa!important, được thêm ngay sau giá trị thuộc tính, ví dụ: span (font-weight: đậm!important;) . Quy tắc phải được đặt ở cuối phần khai báo, trước dấu ngoặc đóng, không có khoảng trắng. Thông báo như vậy sẽ được ưu tiên hơn tất cả các quy tắc khác. Quy tắc này cho phép bạn hủy giá trị thuộc tính và đặt giá trị mới cho một phần tử từ một nhóm phần tử trong trường hợp không có quyền truy cập trực tiếp vào tệp kiểu.
Tính đặc hiệu
Với mỗi quy tắc, trình duyệt sẽ tính toán độ đặc hiệu của bộ chọn và nếu một phần tử có các khai báo thuộc tính xung đột nhau thì quy tắc có tính đặc hiệu nhất sẽ được tính đến. Giá trị độ đặc hiệu có bốn phần: 0, 0, 0, 0. Độ đặc hiệu của bộ chọn được xác định như sau:
đối với id thì thêm 0, 1, 0, 0;
đối với lớp 0, 0, 1, 0 được thêm vào;
đối với mỗi phần tử và phần tử giả, 0, 0, 0, 1 được thêm vào;
đối với kiểu nội tuyến được thêm trực tiếp vào một phần tử - 1, 0, 0, 0 ;
Bộ chọn phổ quát không có tính đặc hiệu.
H1 (màu: xanh nhạt;) /*độ đặc hiệu 0, 0, 0, 1*/ em (màu: bạc;) /*độ đặc hiệu 0, 0, 0, 1*/ h1 em (màu: vàng;) /*độ đặc hiệu: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (màu: xanh lam;) /*độ đặc hiệu: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar (màu: xám;) /*độ đặc hiệu 0, 0, 1, 0 */ #sidebar (màu: cam;) /*độ đặc hiệu 0, 1, 0, 0*/ li#sidebar (màu: nước;) /*độ đặc hiệu: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/
Do đó, những quy tắc cụ thể hơn sẽ được áp dụng cho phần tử. Ví dụ: nếu một phần tử có hai đặc tính với các giá trị 0, 0, 0, 2 và 0, 1, 0, 1 thì quy tắc thứ hai sẽ thắng.
Thứ tự các bảng được kết nối
Bạn có thể tạo nhiều biểu định kiểu bên ngoài và kết nối chúng với một trang web. Nếu ở các bảng khác nhau sẽ gặp những nghĩa khác nhau thuộc tính của một phần tử thì kết quả là quy tắc trong biểu định kiểu được liệt kê bên dưới sẽ được áp dụng cho phần tử đó.
Trong bài viết này, chúng tôi trình bày một bộ quy tắc để tạo tên CSS. Họ đã được thử nghiệm ở một số dự án chính. Điều này đã giúp chúng tôi đạt được những thành công nhất định. Mục đích của hướng dẫn là loại bỏ khả năng xung đột đặt tên, đơn giản hóa quá trình gỡ lỗi, bảo trì và đặt tên.
Những quy tắc đặt tên đưa ra dưới đây khó có thể được coi là tối ưu cho trình duyệt. Tuy nhiên, các quy tắc mang lại lợi ích to lớn và tác động của chúng đến hiệu suất là không đáng kể.
Tên tệp và lớp CSS
Sử dụng chữ thường trong tên của tất cả các lớp và tệp CSS. Để phân tách các từ trong tên, hãy sử dụng ký hiệu “-”. Ví dụ: chúng ta có thể đặt tên cho các lớp như widget-latest-comments và các tệp post.css.Sắp xếp các tệp CSS
Phân phối các kiểu CSS thành các tệp riêng biệt để giúp nhóm phát triển và bảo trì hệ thống dễ dàng hơn. Các file CSS có thể được đặt tên theo các quy tắc sau:- Global.css - Tệp này chứa các kiểu CSS chung có thể được sử dụng lại ở những nơi khác nhau.
- bố cục.css - tệp này chứa các kiểu CSS được sử dụng trong bố cục.
- ControllerID.css - tệp này được bộ điều khiển ứng dụng truy cập. Điều này có nghĩa là mỗi bộ điều khiển có thể có tệp kiểu riêng, được đặt tên theo ID của nó. Ví dụ: PostController có thể có tệp CSS có tên post.css.
- widget-WidgetClass.css - ở đây, tên WidgetClass có nghĩa là lớp của widget mà nó được viết tập tin riêng biệt Kiểu CSS. Ví dụ: tiện ích mới nhất sẽ truy cập vào tệp widget-latest-comments.css.
- FeatureName.css - tính năng tuyệt vời có thể có cái riêng của họ tập tin riêng CSS được đặt tên theo chính hàm đó. Ví dụ: hàm Markdown có thể sử dụng markdown.css.
- Các tệp CSS cần thiết khác, chẳng hạn như khung CSS.
Đặt tên các lớp CSS
Nói chung, trong CSS, chúng ta nên sử dụng các lớp thay vì mã định danh để tạo kiểu cho các phần tử HTML. Điều này được thực hiện vì cùng một mã định danh không thể được sử dụng hai lần trên cùng một trang XHTML.Để gán tên cho các lớp, chúng ta dựa vào các quy tắc sau:
- Các lớp CSS được thiết kế cho chia sẻ, phải bắt đầu bằng tiền tố g-. Ví dụ: chúng ta có thể có các lớp g-submit-button, g-link-button, mô tả kiểu của chúng phải được đặt trong tệp Global.css đã đề cập ở trên. Bạn sẽ nhận được cú pháp loại sau: .g-link-button ( ... )
- Mọi tệp xuất ra bất kỳ bản ghi nào đều phải có vùng chứa gốc chứa nội dung. Nó khai báo một lớp có tên lặp lại chính xác đường dẫn đến tệp. Ví dụ: đối với một tệp có sẵn tại post/index.php, cấu trúc này trông như thế này: ...xem nội dung tại đây...
- Mô tả về kiểu CSS phải được đặt trong tệp CSS tương ứng với bộ điều khiển. Mỗi khai báo kiểu phải bắt đầu bằng tên của lớp vùng chứa gốc. Ví dụ: để khai báo các kiểu CSS cho lớp mục của vùng chứa post-index gốc, chúng ta sẽ chèn mục sau vào tệp post.css: /* trong tệp post.css */ .post-index .item ( .. . )
- Việc tạo tên và kiểu lớp CSS cho các widget tuân theo chính xác các hướng dẫn được mô tả ở trên. Ví dụ: tiện ích mới nhấtComments nên sử dụng tên CSS gốc của lớp widget-latest-comments và tham chiếu đến tệp widget-latest-comments.css để biết các kiểu nhận xét: /* trong tệp widget-latest-comment.css */ . widget-mới nhất-bình luận .comment(...)
Bao gồm các tệp CSS
Trong chế độ nhà phát triển (khi chế độ YII_DEBUG được bật), mỗi tập tin CSS phải được kết nối với tệp bố cục chính.Trong chế độ sản xuất, tất cả các tệp CSS phải được kết hợp và nén thành một tệp. Tên tệp phải chứa ngày (ví dụ: styles-201010221550.css).
Bằng cách này, chúng tôi cho phép trình duyệt lưu vào bộ đệm tệp CSS kết hợp và do đó loại bỏ nhu cầu tải xuống tệp CSS mỗi lần.
Hợp nhất và nén các tệp CSS
Ở đây chúng tôi giới thiệu các chiến lược để đạt được mục tiêu nói trên.Đầu tiên, chúng tôi khai báo tất cả tên tệp CSS dưới dạng một mảng trong cài đặt ứng dụng.
Thứ hai, chúng tôi viết lệnh điều khiểnđể kết hợp và nén các tệp CSS. Máy nén YUI có thể được sử dụng cho những mục đích này. Lệnh này sẽ đọc tên của tệp CSS từ cài đặt ứng dụng, kết hợp tất cả nội dung của tệp thành một tệp và gọi trình nén YUI để nén các kiểu CSS. Tệp được tạo phải được đặt tên bằng dấu thời gian.
Thứ ba, sửa đổi tập tin chính bố cục bằng cách chèn đoạn mã sau vào phần đầu:
...... params["css.files.compression"]): ?> params["css.files.compression"]; ?>" /> params["css.files"] dưới dạng $css): ?> " />Chúng tôi giả định rằng các tệp CSS được liệt kê trong cài đặt ứng dụng css.files. Và nếu các tệp được hợp nhất và nén thì tên tệp cuối cùng phải được đưa vào cài đặt ứng dụng css.files.compression. Lệnh console phải thực hiện các thay đổi đối với tệp cấu hình của ứng dụng để cập nhật cài đặt css.files.compression sau khi tệp CSS kết hợp và nén được tạo.
Hướng dẫn đặt tên cho bộ chọn jQuery
Chúng ta có thể sử dụng các quy tắc tạo tên CSS cho bộ chọn JQuery trong mã JavaScript của ứng dụng. Đặc biệt, khi chọn một hoặc nhiều phần tử bằng bộ chọn JQuery, chúng ta phải tuân theo các quy tắc tương tự để khai báo kiểu CSS. Ví dụ: nếu chúng tôi muốn đính kèm trình xử lý "nhấp chuột" vào tất cả các siêu liên kết trong các khối tin tức thì chúng tôi sẽ sử dụng các bộ chọn JQuery sau: $(".news-index .item a").click(function())( .. . ));Nghĩa là, bộ chọn phải bắt đầu bằng tên của vùng chứa gốc của lớp CSS (trong trường hợp này là news-index).
1. CSS Cascading Style Sheets là gì?
Vì thế, bảng định kiểu xếp tầng css là gì?
css(Tiếng Anh) Cascading Style Sheets - Cascading Style Sheets) là ngôn ngữ để mô tả hình thức của tài liệu được viết bằng ngôn ngữ đánh dấu. Để giúp người mới bắt đầu dễ hiểu hơn, các biểu định kiểu xếp tầng css được thiết kế để tạo ra các thiết kế trang web html đẹp mắt, dễ chỉnh sửa.
Cascading style sheet được sử dụng lần đầu tiên vào những năm 90 của thế kỷ trước. Nhưng lúc đầu chúng không phổ biến như bây giờ, vì các trình duyệt khác nhau nhận biết và hiển thị các trang html sử dụng css khác nhau.
Sau một thời gian, để đơn giản hóa công việc của những người xây dựng trang web, các trình duyệt bắt đầu được “điều chỉnh” theo các tiêu chuẩn tương tự. Ngày nay, hầu hết tất cả các chương trình được sử dụng để xem các trang Internet đều tái tạo các trang web sử dụng biểu định kiểu xếp tầng CSS.
Quan sát của tôi!!! Theo quan sát cá nhân của tôi, như vậy phiên bản mới nhất Các trình duyệt như Opera, Mazilla ForeFox, Maxthon, Google Chrome và Internet Explorer hiển thị các trang sử dụng biểu định kiểu xếp tầng gần như giống hệt nhau, nhưng nếu trình duyệt không phải là thế hệ mới nhất thì bản thân các trang của trang web sẽ trông khác. Và để trang web của bạn trông giống nhau trên hầu hết các trình duyệt, có những công nghệ đặc biệt để chỉ định các biểu định kiểu xếp tầng.
Vì vậy, hãy bắt đầu tạo một style sheet mới và đính kèm nó vào tài liệu của chúng ta.
2. Làm cách nào để tạo một biểu định kiểu css xếp tầng?
Trong phần này của bài viết, chúng ta sẽ tạo và kết nối một biểu định kiểu xếp tầng với trang html đơn giản nhất.
Vì vậy, hãy làm điều này:
1. Chúng tôi tạo một thư mục chứa trang html và biểu định kiểu xếp tầng. Hãy để thư mục của tôi được gọi là "css"
2. Chúng tôi tạo một trang html đơn giản (index.html). Bạn có thể đọc cách thực hiện việc này tại đây.
3. Bây giờ chúng ta tạo một tài liệu văn bản đơn giản (tương tự như tạo một trang html), chỉ cần gọi nó là style.css.
Kết quả là bạn sẽ nhận được điều này:
Vậy là xong, file chứa style css đã sẵn sàng.
Bây giờ hãy kết nối style sheet đã tạo với file index.html.
3. Làm thế nào để kết nối một css bảng định kiểu xếp tầng?
Vì vậy, để kết nối một biểu định kiểu với một trang html, bạn cần có tệp index.html trong thẻ
thêm thẻ:
Ở đây trong thuộc tính href="style.css"đường dẫn đến tệp có kiểu css được chỉ định. Trong trường hợp này, tệp css và index.html nằm trong cùng một thư mục.
Ví dụ: nếu tệp index.html của chúng tôi có mã sau:
Quan trọng!!! Nhân tiện, đừng quên đặt mã hóa thành 1251 (ANSI-Cyrillic) khi lưu tệp index.html trong Notepad. Bởi vì nếu bạn không làm điều này và lưu tệp ở một bảng mã khác, trình duyệt sẽ hiển thị cho bạn những "hình vẽ nguệch ngoạc" thay vì văn bản.
Nếu mọi thứ đã được thực hiện và lưu chính xác, thì trong trình duyệt, bạn sẽ thấy như sau:
Vậy là xong, file index.html đã được tạo và các style sheet css cũng đã được kết nối với nó.
Bây giờ hãy kiểm tra hoạt động của css style sheet.
Vì vậy, hãy bắt đầu với điều đơn giản nhất và đặt thẻ
một kiểu mới xác định hình nền của trang html, màu nền của trang (nếu hình ảnh bị tắt trong trình duyệt của khách truy cập trang), phần đệm trên và dưới, phông chữ mặc định, kích thước và màu sắc của nó.Để đặt hình nền, bạn cần đánh dấu nó trong thư mục chứa các tệp của chúng tôi.
Tải xuống kho lưu trữ bg.zip, giải nén nó và đặt tệp bg.jpg vào thư mục css. Bạn nên có nó như thế này:
Bây giờ để đặt kiểu cho thẻ
html, trong biểu định kiểu bạn cần viết như sau:|
nội dung ( hình nền: url(bg.jpg); màu nền:#f6f6f6; lề-top:0px; lề-dưới:0px; font-family:Verdana; font-size:12px; color:#000066; ) |
thân hình (...) - thiết lập kiểu css cho thẻ
hình nền:url(bg.jpg); - hình nền, trong đó tham số url(...jpg) chỉ định đường dẫn đầy đủ đến hình ảnh sẽ làm nền
màu nền:#f6f6f6; - nền nội dung tài liệu (thẻ ). Thuộc tính này được bật nếu trình duyệt của khách truy cập tắt hình ảnh
lề trên: 0px; - khoảng cách từ nội dung tài liệu đến đầu trình duyệt. Trong trường hợp này, css Cascading Style Sheets đặt khoảng cách thành 0 px.
lề dưới:0px; - khoảng cách từ nội dung tài liệu đến cuối trình duyệt. Trong trường hợp này, các biểu định kiểu css xếp tầng đặt khoảng cách thành 0px
họ phông chữ:Verdana; - đặt phông chữ mặc định cho tài liệu
cỡ chữ: 12px; - cỡ chữ tài liệu 12 pixel
màu:#000000; - văn bản màu. Trong trường hợp này, biểu định kiểu css đặt màu phông chữ thành màu xanh đậm.
Sau khi lưu tệp style.css, bạn sẽ thấy thông tin sau trong trình duyệt của mình:
|
Về công nghệ CSS. Kiểu CSS |
|
Giới thiệu về CSS. Kiểu dáng Các cách áp dụng phong cách: Phong cách nội bộ Phong cách toàn cầu Phong cách liên quan/bên ngoài Bạn đã bắt đầu tìm hiểu về Cascading Style Sheets CSS. Vậy là bạn đã làm quen với ngôn ngữ đánh dấu siêu văn bản HTML, vì không có ích gì khi bắt đầu CSS mà không biết HTML. CSS ( Cascading Style Sheets - Cascading Style Sheets) là một công nghệ được sử dụng để thiết kế các trang web sử dụng các kiểu. Ý tưởng chính của CSS là tách biệt cấu trúc và nội dung của trang web khỏi thiết kế của chúng: Sử dụng HTML, một trang sẽ được tạo - khung của nó và nội dung của nó cũng được nhập vào. - một thiết kế được tạo bằng CSS - thiết kế được đặt cho các thành phần trang. Kiểu dáng là một tập hợp các quy tắc định dạng được áp dụng cho các thành phần trang để thay đổi các thuộc tính và thông số trình bày của chúng trên trang: điều này chủ yếu liên quan đến hình thức và vị trí của chúng. Kiểu được thể hiện bằng thuộc tính CSS. Mỗi thuộc tính có ảnh hưởng riêng đến thiết kế của một thành phần trang cụ thể. Một số thuộc tính không áp dụng cho một số phần tử. Các phần tử trang là thẻ HTML hoặc nội dung của chúng. Có ba cách để áp dụng kiểu cho các thành phần trang: Phương pháp I - Phong cách nội bộ Kiểu dáng được đặt bằng tham số phong cách, có thể được thêm vào bất kỳ thẻ HTML nào, chỉ ảnh hưởng đến hình thức của thẻ đó và nội dung của nó. Đoạn mã Sử dụng tham số kiểu, kiểu cho văn bản của đoạn này được chỉ định, kích thước và màu sắc của nó được đặt. Kết quả: Sử dụng tham số kiểu, kiểu cho văn bản của đoạn này được đặt: kích thước và màu sắc của nó được đặt. Phương pháp thiết kế các thành phần trang này hiếm khi được sử dụng. Rốt cuộc, bạn sẽ đồng ý rằng việc thiết lập cùng một thiết kế, chẳng hạn như cho mỗi đoạn của trang, trước hết là tốn nhiều công sức và thứ hai là không thực tế, vì khi khối lượng mã nguồn tăng lên, thời gian tải trang cũng sẽ tăng lên. tăng. Phương pháp II - Kiểu toàn cầu Kiểu dáng được thiết lập bằng cách sử dụng thẻ Phần đầu tài liệu có thiết kế một kiểu cho tất cả các đoạn của trang hiện tại! Và đối với đoạn này, thiết kế được đặt riêng! Thiết kế đồng nhất. Kết quả: Phần đầu tài liệu có thiết kế một kiểu cho tất cả các đoạn của trang hiện tại! Và đối với đoạn này, thiết kế được đặt riêng! Thiết kế đồng nhất. Phương pháp thiết kế trang này được sử dụng trong trường hợp không có nhiều trang hoặc khi cần đưa ra thiết kế ban đầu cho bất kỳ một trang nào của trang web từ phần còn lại của nhiều trang cùng loại. Phương pháp III - Kiểu liên kết hoặc kiểu bên ngoài Các kiểu được mô tả trong một tệp riêng biệt có phần mở rộng .css, có thể được liên kết với một hoặc một số tệp html, do đó ảnh hưởng đến thiết kế của chúng. Nếu bạn chưa quen với trình soạn thảo HTML trực quan Dreamweaver, sau đó để tạo tệp css, bạn có thể sử dụng trình soạn thảo văn bản đơn giản, là một phần của HĐH Windows - Sổ tay. Ví dụ: chúng tôi có một tài liệu html - tệp chỉ mục.html, đối với thiết kế mà bạn phải áp dụng các kiểu được mô tả trong tệp phong cách.css. Vì mục đích này, các tập tin chỉ mục.html Và phong cách.css cần phải được ràng buộc. Giao tiếp được thực hiện bằng cách sử dụng thẻ , nằm ở đầu tài liệu chỉ mục.html(giữa các thẻ Và ) và trong đó bạn phải viết như sau: "bản định kiểu"gõ="văn bản/css"href="style.css">. Dòng này chỉ ra rằng các quy tắc thiết kế cho tập tin chỉ mục.html lấy từ tập tin kiểu phong cách.css. Sử dụng thuộc tính href nhãn một liên kết được tạo tới một tệp có kiểu ( chỉ định đường dẫn tuyệt đối hoặc tương đối đến tệp (xem thêm chi tiết tại đây...) ) . Do đó, bạn có thể áp dụng các kiểu từ một tệp nằm ngay cả trên một trang web khác cho bất kỳ tài liệu HTML nào. Đoạn mã:
Đối với các đoạn văn và tiêu đề cấp hai Phong cách đã được thiết lập.
.Đoạn mã từ tệp kiểu: P(ranh giới: #FF0000 rắn 2px; màu sắc: #33CC99; phần đệm: 5px} h2 (ranh giới: #33CC99 rắn 2px; màu nền: #FF0066; màu sắc: #FFFFFF; phần đệm: 5px} Kết quả: Đối với các đoạn văn và tiêu đề cấp hai Phong cách đã được thiết lập. Kiểu được mô tả trong tệp style.css, được liên kết với tệp này bằng thẻ . Sử dụng phương pháp này cho phép bạn liên kết một tệp với các kiểu phong cách.css với bất kỳ số lượng tệp html nào và làm việc trên thiết kế của chúng, chỉ chỉnh sửa mã css của một tệp. Điều đó rất thuận tiện! |
Cascading Style Sheets hoặc CSS cho người mới bắt đầu (hội thảo về HTML "chính xác")
Phần Internet của Nga đang phát triển từng ngày. Trong một hoặc hai năm qua, tổng số trang tiếng Nga đã tăng hơn gấp đôi. Ngày nay ở Nga bạn sẽ không làm ai ngạc nhiên với cụm từ này<домашняя страничка>hoặc một từ tiếng Anh
Chúng ta sẽ nói ở đây về<правильном>HTML dành cho người mới bắt đầu, cụ thể là về một số tính năng bổ sung được Hiệp hội Internet chính thức phê duyệt (http://www.w3.org/). Đặc biệt là về một số khả năng được cung cấp bởi HTML động (DHTML). Và thậm chí chính xác hơn - về cách sử dụng CSS (biểu định kiểu xếp tầng hoặc biểu định kiểu xếp tầng) để tạo một trang trông đẹp hơn các trang được tạo bằng cách sử dụng CSS.<классического>HTML, đồng thời chiếm ít dung lượng hơn và do đó tải nhanh hơn.
Rất ít người quyết định tạo sự hiện diện trên web của riêng mình lần đầu tiên bằng Notepad hoặc một trình soạn thảo văn bản khác như HomeSite. Thông thường, một người mới bắt đầu sẽ nghĩ như sau:<Все свои привычные документы я создаю посредством программ WYSIWYG (<что вижу, то и получаю>) - Tôi tạo văn bản trong MS Word, thuyết trình trong MS PowerPoint, vì vậy tôi sẽ dùng một chương trình tương tự để tạo một trang web - MS FrontPage...> Sau khi đưa ra quyết định như vậy, nhà điêu khắc web mới đúc đã tự cướp mình hai lần.
Lần đầu tiên - theo nghĩa sử dụng hợp lý không gian web. Thực tế là tất cả các trình soạn thảo trực quan của các trang web, bao gồm MS FrontPage đã đề cập, đều chèn vào các trang đã tạo<отсебятину>- rất nhiều thẻ bổ sung không cần thiết. Có lẽ ngoại lệ là Macromedia Dreamweaver (vì nó đã trở nên rất phổ biến đối với cả người mới bắt đầu và các chuyên gia). Nhưng ngay cả anh ấy cũng không phải là người lý tưởng về mặt này - anh ấy thích rải rác văn bản nguồn bằng dấu ngoặc kép (trong hầu hết các trường hợp là hoàn toàn không cần thiết) và cũng chèn các ký tự khoảng trắng không ngắt vào những nơi không thích hợp nhất. Công bằng mà nói, cần lưu ý rằng tất cả các trình soạn thảo trực quan đều cung cấp cho người dùng cơ hội làm việc với mã nguồn của trang đang được tạo, nhưng FrontPage, được nhiều người yêu thích, sẽ lại làm lại mọi thứ theo cách riêng của nó, ngay khi bạn chuyển về chế độ trực quan.
Từ đó, lần thứ hai, người mới bắt đầu tự đánh mất chính mình về tính linh hoạt và quyền kiểm soát hoàn toàn đối với nội dung trang đã tạo - trình chỉnh sửa trực quan không mang lại quyền tự do sáng tạo giống như khi làm việc trực tiếp với mã nguồn của trang được tạo sẽ đưa cho bạn.
Chà, bây giờ chúng ta hãy đi thẳng vào vấn đề - tạo các trang web nhỏ và đẹp bằng cách sử dụng các biểu định kiểu xếp tầng (trong phần văn bản tiếp theo, tôi sẽ sử dụng tên viết tắt của chúng - CSS). Người ta cho rằng bạn, những độc giả thân mến, đã đọc phần giới thiệu, đồng ý với tôi, đã từ bỏ các trình soạn thảo trực quan, có một cuốn sách về HTML, đã nghiên cứu ít nhất một số lượng nhỏ các thẻ và thuộc tính cơ bản và mong muốn biết CSS là gì và nó là gì được sử dụng với.
Định dạng logic và vật lý
Phiên bản HTML cổ điển 3.2, phiên bản phổ biến nhất hiện nay trên Web, cung cấp cho chúng ta các phương tiện định dạng vật lý tài liệu, trong đó có các thẻ đặc biệt (ví dụ: thẻ , , ) và nhiều thuộc tính khác nhau (kích thước, màu sắc, chiều cao, chiều rộng, v.v.). Các tính năng của định dạng web buộc chúng ta phải viết đi viết lại các thẻ và thuộc tính này cho mỗi đoạn văn mới, điều này tất nhiên sẽ làm tăng đáng kể kích thước của mã trang. Ngoài ra, với cách định dạng này, trong trường hợp phân tích cấu trúc của tài liệu, vẫn chưa rõ tại sao từ này lại được tô đậm - chỉ để làm đẹp hay để thu hút sự chú ý đặc biệt của người dùng cuối? Nếu một người sống ít nhất vẫn có thể hiểu được cấu trúc logic của các trang trong HTML cổ điển, thì điều này không thể nói về các công cụ tìm kiếm hoặc, chẳng hạn như trình duyệt giọng nói. Hãy lấy chúng ra và đưa logic thuần túy vào cấu trúc của trang. Chính vì điều này<неподвластности>Để phân tích logic, phương pháp định dạng này được gọi là định dạng vật lý. Ngược lại, khi tạo đặc tả HTML 4.0 mới, định dạng logic được đặt lên hàng đầu, tức là định dạng trong đó cấu trúc và thiết kế của tài liệu sẽ được tách biệt rõ ràng. Phương pháp định dạng này được tập đoàn Internet khuyến khích sử dụng vì nó cung cấp khả năng tìm kiếm thông tin mở rộng trên Internet, cho phép bạn cấu trúc và phân tích thông tin chính xác hơn bằng công cụ tìm kiếm, đồng thời cũng giảm đáng kể kích thước trang và thời gian sử dụng. để tải đầy đủ. Việc tách biệt cấu trúc và thiết kế tài liệu được thực hiện bằng CSS.
Điều đáng chú ý là sự khởi đầu của định dạng logic cũng có trong các thẻ HTML cổ điển.
, ,
, tất nhiên, đã góp phần chia tài liệu thành một số khối logic. Nhưng nhiều tác giả trang đã sử dụng và cho đến ngày nay vẫn tiếp tục sử dụng các thẻ này cho các mục đích khác: do sự khan hiếm tài nguyên cho thiết kế trang, ví dụ: thẻ tiêu đề được sử dụng để làm nổi bật các thành phần trên trang không thực sự là tiêu đề. Mặt khác, CSS cung cấp đủ công cụ tạo kiểu để cho phép bạn tuân thủ chặt chẽ hơn các quy tắc định dạng logic và thực sự tách biệt cấu trúc của trang khỏi cách trình bày trực quan của nó.Gán kiểu cho các thành phần trang riêng lẻ
CSS cho phép bạn gán kiểu trực quan của riêng mình cho bất kỳ thẻ HTML nào, bao gồm cả thẻ
. Nếu kiểu được đặt cho thẻ , nó được kế thừa bởi tất cả các phần tử (đoạn văn, tiêu đề, v.v.) được đặt bên trong thẻ vùng chứa này, trong trường hợp không có kiểu tùy chỉnh cho các phần tử này. Vì vậy, chúng ta không cần phải viết thẻ nữa và thuộc tính màu sắc, kích thước, v.v. cho từng đoạn trên trang - chỉ cần đặt một kiểu nhất định cho thẻ , và tất cả các đoạn văn trên trang sẽ được hiển thị theo kiểu này. làm như thế nào?Giả sử chúng ta muốn tất cả các đoạn văn được hiển thị bằng phông chữ Times New Roman 12 điểm có màu xanh đậm. Để làm điều này, bạn cần chỉ định thuộc tính style của thẻ
, gán cho nó giá trị thích hợp. Cú pháp là:12 điểm; màu sắc: xanh đậm;">
Như vậy, tất cả các đoạn văn trên trang đều được hiển thị theo cách chúng ta mong muốn và mã không bị tắc thẻ và thuộc tính của chúng. Hãy tưởng tượng việc tiết kiệm kích thước tệp nếu trang của bạn có nhiều văn bản!
Xin lưu ý rằng khi chúng tôi chỉ định kiểu phông chữ, sau tên Times New Roman, chúng tôi đã chỉ ra kiểu serif, nghĩa là bất kỳ phông chữ nào có serif. Nếu máy của người dùng cuối không cài đặt phông chữ Times New Roman, trình duyệt sẽ thay thế bất kỳ phông chữ serif có sẵn nào và trang hiển thị sẽ gần giống nhất có thể với những gì bạn dự định. Hơn nữa, ví dụ đưa ra sẽ dễ hiểu đối với cả IE (4.0 trở lên) và NN (4.0 trở lên). Mặc dù chúng tôi phải đặt trước ngay rằng Netscape Navigator không hỗ trợ tất cả các tính năng do CSS và DHTML cung cấp và tất nhiên, điều này không làm tăng số lượng người hâm mộ của nó.
Ví dụ trên sử dụng việc nhúng kiểu trực tiếp vào thẻ tài liệu - cái gọi là kiểu nội tuyến. Phương pháp liên kết CSS với tệp HTML này được khuyến nghị trong các trường hợp riêng lẻ - nếu kiểu này được dự định chỉ áp dụng cho một thành phần trên một trang duy nhất của trang web. Nếu kiểu này phải được áp dụng cho nhiều thành phần trên cùng một trang hoặc cho nhiều trang cùng một lúc thì các phương pháp liên kết CSS và HTML khác được khuyến nghị mà chúng ta sẽ thảo luận tiếp theo.
Gán kiểu cho nhiều thành phần trên cùng một trang - tạo biểu định kiểu được nhúng
Cho đến nay chúng ta đã nói về việc chỉ thiết lập một kiểu cho một phần tử. Bây giờ chúng ta sẽ học cách tạo style sheet.
Giả sử chúng ta muốn tất cả các đoạn văn trên trang trông giống như ví dụ trước, với tất cả các tiêu đề cấp một có màu xanh lục Arial in đậm 16 điểm và tất cả các tiêu đề cấp hai có màu lục đậm in nghiêng Helvetica màu vàng-xanh 14 điểm. . Để làm điều này chúng ta cần tạo trong<голове>trang (bất cứ nơi nào giữa các thẻ
Và) một biểu định kiểu được nhúng trong đó chúng ta sẽ viết nhiều quy tắc cùng một lúc. Để thực hiện việc này, hãy tạo thẻ vùng chứa biểu định kiểu bắt đầu bằng thẻ mở. Bên trong thẻ vùng chứa này, chúng ta có thể tự do xác định bất kỳ số lượng quy tắc CSS nào, bao gồm bộ chọn (tên của thẻ HTML mà quy tắc sẽ được áp dụng) và định nghĩa của nó (trực tiếp là một bộ định dạng), được đặt trong dấu ngoặc nhọn . Cú pháp của ví dụ trên là:cỡ chữ: 12pt;
màu sắc: xanh đậm;
cỡ chữ: 16pt;
độ dày phông chữ: đậm;
Họ phông chữ: Arial, sans-serif;
cỡ chữ: 14pt;
màu sắc: vàng xanh;
độ dày phông chữ: đậm;
kiểu chữ: in nghiêng;
Cách liên kết CSS và HTML này được gọi là nhúng. Bạn nên sử dụng nó trong trường hợp bạn quyết định đặt một bộ quy tắc định dạng nhất định chỉ cho một trang của trang web và theo kế hoạch của bạn, tất cả các trang khác sẽ trông khác.
Gán kiểu đồng thời cho một số trang của trang web
Ngoài việc nội tuyến và nhúng, việc nhập và liên kết biểu định kiểu còn được sử dụng để liên kết CSS và HTML. Tất nhiên, đây là những cách tốt nhất để mang lại giao diện nhất quán cho nhiều (hoặc thậm chí tất cả) trang của cùng một trang. Trong trường hợp này, toàn bộ biểu định kiểu được lưu trữ trong một tệp (phần mở rộng tệp phải là tiêu chuẩn - .css).
Đây là ví dụ về nội dung của một tệp như vậy (ví dụ: my.css):
họ phông chữ: "Time New Roman", serif;
cỡ chữ: 12pt;
màu sắc: xanh đậm;
Họ phông chữ: Arial, sans-serif;
cỡ chữ: 16pt;
độ dày phông chữ: đậm;
Họ phông chữ: Arial, sans-serif;
cỡ chữ: 14pt;
màu sắc: vàng xanh;
độ dày phông chữ: đậm;
kiểu chữ: in nghiêng;
Xin lưu ý: thẻ không có biểu định kiểu nào được sử dụng bên trong tệp - phần mở rộng .css cho trình duyệt biết rõ rằng tệp đó là biểu định kiểu. Một tệp như vậy có thể được liên kết đến nhiều trang cùng một lúc (hoặc được nhập vào nhiều trang cùng một lúc). Trong tệp html để liên kết, bạn cần viết ở bất kỳ đâu giữa các thẻ
Và dòng sau:Dòng này cho biết tệp đang được liên kết là một biểu định kiểu (rel="stylesheet"), định dạng của tệp này là .css (type="text/css") và nó nằm trong cùng thư mục với tệp html, hoặc có URL khác (href="my.css"). Rõ ràng, chúng ta có thể viết dòng này vào bất kỳ (hoặc tất cả) tệp html của mình. Vì vậy, một thiết kế theo phong cách duy nhất sẽ được quy định cho nhiều trang cùng một lúc.
Xin lưu ý rằng kiểu nội tuyến (kiểu được chỉ định cho các thành phần trang riêng lẻ bằng cách sử dụng thuộc tính style) và kiểu được nhúng (kiểu được chỉ định trong<голове>các trang bên trong thẻ vùng chứa
, tất nhiên, đã góp phần chia tài liệu thành một số khối logic. Nhưng nhiều tác giả trang đã sử dụng và cho đến ngày nay vẫn tiếp tục sử dụng các thẻ này cho các mục đích khác: do sự khan hiếm tài nguyên cho thiết kế trang, ví dụ: thẻ tiêu đề được sử dụng để làm nổi bật các thành phần trên trang không thực sự là tiêu đề. Mặt khác, CSS cung cấp đủ công cụ tạo kiểu để cho phép bạn tuân thủ chặt chẽ hơn các quy tắc định dạng logic và thực sự tách biệt cấu trúc của trang khỏi cách trình bày trực quan của nó.Gán kiểu cho các thành phần trang riêng lẻ
CSS cho phép bạn gán kiểu trực quan của riêng mình cho bất kỳ thẻ HTML nào, bao gồm cả thẻ
. Nếu kiểu được đặt cho thẻ , nó được kế thừa bởi tất cả các phần tử (đoạn văn, tiêu đề, v.v.) được đặt bên trong thẻ vùng chứa này, trong trường hợp không có kiểu tùy chỉnh cho các phần tử này. Vì vậy, chúng ta không cần phải viết thẻ nữa và thuộc tính màu sắc, kích thước, v.v. cho từng đoạn trên trang - chỉ cần đặt một kiểu nhất định cho thẻ , và tất cả các đoạn văn trên trang sẽ được hiển thị theo kiểu này. làm như thế nào?Giả sử chúng ta muốn tất cả các đoạn văn được hiển thị bằng phông chữ Times New Roman 12 điểm có màu xanh đậm. Để làm điều này, bạn cần chỉ định thuộc tính style của thẻ
, gán cho nó giá trị thích hợp. Cú pháp là:12 điểm; màu sắc: xanh đậm;">
Như vậy, tất cả các đoạn văn trên trang đều được hiển thị theo cách chúng ta mong muốn và mã không bị tắc thẻ và thuộc tính của chúng. Hãy tưởng tượng việc tiết kiệm kích thước tệp nếu trang của bạn có nhiều văn bản!
Xin lưu ý rằng khi chúng tôi chỉ định kiểu phông chữ, sau tên Times New Roman, chúng tôi đã chỉ ra kiểu serif, nghĩa là bất kỳ phông chữ nào có serif. Nếu máy của người dùng cuối không cài đặt phông chữ Times New Roman, trình duyệt sẽ thay thế bất kỳ phông chữ serif có sẵn nào và trang hiển thị sẽ gần giống nhất có thể với những gì bạn dự định. Hơn nữa, ví dụ đưa ra sẽ dễ hiểu đối với cả IE (4.0 trở lên) và NN (4.0 trở lên). Mặc dù chúng tôi phải đặt trước ngay rằng Netscape Navigator không hỗ trợ tất cả các tính năng do CSS và DHTML cung cấp và tất nhiên, điều này không làm tăng số lượng người hâm mộ của nó.
Ví dụ trên sử dụng việc nhúng kiểu trực tiếp vào thẻ tài liệu - cái gọi là kiểu nội tuyến. Phương pháp liên kết CSS với tệp HTML này được khuyến nghị trong các trường hợp riêng lẻ - nếu kiểu này được dự định chỉ áp dụng cho một thành phần trên một trang duy nhất của trang web. Nếu kiểu này phải được áp dụng cho nhiều thành phần trên cùng một trang hoặc cho nhiều trang cùng một lúc thì các phương pháp liên kết CSS và HTML khác được khuyến nghị mà chúng ta sẽ thảo luận tiếp theo.
Gán kiểu cho nhiều thành phần trên cùng một trang - tạo biểu định kiểu được nhúng
Cho đến nay chúng ta đã nói về việc chỉ thiết lập một kiểu cho một phần tử. Bây giờ chúng ta sẽ học cách tạo style sheet.
Giả sử chúng ta muốn tất cả các đoạn văn trên trang trông giống như ví dụ trước, với tất cả các tiêu đề cấp một có màu xanh lục Arial in đậm 16 điểm và tất cả các tiêu đề cấp hai có màu lục đậm in nghiêng Helvetica màu vàng-xanh 14 điểm. . Để làm điều này chúng ta cần tạo trong<голове>trang (bất cứ nơi nào giữa các thẻ
Và) một biểu định kiểu được nhúng trong đó chúng ta sẽ viết nhiều quy tắc cùng một lúc. Để thực hiện việc này, hãy tạo thẻ vùng chứa biểu định kiểu bắt đầu bằng thẻ mở. Bên trong thẻ vùng chứa này, chúng ta có thể tự do xác định bất kỳ số lượng quy tắc CSS nào, bao gồm bộ chọn (tên của thẻ HTML mà quy tắc sẽ được áp dụng) và định nghĩa của nó (trực tiếp là một bộ định dạng), được đặt trong dấu ngoặc nhọn . Cú pháp của ví dụ trên là:cỡ chữ: 12pt;
màu sắc: xanh đậm;
cỡ chữ: 16pt;
độ dày phông chữ: đậm;
Họ phông chữ: Arial, sans-serif;
cỡ chữ: 14pt;
màu sắc: vàng xanh;
độ dày phông chữ: đậm;
kiểu chữ: in nghiêng;
Cách liên kết CSS và HTML này được gọi là nhúng. Bạn nên sử dụng nó trong trường hợp bạn quyết định đặt một bộ quy tắc định dạng nhất định chỉ cho một trang của trang web và theo kế hoạch của bạn, tất cả các trang khác sẽ trông khác.
Gán kiểu đồng thời cho một số trang của trang web
Ngoài việc nội tuyến và nhúng, việc nhập và liên kết biểu định kiểu còn được sử dụng để liên kết CSS và HTML. Tất nhiên, đây là những cách tốt nhất để mang lại giao diện nhất quán cho nhiều (hoặc thậm chí tất cả) trang của cùng một trang. Trong trường hợp này, toàn bộ biểu định kiểu được lưu trữ trong một tệp (phần mở rộng tệp phải là tiêu chuẩn - .css).
Đây là ví dụ về nội dung của một tệp như vậy (ví dụ: my.css):
họ phông chữ: "Time New Roman", serif;
cỡ chữ: 12pt;
màu sắc: xanh đậm;
Họ phông chữ: Arial, sans-serif;
cỡ chữ: 16pt;
độ dày phông chữ: đậm;
Họ phông chữ: Arial, sans-serif;
cỡ chữ: 14pt;
màu sắc: vàng xanh;
độ dày phông chữ: đậm;
kiểu chữ: in nghiêng;
Xin lưu ý: thẻ không có biểu định kiểu nào được sử dụng bên trong tệp - phần mở rộng .css cho trình duyệt biết rõ rằng tệp đó là biểu định kiểu. Một tệp như vậy có thể được liên kết đến nhiều trang cùng một lúc (hoặc được nhập vào nhiều trang cùng một lúc). Trong tệp html để liên kết, bạn cần viết ở bất kỳ đâu giữa các thẻ
Và dòng sau:Dòng này cho biết tệp đang được liên kết là một biểu định kiểu (rel="stylesheet"), định dạng của tệp này là .css (type="text/css") và nó nằm trong cùng thư mục với tệp html, hoặc có URL khác (href="my.css"). Rõ ràng, chúng ta có thể viết dòng này vào bất kỳ (hoặc tất cả) tệp html của mình. Vì vậy, một thiết kế theo phong cách duy nhất sẽ được quy định cho nhiều trang cùng một lúc.
Xin lưu ý rằng kiểu nội tuyến (kiểu được chỉ định cho các thành phần trang riêng lẻ bằng cách sử dụng thuộc tính style) và kiểu được nhúng (kiểu được chỉ định trong<голове>các trang bên trong thẻ vùng chứa