Thuộc tính Css-Thủ thuật

Thuộc tính tốc ký CSS là cách hiệu quả để cô đọng và rút ngắn mã CSS của bạn. Nếu được sử dụng một cách khôn ngoan, chúng có thể làm cho biểu định kiểu của bạn nhỏ hơn (vì vậy chúng sẽ tải nhanh hơn một chút) và dễ đọc hơn. Dưới đây là 5 thuộc tính tốc ký thường được sử dụng có thể giúp bạn tối ưu hóa biểu định kiểu của mình

1. Thuộc tính nền
2. Thuộc tính phông chữ
3. Đệm lề
4. tài sản biên giới
5. kiểu danh sách

Thuộc tính nền

Việc sử dụng màu sắc, hoa văn, họa tiết và hình ảnh trong nền khá phổ biến. CSS cung cấp các thuộc tính khác nhau để đạt được các hiệu ứng nền mong muốn như thay đổi màu sắc, bao gồm hình ảnh ở chế độ nền hoặc có nền có thể cuộn được. Có một bộ gồm 5 thuộc tính nền giúp dễ dàng làm việc với nền

//Individual background properties with default values element{ background-color: transparent; background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: top left; } 

Cùng với các thuộc tính được đề cập ở trên, CSS cung cấp một thuộc tính tốc ký gọi là nền. Thuộc tính nền cho phép bạn tổng hợp mã trên trong một khai báo duy nhất như sau

  //Shorthand property: background element{ background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position]; } 

Khi sử dụng thuộc tính tốc ký, điều quan trọng là phải tuân theo thứ tự của các giá trị thuộc tính. Xác định các giá trị thuộc tính trong cùng một trình tự như đã đề cập trong ký hiệu trên. Nếu bạn bỏ qua giá trị của bất kỳ thuộc tính nào, nó sẽ được thay thế bằng các giá trị mặc định. Hãy lấy một ví dụ

//Example: background property background: url('image.png'); 

Đoạn mã trên tương đương với việc chỉ định các giá trị sau

background-color: transparent; background-image: url('image.png'); background-repeat: repeat; background-attachment: scroll; background-position: top left; 

Ngay cả khi bạn không khai báo rõ ràng các giá trị cho các thuộc tính, thì các thuộc tính đó vẫn nhận các giá trị mặc định. Vì vậy, hãy cẩn thận khi sử dụng thuộc tính tốc ký nền vì các giá trị mặc định có thể phá vỡ thiết kế

Thuộc tính phông chữ

Đặt thuộc tính phông chữ là yêu cầu phổ biến nhất trong hầu hết các trường hợp. Chỉ định kích thước phông chữ và họ phông chữ là bản chất thứ hai của nhà thiết kế web để đảm bảo rằng các loại phù hợp với thiết kế và tăng khả năng đọc của trang web cùng một lúc. Về mặt này, W3C cung cấp 6 thuộc tính phông chữ và chỉ định các giá trị mặc định cho mỗi

 //Individual font properties with default values element{ font-style: normal; font-variant: normal; font-weight: normal; font-size: medium; line-height: normal; font-family: varies; } 

Cùng với tập hợp các thuộc tính phông chữ riêng lẻ, W3C cũng cung cấp một thuộc tính có tên là phông chữ cho phép bạn chỉ định tất cả các thuộc tính phông chữ trong một khai báo. Đây là ký hiệu của thuộc tính phông chữ

 //Shorthand Property: font element{ font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family]; } 

Điều quan trọng cần lưu ý là trong khi sử dụng thuộc tính phông chữ, điều quan trọng là phải tuân theo thứ tự, tôi. e. chỉ định kiểu phông chữ trước biến thể phông chữ và cuối cùng là họ phông chữ. Có thêm một quy tắc CSS được đính kèm với thuộc tính tốc ký phông chữ cho biết. Các giá trị font-size và font-family là bắt buộc. Nếu một trong các giá trị khác bị thiếu, các giá trị mặc định sẽ được chèn vào, nếu có

