search

Bạn có thể viết css bằng html không?

Ngày đăng: 01/12/2022
Trả lời: 0
Lượt xem: 158

Bây giờ bạn đã bắt đầu hiểu mục đích và cách sử dụng CSS, hãy xem xét cấu trúc của CSS

Show
điều kiện tiên quyết. Trình độ 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ề cách làm việc với tệp, kiến ​​thức cơ bản về HTML (nghiên cứu Giới thiệu về HTML) và ý tưởng về cách thức hoạt động của CSS. Khách quan. Để tìm hiểu chi tiết các cấu trúc cú pháp cơ bản của CSS

Áp dụng CSS vào HTML

Trước tiên, hãy xem xét ba phương pháp áp dụng CSS cho tài liệu. với biểu định kiểu bên ngoài, với biểu định kiểu bên trong và với kiểu nội tuyến

biểu định kiểu bên ngoài

Biểu định kiểu bên ngoài chứa CSS trong một tệp riêng biệt có phần mở rộng 


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


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


<link rel="stylesheet" href="../styles/style.css" />
7. Đây là phương pháp phổ biến và hữu ích nhất để đưa CSS vào tài liệu. Bạn có thể liên kết một tệp CSS với nhiều trang web, tạo kiểu cho tất cả chúng bằng cùng một biểu định kiểu CSS. Trong phần Bắt đầu với CSS, chúng tôi đã liên kết biểu định kiểu bên ngoài với trang web của mình

Bạn tham khảo biểu định kiểu CSS bên ngoài từ phần tử HTML 


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


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


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

DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <title>My CSS experimenttitle>
    <link rel="stylesheet" href="styles.css" />
  head>
  <body>
    <h1>Hello World!h1>
    <p>This is my first CSS examplep>
  body>
html>

Tệp biểu định kiểu CSS có thể trông như thế này

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

Thuộc tính 


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


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


<link rel="stylesheet" href="../styles/style.css" />
9 của phần tử 

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


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


<link rel="stylesheet" href="../styles/style.css" />
8 cần tham chiếu một tệp trên hệ thống tệp của bạn. Trong ví dụ trên, tệp CSS nằm trong cùng thư mục với tài liệu HTML, nhưng bạn có thể đặt nó ở một nơi khác và điều chỉnh đường dẫn. Dưới đây là ba ví dụ


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


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


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

biểu định kiểu nội bộ

Biểu định kiểu nội bộ nằm trong tài liệu HTML. Để tạo biểu định kiểu nội bộ, bạn đặt CSS bên trong phần tử 

DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <title>My CSS experimenttitle>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    style>
  head>
  <body>
    <h1>Hello World!h1>
    <p>This is my first CSS examplep>
  body>
html>
1 có trong mã HTML 
DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <title>My CSS experimenttitle>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    style>
  head>
  <body>
    <h1>Hello World!h1>
    <p>This is my first CSS examplep>
  body>
html>
2

HTML cho biểu định kiểu nội bộ có thể trông như thế này

DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <title>My CSS experimenttitle>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    style>
  head>
  <body>
    <h1>Hello World!h1>
    <p>This is my first CSS examplep>
  body>
html>

Trong một số trường hợp, biểu định kiểu nội bộ có thể hữu ích. Ví dụ: có lẽ bạn đang làm việc với một hệ thống quản lý nội dung mà bạn bị chặn sửa đổi các tệp CSS bên ngoài

Nhưng đối với các trang web có nhiều hơn một trang, biểu định kiểu nội bộ sẽ trở thành một cách làm việc kém hiệu quả hơn. Để áp dụng kiểu dáng CSS thống nhất cho nhiều trang bằng cách sử dụng biểu định kiểu bên trong, bạn phải có biểu định kiểu bên trong trong mỗi trang web sẽ sử dụng kiểu dáng đó. Hình phạt hiệu quả cũng chuyển sang bảo trì trang web. Với CSS trong biểu định kiểu nội bộ, có nguy cơ là ngay cả một thay đổi kiểu dáng đơn giản cũng có thể yêu cầu chỉnh sửa nhiều trang web

