CSS3 Các thuộc tính - xác ướp

Một phần của CSS3 Đối với các gánh nặng Cheat Sheet

Một số thuộc tính CSS3 hiếm khi được sử dụng; nhiều người khác được sử dụng thường xuyên đủ để các nhà phát triển nên biết về họ. Thuộc tính và các giá trị liên quan của chúng tạo thành cơ sở của định dạng bạn thực hiện bằng cách sử dụng CSS3. Dưới đây là danh sách các thuộc tính bạn sẽ thấy mình sử dụng thường xuyên nhất khi làm việc với nền CSS3:

• : Xác định nội dung cho nền của một phần tử. Giá trị cho thuộc tính này thường là một hàm, chẳng hạn như linear-gradient ().

• background-attachment : Chỉ định cách một hình ảnh tương tác với phần còn lại của một phần tử. Bạn sử dụng các từ khoá sau để cấu hình thuộc tính này: di chuyển, cố định và địa phương.

• background-color : Chỉ định màu nền của một thực thể, chẳng hạn như màu trang bên dưới. Bạn có thể sử dụng một trong các kỹ thuật này để xác định màu nền: giá trị thập lục phân, tên màu, chức năng rgb (), chức năng rgba (), chức năng hsl () hoặc hsla ().

  background-image

• : Cung cấp vị trí của một tài nguyên để sử dụng làm hình nền cho một phần tử. Bạn sử dụng chức năng url () để xác định vị trí. background-repeat

• : Cho phép hình nền lặp lại hoặc không lặp lại (sử dụng từ khoá không lặp lại) nếu cần. Bạn cũng có thể chọn lặp lại hình ảnh chỉ với hướng ngang (lặp lại-x) hoặc dọc (lặp lại-y).

  nền-size
  :

• Xác định kích thước của hình nền là một giá trị tuyệt đối hoặc một tỷ lệ phần trăm. border :

• Xác định loại đường biên cần tạo bằng cách chỉ định một trong những từ khóa sau: none, hidden, dotted, dashed, solid, double, groove, giòn, inset, outset, hoặc thừa kế. Cũng có thể thay đổi từng phong cách của từng cạnh của một đường biên bằng cách sử dụng các thuộc tính kiểu đường biên, kiểu đường viền phía trên, thuộc đường biên, và thuộc tính đường biên. border-color :

• Chỉ định màu sắc của đường biên xung quanh một thực thể. Bạn có thể sử dụng một trong các kỹ thuật này để xác định màu nền: giá trị thập lục phân, tên màu, chức năng rgb (), chức năng rgba (), chức năng hsl () hoặc hsla (). border-image :

• Định nghĩa một hình ảnh sử dụng cho nội dung đường biên chứ không phải kiểu đường. Bạn thường sử dụng hàm url () để xác định giá trị của thuộc tính này. bán kính biên :

• Xác định xem các góc của đường viền được làm tròn và số lượng làm tròn. Khi tạo một góc tròn, bạn chỉ định số lượng làm tròn. Để loại bỏ một góc tròn, sử dụng từ khóa none. biên độ rộng :

• Xác định chiều dày của đường viền xung quanh một phần tử. Bạn có thể xác định chiều rộng đường viền bằng cách sử dụng từ khoá (trung bình, dày, hoặc mỏng) hoặc đo lường thực tế. cột đếm :

• Chỉ định số lượng các cột để tạo. Chiều rộng cột tự động dao động khi người dùng thay đổi kích thước cửa sổ trình duyệt (hoặc trình duyệt sẽ hiển thị một thanh cuộn ngang để làm cho nó có thể cuộn qua các cột khi có chiều rộng cụ thể cũng được thiết lập). điền cột :

• Xác định cách trình duyệt điền vào các cột (điền vào từng cột một lần hoặc điền đầy đủ các cột cùng một lúc với một lượng nội dung). khoảng cách cột :

• Tạo khoảng trống giữa các cột để dễ dàng xác định nơi một cột kết thúc và cột kia bắt đầu. nguyên tắc cột :

• Tạo ra một quy tắc giữa các cột để người dùng có thể thấy một dấu tách vật lý. Thuộc tính này bao gồm màu sắc, phong cách và chiều rộng. cột-quy tắc-màu :

• Xác định màu của quy tắc được sử dụng giữa các cột. kiểu cột-quy tắc :

• Xác định kiểu của quy tắc được sử dụng giữa các cột. column-rule-width :

• Xác định độ rộng của quy tắc được sử dụng giữa các cột. cột-khoảng :

• Chỉ định số cột mà một đối tượng có thể mở rộng. chiều rộng cột :

• Chỉ định chiều rộng của cột. cột :

• Cung cấp một phương pháp viết tắt để xác định cả tính cột và chiều rộng cột. màu :

• Chỉ định màu tiền cảnh của một thực thể, chẳng hạn như văn bản. Bạn có thể sử dụng một trong những kỹ thuật này để xác định màu sắc: giá trị thập lục phân, tên màu, chức năng rgb (), chức năng rgba (), chức năng hsl () hoặc hsla (). nội dung :

• Xuất văn bản hoặc tài nguyên khác được chỉ định như là một phần của phần trình bày phần tử. Thuộc tính này thường được sử dụng để thực hiện các tác vụ như thêm mũi tên vào các phần tử trực quan. Bạn chỉ định giá trị bằng cách sử dụng hàm url (), số ký tự Unicode có dấu gạch chéo ngược (như 27A8) hoặc từ khóa. hiển thị :

