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

Question

Trong bài viết này, chúng ta sẽ lấy một tài liệu HTML đơn giản và áp dụng CSS cho nó, đồng thời tìm hiểu một số điều thực tế về ngôn ngữ này

Nội dung chính Show

điều kiện tiên quyết. Biết sử dụng máy tính cơ bản, cài đặt phần mềm cơ bản, kiến thức cơ bản về làm việc với tệp và kiến thức cơ bản về HTML (nghiên cứu Giới thiệu về HTML. )Khách quan. Để hiểu những kiến thức cơ bản về liên kết tài liệu CSS với tệp HTML và có thể thực hiện định dạng văn bản đơn giản bằng 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

<link rel="stylesheet" href="styles.css" />

6 vào một thư mục trên máy của bạn

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Getting started with CSStitle>
  head>

  <body>
    <h1>I am a level one headingh1>

    <p>
      This is a paragraph of text. In the text is a
      <span>span elementspan> and also a
      <a href="https://example.com">linka>.
    p>

    <p>
      This is the second paragraph. It contains an <em>emphasizedem> element.
    p>

    <ul>
      <li>Item <span>onespan>li>
      <li>Item twoli>
      <li>Item <em>threeem>li>
    ul>
  body>
html>

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

<link rel="stylesheet" href="styles.css" />

7. Phần mở rộng

<link rel="stylesheet" href="styles.css" />

8 cho biết đây là tệp CSS

Để liên kết

<link rel="stylesheet" href="styles.css" />

7 với

<link rel="stylesheet" href="styles.css" />

6, hãy thêm dòng sau vào đâu đó bên trong

h1 {
  color: red;
}

1 của tài liệu HTML

<link rel="stylesheet" href="styles.css" />

Phần tử

h1 {
  color: red;
}

2 này cho trình duyệt biết rằng chúng tôi có biểu định kiểu, sử dụng thuộc tính

h1 {
  color: red;
}

3 và vị trí của biểu định kiểu đó làm giá trị của thuộc tính

h1 {
  color: red;
}

4. Bạn có thể kiểm tra xem CSS có hoạt động không bằng cách thêm một quy tắc vào

<link rel="stylesheet" href="styles.css" />

7. Sử dụng trình chỉnh sửa mã của bạn, thêm phần sau vào tệp CSS của bạn

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

<link rel="stylesheet" href="styles.css" />

7 tại địa phương hoặc bạn có thể sử dụng trình chỉnh sửa tương tác của chúng tôi bên dưới để tiếp tục với hướng dẫn này. Trình chỉnh sửa tương tác hoạt động như thể CSS trong bảng đầu tiên được liên kết với tài liệu HTML, giống như chúng ta đã làm với tài liệu ở trên

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;
}

7. Để biến tất cả các đoạn văn thành màu xanh lá cây, bạn sẽ sử dụng

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Getting started with CSStitle>
  head>

  <body>
    <h1>I am a level one headingh1>

    <p>
      This is a paragraph of text. In the text is a
      <span>span elementspan> and also a
      <a href="https://example.com">linka>.
    p>

    <p>
      This is the second paragraph. It contains an <em>emphasizedem> element.
    p>

    <ul>
      <li>Item <span>onespan>li>
      <li>Item twoli>
      <li>Item <em>threeem>li>
    ul>
  body>
html>

5

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>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Getting started with CSStitle>
  head>

  <body>
    <h1>I am a level one headingh1>

    <p>
      This is a paragraph of text. In the text is a
      <span>span elementspan> and also a
      <a href="https://example.com">linka>.
    p>

    <p>
      This is the second paragraph. It contains an <em>emphasizedem> element.
    p>

    <ul>
      <li>Item <span>onespan>li>
      <li>Item twoli>
      <li>Item <em>threeem>li>
    ul>
  body>
html>

6

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;
}

8, một danh sách không có thứ tự. Nó có danh sách đạn. Nếu bạn không muốn những viên đạn đó, bạn có thể loại bỏ chúng như vậy

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Getting started with CSStitle>
  head>

  <body>
    <h1>I am a level one headingh1>

    <p>
      This is a paragraph of text. In the text is a
      <span>span elementspan> and also a
      <a href="https://example.com">linka>.
    p>

    <p>
      This is the second paragraph. It contains an <em>emphasizedem> element.
    p>

    <ul>
      <li>Item <span>onespan>li>
      <li>Item twoli>
      <li>Item <em>threeem>li>
    ul>
  body>