kiểu nội tuyến

Kiểu nội tuyến là các khai báo CSS ảnh hưởng đến một phần tử HTML duy nhất, được chứa trong thuộc tính 

DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <title>My CSS experimenttitle>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    style>
  head>
  <body>
    <h1>Hello World!h1>
    <p>This is my first CSS examplep>
  body>
html>
3. Việc triển khai kiểu nội tuyến trong tài liệu HTML có thể trông như thế này


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


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


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

Tránh sử dụng CSS theo cách này, nếu có thể. Nó trái ngược với một thực tiễn tốt nhất. Đầu tiên, đây là cách triển khai CSS kém hiệu quả nhất để bảo trì. Một thay đổi kiểu dáng có thể yêu cầu nhiều chỉnh sửa trong một trang web. Thứ hai, CSS nội tuyến cũng trộn mã trình bày (CSS) với HTML và nội dung, khiến mọi thứ trở nên khó đọc và khó hiểu hơn. Tách mã và nội dung giúp bảo trì dễ dàng hơn cho tất cả những người làm việc trên trang web

Có một vài trường hợp mà kiểu nội tuyến phổ biến hơn. Bạn có thể phải sử dụng các kiểu nội tuyến nếu môi trường làm việc của bạn rất hạn chế. Ví dụ: có lẽ CMS của bạn chỉ cho phép bạn chỉnh sửa nội dung HTML. Bạn cũng có thể thấy nhiều kiểu nội tuyến trong email HTML để đạt được khả năng tương thích với càng nhiều ứng dụng email càng tốt

Chơi với CSS trong bài viết này

Đối với bài tập tiếp theo, hãy tạo một thư mục trên máy tính của bạn. Bạn có thể đặt tên cho thư mục bất cứ điều gì bạn muốn. Trong thư mục, sao chép văn bản bên dưới để tạo hai tệp

mục lục. html


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


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


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

phong cách. css


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


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


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

Khi bạn tìm thấy CSS mà bạn muốn thử nghiệm, hãy thay thế nội dung HTML 

DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <title>My CSS experimenttitle>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    style>
  head>
  <body>
    <h1>Hello World!h1>
    <p>This is my first CSS examplep>
  body>
html>
4 bằng một số HTML để tạo kiểu, sau đó thêm mã CSS thử nghiệm vào tệp CSS của bạn

Thay vào đó, bạn cũng có thể sử dụng trình chỉnh sửa tương tác bên dưới

Đọc và vui chơi

Bộ chọn

Bộ chọn nhắm mục tiêu HTML để áp dụng kiểu cho nội dung. Chúng tôi đã phát hiện ra nhiều bộ chọn khác nhau trong hướng dẫn Bắt đầu với CSS. Nếu CSS không áp dụng cho nội dung như mong đợi, thì bộ chọn của bạn có thể không khớp theo cách mà bạn cho rằng nó sẽ khớp

Mỗi quy tắc CSS bắt đầu bằng một bộ chọn — hoặc một danh sách các bộ chọn — để cho trình duyệt biết phần tử hoặc các phần tử mà quy tắc sẽ áp dụng cho. Tất cả các ví dụ dưới đây là bộ chọn hoặc danh sách bộ chọn hợp lệ


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


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


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

Hãy thử tạo một số quy tắc CSS sử dụng các bộ chọn ở trên. Thêm HTML để được tạo kiểu bởi bộ chọn. Nếu bất kỳ cú pháp nào ở trên không quen thuộc, hãy thử tìm kiếm MDN

Ghi chú. Bạn sẽ tìm hiểu thêm về bộ chọn trong mô-đun tiếp theo. bộ chọn CSS

độ đặc hiệu