• Chỉ định cách hiển thị các loại phần tử nhất định trên trang. Bạn có thể sử dụng bất kỳ từ khóa nào sau đây để xác định kiểu hiển thị: none, hộp (hoặc flex-box), block, flex, inline, inline-block, inline-flex, inline-table, list-item, phụ đề, bảng-cell, bảng-cột, bảng-cột-nhóm, bảng-footer-nhóm, bảng bảng tiêu đề-nhóm, bảng hàng, hay bảng hàng-nhóm. float :

• Cho phép một hình ảnh trôi theo hướng được chỉ định. Bạn xác định thuộc tính này bằng các từ khóa sau: trái, phải hoặc không. font-family :

• Định nghĩa tên của phông chữ. Ba là ba loại phông chữ thường được sử dụng như là một phần của CSS (và hầu hết các trang CSS đều sử dụng cả ba trừ khi bạn chỉ định thuộc tính src): cụ thể, Web an toàn và chung chung. font-size :

• Xác định kích thước của phông khi so sánh với phông chữ khác trên trang hoặc cung cấp một kích thước phông chữ cụ thể. Bạn có thể sử dụng một trong các kỹ thuật này để xác định kích thước phông chữ: kích thước cụ thể, từ khóa (chẳng hạn như lớn hoặc lớn hơn) và tỷ lệ phần trăm. font-style :

• Xác định kiểu phông chữ mà trình duyệt tạo ra. Trình duyệt phải hỗ trợ kiểu dáng và phông chữ phải cung cấp kiểu dáng để cho thuộc tính này có hiệu lực. Các kiểu chữ kiểu chữ là: bình thường, nghiêng, xiên (thường là chữ nghiêng mạnh hơn), và kế thừa. font-variant :

• Chỉ định liệu phông chữ phải được trình bày ở dạng biến thể hay không. Không phải tất cả các trình duyệt và phông chữ đều hỗ trợ tính năng này. Các từ khoá cho thuộc tính này là thông thường, chữ hoa và thừa kế. font-weight :

• Xác định độ bóng tối tương đối của phông chữ và chiều rộng của nét. Có hai phương pháp xác định trọng lượng phông chữ: số và từ khóa (như đậm). chiều cao :

• Cho biết kích thước theo chiều dọc của một phần tử. còn lại :

• Cho biết vị trí bên trái của phần tử trên một trang. list-style :

• Xác định sự xuất hiện của một phần tử trong danh sách. Bạn có thể xác định loại đánh dấu để sử dụng, vị trí của các điểm đánh dấu, và liệu các điểm đánh dấu thực sự được tạo bằng hình ảnh hay không, chứ không phải là các ký tự tiêu chuẩn. margin :

• Chỉ định khoảng trống giữa đường biên của một phần tử và lề của một phần tử khác. margin-bottom :

• Cho biết vị trí đáy của một lề phần tử trên một trang. margin-left :

• Cho biết vị trí bên trái của một lề phần tử trên một trang. margin-top :

• Cho biết vị trí trên cùng của một lề phần tử trên một trang. padding :

• Chỉ định khoảng trống giữa đường biên của một phần tử và nội dung bên trong phần tử. vị trí :

• Cho biết vị trí các phần tử trên trang. Bạn chỉ định vị trí sử dụng các từ khoá này: tĩnh (các yếu tố được chảy), tuyệt đối (các phần tử xuất hiện ở một vị trí cụ thể, ngay cả khi vị trí đó sẽ ghi đè lên một phần tử khác), cố định (các phần tử được đặt liên quan đến cửa sổ trình duyệt) relative (các phần tử được đặt liên quan đến các phần tử cha). text-align :

• Chỉ định vị trí của văn bản trên một dòng. Bạn chỉ định liên kết bằng cách sử dụng các từ khoá justify, right, center và left. text-decoration :

• Định nghĩa việc bổ sung một đặc tính, chẳng hạn như gạch chân, overline, hoặc line-through vào phông chữ. Thuộc tính này hoạt động ở mọi nơi, vì vậy bạn không cần phải lo lắng xem ai đó xem trang của bạn trên truyền hình hay sử dụng điện thoại thông minh sẽ nhận được thông báo của bạn hay không. text-tràn :

• Xác định hành động sẽ xảy ra khi văn bản tràn hộp được sử dụng để chứa nó. Giá trị chấp nhận được là: clip, hình bầu dục, hoặc một giá trị chuỗi bạn cung cấp. text-shadow :

• Hiển thị một bóng tối của các ký tự đích có cùng độ rộng với ký tự đích. Định vị, độ mạnh và màu sắc của bóng được xác định bởi các thuộc tính sau: h-shadow (xác định vị trí ngang của bóng), v-shadow (xác định vị trí thẳng đứng của bóng), blur (xác định rõ nét văn bản bóng tối), và màu sắc (xác định màu sắc của phác thảo). tầm nhìn :

• Chỉ rõ mức độ hiển thị của một phần tử. Bạn sử dụng các từ khoá sau để định cấu hình thuộc tính này: hiển thị, ẩn hoặc sụp đổ. chiều rộng :

• Cho biết kích thước ngang của một phần tử. word-break :

• Xác định cách văn bản được bao bọc trong một hộp chứa khi làm việc với một ngôn ngữ không phải là CJK (tiếng Trung Quốc tiếng Hàn). Giá trị chấp nhận được là: bình thường, phá vỡ tất cả và dấu nối. word-wrap :

• Xác định cách văn bản bị hỏng và sau đó được quấn vào dòng kế tiếp trong một hộp chứa khi làm việc với một ngôn ngữ không phải là CJK. Các giá trị được chấp nhận là: bình thường và từ vỡ.