html>

8

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;
}

9 là một thuộc tính tốt để xem trên MDN để xem giá trị nào được hỗ trợ. Hãy xem trang dành cho

h1 {
  color: red;
}

9 và bạn sẽ tìm thấy một ví dụ tương tác ở đầu trang để thử một số giá trị khác nhau, sau đó tất cả các giá trị được phép sẽ được trình bày chi tiết hơn ở cuối trang

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>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Getting started with CSStitle>
  head>

  <body>
    <h1>I am a level one headingh1>

    <p>
      This is a paragraph of text. In the text is a
      <span>span elementspan> and also a
      <a href="https://example.com">linka>.
    p>

    <p>
      This is the second paragraph. It contains an <em>emphasizedem> element.
    p>

    <ul>
      <li>Item <span>onespan>li>
      <li>Item twoli>
      <li>Item <em>threeem>li>
    ul>
  body>
html>

51

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

<link rel="stylesheet" href="styles.css" />

2

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

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Getting started with CSStitle>
  head>

  <body>
    <h1>I am a level one headingh1>

    <p>
      This is a paragraph of text. In the text is a
      <span>span elementspan> and also a
      <a href="https://example.com">linka>.
    p>

    <p>
      This is the second paragraph. It contains an <em>emphasizedem> element.
    p>

    <ul>
      <li>Item <span>onespan>li>
      <li>Item twoli>
      <li>Item <em>threeem>li>
    ul>
  body>
html>

52 bằng cách tạo bộ chọn bắt đầu bằng ký tự chấm hết. Thêm phần sau vào tệp CSS của bạn

<link rel="stylesheet" href="styles.css" />

4

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>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Getting started with CSStitle>
  head>

  <body>
    <h1>I am a level one headingh1>

    <p>
      This is a paragraph of text. In the text is a
      <span>span elementspan> and also a
      <a href="https://example.com">linka>.
    p>

    <p>
      This is the second paragraph. It contains an <em>emphasizedem> element.
    p>

    <ul>
      <li>Item <span>onespan>li>
      <li>Item twoli>
      <li>Item <em>threeem>li>
    ul>
  body>
html>

52 cho bất kỳ phần tử nào trên trang của mình mà bạn muốn có giao diện giống như mục danh sách này. Ví dụ: bạn có thể muốn

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Getting started with CSStitle>
  head>

  <body>
    <h1>I am a level one headingh1>

    <p>
      This is a paragraph of text. In the text is a
      <span>span elementspan> and also a
      <a href="https://example.com">linka>.
    p>

    <p>
      This is the second paragraph. It contains an <em>emphasizedem> element.
    p>

    <ul>
      <li>Item <span>onespan>li>
      <li>Item twoli>
      <li>Item <em>threeem>li>
    ul>
  body>
html>

54 trong đoạn văn cũng có màu cam và đậm. Hãy thử thêm một

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Getting started with CSStitle>
  head>

  <body>
    <h1>I am a level one headingh1>

    <p>
      This is a paragraph of text. In the text is a
      <span>span elementspan> and also a
      <a href="https://example.com">linka>.
    p>

    <p>
      This is the second paragraph. It contains an <em>emphasizedem> element.
    p>

    <ul>
      <li>Item <span>onespan>li>
      <li>Item twoli>
      <li>Item <em>threeem>li>
    ul>
  body>
html>

55 của

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Getting started with CSStitle>
  head>

  <body>
    <h1>I am a level one headingh1>

    <p>
      This is a paragraph of text. In the text is a
      <span>span elementspan> and also a
      <a href="https://example.com">linka>.
    p>

    <p>
      This is the second paragraph. It contains an <em>emphasizedem> element.
    p>

    <ul>
      <li>Item <span>onespan>li>
      <li>Item twoli>
      <li>Item <em>threeem>li>
    ul>
  body>
html>

52 vào đó, sau đó tải lại trang của bạn và xem điều gì sẽ xảy ra

Đô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

<link rel="stylesheet" href="styles.css" />

9

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

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Getting started with CSStitle>
  head>

  <body>
    <h1>I am a level one headingh1>

    <p>
      This is a paragraph of text. In the text is a
      <span>span elementspan> and also a
      <a href="https://example.com">linka>.
    p>

    <p>
      This is the second paragraph. It contains an <em>emphasizedem> element.
    p>

    <ul>
      <li>Item <span>onespan>li>
      <li>Item twoli>
      <li>Item <em>threeem>li>
    ul>
  body>