Bạn có thể gặp các tình huống trong đó hai bộ chọn chọn cùng một phần tử HTML. Xem xét biểu định kiểu bên dưới, với bộ chọn 

DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <title>My CSS experimenttitle>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    style>
  head>
  <body>
    <h1>Hello World!h1>
    <p>This is my first CSS examplep>
  body>
html>
5 đặt văn bản đoạn văn thành màu xanh lam. Tuy nhiên, cũng có một lớp đặt văn bản của các thành phần được chọn thành màu đỏ


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


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


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

Giả sử rằng trong tài liệu HTML của chúng ta, chúng ta có một đoạn văn với lớp 

DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <title>My CSS experimenttitle>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    style>
  head>
  <body>
    <h1>Hello World!h1>
    <p>This is my first CSS examplep>
  body>
html>
6. Áp dụng cả hai quy tắc. Bộ chọn nào chiếm ưu thế? 


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


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


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

Ngôn ngữ CSS có các quy tắc để kiểm soát bộ chọn nào mạnh hơn trong trường hợp xảy ra xung đột. Các quy tắc này được gọi là tầng và tính đặc hiệu. Trong khối mã bên dưới, chúng tôi xác định hai quy tắc cho bộ chọn 

DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <title>My CSS experimenttitle>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    style>
  head>
  <body>
    <h1>Hello World!h1>
    <p>This is my first CSS examplep>
  body>
html>
5, nhưng văn bản đoạn văn sẽ có màu xanh lam. Điều này là do khai báo đặt văn bản đoạn thành màu xanh xuất hiện sau trong biểu định kiểu. Các kiểu sau thay thế các kiểu xung đột xuất hiện trước đó trong biểu định kiểu. Đây là quy tắc tầng

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}
0

Tuy nhiên, trong trường hợp ví dụ trước của chúng tôi với xung đột giữa bộ chọn lớp và bộ chọn phần tử, lớp chiếm ưu thế, khiến văn bản đoạn văn có màu đỏ. Làm thế nào điều này có thể xảy ra ngay cả khi một phong cách xung đột xuất hiện sau đó trong biểu định kiểu?

Hãy thử thí nghiệm này cho chính mình. Thêm HTML, sau đó thêm hai quy tắc 

DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <title>My CSS experimenttitle>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    style>
  head>
  <body>
    <h1>Hello World!h1>
    <p>This is my first CSS examplep>
  body>
html>
8 vào biểu định kiểu của bạn. Tiếp theo, thay đổi bộ chọn 
DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <title>My CSS experimenttitle>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    style>
  head>
  <body>
    <h1>Hello World!h1>
    <p>This is my first CSS examplep>
  body>
html>
5 đầu tiên thành 

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


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


<link rel="stylesheet" href="../styles/style.css" />
10 để xem nó thay đổi kiểu dáng như thế nào

Thoạt đầu, các quy tắc về tính đặc hiệu và dòng thác có vẻ phức tạp. Các quy tắc này sẽ dễ hiểu hơn khi bạn trở nên quen thuộc hơn với CSS. Phần Cascade và kế thừa trong mô-đun tiếp theo sẽ giải thích chi tiết điều này, bao gồm cả cách tính toán tính đặc hiệu

Hiện tại, hãy nhớ rằng tính đặc hiệu tồn tại. Đôi khi, CSS có thể không áp dụng như bạn mong đợi vì một thứ khác trong biểu định kiểu có tính đặc hiệu hơn. Nhận biết rằng nhiều quy tắc có thể áp dụng cho một phần tử là bước đầu tiên để khắc phục các loại vấn đề này

Thuộc tính và giá trị

Ở cấp độ cơ bản nhất, CSS bao gồm hai thành phần

  • Đặc tính. Đây là những mã định danh mà con người có thể đọc được, cho biết bạn muốn sửa đổi các đặc điểm phong cách nào. Ví dụ: 
    
<link rel="stylesheet" href="styles/style.css" />


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


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


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


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


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


