làm người dạy tốt

Những sai lầm nghiêm trọng người mới làm css

Written by Linh Mr on October 9, 2013. Posted in Tạp chí đồ họa

Nếu bạn là một chuyên nghiệp, nó dễ dàng để quên đi sự nhầm lẫn bạn cảm thấy khi bạn chỉ mới bắt đầu học CSS. Chỉ để cho vui, chúng ta hãy cố gắng và ghi nhớ một số những khoảnh khắc kỳ lạ chút bối rối. Tôi sẽ bắt đầu bằng cách liệt kê một số những người ngẫu nhiên tôi nhớ và chọn trong khi giúp đỡ người khác gần đây. csse***logo2 Đây không phải là những điều rất lớn lớn như bố trí bị phá vỡ trong trình duyệt IE hoặc tiền tố nhà cung cấp, bạn nên sử dụng. Của các công cụ cơ bản ít, giống như sự khác biệt nhỏ trong cú pháp thay đổi ý nghĩa trong một way.Stuff lớn
Tag qualifying

Sự khác biệt giữa hai điều này là gì?
.class { }
p.class { }
Người đầu tiên sẽ chọn bất kỳ phần tử với tên lớp. Điều thứ hai sẽ chỉ chọn các phần tử đoạn với tên lớp. Đầu tiên là tổng quát hữu ích hơn. Kiểu dáng bạn áp dụng với lớp học mà có thể hữu ích cho nhiều loại yếu tố. Thậm chí nếu nó không phải là ngày hôm nay, nó có thể là ngày mai. Nó cũng nhanh hơn cho trình duyệt để hiểu và áp dụng. Đó là một trường hợp khá hiếm hoi mà bạn sẽ muốn sử dụng ví dụ thứ hai. Nó sẽ chỉ được nếu bạn muốn sử dụng lại tên lớp giống nhau cho nhiều yếu tố nhưng có những thứ khác nhau.
p.stand-out { background: yellow; }
span.stand-out { font-weight: bold; }
Chọn vấn đề

Tại sao có những khác biệt lớn này?
.class div { color: red; }

div.class { color: green; }
Ví dụ đầu tiên là rất khác nhau, vì các nhân vật không gian giữa các lớp và. Div. Các công cụ trước khi không gian và các công cụ sau khi không gian lựa chọn các yếu tố khác nhau. Phần đầu tiên là “chọn bất kỳ phần tử với tên lớp” và phần thứ hai là “chọn bất kỳ div”. Đặt chúng lại với nhau với một không gian và bạn nhận được “chọn bất kỳ div đó là một hậu duệ của bất kỳ phần tử với tên lớp”. Thứ hai không liên quan đến bất kỳ mà doanh nghiệp hậu duệ. Đó là một chọn thẻ đủ điều kiện như đã nói ở trên. Nếu CSS trên CSS duy nhất trên trang kết quả sẽ được như thế này trong thiết kế website:


Would be red

Would be red
Would be green

Would be black
Tại sao sử dụng ID ở tất cả?

Nó có vẻ như xa như CSS là có liên quan, sử dụng các lớp và sử dụng của ID là cùng một điều chính xác.
#id { color: red; }
.class { color: green; }
Nó có vẻ như như CSS là có liên quan, sử dụng các lớp và sử dụng của ID là giống chính xác thing.It một thuộc tính và đó là một sự khác biệt dường như tùy ý trong cú pháp phụ thuộc vào một trong những bạn sử dụng. Các kết quả được dự đoán:
Would be red
Would be red

Would be green
Would be green
Bạn có thể biết được ID của “phải là duy nhất, như trong, chỉ có một trong những yếu tố trên một trang có sử dụng nó. Nhưng bạn đã trượt lên trước và nó dường như không quan trọng, CSS áp dụng tốt. Sau đó, bạn bắt đầu nhận được thông tin mâu thuẫn. Một số công cụ và philosophyteach ID đó không tốt cho phong cách. Một số bài báo cho bạn biết họ là những hiệu quả nhất. Có lẽ bạn làm việc với một nhà phát triển JavaScript cho bạn biết họ cần ID trên tất cả mọi thứ vì nó làm cho công việc của họ cách dễ dàng hơn. CSS không quan tâm nhiều mà bạn sử dụng, như xa như thực sự áp dụng phong cách. ID về mặt kỹ thuật cho một công cụ dựng hình trình duyệt nhanh hơn, nhưng khác hơn so với hầu hết các trường hợp cực đoan của bạn sẽ có lẽ không bao giờ nhận thấy một sự khác biệt tốc độ. JavaScript quan tâm rất nhiều về của ID. Nó có thể được chú ý nhanh hơn để tìm một yếu tố bởi một ID. Và đây là nơi “độc đáo” là rất quan trọng. JavaScript sẽ chỉ tìm thấy những yếu tố “đầu tiên” với ID đó, vì vậy nếu bạn có nhiều trang, sự nhầm lẫn có thể xảy ra sau. ID có một giá trị đặc hiệu vô cùng cao hơn so với các lớp học. Nếu có một phần tử với một ID và một lớp học và cả hai đều áp dụng phong cách, phong cách áp dụng ID sẽ được ưu tiên hơn các phong cách được áp dụng bởi lớp. Điều này có thể hữu ích, điều này có thể là một trở ngại. Triết lý cá nhân của tôi là sử dụng ID trên những thứ mà tôi hoàn toàn biết sẽ chỉ là một trong và sẽ không được hưởng lợi từ tài sản từ một tên lớp được chia sẻ với các yếu tố khác.
Buried hovers

Điều gì xảy ra ở đây?
div { color: red; }
div:hover div { color: green; }
: hover là một chọn mà chỉ áp dụng khi con chuột được trên một yếu tố cụ thể. Có gì là lạ ở đây là bạn không nhất thiết phải áp dụng phong cách yếu tố đó được quét qua. Trong trường hợp này, chúng tôi áp dụng phong cách duy nhất để divs hậu duệ khi div cha mẹ là quét. Vì vậy:


I will be red all the time


I will be red, unless that top
div is hovered (but not necessarily me)
and then I'll be green.


I will be red all the time


Khoảng trắng không quan trọng

Điều này:
div{color:red}
Chính xác giống như:
div {
color : red
http://thietkewebsites.edu.vn/quang-ba-website
}
Bạn cần không gian trong chọn để chọn hậu duệ (egulli {} là hoàn toàn không giống như ul li {}) nhưng khác hơn là bạn nên sử dụng khoảng trắng tuy nhiên làm cho việc tìm kiếm và làm việc với CSS của bạn cảm thấy thoải mái. Chú ý dấu chấm phẩy mất tích trên bất động sản trong ví dụ trên. Bạn có thể bỏ qua nếu đó là tài sản cuối cùng trong nhóm. Cá nhân tôi không bao giờ làm như nếu bạn bổ sung tài sản / giá trị sau đó và quên thêm dấu chấm phẩy vào dòng trước, đó là một vấn đề. Bởi vì khoảng trắng là miễn phí, nó sẽ tiếp tục đọc dòng tiếp theo như là một phần của giá trị của dòng trước đó.