CSS đi vào thẻ nào?

Question

<49 500252 53025556

Nội dung chính Show

CSS có được viết bằng thẻ kiểu không?
Tôi có thể thêm CSS vào thẻ HTML không?
Thẻ kiểu đi đâu trong CSS?

6_______95_______>

html6

<<2>

84_______00 01 0203>

html0<00 01 02101100>

html0<00 85 0220>

<823

html0600>

600>

6_______84_______2>

6_______97_______>

đầu ra.

Thuộc tính của CSS. CSS nội tuyến có mức độ ưu tiên cao nhất, sau đó đến Nội bộ/Được nhúng, tiếp theo là CSS bên ngoài có mức độ ưu tiên thấp nhất. Nhiều biểu định kiểu có thể được xác định trên một trang. Nếu đối với thẻ HTML, các kiểu được xác định trong nhiều biểu định kiểu thì thứ tự bên dưới sẽ được tuân theo.

Vì Nội tuyến có mức độ ưu tiên cao nhất, bất kỳ kiểu nào được xác định trong biểu định kiểu bên trong và bên ngoài đều bị ghi đè bởi Kiểu nội tuyến
Internal hoặc Embedded đứng thứ hai trong danh sách ưu tiên và ghi đè các kiểu trong style sheet bên ngoài
Biểu định kiểu bên ngoài có mức độ ưu tiên thấp nhất. Nếu không có kiểu nào được xác định trong biểu định kiểu nội tuyến hoặc nội bộ thì các quy tắc biểu định kiểu bên ngoài sẽ được áp dụng cho các thẻ HTML

Trình duyệt được hỗ trợ

Google Chrome
trình duyệt web IE
firefox
Ô-pê-ra
Cuộc đi săn

CSS là nền tảng của các trang web, được sử dụng để phát triển trang web bằng cách tạo kiểu trang web và ứng dụng web. Bạn có thể học CSS từ đầu bằng cách làm theo Hướng dẫn CSS và Ví dụ về CSS này

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

đ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

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 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ộ 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 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 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

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

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

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

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My CSS experimentstitle>
    <link rel="stylesheet" href="styles.css" />
  head>
  <body>
    <p>Create your test HTML herep>
  body>
html>

phong cách. css

/* Create your test CSS here */

p {
  color: red;
}

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 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ệ

h1
a:link
.manythings
#onething
*
.box p
.box p:first-child
h1, h2, .intro

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

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 đỏ

.special {
  color: red;
}

p {
  color: blue;
}

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ế?

<p class="special">What color am I?p>

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

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

0 để 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

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

Của cải. Đâ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ụ:

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

1,

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

2,

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

3

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à

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

4 và giá trị là

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

5

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

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

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

6 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

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

6

Đặ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 (

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

9)

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

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

1

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

2

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

3

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

4

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My CSS experimentstitle>
    <link rel="stylesheet" href="styles.css" />
  head>
  <body>
    <p>Create your test HTML herep>
  body>
html>

4

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ụ:

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My CSS experimentstitle>
    <link rel="stylesheet" href="styles.css" />
  head>
  <body>
    <p>Create your test HTML herep>
  body>
html>

5 nên được đánh vần là

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

4, vì

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My CSS experimentstitle>
    <link rel="stylesheet" href="styles.css" />
  head>
  <body>
    <p>Create your test HTML herep>
  body>
html>

5 sẽ không hoạt độ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

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My CSS experimentstitle>
    <link rel="stylesheet" href="styles.css" />
  head>
  <body>
    <p>Create your test HTML herep>
  body>
html>

8, có thể thực hiện các 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ụ

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My CSS experimentstitle>
    <link rel="stylesheet" href="styles.css" />
  head>
  <body>
    <p>Create your test HTML herep>
  body>
html>

8 ở 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

/* Create your test CSS here */

p {
  color: red;
}

0, chẳng hạn như

/* Create your test CSS here */

p {
  color: red;
}

1

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

/* Create your test CSS here */

p {
  color: red;
}

0

/* Create your test CSS here */

p {
  color: red;
}

3, cụ thể là các giá trị độ dốc

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

4, đặc biệt là các giá trị rgb và hsl

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ụ:

/* Create your test CSS here */

p {
  color: red;
}

5 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à

/* Create your test CSS here */

p {
  color: red;
}

6, đượ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ả

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

/* Create your test CSS here */

p {
  color: red;
}

8,

/* Create your test CSS here */

p {
  color: red;
}

9,

h1
a:link
.manythings
#onething
*
.box p
.box p:first-child
h1, h2, .intro

0,

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My CSS experimentstitle>
    <link rel="stylesheet" href="styles.css" />
  head>
  <body>
    <p>Create your test HTML herep>
  body>
html>

4 và

h1
a:link
.manythings
#onething
*
.box p
.box p:first-child
h1, h2, .intro

2 đượ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 đó

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

h1
a:link
.manythings
#onething
*
.box p
.box p:first-child
h1, h2, .intro

3 và kết thúc bằng

h1
a:link
.manythings
#onething
*
.box p
.box p:first-child
h1, h2, .intro

4. 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ụ bên dưới, các quy tắc cho

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

0 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 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

h1
a:link
.manythings
#onething
*
.box p
.box p:first-child
h1, h2, .intro

6 có nghĩa là hai giá trị riêng biệt.

h1
a:link
.manythings
#onething
*
.box p
.box p:first-child
h1, h2, .intro

9 và

.special {
  color: red;
}

p {
  color: blue;
}

0. Thứ hai, trình duyệt không công nhận

.special {
  color: red;
}

p {
  color: blue;
}

1 là thuộc tính hợp lệ. Tên tài sản chính xác (

.special {
  color: red;
}

p {
  color: blue;
}

2) đượ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

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ó được viết bằng thẻ kiểu không?

Giới thiệu. Thông thường, CSS được viết trong một tệp CSS riêng (có phần mở rộng tệp. css ) hoặc trong thẻ , nhưng có vị trí thứ ba cũng hợp lệ. Vị trí thứ ba bạn có thể viết CSS là bên trong thẻ HTML, sử dụng thuộc tính style.

Tôi có thể thêm CSS vào thẻ HTML không?

Có ba cách để thêm CSS vào HTML. Bạn có thể thêm CSS nội tuyến vào thuộc tính kiểu để tạo kiểu cho một phần tử HTML trên trang . Bạn có thể nhúng biểu định kiểu nội bộ bằng cách thêm CSS vào phần đầu của tài liệu HTML của bạn. Hoặc bạn có thể liên kết đến một biểu định kiểu bên ngoài sẽ chứa tất cả CSS tách biệt với HTML của bạn.

Thẻ kiểu đi đâu trong CSS?

Phần tử bên trong . Nói chung, tốt hơn là đặt các kiểu của bạn trong các biểu định kiểu bên ngoài và áp dụng chúng bằng các phần tử

programming css

CSS đi vào thẻ nào?

Hàm calc()

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

CSS có được viết bằng thẻ kiểu không?

Tôi có thể thêm CSS vào thẻ HTML không?

Thẻ kiểu đi đâu trong 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