<link rel="stylesheet" href="../styles/style.css" />
    13
  • giá trị. Mỗi thuộc tính được gán một giá trị. Giá trị này cho biết cách tạo kiểu cho thuộc tính

Ví dụ dưới đây làm nổi bật một thuộc tính và giá trị. Tên tài sản là 


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


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


<link rel="stylesheet" href="../styles/style.css" />
14 và giá trị là 

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


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


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

Bạn có thể viết css bằng html không?

Khi một thuộc tính được ghép nối với một giá trị, sự ghép nối này được gọi là khai báo CSS. Các khai báo CSS được tìm thấy trong Khối khai báo CSS. Trong ví dụ bên dưới, đánh dấu xác định khối khai báo CSS

Bạn có thể viết css bằng html không?

Cuối cùng, các khối khai báo CSS được ghép nối với các bộ chọn để tạo ra các bộ quy tắc CSS (hoặc quy tắc CSS). Ví dụ dưới đây chứa hai quy tắc. một cho bộ chọn 


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


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


<link rel="stylesheet" href="../styles/style.css" />
16 và một cho bộ chọn 
DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <title>My CSS experimenttitle>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    style>
  head>
  <body>
    <h1>Hello World!h1>
    <p>This is my first CSS examplep>
  body>
html>
5. Đánh dấu màu xác định quy tắc 

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


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


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

Bạn có thể viết css bằng html không?

Đặt các thuộc tính CSS thành các giá trị cụ thể là cách chính để xác định bố cục và kiểu dáng cho tài liệu. Công cụ CSS tính toán khai báo nào áp dụng cho từng thành phần của trang

Các thuộc tính và giá trị CSS không phân biệt chữ hoa chữ thường. Thuộc tính và giá trị trong cặp thuộc tính-giá trị được phân tách bằng dấu hai chấm (


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


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


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

Tra cứu các giá trị khác nhau của các thuộc tính được liệt kê bên dưới. Viết các quy tắc CSS áp dụng kiểu dáng cho các phần tử HTML khác nhau

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


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


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


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


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


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


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


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


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


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


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

Cảnh báo. Nếu một thuộc tính không xác định hoặc nếu một giá trị không hợp lệ cho một thuộc tính nhất định, khai báo sẽ được xử lý là không hợp lệ. Nó hoàn toàn bị công cụ CSS của trình duyệt bỏ qua

Cảnh báo. Trong CSS (và các tiêu chuẩn web khác), người ta đã đồng ý rằng chính tả của Hoa Kỳ là tiêu chuẩn khi có sự khác biệt hoặc không chắc chắn về ngôn ngữ. Ví dụ: 


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


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


<link rel="stylesheet" href="../styles/style.css" />
25 nên được đánh vần là 

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


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


<link rel="stylesheet" href="../styles/style.css" />
14, vì 

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


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


<link rel="stylesheet" href="../styles/style.css" />
25 sẽ không hoạt động

Chức năng

Mặc dù hầu hết các giá trị là từ khóa hoặc giá trị số tương đối đơn giản, nhưng có một số giá trị có dạng hàm

Hàm calc()

Một ví dụ sẽ là hàm 


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


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


<link rel="stylesheet" href="../styles/style.css" />
28, có thể thực hiện phép toán đơn giản trong CSS

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}
1

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}
2

Điều này ám chỉ như

Một hàm bao gồm tên hàm và dấu ngoặc đơn để đặt các giá trị cho hàm. Trong trường hợp của ví dụ 


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


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


<link rel="stylesheet" href="../styles/style.css" />
28 ở trên, các giá trị xác định chiều rộng của hộp này bằng 90% chiều rộng khối chứa, trừ đi 30 pixel. Kết quả của phép tính không phải là thứ có thể tính toán trước và được nhập dưới dạng giá trị tĩnh

Biến đổi chức năng

Một ví dụ khác là các giá trị khác nhau cho 


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


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


