Làm thế nào để có được css

Điểm xuất phát của chúng tôi là một tài liệu HTML. Bạn có thể sao chép mã từ bên dưới nếu bạn muốn làm việc trên máy tính của mình. Lưu mã bên dưới dưới dạng

DOCTYPE html>

  
    
    Getting started with CSS
  

  
    I am a level one heading

    
      This is a paragraph of text. In the text is a
      span element and also a
      link.
    

    
      This is the second paragraph. It contains an emphasized element.
    

    
      Item one
      Item two
      Item three
    
  

Ghi chú. Nếu bạn đang đọc nội dung này trên thiết bị hoặc môi trường mà bạn không thể dễ dàng tạo tệp, thì đừng lo — trình chỉnh sửa mã trực tiếp được cung cấp bên dưới để cho phép bạn viết mã ví dụ ngay tại đây trong trang

Điều đầu tiên chúng ta cần làm là nói với tài liệu HTML rằng chúng ta có một số quy tắc CSS mà chúng ta muốn nó sử dụng. Có ba cách khác nhau để áp dụng CSS vào tài liệu HTML mà bạn thường bắt gặp, tuy nhiên, hiện tại, chúng ta sẽ xem xét cách thông thường và hữu ích nhất để làm như vậy — liên kết CSS từ phần đầu tài liệu của bạn

Tạo một tệp trong cùng thư mục với tài liệu HTML của bạn và lưu tệp dưới dạng

Để liên kết

h1 {
  color: red;
}

Phần tử

h1 {
  color: red;
}

h1 {
  color: red;
}

h1 {
  color: red;
}

h1 {
  color: red;
}

Lưu tệp HTML và CSS của bạn và tải lại trang trong trình duyệt web. Tiêu đề cấp một ở đầu tài liệu bây giờ sẽ có màu đỏ. Nếu điều đó xảy ra, xin chúc mừng - bạn đã áp dụng thành công một số CSS vào tài liệu HTML. Nếu điều đó không xảy ra, hãy kiểm tra cẩn thận xem bạn đã nhập chính xác mọi thứ chưa

Bạn có thể tiếp tục làm việc trong

Bằng cách đặt tiêu đề màu đỏ, chúng tôi đã chứng minh rằng chúng tôi có thể nhắm mục tiêu và tạo kiểu cho phần tử HTML. Chúng tôi làm điều này bằng cách nhắm mục tiêu một bộ chọn phần tử — đây là bộ chọn khớp trực tiếp với tên phần tử HTML. Để nhắm mục tiêu tất cả các đoạn trong tài liệu, bạn sẽ sử dụng bộ chọn

h1 {
  color: red;
}

DOCTYPE html>

  
    
    Getting started with CSS
  

  
    I am a level one heading

    
      This is a paragraph of text. In the text is a
      span element and also a
      link.
    

    
      This is the second paragraph. It contains an emphasized element.
    

    
      Item one
      Item two
      Item three
    
  

Bạn có thể nhắm mục tiêu nhiều bộ chọn cùng một lúc bằng cách tách các bộ chọn bằng dấu phẩy. Nếu bạn muốn tất cả các đoạn văn và tất cả các mục trong danh sách có màu xanh lục, quy tắc của bạn sẽ như thế này

DOCTYPE html>

  
    
    Getting started with CSS
  

  
    I am a level one heading

    
      This is a paragraph of text. In the text is a
      span element and also a
      link.
    

    
      This is the second paragraph. It contains an emphasized element.
    

    
      Item one
      Item two
      Item three
    
  

Hãy dùng thử tính năng này trong trình chỉnh sửa tương tác bên dưới [chỉnh sửa hộp mã] hoặc trong tài liệu CSS cục bộ của bạn

Khi chúng ta xem một tài liệu HTML được đánh dấu tốt, ngay cả những thứ đơn giản như ví dụ của chúng ta, chúng ta có thể thấy cách trình duyệt làm cho HTML có thể đọc được bằng cách thêm một số kiểu dáng mặc định. Các tiêu đề lớn và in đậm và danh sách của chúng tôi có các dấu đầu dòng. Điều này xảy ra bởi vì các trình duyệt có các biểu định kiểu bên trong chứa các kiểu mặc định mà chúng áp dụng cho tất cả các trang theo mặc định; . Tất cả các trình duyệt hiện đại hiển thị nội dung HTML theo mặc định theo cùng một cách

Tuy nhiên, bạn sẽ thường muốn một cái gì đó khác với lựa chọn mà trình duyệt đã đưa ra. Điều này có thể được thực hiện bằng cách chọn thành phần HTML mà bạn muốn thay đổi và sử dụng quy tắc CSS để thay đổi giao diện của nó. Một ví dụ điển hình là

