Thuộc tính trong CSS
Có nhiều thuộc tính CSS mà bạn có thể sử dụng. quá nhiều để giới thiệu tất cả chúng ngay lập tức (hoặc thậm chí để nhớ tất cả chúng và cách chúng hoạt động), nhưng chúng ta nên xem thêm một vài thứ nữa để chúng ta thực sự có thể làm điều gì đó hữu ích với CSS Show
Tham chiếu CSSGiống như chúng ta đã làm với các phần tử HTML và Tham chiếu HTML, chúng ta sẽ sử dụng Tham chiếu CSS cho tất cả các phần của CSS. Bạn nên ghi nhớ các tài liệu tham khảo, nhưng chúng tôi có thể giới thiệu một số thuộc tính chính ngay bây giờ Chúng tôi đã thấy Bạn cũng sẽ nhận thấy trên trang tham khảo cho từng thuộc tính CSS có một phần về “hỗ trợ trình duyệt”. Đây không phải là vấn đề lớn với HTML kế hoạch, nhưng với CSS, chúng ta phải biết một chút về những thuộc tính nào được hỗ trợ bởi các trình duyệt web phổ biến. Các tính năng mới đã được thêm vào với các phiên bản CSS mới và không phải tất cả đều được mọi trình duyệt hỗ trợ hoàn hảo Trong khóa học này, chúng ta sẽ chỉ thảo luận về những cái được hỗ trợ tốt, nhưng nếu bạn đang quét tham chiếu cho những cái khác, hãy xem nhanh bảng tương thích đó để đảm bảo nó sẽ hoạt động như quảng cáo Thuộc tính CSS hữu íchMột lần nữa, chúng tôi chắc chắn sẽ không đề cập đến mọi thuộc tính CSS thú vị ở đây, nhưng có thể giới thiệu một vài thuộc tính (với các liên kết đến tham chiếu CSS cho từng thuộc tính) text-align Như chúng ta có thể thấy, text-align có thể được sử dụng để thay đổi lời biện minh cho văn bản. Các giá trị có thể có là h2 { padding: 1em; border: medium dashed black; background-color: grey; }0, h2 { padding: 1em; border: medium dashed black; background-color: grey; }1, h2 { padding: 1em; border: medium dashed black; background-color: grey; }2 và h2 { padding: 1em; border: medium dashed black; background-color: grey; }3 (để chứng minh đầy đủ với lề trái hoặc lề phải rách rưới). h2 { padding: 1em; border: medium dashed black; background-color: grey; }4Được sử dụng để kiểm soát văn bản in nghiêng. các giá trị có thể bao gồm h2 { padding: 1em; border: medium dashed black; background-color: grey; }5 và h2 { padding: 1em; border: medium dashed black; background-color: grey; }6 (đối với chữ không in nghiêng). h2 { padding: 1em; border: medium dashed black; background-color: grey; }7Được sử dụng để kiểm soát văn bản in đậm. các giá trị có thể bao gồm h2 { padding: 1em; border: medium dashed black; background-color: grey; }8 và h2 { padding: 1em; border: medium dashed black; background-color: grey; }6 (đối với không in đậm). ul { margin: 0em; padding: 0em; }0Được sử dụng để đặt màu (thường là của văn bản) cho phần tử. Ví dụ: “ ul { margin: 0em; padding: 0em; }1”. Chúng ta sẽ thảo luận nhiều hơn về giá trị màu sắc trong Màu sắc trong CSS. ul { margin: 0em; padding: 0em; }2Được sử dụng để đặt màu nền (phía sau văn bản) cho phần tử. Ví dụ: “ ul { margin: 0em; padding: 0em; }3”. ul { margin: 0em; padding: 0em; }4 ul { margin: 0em; padding: 0em; }5 ul { margin: 0em; padding: 0em; }6Những cái này được sử dụng để kiểm soát đường viền xung quanh một phần tử (tương ứng là chiều rộng của đường, loại đường và màu của đường). Bạn có thể sử dụng các thuộc tính này một cách riêng biệt hoặc sử dụng thuộc tính tốc ký ul { margin: 0em; padding: 0em; }7 để kết hợp các thuộc tính này thành một dòng (đưa ra ba giá trị theo bất kỳ thứ tự nào). Hai điều này là tương đương figure { border-style: solid; border-width: 3px; border-color: red; } figure { border: solid red 3px; } ul { margin: 0em; padding: 0em; }8Kiểm soát lượng không gian theo chiều dọc mà mỗi dòng văn bản chiếm (mà bạn có thể gọi là “dẫn đầu”). Ví dụ: “ ul { margin: 0em; padding: 0em; }9” đặt khoảng cách giữa dấu cách đơn và dấu cách đôi (và có thể là giá trị mặc định tốt. p { line-height: 1.5em; } blockquote { margin-left: 2em; border-left: 0.25em solid black; } img#ourlogo { width: 120px; height: 160px; float: left; margin-left: 1em; }0Đặt phông chữ cho văn bản. Bạn nên đưa ra danh sách các phông chữ được thử theo thứ tự cho đến khi trình duyệt tìm thấy một phông chữ có sẵn trên hệ thống của người dùng. Có năm họ phông chữ chung và danh sách của bạn phải kết thúc bằng một trong số họ vì nó được đảm bảo hoạt động. Ví dụ: “ p { line-height: 1.5em; } blockquote { margin-left: 2em; border-left: 0.25em solid black; } img#ourlogo { width: 120px; height: 160px; float: left; margin-left: 1em; }1” Mô hình hộp CSSCó một số thuộc tính trong CSS thường được nhóm lại với nhau thành thuộc tính hộp kiểm soát cách trình duyệt bố cục trang bằng mô hình hộp CSS Các thuộc tính này có thể không trực quan ngay lập tức, nhưng không quá khó. Giả sử chúng ta có một phần tử trên trang (như một p { line-height: 1.5em; } blockquote { margin-left: 2em; border-left: 0.25em solid black; } img#ourlogo { width: 120px; height: 160px; float: left; margin-left: 1em; }2). Here are the parts of its “box” when drawn:Hình minh họa mô hình hộp CSSVì vậy, mã CSS này h2 { padding: 1em; border: medium dashed black; background-color: grey; } … sẽ làm cho có nền màu xám, với khoảng cách p { line-height: 1.5em; } blockquote { margin-left: 2em; border-left: 0.25em solid black; } img#ourlogo { width: 120px; height: 160px; float: left; margin-left: 1em; }3 giữa văn bản và đường viền. Không gian bên trong đường viền (ngay cả khi nó vô hình vì bạn không có) được bao phủ bởi màu nền và được kiểm soát bởi thuộc tính p { line-height: 1.5em; } blockquote { margin-left: 2em; border-left: 0.25em solid black; } img#ourlogo { width: 120px; height: 160px; float: left; margin-left: 1em; }4Nếu chúng ta muốn có thêm không gian ngăn cách phần tử này (và đường viền của nó) với những thứ xung quanh nó, chúng ta sẽ phải tăng các giá trị p { line-height: 1.5em; } blockquote { margin-left: 2em; border-left: 0.25em solid black; } img#ourlogo { width: 120px; height: 160px; float: left; margin-left: 1em; }5Rất dễ nhầm giữa margin và padding, nhất là khi không có viền hoặc màu nền. Nếu bạn đang cố gắng thay đổi không gian xung quanh một phần tử (đặc biệt là khi CSS mặc định của trình duyệt có một số khoảng trống ở đó), hãy thử đặt cả lề và phần đệm thành 0 và thực hiện từ đóul { margin: 0em; padding: 0em; }Đơn vị CSSBạn có thể nhận thấy phép đo p { line-height: 1.5em; } blockquote { margin-left: 2em; border-left: 0.25em solid black; } img#ourlogo { width: 120px; height: 160px; float: left; margin-left: 1em; }3 ở trên. p { line-height: 1.5em; } blockquote { margin-left: 2em; border-left: 0.25em solid black; } img#ourlogo { width: 120px; height: 160px; float: left; margin-left: 1em; }7 là một đơn vị đo lường (độ dài) trong CSS. Dưới đây là một số đơn vị phổ biến cần một chút giải thích p { line-height: 1.5em; } blockquote { margin-left: 2em; border-left: 0.25em solid black; } img#ourlogo { width: 120px; height: 160px; float: left; margin-left: 1em; }7Cỡ chữ hiện tại. nếu văn bản hiện tại là 12 điểm thì đây sẽ là 12 điểm. Một đơn vị khác, một p { line-height: 1.5em; } blockquote { margin-left: 2em; border-left: 0.25em solid black; } img#ourlogo { width: 120px; height: 160px; float: left; margin-left: 1em; }9 bằng một nửa kích thước văn bản. CSS Properties CSS Properties
CSS Properties CSS Properties
Càng nhiều càng tốt, tôi khuyên bạn nên chỉ định các phép đo bằng cách sử dụng p { line-height: 1.5em; } blockquote { margin-left: 2em; border-left: 0.25em solid black; } img#ourlogo { width: 120px; height: 160px; float: left; margin-left: 1em; }7 và p { line-height: 1.5em; } blockquote { margin-left: 2em; border-left: 0.25em solid black; } img#ourlogo { width: 120px; height: 160px; float: left; margin-left: 1em; }9. Đây là những đơn vị duy nhất không yêu cầu một số loại ghi chú mô tả khi chúng là lời nói dối. Nếu bạn suy nghĩ trong p { line-height: 1.5em; } blockquote { margin-left: 2em; border-left: 0.25em solid black; } img#ourlogo { width: 120px; height: 160px; float: left; margin-left: 1em; }7s, bạn sẽ suy nghĩ đúng đắn về cách một trang có thể chia tỷ lệ tùy thuộc vào màn hình/phông chữ/bất kỳ kích thước nào hiện tại Một ngoại lệ là khi xử lý ảnh bitmap. chúng vốn có kích thước bằng pixel, vì vậy điều đó có lẽ hợp lý nhất p { line-height: 1.5em; } blockquote { margin-left: 2em; border-left: 0.25em solid black; } img#ourlogo { width: 120px; height: 160px; float: left; margin-left: 1em; } Thí dụĐây là một trang ví dụ mà chúng ta có thể tạo kiểu với một số thuộc tính ở trên CSS Properties CSS Properties … và một CSS đi kèm với nó body { font-family: "Helvetica", sans-serif; } h1 { text-align: center; font-weight: bold; background-color: silver; color: teal; padding: 0.25em; } h2 { border: medium dotted teal; font-weight: normal; padding: 0.1em; } Bạn có thể tự xem trang đó với biểu định kiểu hoặc trong trình duyệt của tôi, nó trông như thế này Khi tạo biểu định kiểu cho một trang, hãy nhớ rằng bạn luôn thêm vào kiểu mặc định của trình duyệt. Trong ví dụ này, đặt CSS Properties CSS Properties
.Chiều rộng của đường viền được chỉ định là CSS Properties CSS Properties GoalsThis is a page that we're using to demonstrate various CSS properties and techniques. Because of that, it's probably going to be ugly. ResultsYup, it's turning out rather ugly, but it's important to demonstrate some CSS stuff. Here are some of the new things:
CSS Properties CSS Properties
Thử trải nghiệm với CSS trên trang này (hoặc trang bạn đã tạo). Không gì thay thế được việc dùng thử một số nội dung và xem nó ảnh hưởng đến trang như thế nào Có bao nhiêu thuộc tính trong CSS?W3Schools liệt kê 228 trong số họ.
Thuộc tính và giá trị trong CSS là gì?Thuộc tính CSS là các kiểu được sử dụng trên các bộ chọn đã chỉ định . Chúng được viết trước các giá trị trong bộ quy tắc CSS và được phân tách khỏi các giá trị thuộc tính bằng dấu hai chấm. Các bộ chọn và phần tử HTML khác nhau có các thuộc tính khác nhau. Một số thuộc tính là phổ biến và có thể được sử dụng trên mọi bộ chọn. |