<link rel="stylesheet" href="../styles/style.css" />
30, chẳng hạn như 

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


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


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

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}
3

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}
4

Đầu ra từ đoạn mã trên trông như thế này

Tra cứu các giá trị khác nhau của các thuộc tính được liệt kê bên dưới. Viết các quy tắc CSS áp dụng kiểu dáng cho các phần tử HTML khác nhau

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


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


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


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


<link rel="stylesheet" href="../styles/style.css" />
    33, trong các giá trị độ dốc cụ thể
  • 
<link rel="stylesheet" href="styles/style.css" />


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


<link rel="stylesheet" href="../styles/style.css" />
    14, cụ thể là các giá trị rgb/rgba/hsl/hsla

@quy tắc

CSS @rules (phát âm là "at-rules") cung cấp hướng dẫn về những gì CSS nên thực hiện hoặc cách hoạt động của CSS. Một số @rules rất đơn giản chỉ với một từ khóa và một giá trị. Ví dụ: 


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


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


<link rel="stylesheet" href="../styles/style.css" />
35 nhập một biểu định kiểu vào một biểu định kiểu CSS khác

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}
5

Một @rule phổ biến mà bạn có thể gặp phải là 


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


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


<link rel="stylesheet" href="../styles/style.css" />
36, được sử dụng để tạo truy vấn phương tiện. Truy vấn phương tiện sử dụng logic có điều kiện để áp dụng kiểu dáng CSS

Trong ví dụ bên dưới, biểu định kiểu xác định nền màu hồng mặc định cho phần tử 

DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <title>My CSS experimenttitle>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    style>
  head>
  <body>
    <h1>Hello World!h1>
    <p>This is my first CSS examplep>
  body>
html>
4. Tuy nhiên, một truy vấn phương tiện theo sau xác định nền màu xanh nếu chế độ xem của trình duyệt rộng hơn 30em

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}
6

Bạn sẽ gặp các @rules khác trong suốt các hướng dẫn này

Xem liệu bạn có thể thêm truy vấn phương tiện thay đổi kiểu dựa trên chiều rộng của chế độ xem không. Thay đổi độ rộng của cửa sổ trình duyệt của bạn để xem kết quả

viết tắt

Một số thuộc tính như 


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


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


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

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


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


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

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


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


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

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


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


<link rel="stylesheet" href="../styles/style.css" />
24 và 

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


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


<link rel="stylesheet" href="../styles/style.css" />
52 được gọi là thuộc tính tốc ký. Điều này là do các thuộc tính tốc ký đặt một số giá trị trong một dòng

Ví dụ, một dòng mã này

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}
7

tương đương với bốn dòng mã này

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}
8

một dòng này

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}
9

tương đương với năm dòng này


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


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


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

Ở phần sau của khóa học, bạn sẽ gặp nhiều ví dụ khác về thuộc tính tốc ký. Tham chiếu CSS của MDN là một tài nguyên tốt để biết thêm thông tin về bất kỳ thuộc tính tốc ký nào

Hãy thử sử dụng các khai báo (ở trên) trong bài tập CSS của riêng bạn để làm quen với cách thức hoạt động của nó. Bạn cũng có thể thử nghiệm với các giá trị khác nhau

Cảnh báo. Một khía cạnh ít rõ ràng hơn của việc sử dụng tốc ký CSS là cách thiết lập lại các giá trị bị bỏ qua. Một giá trị không được chỉ định trong tốc ký CSS sẽ hoàn nguyên về giá trị ban đầu của nó. Điều này có nghĩa là một thiếu sót trong tốc ký CSS có thể ghi đè các giá trị đã đặt trước đó

Bình luận

Như với bất kỳ công việc mã hóa nào, cách tốt nhất là viết bình luận cùng với CSS. Điều này giúp bạn ghi nhớ cách thức hoạt động của mã khi bạn quay lại sau để sửa lỗi hoặc nâng cao. Nó cũng giúp người khác hiểu mã

Nhận xét CSS bắt đầu bằng 


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


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


<link rel="stylesheet" href="../styles/style.css" />
53 và kết thúc bằng 

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


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


<link rel="stylesheet" href="../styles/style.css" />
54. Trong ví dụ bên dưới, các chú thích đánh dấu sự bắt đầu của các đoạn mã riêng biệt. Điều này giúp điều hướng cơ sở mã khi nó lớn hơn. Với loại nhận xét này, việc tìm kiếm nhận xét trong trình chỉnh sửa mã của bạn trở thành một cách để tìm một phần mã hiệu quả


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


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


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

Mã "Nhận xét" cũng hữu ích để tạm thời vô hiệu hóa các phần mã để kiểm tra. Trong ví dụ dưới đây, các quy tắc cho 


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


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


<link rel="stylesheet" href="../styles/style.css" />
10 bị vô hiệu hóa bằng cách "nhận xét" mã


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


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


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

Thêm nhận xét vào CSS của bạn

khoảng trắng

Khoảng trắng có nghĩa là khoảng trắng, tab và dòng mới thực tế. Giống như trình duyệt bỏ qua khoảng trắng trong HTML, trình duyệt bỏ qua khoảng trắng bên trong CSS. Giá trị của khoảng trắng là cách nó có thể cải thiện khả năng đọc

Trong ví dụ bên dưới, mỗi khai báo (và bắt đầu/kết thúc quy tắc) có một dòng riêng. Đây được cho là một cách tốt để viết CSS. Nó giúp dễ dàng duy trì và hiểu CSS hơn


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


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


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

Ví dụ tiếp theo hiển thị CSS tương đương ở định dạng nén hơn. Mặc dù hai ví dụ hoạt động như nhau, nhưng ví dụ bên dưới khó đọc hơn


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


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


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

Đối với các dự án của riêng bạn, bạn sẽ định dạng mã của mình theo sở thích cá nhân. Đối với các dự án nhóm, bạn có thể thấy rằng một nhóm hoặc dự án có hướng dẫn phong cách riêng

Cảnh báo. Mặc dù các giá trị được phân tách bằng khoảng trắng trong khai báo CSS, tên thuộc tính không bao giờ có khoảng trắng

Ví dụ: các khai báo này là CSS hợp lệ


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


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


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

Nhưng những tuyên bố này là không hợp lệ


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


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


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

Bạn có thấy các lỗi khoảng cách? . Mục nhập 


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


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


<link rel="stylesheet" href="../styles/style.css" />
56 có nghĩa là hai giá trị riêng biệt. 

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


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


<link rel="stylesheet" href="../styles/style.css" />
59 và 

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


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


<link rel="stylesheet" href="../styles/style.css" />
70. Thứ hai, trình duyệt không nhận ra 

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


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


<link rel="stylesheet" href="../styles/style.css" />
71 là thuộc tính hợp lệ. Tên tài sản chính xác (

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


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


<link rel="stylesheet" href="../styles/style.css" />
72) được phân tách bằng dấu cách sai

Bạn phải luôn đảm bảo phân tách các giá trị riêng biệt với nhau bằng ít nhất một dấu cách. Giữ tên thuộc tính và giá trị thuộc tính cùng nhau dưới dạng các chuỗi không bị gián đoạn

Để tìm hiểu xem khoảng cách có thể phá vỡ CSS như thế nào, hãy thử chơi với khoảng cách bên trong CSS thử nghiệm của bạn

Bản tóm tắt

Tại thời điểm này, bạn nên hiểu rõ hơn về cách CSS được cấu trúc. Cũng rất hữu ích khi hiểu cách trình duyệt sử dụng HTML và CSS để hiển thị trang web. Bài viết tiếp theo How CSS works, giải thích quy trình

CSS được sử dụng ở đâu trong HTML?