html>

57 nào có lớp đặc biệt". Nếu bạn làm điều này, thì bạn sẽ không còn có thể áp dụng lớp cho một

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Getting started with CSStitle>
  head>

  <body>
    <h1>I am a level one headingh1>

    <p>
      This is a paragraph of text. In the text is a
      <span>span elementspan> and also a
      <a href="https://example.com">linka>.
    p>

    <p>
      This is the second paragraph. It contains an <em>emphasizedem> element.
    p>

    <ul>
      <li>Item <span>onespan>li>
      <li>Item twoli>
      <li>Item <em>threeem>li>
    ul>
  body>
html>

54 hoặc phần tử khác bằng cách thêm lớp vào nó;

<link rel="stylesheet" href="styles.css" />

2

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>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Getting started with CSStitle>
  head>

  <body>
    <h1>I am a level one headingh1>

    <p>
      This is a paragraph of text. In the text is a
      <span>span elementspan> and also a
      <a href="https://example.com">linka>.
    p>

    <p>
      This is the second paragraph. It contains an <em>emphasizedem> element.
    p>

    <ul>
      <li>Item <span>onespan>li>
      <li>Item twoli>
      <li>Item <em>threeem>li>
    ul>
  body>
html>

59 — một bên trong đoạn văn và phần còn lại bên trong một mục danh sách. Để chỉ chọn một

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Getting started with CSStitle>
  head>

  <body>
    <h1>I am a level one headingh1>

    <p>
      This is a paragraph of text. In the text is a
      <span>span elementspan> and also a
      <a href="https://example.com">linka>.
    p>

    <p>
      This is the second paragraph. It contains an <em>emphasizedem> element.
    p>

    <ul>
      <li>Item <span>onespan>li>
      <li>Item twoli>
      <li>Item <em>threeem>li>
    ul>
  body>
html>

59 được lồng bên trong một phần tử

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Getting started with CSStitle>
  head>

  <body>
    <h1>I am a level one headingh1>

    <p>
      This is a paragraph of text. In the text is a
      <span>span elementspan> and also a
      <a href="https://example.com">linka>.
    p>

    <p>
      This is the second paragraph. It contains an <em>emphasizedem> element.
    p>

    <ul>
      <li>Item <span>onespan>li>
      <li>Item twoli>
      <li>Item <em>threeem>li>
    ul>
  body>
html>

61, bạn có thể sử dụng một bộ chọn có tên là bộ kết hợp hậu duệ, có dạng khoảng cách giữa hai bộ chọn khác

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

<link rel="stylesheet" href="styles.css" />

0

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

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Getting started with CSStitle>
  head>

  <body>
    <h1>I am a level one headingh1>

    <p>
      This is a paragraph of text. In the text is a
      <span>span elementspan> and also a
      <a href="https://example.com">linka>.
    p>

    <p>
      This is the second paragraph. It contains an <em>emphasizedem> element.
    p>

    <ul>
      <li>Item <span>onespan>li>
      <li>Item twoli>
      <li>Item <em>threeem>li>
    ul>
  body>
html>

59 nào bên trong (hậu duệ của) một

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Getting started with CSStitle>
  head>

  <body>
    <h1>I am a level one headingh1>

    <p>
      This is a paragraph of text. In the text is a
      <span>span elementspan> and also a
      <a href="https://example.com">linka>.
    p>

    <p>
      This is the second paragraph. It contains an <em>emphasizedem> element.
    p>

    <ul>
      <li>Item <span>onespan>li>
      <li>Item twoli>
      <li>Item <em>threeem>li>
    ul>
  body>
html>

61. Vì vậy, trong tài liệu mẫu của bạn, bạn sẽ thấy rằng

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Getting started with CSStitle>
  head>

  <body>
    <h1>I am a level one headingh1>

    <p>
      This is a paragraph of text. In the text is a
      <span>span elementspan> and also a
      <a href="https://example.com">linka>.
    p>

    <p>
      This is the second paragraph. It contains an <em>emphasizedem> element.
    p>

    <ul>
      <li>Item <span>onespan>li>
      <li>Item twoli>
      <li>Item <em>threeem>li>
    ul>
  body>
html>