h1 {
  color: red;
}

DOCTYPE html>

  
    
    Getting started with CSS
  

  
    I am a level one heading

    
      This is a paragraph of text. In the text is a
      span element and also a
      link.
    

    
      This is the second paragraph. It contains an emphasized element.
    

    
      Item one
      Item two
      Item three
    
  

Hãy thử thêm phần này vào CSS của bạn ngay bây giờ

Thuộc tính

h1 {
  color: red;
}

h1 {
  color: red;
}

Nhìn vào trang đó, bạn sẽ phát hiện ra rằng ngoài việc loại bỏ các dấu đầu dòng trong danh sách, bạn có thể thay đổi chúng — hãy thử thay đổi chúng thành các dấu đầu dòng vuông bằng cách sử dụng giá trị là

DOCTYPE html>

  
    
    Getting started with CSS
  

  
    I am a level one heading

    
      This is a paragraph of text. In the text is a
      span element and also a
      link.
    

    
      This is the second paragraph. It contains an emphasized element.
    

    
      Item one
      Item two
      Item three
    
  

Cho đến nay, chúng tôi đã tạo kiểu cho các phần tử dựa trên tên phần tử HTML của chúng. Điều này hoạt động miễn là bạn muốn tất cả các thành phần của loại đó trong tài liệu của mình trông giống nhau. Hầu hết thời gian không phải như vậy và vì vậy bạn sẽ cần tìm cách chọn một tập hợp con các phần tử mà không thay đổi các phần tử khác. Cách phổ biến nhất để làm điều này là thêm một lớp vào phần tử HTML của bạn và nhắm mục tiêu lớp đó

Trong tài liệu HTML của bạn, hãy thêm thuộc tính lớp vào mục danh sách thứ hai. Danh sách của bạn bây giờ sẽ trông như thế này

Trong CSS của mình, bạn có thể nhắm mục tiêu lớp

DOCTYPE html>

  
    
    Getting started with CSS
  

  
    I am a level one heading

    
      This is a paragraph of text. In the text is a
      span element and also a
      link.
    

    
      This is the second paragraph. It contains an emphasized element.
    

    
      Item one
      Item two
      Item three
    
  

Lưu lại và làm mới để xem kết quả là gì

Bạn có thể áp dụng lớp

DOCTYPE html>

  
    
    Getting started with CSS
  

  
    I am a level one heading

    
      This is a paragraph of text. In the text is a
      span element and also a
      link.
    

    
      This is the second paragraph. It contains an emphasized element.
    

    
      Item one
      Item two
      Item three
    
  

DOCTYPE html>

  
    
    Getting started with CSS
  

  
    I am a level one heading

    
      This is a paragraph of text. In the text is a
      span element and also a
      link.
    

    
      This is the second paragraph. It contains an emphasized element.
    

    
      Item one
      Item two
      Item three
    
  

DOCTYPE html>

  
    
    Getting started with CSS
  

  
    I am a level one heading

    
      This is a paragraph of text. In the text is a
      span element and also a
      link.
    

    
      This is the second paragraph. It contains an emphasized element.
    

    
      Item one
      Item two
      Item three
    
  

DOCTYPE html>

  
    
    Getting started with CSS
  

  
    I am a level one heading

    
      This is a paragraph of text. In the text is a
      span element and also a
      link.
    

    
      This is the second paragraph. It contains an emphasized element.
    

    
      Item one
      Item two
      Item three
    
  

Đôi khi bạn sẽ thấy các quy tắc với bộ chọn liệt kê bộ chọn phần tử HTML cùng với lớp

Cú pháp này có nghĩa là "nhắm mục tiêu bất kỳ phần tử

DOCTYPE html>

  
    
    Getting started with CSS
  

  
    I am a level one heading

    
      This is a paragraph of text. In the text is a
      span element and also a
      link.
    

    
      This is the second paragraph. It contains an emphasized element.
    

    
      Item one
      Item two
      Item three
    
  

DOCTYPE html>

  
    
    Getting started with CSS
  

  
    I am a level one heading

    
      This is a paragraph of text. In the text is a
      span element and also a
      link.
    

    
      This is the second paragraph. It contains an emphasized element.
    

    
      Item one
      Item two
      Item three
    
  

Như bạn có thể tưởng tượng, một số lớp có thể được áp dụng cho nhiều phần tử và bạn không muốn phải tiếp tục chỉnh sửa CSS của mình mỗi khi cần có thứ gì đó mới theo phong cách đó. Do đó, đôi khi tốt nhất là bỏ qua phần tử và tham chiếu đến lớp, trừ khi bạn biết rằng bạn muốn tạo một số quy tắc đặc biệt cho riêng một phần tử và có lẽ muốn đảm bảo rằng chúng không được áp dụng cho những thứ khác