CSS được sử dụng để xác định phong cách cho các trang web. Nó mô tả giao diện và định dạng của tài liệu được viết bằng ngôn ngữ đánh dấu. Nó cung cấp một tính năng bổ sung cho HTML. Nó thường được sử dụng với HTML để thay đổi kiểu trang web và giao diện người dùng

CSS và HTML có giống nhau không?

HTML là ngôn ngữ đánh dấu được sử dụng để tạo các trang web tĩnh và ứng dụng web. CSS là ngôn ngữ biểu định kiểu chịu trách nhiệm trình bày các tài liệu được viết bằng ngôn ngữ đánh dấu . màu nền. màu xanh lá; .

programming html

Bài Viết Liên Quan

Kem chống nắng spf 50 pa là gì năm 2024
Kem chống nắng spf 50 pa là gì năm 2024

là ai Hỏi Đáp Là gì Pa++++ là gì
Bài tập cuối tuần lớp 4 tuần 21 năm 2024
Bài tập cuối tuần lớp 4 tuần 21 năm 2024

mẹo hay Khỏe Đẹp Bài tập
Cầu thủ nào ghi nhiều bàn thắng nhất năm 2024
Cầu thủ nào ghi nhiều bàn thắng nhất năm 2024

mẹo hay
Hộp số vô cấp nghĩa là gì năm 2024
Hộp số vô cấp nghĩa là gì năm 2024

là ai Hỏi Đáp Là gì Ngôn ngữ Nghĩa là gì
Lỗi hỗ trợ kê khai 4.1.2 không lên năm 2024
Lỗi hỗ trợ kê khai 4.1.2 không lên năm 2024

mẹo hay
Cách khắc phục lỗi lol bị dis khi vào game năm 2024
Cách khắc phục lỗi lol bị dis khi vào game năm 2024

mẹo hay Mẹo Hay Cách Game Lỗi GPU LOL
Các trường bán trú thái văn lung tại thủ đức năm 2024
Các trường bán trú thái văn lung tại thủ đức năm 2024

mẹo hay
Khoản mục tài sản dài hạn khác là gì năm 2024
Khoản mục tài sản dài hạn khác là gì năm 2024

là ai Hỏi Đáp Là gì
Công văn giải trình đăng ký làm thêm qua giờ năm 2024
Công văn giải trình đăng ký làm thêm qua giờ năm 2024

mẹo hay Giải trình
Nước mũi có mùi hôi là bệnh gì năm 2024
Nước mũi có mùi hôi là bệnh gì năm 2024

là ai
Giải bài tập sinh hoc 9 trong sách giáo khoa năm 2024
Giải bài tập sinh hoc 9 trong sách giáo khoa năm 2024

mẹo hay Khỏe Đẹp Bài tập Học Tốt Sách VietJack 9
Thank you for your business là gì năm 2024
Thank you for your business là gì năm 2024

là ai Hỏi Đáp Là gì
Cách hóa giải nhà vệ sinh dưới gầm cầu thang năm 2024
Cách hóa giải nhà vệ sinh dưới gầm cầu thang năm 2024

mẹo hay Mẹo Hay Cách Xây Đựng Nhà
Thời tiết võ lao văn bàn lào cai năm 2024
Thời tiết võ lao văn bàn lào cai năm 2024

mẹo hay
Công thức giải bài tập bài toán chuyển động đều năm 2024
Công thức giải bài tập bài toán chuyển động đều năm 2024

mẹo hay Khỏe Đẹp Bài tập Học Tốt Công thức
Đâm chồi nảy lộc có nghĩa là gì năm 2024
Đâm chồi nảy lộc có nghĩa là gì năm 2024

là ai Hỏi Đáp Là gì Ngôn ngữ Nghĩa là gì
Văn khấn ông thổ công ngày mùng 1 năm 2024
Văn khấn ông thổ công ngày mùng 1 năm 2024

mẹo hay
Làm thế nào để con tập trung hơn năm 2024
Làm thế nào để con tập trung hơn năm 2024