59 trong mục danh sách thứ ba hiện có màu tím, nhưng mục bên trong đoạn không thay đổi

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>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Getting started with CSStitle>
  head>

  <body>
    <h1>I am a level one headingh1>

    <p>
      This is a paragraph of text. In the text is a
      <span>span elementspan> and also a
      <a href="https://example.com">linka>.
    p>

    <p>
      This is the second paragraph. It contains an <em>emphasizedem> element.
    p>

    <ul>
      <li>Item <span>onespan>li>
      <li>Item twoli>
      <li>Item <em>threeem>li>
    ul>
  body>
html>

65 (một tổ hợp anh chị em liền kề) giữa các bộ chọn

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

<link rel="stylesheet" href="styles.css" />

1

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>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Getting started with CSStitle>
  head>

  <body>
    <h1>I am a level one headingh1>

    <p>
      This is a paragraph of text. In the text is a
      <span>span elementspan> and also a
      <a href="https://example.com">linka>.
    p>

    <p>
      This is the second paragraph. It contains an <em>emphasizedem> element.
    p>

    <ul>
      <li>Item <span>onespan>li>
      <li>Item twoli>
      <li>Item <em>threeem>li>
    ul>
  body>
html>

66. Điều này có các trạng thái khác nhau tùy thuộc vào việc nó chưa được truy cập, đã truy cập, được di chuột qua, tập trung qua bàn phím hay đang trong quá trình được nhấp (kích hoạt). Bạn có thể sử dụng CSS để nhắm mục tiêu các trạng thái khác nhau này — CSS bên dưới tạo kiểu cho các liên kết chưa được truy cập có màu hồng và các liên kết được truy cập có màu xanh lục

<link rel="stylesheet" href="styles.css" />

2

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

<link rel="stylesheet" href="styles.css" />

3

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ụ

<link rel="stylesheet" href="styles.css" />

4

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

<link rel="stylesheet" href="styles.css" />

5

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

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Getting started with CSStitle>
  head>

  <body>
    <h1>I am a level one headingh1>

    <p>
      This is a paragraph of text. In the text is a
      <span>span elementspan> and also a
      <a href="https://example.com">linka>.
    p>

    <p>
      This is the second paragraph. It contains an <em>emphasizedem> element.
    p>

    <ul>
      <li>Item <span>onespan>li>
      <li>Item twoli>
      <li>Item <em>threeem>li>
    ul>
  body>
html>

52, nằm trong

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Getting started with CSStitle>
  head>

  <body>
    <h1>I am a level one headingh1>

    <p>
      This is a paragraph of text. In the text is a
      <span>span elementspan> and also a
      <a href="https://example.com">linka>.
    p>

    <p>
      This is the second paragraph. It contains an <em>emphasizedem> element.
    p>

    <ul>
      <li>Item <span>onespan>li>
      <li>Item twoli>
      <li>Item <em>threeem>li>
    ul>
  body>
html>

68, xuất hiện ngay sau

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Getting started with CSStitle>
  head>

  <body>
    <h1>I am a level one headingh1>

    <p>
      This is a paragraph of text. In the text is a
      <span>span elementspan> and also a
      <a href="https://example.com">linka>.
    p>

    <p>
      This is the second paragraph. It contains an <em>emphasizedem> element.
    p>

    <ul>
      <li>Item <span>onespan>li>
      <li>Item twoli>
      <li>Item <em>threeem>li>
    ul>
  body>
html>

69, nằm trong

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Getting started with CSStitle>
  head>

  <body>
    <h1>I am a level one headingh1>

    <p>
      This is a paragraph of text. In the text is a
      <span>span elementspan> and also a
      <a href="https://example.com">linka>.
    p>

    <p>
      This is the second paragraph. It contains an <em>emphasizedem> element.
    p>

    <ul>
      <li>Item <span>onespan>li>
      <li>Item twoli>
      <li>Item <em>threeem>li>
    ul>
  body>
html>

80. Phù

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>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Getting started with CSStitle>
  head>

  <body>
    <h1>I am a level one headingh1>

    <p>
      This is a paragraph of text. In the text is a
      <span>span elementspan> and also a
      <a href="https://example.com">linka>.
    p>

    <p>
      This is the second paragraph. It contains an <em>emphasizedem> element.
    p>

    <ul>
      <li>Item <span>onespan>li>
      <li>Item twoli>
      <li>Item <em>threeem>li>
    ul>
  body>
html>

81

Đừ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

programming css

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

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội