Hướng dẫn css not not working - css không hoạt động

Những gì tôi đang cố gắng làm là như thế này: https://www.w3schools.com/css/tryit.asp?filename=trecss_navbar_horizontal_black_right, nhưng có vẻ như mã không đọc tệp CSS bên ngoài. Đây là mã HTML:

  
  




  
Home
  
News
  
Contact
  
About

Đây là mã CSS:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

Stephen Rauch ♦♦♦

46.1K31 Huy hiệu vàng107 Huy hiệu bạc127 Huy hiệu đồng31 gold badges107 silver badges127 bronze badges31 gold badges107 silver badges127 bronze badges

Đã hỏi ngày 20 tháng 5 năm 2021 lúc 14:41May 20, 2021 at 14:41May 20, 2021 at 14:41

4

HOẶC

Tạo thư mục CSS trong đó chỉ mục của bạn.html có mặt

Sẽ giải quyết vấn đề

Đã trả lời ngày 20 tháng 5 năm 2021 lúc 14:50May 20, 2021 at 14:50May 20, 2021 at 14:50

2

Tôi nghĩ rằng rất có thể bạn có một vấn đề với hệ thống phân cấp thư mục.

'..' được sử dụng để điều hướng hệ thống phân cấp của hệ thống tệp. '.' được sử dụng cho thư mục hiện tại (điều này thường không được sử dụng, vì hầu hết các lệnh sẽ giả sử thư mục hiện tại).

Nếu chúng được sử dụng không chính xác, các tệp sẽ không được tìm thấy/thực thi do đó CSS ​​của bạn không được tìm thấy.

Bạn có thể cung cấp cấu trúc tệp của bạn?

Đã trả lời ngày 20 tháng 5 năm 2021 lúc 14:54May 20, 2021 at 14:54May 20, 2021 at 14:54

Nếu bạn là một người mới, đó là một thực tiễn tốt giữ tất cả các tệp HTML CSS và JS trong cùng một thư mục để bạn có thể tránh tất cả các đường dẫn dài đó. Bạn chỉ có thể nhập tệp và phần mở rộng tệp để truy cập nếu nó trong cùng một thư mục

Đã trả lời ngày 20 tháng 5 năm 2021 lúc 16:00May 20, 2021 at 16:00May 20, 2021 at 16:00

Lời nói đầu

Có nhiều cách để ẩn một phần tử trong CSS. Bạn có thể ẩn nó bằng cách đặt

9 xuống 0,

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

0 sang

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

1,

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

2 sang

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

3 hoặc bằng cách đặt các giá trị cực trị cho vị trí tuyệt đối.

Bạn có bao giờ tự hỏi tại sao chúng ta có rất nhiều kỹ thuật giấu một phần tử khi tất cả chúng dường như cùng làm một điều tương tự ?

Tất cả các phương pháp này thực ra có khác nhau một chút và sự khác biệt này chỉ ra mỗi phương pháp nên được sử dụng trong một trường hợp cụ thể. Hướng dẫn này sẽ đề cập đến những điểm khác biệt nhỏ mà bạn cần lưu ý khi ẩn phần tử bằng cách sử dụng bất kỳ phương pháp nào ở trên.

Hướng dẫn này sẽ đề cập đến những điểm khác biệt nhỏ mà bạn cần lưu ý khi ẩn phần tử bằng cách sử dụng bất kỳ phương pháp nào ở trên.

Nội dung

1 , Opacity

Thuộc tính

9 là để thiết lập

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

5 (độ trong suốt ) của phần tử. Nó không được thiết kế để thay đổi khung giới hạn của phần tử dưới bất kỳ hính thức nào.

Điều này có nghĩa là cài đặt opacity xuống 0 chỉ giấu đi phần tử một cách trực quan. Phần tử vẫn chiếm vị trí của nó và ảnh hưởng đến bố cục của trang web. Nó cũng sẽ phản hồi lại với tương tác của người dùng.

.hide {
    opacity: 0;
}

Nếu bạn định sử dụng thuộc tính opacity để ẩn hoàn toàn khỏi màn hình – thật tiếc, điều này là không thể. Phần tử và tất cả nội dung của nó sẽ vẫn được browser hiển thị (hiển thị trắng), giống như tất cả các phần tử khác trên trang web. Nói cách khác, phần tử vẫn hoạt động (vẫn bắt được các sự tương tác từ user) như cách nó khi chưa bị làm mờ.

Chính vì thế tôi khuyến nghị nên sử dụng thuộc tính

9 tạo ra các hiệu ứng sinh động.

Hãy xem demo

Khi bạn di chuột qua khối thứ hai bị ẩn, phần tử sẽ chuyển đổi trôi chảy từ trạng thái trong suốt hoàn toàn sang rõ ràng. Và khi chuột ko còn ở khối thứ 2 nữa thì khối này bị ẩn đi. Điều này chứng tỏ ràng, khối bị ẩn đi vẫn có thể tiếp nhận các sự tương tác từ user.

2,Visibility

Thuộc tính tiếp theo trong danh sách là

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

7 khả năng hiển thị. Cài đặt thuộc tính này sẽ làm ẩn phần tử .

Cũng giống như thuộc tính

9, phần tử ẩn sẽ vẫn ảnh hưởng đến bố cục của trang web. Sự khác biệt duy nhất là thời gian này nó sẽ không nắm bắt bất kỳ tương tác nào của người dùng khi bị ẩn khỏi người dùng.

Thuộc tính này cũng có thể làm được các hình ảnh động miễn là các trạng thái ban đầu và cuối cùng có các giá trị khác nhau. Điều này bảo đảm rằng quá trình chuyển đổi giữa các trạng thái hiển thị có thể được trơn tru thay vì đột ngột.

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

1

Demi sự khác nhau giữa Visibility và Opacity

• Lưu ý rằng các phần tử con của một phần tử với

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }
  
  li {
    float: left;
  }
  
  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  li a:hover:not(.active) {
    background-color: #111;
  }
  
  .active {
    background-color: #4CAF50;
  }
  

  0 đặt ở

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }
  
  li {
    float: left;
  }
  
  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  li a:hover:not(.active) {
    background-color: #111;
  }
  
  .active {
    background-color: #4CAF50;
  }
  

  1 vẫn có thể vẫn hiển thị nếu thuộc tính

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }
  
  li {
    float: left;
  }
  
  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  li a:hover:not(.active) {
    background-color: #111;
  }
  
  .active {
    background-color: #4CAF50;
  }
  

  0 của chúng được đặt về
  2.
• Hãy thử di chuột qua phần tử ẩn và không nằm trong đoạn văn bên, bạn sẽ thấy con trỏ truột của bạn không thay đổi thành con trỏ hình ngón tay.
• Hơn nữa, nếu bạn cố nhấp vào phần tử, các nhấp chuột của bạn sẽ không được tạo ra bất kì sự kiện nào.
• Thẻ
  3 bên trong
  4 vẫn sẽ nắm bắt tất cả hoạt động của chuột. Ngay khi bạn di chuột qua văn bản, biểu tượng
  4 sẽ được phát hiện và bắt đầu ghi nhận các sự kiện(con trỏ chuột thay đổi và background của cả div thay đổi)

4, Display

Thuộc tính

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

2 ẩn phần tử theo đúng ý nghĩa thực của từ đó. Thiết lập

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

2 về

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

3 bảo đảm khối sẽ không được tạo ra.

Sử dụng thuộc tính này, không có không gian trống nào để lại phía sau khi phần tử đã bị ẩn đi. Không chỉ vậy, bất kỳ tương tác trực tiếp (click, mouse_up, ..v..v. ) nào của người dùng sẽ không thể thực hiện khi

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

2 được đặt ở

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

3.

Hơn nữa, người đọc sẽ không đọc được nội dung của phần tử. Nó giống như thể phần tử không hề tồn tại.

Tất cả các hậu duệ của phần tử cũng sẽ bị giấu kín. Thuộc tính này không thể được các animation vì vậy sự chuyển tiếp giữa các trạng thái khác nhau luôn luôn đột ngột.

Xin lưu ý, phần tử vẫn có thể truy cập qua DOM . Bạn sẽ có thể thao tác nó giống như với bất kỳ yếu tố khác.