Hãy lấy một ví dụ

 //Example: font property font:italic bold 12px/30px arial,sans-serif; 

Đoạn mã trên sẽ đặt thuộc tính phông chữ như sau

font-style: normal; font-variant: italic; font-weight: bold; font-size: 12px/30px; font-family: arial,sans-serif; 

Đệm lề

Thuộc tính CSS Margin cho phép bạn đặt riêng các lề trên, dưới, trái và phải. CSS cũng cung cấp một thuộc tính tốc ký có tên là lề, cho phép bạn chỉ định tất cả các thuộc tính lề trong một thuộc tính

Thủ thuật tương tự cũng áp dụng cho các thuộc tính đệm. Thuộc tính đệm đặt riêng phần đệm cho từng bên và  thuộc tính tốc ký đệm cho phép bạn khai báo phần đệm cho tất cả các bên trong một câu lệnh

Đây là phần khai báo thuộc tính lề theo sau là ký hiệu của thuộc tính tốc ký lề

________số 8

Thuộc tính tốc ký lề (và phần đệm) có thể được sử dụng theo một trong bốn cách sau

1.   //Shorthand property: background element{ background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position]; } 

   6 đặt lề theo trình tự theo chiều kim đồng hồ: lề trên 20px, lề phải 40px, lề dưới 60px và lề trái 80px

2.   //Shorthand property: background element{ background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position]; } 

   7 thêm lề 25px vào trên, lề 75px vào dưới và lề 50px vào trái và phải

3.   //Shorthand property: background element{ background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position]; } 

   8 thêm lề 25px vào trên và dưới và lề 50px vào bên trái và bên phải

4.   //Shorthand property: background element{ background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position]; } 

   9 đặt lề 25px ở cả bốn phía

Hãy xem một ví dụ để xem nó hoạt động như thế nào đối với phần đệm. Nếu bạn muốn đặt phần đệm như sau

  //Shorthand property: background element{ background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position]; } 

3

đơn giản, sử dụng đoạn mã sau

  //Shorthand property: background element{ background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position]; } 

0

tài sản biên giới

CSS có thuộc tính tốc ký đường viền để bao gồm các thuộc tính đường viền trong một khai báo. Ở dạng đơn giản nhất, thuộc tính đường viền là sự kết hợp của ba thuộc tính. chiều rộng, phong cách và màu sắc

  //Shorthand property: background element{ background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position]; } 

1

có thể được thay thế bằng

//Example: background property background: url('image.png'); 

0
Tuy nhiên, quy tắc CSS để định dạng đường viền mở rộng tiện ích của thuộc tính tốc ký đường viền bằng cách cho phép nhà phát triển định dạng đường viền . Dưới đây là một số ví dụ về việc sử dụng thuộc tính đường viền để định dạng các mặt riêng lẻ.

• Tuyên bố mỗi bên khác nhau.

    //Shorthand property: background element{ background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position]; } 

  2
• Chiều rộng đường viền khác nhau ở mỗi bên.

    //Shorthand property: background element{ background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position]; } 

  3
• Màu đường viền khác nhau ở các mặt khác nhau.

    //Shorthand property: background element{ background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position]; } 

  4

kiểu danh sách

Thuộc tính tốc ký được sử dụng cho danh sách là thuộc tính kiểu danh sách cho phép bạn chỉ định kiểu danh sách, vị trí kiểu danh sách và hình ảnh kiểu danh sách (theo thứ tự cụ thể này) trong một khai báo

  //Shorthand property: background element{ background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position]; } 

5

nền tốc ký thủ thuật css biên giới tốc ký thủ thuật css css tốc ký thuộc tính thủ thuật css nền

Điều gì đã xảy ra với thủ thuật CSS?

Các thuộc tính của CSS là gì?

Giá trị thuộc tính CSS là gì?

Thuộc tính logic là gì?