mẹo hay Hỏi Đáp Thế nào
Bài thơ hột lúa của phan văn trị năm 2024
Bài thơ hột lúa của phan văn trị năm 2024

mẹo hay
713 phan văn trị phường 7 quận gò vấp năm 2024
713 phan văn trị phường 7 quận gò vấp năm 2024

mẹo hay

Quảng Cáo

Có thể bạn quan tâm

3 tuổi trở lên tiếng anh là gì năm 2024
1 ngày trước . bởi TrendyComedian
Cach tra xem minh dang goi gói cước nào vietttel năm 2024
1 ngày trước . bởi Bright-eyedMisery
Giấy khai sinh bản sao là gì năm 2024
1 ngày trước . bởi InternationalBarrier
Các văn bản tham mưu cấp đảng ủy chính quyền năm 2024
1 ngày trước . bởi IntestinalDiscord
Bán nhà ngõ 93 hoàng văn thái 7 tỷ năm 2024
1 ngày trước . bởi HandicappedBilling
Kẻ vô tình cắm liễu lại xanh là gì năm 2024
1 ngày trước . bởi AccidentalAllegiance
Anh chị hiểu thế nào về quy tắc ứng xử năm 2024
1 ngày trước . bởi CheerfulNetworking
Các ký thi toán quốc tế tập 1 năm 2024
1 ngày trước . bởi UnsophisticatedResentment
Biểu thức kt nhiệt động học là gì năm 2024
1 ngày trước . bởi VolatileRighteousness
Xe thanh hóa đi giao thủy nam định năm 2024
1 ngày trước . bởi StoppedSwimmer

Toplist được quan tâm

#1
Top 4 uống nước chanh sả mật ong có tác dụng gì 2023
5 tháng trước
#2
Top 10 bài tập làm văn số 5 lớp 7 de 4 2023
5 tháng trước
#3
Top 3 vừa chơi đã có tài khoản vương giả chap 1 2023
5 tháng trước
#4
Top 6 anh sẽ on thôi cover phạm nguyên ngọc lyrics 2023
5 tháng trước
#5
Top 7 tài liệu quản lý nhà nước và quản lý ngành giáo dục đào tạo 2023
5 tháng trước
#6
Top 7 hãy ra khỏi người đó đi hợp âm 2023
5 tháng trước
#7
Top 6 giáo án thơ về thăm nhà bác 2023
5 tháng trước
#8
Top 8 giáo án ngữ văn 6 cánh diều 2023
5 tháng trước
#9
Top 9 tinh bột tham gia phản ứng nào 2023
5 tháng trước

Quảng cáo

Xem Nhiều

Câu nói của m gorki văn học là nhân học năm 2024
5 ngày trước . bởi AnnouncedClearing
Bài báo cáo thực tập giao hàng xuất nhập khẩu năm 2024
1 tuần trước . bởi AfloatCemetery
Quản lý đổi mới phương pháp dạy học là gì năm 2024
1 tuần trước . bởi TechnologicalCoconut
Khắc phục lỗi điện thoại không lên màn hình năm 2024
1 tuần trước . bởi ExemplaryBaker
Cần tập trung nội dung văn hóa nào nhất năm 2024
3 ngày trước . bởi BenignAdaptation
Tập làm văn ôn tập về tả người năm 2024
5 ngày trước . bởi SpringyEmbodiment
Gửi message cho nhiều người trên facebook bị lỗi năm 2024
5 ngày trước . bởi Last-minuteOutcome
Hoôm nay ngày 13-12-2023 vàng sjc giá bao nhiêu năm 2024
1 tuần trước . bởi ForthrightEyewitness
Top kem dưỡng trắng da mặt hiệu quả năm 2024
3 ngày trước . bởi CoolVicinity
Toán lớp 4 tập 1 trang 83 84 năm 2024
2 ngày trước . bởi IllustratedWidth

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

DMCA.com Protection Status
Bản quyền © 2021 Hàng Hiệu Inc.