4

Hãy xem CSS của bản demo này

Bạn sẽ thấy rằng khối thứ hai có một đoạn văn với thuộc tính

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

2 được thiết lập về

2 nhưng đoạn văn vẫn vô hình. Đây là một sự khác biệt nữa giữa

3 và

4. Trong trường hợp đầu tiên, bất kỳ hậu duệ nào được thiết lập

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

0 về

2 sẽ được hiển thị nhưng đó không phải là những gì xảy ra với

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

2. Tất cả các phần tử con được giấu kín bất kể giá trị của thuộc tính hiển thị.

Bây giờ, di chuột một vài lần trên khối đầu tiên trong bản giới thiệu. Đã hoàn tác? Nhấp vào khối đầu tiên này. Điều này sẽ làm cho khối thứ hai nhìn thấy được. Giá trị bên trong bây giờ là một con số khác không. Điều này là do phần tử, mặc dù ẩn với người dùng nhưng vẫn có thể được thao tác bằng JavaScript.

4, Position

Giả sử bạn có một phần tử mà bạn muốn tương tác nhưng bạn không muốn nó ảnh hưởng đến việc bố trí trang web của bạn. Không có cách nào có thể xử lý khả quan đến lúc này. Một điều bạn có thể làm trong trường hợp này là di chuyển các phần tử ra khỏi khung nhìn. Bằng cách đó nó sẽ không ảnh hưởng đến việc bố trí và vẫn hoạt động được. Đây là cách CSS làm điều đó:

2

Hãy xem demo này Ý tưởng chính ở đây là đặt các giá trị bên trái và âm cao đủ cao để phần tử không còn hiển thị trên màn hình nữa. Một lợi ích (hoặc nhược điểm tiềm ẩn) của kỹ thuật này là nội dung của một phần tử xác định có thể được đọc bởi các trình đọc màn hình. Điều này hoàn toàn dễ hiểu bởi vì bạn chỉ di chuyển các phần tử ra khỏi khung nhìn để người dùng không thể nhìn thấy nó.

5, Clip-path

Một cách khác để ẩn các phần tử bằng cách cắt chúng. Trước đây, điều này có thể được thực hiện với thuộc tính

8 nhưng sau đó không được ủng hộ vì có một thuộc tính tốt hơn được gọi là

9.

Nitish Kumar gần đây đã giới thiệu một

9 tại SitePoint, vì vậy hãy thoải mái thử nghiệm một thuộc tính có hiệu quả cao vượt trội.

Lưu ý rằng thuộc tính

9 được sử dụng bên dưới không được hỗ trợ đầy đủ trong IE hoặc Edge. Thuộc tính

9 khi được sử dụng để ẩn một phần tử sẽ như sau:

8

Xem Demo trong link này

• Nếu bạn di chuột qua phần tử đầu tiên, nó có thể ảnh hưởng đến phần tử thứ hai mặc dù nó được ẩn đi qua clip-path.

• Nếu bạn nhấp chuột vào phần tử, nó sẽ loại bỏ các lớp ẩn để tiết lộ các phần tử của chúng ta đã có trước ở đó. Văn bản này vẫn có thể đọc được bởi browser

• Mặc dù phần tử của chúng ta không còn nhìn thấy nữa, các phần tử xung quanh nó vẫn hoạt động như thể nó có kích thước chữ nhật ban đầu.

• Lưu ý rằng các tương tác của người dùng như di chuột hoặc nhấp chuột không thể thực hiện ở bên ngoài khu vực bị cắt xén. Trong trường hợp của chúng tôi, điều này hàm ý rằng người dùng sẽ không thể tương tác trực tiếp với các phần tử ẩn.

Kết luận

Trong hướng dẫn này, chúng tôi đã xem xét năm phương pháp ẩn các phần tử khác nhau với CSS. Mỗi phương pháp đều khác nhau theo cách này hay cách khác. Biết được những gì bạn muốn có thể giúp bạn quyết định phương pháp nào sẽ sử dụng .

Nguồn

https://www.sitepoint.com/five-ways-to-hide-elements-in-css/