Đôi khi bạn sẽ muốn một cái gì đó trông khác đi dựa trên vị trí của nó trong tài liệu. Có một số bộ chọn có thể giúp bạn ở đây, nhưng bây giờ chúng ta sẽ chỉ xem xét một số. Trong tài liệu của chúng tôi, có hai phần tử

DOCTYPE html>

  
    
    Getting started with CSS
  

  
    I am a level one heading

    
      This is a paragraph of text. In the text is a
      span element and also a
      link.
    

    
      This is the second paragraph. It contains an emphasized element.
    

    
      Item one
      Item two
      Item three
    
  

DOCTYPE html>

  
    
    Getting started with CSS
  

  
    I am a level one heading

    
      This is a paragraph of text. In the text is a
      span element and also a
      link.
    

    
      This is the second paragraph. It contains an emphasized element.
    

    
      Item one
      Item two
      Item three
    
  

DOCTYPE html>

  
    
    Getting started with CSS
  

  
    I am a level one heading

    
      This is a paragraph of text. In the text is a
      span element and also a
      link.
    

    
      This is the second paragraph. It contains an emphasized element.
    

    
      Item one
      Item two
      Item three
    
  

Thêm quy tắc sau vào biểu định kiểu của bạn

Bộ chọn này sẽ chọn bất kỳ phần tử

DOCTYPE html>

  
    
    Getting started with CSS
  

  
    I am a level one heading

    
      This is a paragraph of text. In the text is a
      span element and also a
      link.
    

    
      This is the second paragraph. It contains an emphasized element.
    

    
      Item one
      Item two
      Item three
    
  

DOCTYPE html>

  
    
    Getting started with CSS
  

  
    I am a level one heading

    
      This is a paragraph of text. In the text is a
      span element and also a
      link.
    

    
      This is the second paragraph. It contains an emphasized element.
    

    
      Item one
      Item two
      Item three
    
  

DOCTYPE html>

  
    
    Getting started with CSS
  

  
    I am a level one heading

    
      This is a paragraph of text. In the text is a
      span element and also a
      link.
    

    
      This is the second paragraph. It contains an emphasized element.
    

    
      Item one
      Item two
      Item three
    
  

Một thứ khác mà bạn có thể muốn thử là tạo kiểu cho một đoạn văn khi nó xuất hiện ngay sau tiêu đề ở cùng cấp độ phân cấp trong HTML. Để làm như vậy, hãy đặt một

DOCTYPE html>

  
    
    Getting started with CSS
  

  
    I am a level one heading

    
      This is a paragraph of text. In the text is a
      span element and also a
      link.
    

    
      This is the second paragraph. It contains an emphasized element.
    

    
      Item one
      Item two
      Item three
    
  

Hãy thử thêm quy tắc này vào biểu định kiểu của bạn

Ví dụ trực tiếp dưới đây bao gồm hai quy tắc trên. Hãy thử thêm một quy tắc để làm cho một khoảng màu đỏ nếu nó nằm trong một đoạn văn. Bạn sẽ biết nếu bạn làm đúng vì khoảng trong đoạn đầu tiên sẽ có màu đỏ, nhưng khoảng trong mục danh sách đầu tiên sẽ không đổi màu

Ghi chú. Như bạn có thể thấy, CSS cung cấp cho chúng tôi một số cách để nhắm mục tiêu các phần tử và cho đến nay chúng tôi mới chỉ làm xước bề mặt. Chúng tôi sẽ xem xét kỹ tất cả các bộ chọn này và nhiều bộ chọn khác trong các bài viết về Bộ chọn của chúng tôi sau này trong khóa học

Kiểu tạo kiểu cuối cùng mà chúng ta sẽ xem xét trong hướng dẫn này là khả năng tạo kiểu cho mọi thứ dựa trên trạng thái của chúng. Một ví dụ đơn giản về điều này là khi tạo kiểu liên kết. Khi chúng tôi tạo kiểu cho một liên kết, chúng tôi cần nhắm mục tiêu phần tử [neo]

DOCTYPE html>

  
    
    Getting started with CSS
  

  
    I am a level one heading

    
      This is a paragraph of text. In the text is a
      span element and also a
      link.
    

    
      This is the second paragraph. It contains an emphasized element.
    

    
      Item one
      Item two
      Item three
    
  

Bạn có thể thay đổi giao diện của liên kết khi người dùng di chuột qua nó, chẳng hạn như bằng cách xóa phần gạch dưới, điều này đạt được theo quy tắc tiếp theo

