Mục lục:
Video: [Học CSS - 3] Vùng chọn và các kiểu vùng chọn cơ bản 2025
Trong định nghĩa kiểu CSS (hoặc quy tắc ), bạn có thể mô tả các vị trí và kích cỡ theo nhiều cách, sử dụng các đơn vị đo khác nhau. Bạn thường có thể chọn bất kỳ đơn vị bạn muốn, mặc dù một số loại đo cụ thể nhất định làm việc tốt nhất trong các tình huống nhất định.
Ví dụ, nhiều nhà thiết kế làm việc với giấy và mực in được sử dụng để chỉ các kiểu chữ trong điểm . Một điểm là chiều dài tuyệt đối: 1/72 inch. Sử dụng các thông số kích thước loại tuyệt đối cho một tạp chí hoặc sách chỉ hoạt động tốt - sau khi tất cả, người dùng không thể co lại, kéo dài, hoặc thay đổi tỷ lệ co của một trang trong một cuốn sách. ( Tỷ lệ khung hình là tỷ lệ giữa chiều cao và chiều rộng). Các trình duyệt mặc dù có thể được thay đổi kích cỡ theo ý thích. Nếu bạn kéo một bên của trình duyệt, bạn đang thay đổi nó, làm cho nó mỏng hơn hoặc béo hơn. Nói cách khác, bạn thay đổi hình dạng, tỷ lệ co, từ, nói, hình vuông sang một hình chữ nhật.
Đối với phông chữ hiển thị trong trình duyệt, đơn vị đo tương đối cao hơn các điểm truyền thống. Không giống như phép đo tuyệt đối như điểm hoặc inch, một đơn vị tương đối cân bằng với kích thước phông chữ. Kết quả là bạn nhận được nhiều kết quả dự đoán hơn trong các trang Web với các đơn vị đo lường tương ứng với kích thước loại. Một đơn vị đo tương đối hữu ích của phép đo cho một nhà thiết kế Web là em . Mặc dù chúng rất hữu ích, nhưng trên thực tế, hầu hết các nhà thiết kế vẫn sử dụng điểm hoặc điểm ảnh khi xác định kích thước kiểu. Có lẽ đó chỉ là thói quen, tuy nhiên trong bất kỳ trường hợp nào, kết quả cũng thường thấy trong hầu hết các trình duyệt.
Đo chiều dài
Ở đây chúng tóm lại … tất cả các đơn vị đo chiều dài:
- px (pixels): Pixel là đơn vị nhỏ nhất trên màn hình - các dấu chấm đôi khi bạn có thể thấy nếu bạn đến gần với một TV. Ví dụ: đặt độ phân giải màn hình của bạn lên 800x600 có nghĩa là 800 pixel rộng 600 pixel. Pixel có thể là một cách hữu ích để xác định kích thước phông chữ, nhưng nhược điểm là nếu bạn chỉ định pixel, sẽ ghi đè tùy chọn kích thước phông chữ tùy chỉnh trong Internet Explorer - vì vậy người dùng không thể điều chỉnh từ "lớn" đến "lớn nhất". Tuy nhiên, bạn nên luôn luôn sử dụng px để mô tả kích thước hình ảnh . Hình ảnh có thể đo bằng pixel (bạn có thể thấy các phép đo bằng cách tải hình ảnh vào bất kỳ ứng dụng đồ hoạ nào).
- pt (points): Một điểm bằng 1/72 inch. Điểm (và picas) là các phép đo chữ cổ điển. Hầu hết các trình duyệt mặc định là một kiểu chữ serif 12 điểm.
- pc (picas): Một pica bằng 12 điểm.
- mm (milimét): Một milimet.0394 inch, do đó, một inch có chứa khoảng 26 mm. Một cm có 10 mm. Phần lớn thế giới sử dụng hệ thống số liệu này.
- cm (cm): Một centimet là. 3937 inch, do đó một inch có chứa khoảng 2 1/2 cm.
- inch (inch): Inches là một đơn vị trong hệ thống Tiếng Anh hoặc hoàng đế - được sử dụng ở Hoa Kỳ. Anh và một vài tàn tích của thời thuộc địa cũng ở lại với hệ thống đế quốc trong một thời gian dài, nhưng gần đây đã chen lồn. Chính phủ Anh đã tuân thủ vào năm 2000 với hệ thống đo lường châu Âu và hiện nay là một tội phạm hình sự để bán bằng đồng bảng Anh ở bất cứ nơi nào trong vương quốc của Hoàng thái tử. Một người đàn ông ở Cornwall, ví dụ, báo cáo đã phải trả chi phí tòa án sau khi bị bắt bán cá thu ở mức 1 bảng Anh. 50 pound.
-
Một inch dựa trên khoảng cách giữa đầu ngón tay cái đầu tiên và phần cuối của ngón tay cái của một vị vua đã quên. Trong 50 năm qua, những nỗ lực liên tục để giáo dục và lập pháp hệ thống hoàng gia ủng hộ số liệu đã thất bại trong U. S …
- em: Em là một đơn vị đo lường có nguồn gốc từ chiều rộng gần đúng của chữ cái < m của phông chữ. Đây được coi là cách tốt nhất để xác định kích thước phông chữ trong CSS, mặc dù vài nhà thiết kế làm theo hướng dẫn này. Ví dụ (chiều cao x):
- Ví dụ như chiều cao x, hoặc chiều cao của chữ thường x , phông chữ của phần tử hiện tại.) Các trình duyệt thường phân chia chúng một nửa để có được chiều cao cũ. Đơn vị đo lường này hiện không hữu ích như em vì nó không phải là dự đoán được một mức trung bình cho tất cả các kiểu chữ.
- Phần trăm là tuyệt vời cho việc chỉ định kích thước tương đối (nó có thể liên quan đến tổ tiên, cha mẹ, vân vân). Các đơn vị đo lường không phân biệt chữ hoa chữ thường. Bạn có thể tận dụng chúng hay không, như bạn muốn. Tương tự như vậy, trong IE, bạn có thể bao gồm một dấu cách giữa số và đơn vị của nó, hoặc không: Ví dụ, 2 in tương đương với 2in. Các trình duyệt khác không thích không gian. Để đơn giản, sử dụng chữ thường và tránh không gian không cần thiết thường là một ý tưởng hay khi làm việc với CSS. Chỉ cần nhập vào thói quen của các định dạng 2in hoặc 24px và bạn sẽ được sử dụng tốt, trừ khi các ủy ban CSS quyết định tự đảo ngược trong tương lai.
.
Có lẽ bạn đã nghe từ m-dash hoặc em-dash, đó là dấu gạch ngang thường được sử dụng trong xuất bản. Đây là một đường ngang - như thế này - tương đương với chiều rộng của chữ cái m (đây không phải là một sự tương đương chính xác với nhiều kiểu chữ). Cũng có một en-dash. Đoán xem nó dựa vào cái gì.
đến kiểu chữ. Kết quả tỷ lệ thuận với các tính chất khác của kiểu chữ và văn bản xung quanh. Ngoài ra, các thông số kỹ thuật tương đối như em cho phép những người có khuyết tật mở rộng phông chữ trong trình duyệt của họ khi cần thiết. Thông số cố định như px hoặc pt không cung cấp cho người dùng tùy chọn này. Em và cũ là đơn vị đo lường truyền thống, nhưng ý nghĩa của chúng trong CSS được sửa đổi một chút. Đối với một điều, máy tính tính toán trước bằng cách đơn giản phân chia chúng một nửa. Điều này dễ tính hơn, nhưng chỉ là một xấp xỉ cho hầu hết các phông chữ. Em trong CSS là kích thước phông chữ bằng pixel. Điều này rất hữu ích vì bạn có thể chỉ định các đơn vị em và dựa vào chúng có liên quan đến phông chữ của phần tử cha (hoặc khác). Dưới đây là một thử nghiệm để tìm hiểu cách em tương đối đến một phần tử khác. Trong đoạn mã này, văn bản bên trong phần tử được định nghĩa là 26px, nhưng văn bản bên trong phần tử của đoạn được định nghĩa là 1.5em, hoặc, cách khác, một lần gấp rưỡi kích thước của cha mẹ. Sau đó trong mã HTML, phần tử của cơ thể được đính kèm (parented). Do đó, văn bản đoạn văn được hiển thị ở 1. 5 x 26 pixel (hoặc 39 pixel).
body {font-size: 26px;}
p (font-size: 1.5em;} p. abs {font-size: 39px;} một số văn bản
một số văn bản (1.5 em của cơ quan phụ huynh).
một số văn bản (39 pixel).
Văn bản trong phiên bản lớp abs của
được hiển thị với kích thước tương tự như
thông thường. Phần tử này là phần tử cha của
, và
được định nghĩa là 1. 5em của cha / mẹ nó. Cơ quan phụ huynh sử dụng 26 pixel làm kích thước văn bản, do đó, 26 × 1. 5 kết quả trong 39 pixel.
