Tính đặc hiệu là một hệ thống xếp hạng được sử dụng khi có nhiều giá trị thuộc tính xung đột trỏ đến cùng một phần tử. Khi xác định quy tắc nào sẽ áp dụng, bộ chọn có độ đặc hiệu cao nhất sẽ thắng. Loại bộ chọn cụ thể nhất là bộ chọn ID, tiếp theo là bộ chọn lớp, tiếp theo là bộ chọn loại. Trong ví dụ này, chỉ color: blue
sẽ được triển khai vì nó có bộ chọn ID trong khi color: red
có bộ chọn loại
Sử dụng CSS hàng ngày?
Ban đầu tôi làm nó cho chính mình, nhưng cuối cùng muốn chia sẻ nó trên WebsiteSetup
Vậy là bạn đã có nó ở đây – tổng cộng 29 trang, được cấu trúc thành các đoạn khác nhau. hình nền, đường viền, phông chữ, văn bản, Cột, Màu sắc, Định vị lưới và nhiều hơn nữa [bao gồm cả giao diện người dùng]
CSS là ngôn ngữ để thiết kế trang web của bạn, bạn có thể sử dụng ngôn ngữ này để thêm nền, màu sắc và thậm chí cả hiệu ứng chuyển tiếp hoặc các yếu tố tương tác khác. Nó cũng sẽ giúp bạn tạo một trang web nhẹ và đáp ứng thân thiện với SEO.
Tuy nhiên, có thể khó làm quen với các giá trị CSS khác nhau, đặc biệt nếu bạn chưa quen với ngôn ngữ này.
Để giúp bạn, chúng tôi sẽ chia sẻ một CSS Cheat Sheet hoàn chỉnh sẽ hữu ích cho tất cả các dự án phát triển web của bạn. Hơn nữa, bạn sẽ tìm thấy 13 trang khai báo CSS và CSS3 cùng với một số thuộc tính có thể.
Bắt đầu nào.
Làm quen với CSS
Cascading Style Sheet hoặc CSS là một ngôn ngữ biểu định kiểu cho biết các thành phần trang web của bạn sẽ trông như thế nào. Bạn có thể kiểm soát thiết kế, bố cục, phông chữ và màu sắc của nội dung trang web bằng cách nhúng tệp CSS vào tài liệu HTML của bạn
Hãy xem cách CSS hoạt động bằng cách chia nhỏ cú pháp
selector {declaration}
Tuyên bố có thể được chia thành
selector {property: value;}
Như bạn có thể thấy, cú pháp CSS bao gồm một bộ chọn và một khối khai báo. Bộ chọn là phần tử HTML mà bạn sắp kiểm soát. Trong khi khối khai báo chứa tên thuộc tính và giá trị của phần tử HTML – cả hai đều được phân tách bằng dấu hai chấm [. ] và được khai báo trong dấu ngoặc nhọn [{}]
Giả sử bạn muốn kích thước phông chữ của tiêu đề một [h1] là 20 pixel. Cú pháp của bạn sẽ trông như thế này
h1 {font-size: 20px;}
Trong trường hợp này, bộ chọn là h1. Sau đó, cỡ chữ là tên thuộc tính và 20px là giá trị
Vì CSS có rất nhiều bộ chọn và khai báo có thể khó nhớ, nên chúng tôi đã tập hợp một Bảng cheat CSS và CSS3 hoàn chỉnh để giúp bạn nắm vững ngôn ngữ này
Khi bạn đã tải xuống CSS Cheat Sheet, hãy lưu tệp vào thiết bị của bạn hoặc in ra. Bằng cách này, bạn sẽ dễ dàng tìm thấy những gì bạn đang tìm kiếm
Tải xuống Bảng cheat CSS đầy đủ tại đây
Tải xuống CSS Cheat Sheet trong. pdf
Bản xem trước CSS Cheat Sheet
Dưới đây là tổng quan về các giá trị và thuộc tính CSS phổ biến nhất được lấy từ tệp PDF của chúng tôi
Tác giả
Leonardo N
Leo là một người đam mê và đóng góp cho WordPress. Anh ấy thích cập nhật những tin tức và cập nhật mới nhất về WordPress, đồng thời chia sẻ kiến thức của mình để giúp mọi người xây dựng các trang web thành công. Khi anh ấy không làm việc, anh ấy đóng góp cho nhóm tài liệu WordPress và chăm sóc những chú chó của mình
Là kỹ sư phần mềm, chúng tôi luôn tìm kiếm các công cụ và hướng dẫn tốt nhất giúp chúng tôi làm việc hiệu quả hơn trong khi tốn ít thời gian hơn cho việc tìm kiếm và đọc các thông số kỹ thuật dài dòng. Hôm nay, Toptal hân hạnh giới thiệu tới cộng đồng một tài nguyên hoàn toàn mới dưới dạng tải xuống miễn phí. một bảng cheat CSS. CSS Cheat Sheet của Toptal là hướng dẫn tham khảo CSS nhanh và bao gồm cú pháp CSS, bộ chọn, thuộc tính, kích thước và đơn vị quan trọng nhất cũng như các chi tiết CSS hữu ích khác, tất cả đều ở định dạng ngắn gọn, dễ hiểu
Qua
Tomislav Bacinger
Tomislav [Thạc sĩ] đã dành hơn 15 năm để phát triển toàn bộ ngăn xếp và phân tích dữ liệu, nhưng trực quan hóa không gian địa lý là sở thích của anh ấy
CHIA SẺ
CHIA SẺ
Cascading Style Sheets, hay viết tắt là CSS, là ngôn ngữ biểu định kiểu được viết bằng ngôn ngữ đánh dấu. CSS xác định cách trình bày, giao diện và các thành phần định dạng của tài liệu Web, chẳng hạn như bố cục, màu sắc và phông chữ
Cú pháp CSS rất toàn diện và không dễ để luôn biết chính xác cú pháp hoặc biết tất cả các thuộc tính CSS có sẵn và các giá trị tương ứng. Để giúp các nhà thiết kế và nhà phát triển CSS, Toptal đã tạo một hướng dẫn tham khảo nhanh và cung cấp cho cộng đồng dưới dạng tải xuống miễn phí. Hướng dẫn tham khảo CSS bao gồm cú pháp CSS, bộ chọn, thuộc tính, kích thước và đơn vị quan trọng nhất cũng như thông tin CSS hữu ích khác ở định dạng ngắn gọn và đầy đủ thông tin. Chúng tôi hy vọng bạn sẽ thấy CSS cheat sheet là một tài nguyên quý giá
Bạn cũng có thể xem các trang tài nguyên Toptal để biết thêm thông tin về các lỗi CSS phổ biến, hướng dẫn tuyển dụng CSS, câu hỏi phỏng vấn CSS, mẹo CSS và các phương pháp hay nhất. Chúng tôi cũng cung cấp CSS3 Maker, một công cụ trực quan để tạo nhanh các đoạn mã CSS
Kiểu nội tuyến
Phong cách nhúng
bộ chọn { thuộc tính. giá trị;
Biểu định kiểu bên ngoài
hộp
lề
lề trên
lề phải
lề dưới
lề trái
Bộ chọn
đệm
padding-top
padding-right
padding-bottom
padding-left
*
Tất cả các yếu tố
nhãn
Tất cả các yếu tố thẻ
ranh giới
đường viền trên cùng
đường viền bên phải
đường viền dưới đáy
đường viền bên trái
nhãn *
Tất cả các yếu tố trong thẻ
thẻ thẻ2
các phần tử tag2 trong thẻ
màu viền
màu viền trên cùng
màu viền bên phải
màu viền dưới đáy
màu viền bên trái
thẻ, thẻ2
Tất cả các yếu tố tag và tag2
thẻ > thẻ2
tag2 là con của tag
kiểu viền
kiểu đường viền trên cùng
kiểu đường viền bên phải
kiểu đường viền dưới cùng
đường viền bên trái
thẻ + thẻ2
tag2 trước thẻ
lớp
Các phần tử có lớp 'class'
chiều rộng biên giới
đường viền trên cùng
đường viền bên phải
đường viền dưới cùng chiều rộng
đường viền bên trái
nhãn. lớp
Tất cả các thẻ có lớp 'lớp'
#Tôi
Phần tử có id 'id'
Kích thước và màu sắc
thẻ#id
Gắn thẻ với id 'id'
kích thước tương đối
em. còn lại. Ví dụ. ch
vw. vh. vmin. vmax. %
bộ chọn giả
tích cực
Thêm phong cách cho phần tử hoạt động
kích thước tuyệt đối
cm. mm. Trong
px. điểm. máy tính
sau đó
Thêm nội dung sau phần tử
trước
Nội dung quảng cáo trước phần tử
Màu sắc
Hex #ff00ff
con đầu lòng
Thêm phong cách cho con đầu tiên
RGB rgb[255,0,255]
chữ cái đầu tiên
Thêm phong cách cho ký tự đầu tiên
định vị
dòng đầu tiên
Thêm phong cách cho dòng đầu tiên
Chức vụ
tuyệt đối. đã sửa. liên quan đến. tĩnh. thừa kế
tiêu điểm
Thêm phong cách cho phần tử tập trung
bay lượn
Thêm phong cách khi di chuột qua
trôi nổi
trái. đúng. không ai. thừa kế
liên kết
Thêm phong cách cho liên kết chưa được truy cập
đã đến thăm
Thêm phong cách cho liên kết đã truy cập
trên, phải,
dưới, trái
Đặt offset từ cạnh
Chữ
họ phông chữ
Chỉ định họ phông chữ
xa lạ
trái. đúng. cả hai. không ai. thừa kế
cỡ chữ
Chỉ định kích thước phông chữ
kiểu chữ
thông thường. chữ nghiêng. xiên. thừa kế
trưng bày
Chỉ định vị trí phần tử trong luồng tài liệu
biến thể phông chữ
thông thường. cổ phiếu nhỏ. thừa kế
tràn ra
dễ thấy. ẩn giấu. cuộn. tự động. thừa kế
nét chữ
-trọng lượng
thông thường. in đậm. táo bạo hơn. bật lửa. int [100- 900]. thừa kế
hiển thị
dễ thấy. ẩn giấu. sự sụp đổ. thừa kế
màu
Đặt màu của văn bản
chiều cao giữa các dòng
bình thường. int. %. kế thừa
chỉ số z
tự động. int. kế thừa
căn chỉnh văn bản
trái. đúng. trung tâm. biện minh. thừa kế
kích thước
Chiều cao
tự động. int. %. kế thừa
chữ-
trang trí
không ai. gạch dưới. gạch đầu dòng. đường cắt ngang. nháy mắt. thừa kế
chiều cao tối đa
không có. int. %. kế thừa
chiều rộng tối đa
không có. int. %. kế thừa
thụt lề văn bản
int. %. kế thừa
chiều cao tối thiểu
int. %. kế thừa
chữ-
biến đổi
không ai. viết hoa. chữ hoa. chữ thường. thừa kế
chiều rộng tối thiểu
int. %. kế thừa
chiều rộng
tự động. int. %. kế thừa
thẳng đứng
-căn chỉnh
int. %. đường cơ sở. phụ. siêu. hàng đầu. giữa văn bản trên cùng. đáy. văn bản dưới cùng. kế thừa
Khác
lai lịch
Định dạng
nền [màu] [hình ảnh]
[lặp lại] [vị trí]
trắng
-khoảng trống
thông thường. bây giờ. trước. xếp hàng trước. bọc trước. thừa kế
con trỏ
Đặt loại con trỏ
khoảng cách giữa các từ
thông thường. chiều dài. thừa kế
dấu ngoặc kép
Đặt loại dấu ngoặc kép
Thẻ
CSSCheatSheetNgười làm việc tự do? Tìm công việc tiếp theo của bạn.
Công việc lập trình viên CSS
Xem thông tin đầy đủ
Tomislav Bacinger
Kỹ sư phần mềm tự do
Giới thiệu về tác giả
Tomislav khám phá các khu vực chưa được khám phá, mang lại cảm giác về dữ liệu và tạo ra các bản đồ và trực quan hóa dữ liệu phong phú. Ông có nhiều kinh nghiệm trong phân tích dữ liệu và sắp xếp dữ liệu, kiến thức chuyên sâu về GIS với nền tảng không gian địa lý rộng và chuyên môn vững vàng trong thiết kế và phát triển các ứng dụng web và di động. Bản đồ và hình ảnh là niềm đam mê của anh ấy
Thuê Tomislav
Bình luận
Aderito
tài nguyên lớn
Aderito
tài nguyên lớn
Andrei Smirnov
Làm tốt lắm
Andrei Smirnov
Làm tốt lắm
Thương mại Tây Nam Bộ
Thanh danh. Không thể đơn giản hơn hai trang. Kích thước tệp khá lớn đối với pdf. không chắc điều gì đã gây ra điều này nhưng nó có thể chuyển được dưới dạng tệp văn bản