Trong ví dụ trực tiếp bên dưới, bạn có thể chơi với các giá trị khác nhau cho các trạng thái khác nhau của liên kết. Tôi đã thêm các quy tắc ở trên vào nó, và bây giờ nhận ra rằng màu hồng khá nhạt và khó đọc — tại sao không thay đổi màu đó thành màu đẹp hơn?

Chúng tôi đã xóa phần gạch chân trên liên kết của chúng tôi khi di chuột. Bạn có thể xóa phần gạch chân khỏi tất cả các trạng thái của liên kết. Tuy nhiên, điều đáng ghi nhớ là trong một trang web thực, bạn muốn đảm bảo rằng khách truy cập biết rằng một liên kết là một liên kết. Để nguyên phần gạch dưới có thể là một manh mối quan trọng để mọi người nhận ra rằng có thể nhấp vào một số văn bản bên trong đoạn văn — đây là hành vi mà họ đã quen. Như với mọi thứ trong CSS, có khả năng làm cho tài liệu khó truy cập hơn với những thay đổi của bạn — chúng tôi sẽ hướng tới việc làm nổi bật những cạm bẫy tiềm ẩn ở những nơi thích hợp

Ghi chú. bạn sẽ thường thấy đề cập đến khả năng truy cập trong các bài học này và trên MDN. Khi chúng tôi nói về khả năng truy cập, chúng tôi đang đề cập đến yêu cầu đối với các trang web của chúng tôi là mọi người đều có thể hiểu và sử dụng được

Khách truy cập của bạn có thể đang sử dụng máy tính có chuột hoặc bàn di chuột hoặc điện thoại có màn hình cảm ứng. Hoặc họ có thể đang sử dụng trình đọc màn hình để đọc nội dung của tài liệu hoặc họ có thể cần sử dụng văn bản lớn hơn nhiều hoặc chỉ điều hướng trang web bằng bàn phím

Mọi người thường có thể truy cập tài liệu HTML đơn giản — khi bạn bắt đầu tạo kiểu cho tài liệu đó, điều quan trọng là bạn không làm cho tài liệu khó truy cập hơn

Điều đáng chú ý là bạn có thể kết hợp nhiều bộ chọn và bộ kết hợp với nhau. Ví dụ

Bạn cũng có thể kết hợp nhiều loại với nhau. Hãy thử thêm đoạn mã sau vào mã của bạn

Điều này sẽ tạo kiểu cho bất kỳ phần tử nào có lớp

DOCTYPE html>

  
    
    Getting started with CSS
  

  
    I am a level one heading

    
      This is a paragraph of text. In the text is a
      span element and also a
      link.
    

    
      This is the second paragraph. It contains an emphasized element.
    

    
      Item one
      Item two
      Item three
    
  

DOCTYPE html>

  
    
    Getting started with CSS
  

  
    I am a level one heading

    
      This is a paragraph of text. In the text is a
      span element and also a
      link.
    

    
      This is the second paragraph. It contains an emphasized element.
    

    
      Item one
      Item two
      Item three
    
  

DOCTYPE html>

  
    
    Getting started with CSS
  

  
    I am a level one heading

    
      This is a paragraph of text. In the text is a
      span element and also a
      link.
    

    
      This is the second paragraph. It contains an emphasized element.
    

    
      Item one
      Item two
      Item three
    
  

DOCTYPE html>

  
    
    Getting started with CSS
  

  
    I am a level one heading

    
      This is a paragraph of text. In the text is a
      span element and also a
      link.
    

    
      This is the second paragraph. It contains an emphasized element.
    

    
      Item one
      Item two
      Item three
    
  

Trong HTML gốc mà chúng tôi đã cung cấp, phần tử duy nhất được tạo kiểu là

DOCTYPE html>

  
    
    Getting started with CSS
  

  
    I am a level one heading

    
      This is a paragraph of text. In the text is a
      span element and also a
      link.
    

    
      This is the second paragraph. It contains an emphasized element.
    

    
      Item one
      Item two
      Item three
    
  

Đừng lo lắng nếu điều này có vẻ phức tạp vào lúc này — bạn sẽ sớm bắt đầu hiểu rõ về nó khi bạn viết thêm CSS

Trong bài viết này, chúng tôi đã xem xét một số cách để bạn có thể tạo kiểu cho tài liệu bằng CSS. Chúng ta sẽ phát triển kiến ​​thức này khi chúng ta chuyển qua phần còn lại của bài học. Tuy nhiên, bây giờ bạn đã biết đủ để tạo kiểu cho văn bản, áp dụng CSS dựa trên các cách nhắm mục tiêu thành phần khác nhau trong tài liệu cũng như tra cứu các thuộc tính và giá trị trong tài liệu MDN