CSS | Các điều khoản phổ biến trên trang web 0 lần nhìn thấy

Sự miêu tả

Trong cơ hội này, chúng tôi sẽ cố gắng hiểu CSS là gì. Chúng ta thường nghe về CSS hoặc các nhà phát triển website sẽ rất quen thuộc với thuật ngữ này. Cascading Style Sheets (CSS) là một ngôn ngữ bảng định kiểu được sử dụng để mô tả việc trình bày các tài liệu được viết bằng ngôn ngữ đánh dấu như HTML. CSS là công nghệ nền tảng của World Wide Web, cùng với HTML và JavaScript. CSS dành cho các nhà phát triển trang web được biết là hữu ích để tạo kiểu cho trang web, phông chữ, màu sắc, kích thước, khoảng cách, đường viền, hình nền và bóng chỉ là một vài ví dụ có thể được điều chỉnh bằng CSS. Tuy nhiên, một số người có thể không hiểu thuật ngữ này, đặc biệt là đối với các nhà phát triển mới làm quen với thế giới trang web viết mã.

Có nhiều tham chiếu đến thuật ngữ CSS này. Nhưng ở đây tác giả sẽ cố gắng giảm thuật ngữ này thành một đơn vị duy nhất để dễ hiểu cho cả những nhà phát triển trang web mới.

CSS như chúng ta vẫn thường nghe không phải là một thuật ngữ riêng lẻ mà nó chỉ có chức năng tạo kiểu cho trang web và thế là xong. Tuy nhiên, có đủ các thuật ngữ mà chúng ta nên biết cùng nhau để hiểu sâu sắc về thuật ngữ CSS này.

CSS mà chúng tôi hiểu

CSS là mã giúp các nhà phát triển trang web dễ dàng thay đổi kiểu trên nhiều hoặc tất cả các trang web, xác định bố cục, tạo kiểu văn bản từ xác định độ dày của văn bản, màu văn bản, kiểu văn bản, chữ in nghiêng cho đến các phần tử khác, v.v. trước đây nó chỉ có thể được chỉ định trong trang HTML.

CSS hiện tại

Hãy biết ơn vì bạn đã có trong thời đại mới của CSS ngày nay. Bây giờ là lúc cho CSS3 đã vượt qua tương lai xa và đã phát triển rất nhiều so với kỷ nguyên trước của CSS2. Nhờ CSS3, có thể tạo các góc tròn và hiệu ứng đổ bóng có thể được hiển thị trong trình duyệt. CSS3 cũng cung cấp các công cụ mới để mô tả màu sắc trong tài liệu. HSL (Hue-Saturation-Lightness) là phần bổ sung mới nhất cho HSLA, bao gồm kênh Alpha để giảm độ mờ.

Bộ chọn thuộc tính là một bước tiến lớn khi nói đến kiểu đánh dấu thẳng. Với kiểu mã hóa này, bạn có thể nhắm mục tiêu các tên phần tử cụ thể chứa các thuộc tính với các giá trị cụ thể. Điều này chủ yếu hữu ích khi làm việc với đánh dấu chẳng hạn như XML, nơi không có nguyên tắc thiết kế chuẩn để thao tác các nút. Các ví dụ dưới đây là những ý tưởng tương đối đơn giản:

1. div[attrib^="1"] { /* styles here */ }

Đoạn mã trên là một phần của thư viện bộ chọn CSS. Điều này sẽ ảnh hưởng đến tất cả các phần tử div có thuộc tính "do" cũng có giá trị "1". Nếu điều này vẫn còn khó hiểu, hãy xem ví dụ dưới đây để làm rõ. Về lý thuyết, hai bộ chọn này sẽ làm điều tương tự.

1. p[id^="primary"] { /* styles */ }
2. p#primary { /* styles */ }

CSS giờ đây tự hào là ngôn ngữ thống trị để tạo kiểu cho các trang web front-end của chúng tôi.

Các thuật ngữ quan trọng trong CSS

Các điều khoản sau đây dựa trên bài báo Divya Manian được sửa đổi với nhiều nguồn đại diện khác.

  • Property là Kiểu mà bạn áp dụng cho bộ chọn. Nói một cách dễ hiểu, thuộc tính là thứ xuất hiện trước dấu hai chấm trên mỗi dòng CSS. Trong ví dụ dưới đây, từ "width" là một thuộc tính.
#box  {
   width : 200px; /* thuộc tính là "width" (không có dấu hai chấm) */ 
}
  • Value là Giá trị mà tài sản có thể có. Nói một cách dễ hiểu, Giá trị là thứ xuất hiện ngay sau dấu hai chấm trong mỗi dòng CSS. Trong ví dụ dưới đây, "200px" là giá trị.
#box  {
   width : 200px; /* sau dấu hai chấm, không có dấu chấm phẩy */ 
}
  • Keyword là Các từ được định nghĩa trong đặc tả CSS và do đó không được xuất hiện trong dấu ngoặc kép khi được sử dụng. Ví dụ: đỏ, đặc, chấm. Từ khóa là các giá trị cho các thuộc tính và hơi giống các từ có thứ tự cho các thuộc tính cụ thể. Các thuộc tính khác nhau có các từ khóa khác nhau và tất cả các thuộc tính đều cho phép từ khóa "inherit". Trong ví dụ dưới đây, giá trị "auto" là một từ khóa.
#container {
  height: auto; /* "auto" Là keyword */
}

Một số người cho rằng:! Important đủ điều kiện như một từ khóa, dựa trên cách nó được phân biệt với giá trị.

  • Length Units là một Giá trị có thể được khai báo theo đơn vị (ví dụ: 1px, 2%).
  • Functional Notation là bất kỳ Giá trị nào được định nghĩa dưới dạng một hàm (định danh theo sau là ()). Chủ yếu được sử dụng để xác định màu sắc, URI, thuộc tính và phép biến đổi: ví dụ: rgba (0, 0, 0, 0,5), url ('im.png'), attr ('href'), scale (20).
  • Identifier là bất kỳ thứ gì xuất hiện dưới dạng thuộc tính, id, lớp, giá trị từ khóa và at-rule. Trong ví dụ dưới đây là bốn số nhận dạng:
/* "body", "background", "none", và "font-size" Là identifiers */
body {
  background: none;
  font-size: 14px;
}
/* "14px" is not an identifier */

Word "body" là một định danh hoặc định danh; từ "background" cũng là một định danh; từ "none" là một định danh; và từ "font-size" là một định danh. Giá trị cuối cùng "14px" không phải là số nhận dạng, vì nó không phải là từ khóa.

  • Declaration là tập hợp các tên và giá trị thuộc tính. Thông thường, một dòng CSS xuất hiện giữa các dấu ngoặc nhọn, được viết tắt hoặc viết tay. Trong ví dụ dưới đây, mọi thứ sau dấu ngoặc nhọn đầu tiên và trước dấu ngoặc nhọn cuối cùng (không bao gồm chú thích) là một khai báo:
body {
  font-family: Arial, sans-serif; /* dòng này là một tuyên bố */
  background: red; /* dòng này là một tuyên bố */
}

Trong ví dụ sau, có hai khai báo giữa các dấu {}:

body {
  font-family: Arial, sans-serif; /* one declaration */
  color: #555; /* another declaration */
}
  • Declaration Block là phần của CSS nơi các cặp thuộc tính / giá trị xuất hiện. Trong ví dụ bên dưới, mọi thứ được tìm thấy giữa các dấu {} (không bao gồm nhận xét) là một khối khai báo:
body {
  font-family: Arial, sans-serif; /* bắt đầu bằng dòng này */
  color: #555;
  font-size: 14px;
  line-height: 20px; /* kết thúc ở đây, trước dấu ngoặc nhọn đóng */
}
  • Rule or Rule Set là một bộ chọn theo sau là một khối khai báo. Đây là một đoạn CSS đơn lẻ bao gồm bộ chọn, dấu {} và các dòng khác nhau với các thuộc tính và giá trị. Đoạn mã trong ví dụ dưới đây bao gồm một bộ quy tắc:
body {
  font-family: Arial, sans-serif;
  color: #555;
  font-size: 14px;
}

#responsive {
clear: both;
color: #000;
background-color: chocolate;
}
  • Selector là cách bạn khai báo những phần tử nào để áp dụng kiểu. Cụ thể, bộ chọn là phần của dòng CSS chọn các phần tử mục tiêu với các cặp thuộc tính / giá trị. Trong ví dụ bên dưới, "#container #box" là một bộ chọn:
/* bộ chọn là mọi thứ trên dòng đầu tiên */
/* loại trừ dấu ngoặc nhọn mở đầu */
#container #box {
  width: 200px;
}
  • Element Type Selector là một bộ chọn nhắm mục tiêu phần tử có tên thẻ. Bộ chọn trong ví dụ bên dưới là bộ chọn loại phần tử, vì nó không sử dụng lớp, ID hoặc bộ chọn khác để áp dụng một kiểu nhất định. Thay vào đó, nó nhắm mục tiêu trực tiếp tất cả các phần tử điều hướng HTML5:
/* matches an HTML element by name */
nav {
  font-family: Arial, sans-serif;
  color: #555;
  font-size: 14px;
}
  • Class Selector là các bộ chọn được sử dụng phổ biến nhất. Ví dụ: .style, .pen, .mystyle, v.v., để chọn các phần tử có tên lớp kiểu, pen, mystyle, that. Điều này được phép cho nhiều hơn 1 phần tử có cùng tên lớp. Bộ chọn trong ví dụ dưới đây nhắm mục tiêu các phần tử theo tên lớp của chúng. Vì vậy, mỗi phần tử có lớp "navigation" sẽ nhận được kiểu dự định:
/* khớp phần tử HTML với class="navigation" */
.navigation {
  width: 960px;
  margin: 0 auto;
}
  • ID Selector là sử dụng nó một cách tiết kiệm. Bạn không thể sử dụng lại các ID trong cùng một trang và chúng chỉ được sử dụng để xác định duy nhất các phần tử. Thí dụ:
<div class="text-center gaya" id=ini-idselektor></div>

Bộ chọn trong ví dụ bên dưới nhắm mục tiêu các phần tử theo ID của chúng. Vì vậy, mỗi phần tử có một ID "navigation" sẽ nhận được phong cách dự định:

/* matches HTML element with id="navigation" */
#navigation {
  width: 960px;
  margin: 0 auto;
}
  • Universal Selector Bộ chọn phổ quát khớp với bất kỳ phần tử nào trong ngữ cảnh mà nó được đặt trong bộ chọn. Trong ví dụ dưới đây, ký tự * là một bộ chọn phổ quát:
/* ký tự dấu hoa thị là bộ chọn phổ quát */
.navigation ul * {
  width: 100px;
  float: left;
}

Vì vậy, bất kỳ phần tử nào xuất hiện dưới dạng con cháu của một phần tử danh sách không có thứ tự bên trong các phần tử có lớp "điều hướng" sẽ nhận được kiểu được khai báo. Các bộ chọn phổ quát thường không được khuyến khích vì lý do hiệu suất.

  • Attribute Selector là nếu bạn sử dụng thuộc tính khác với lớp hoặc id để xác định các phần tử trong biểu định kiểu, bạn sẽ sử dụng Bộ chọn thuộc tính. Bạn cũng có thể thực hiện đối sánh mẫu trong bộ chọn thuộc tính (vì vậy nếu bạn muốn đối sánh mẫu cho bộ chọn bằng cách sử dụng thuộc tính lớp hoặc ID, bạn có thể sử dụng bộ chọn thuộc tính). Thí dụ:
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<style>
a[target] {
  background-color: yellow;
}
</style>
<!-- CSS -->
</head>
<body>

<p>Các liên kết có thuộc tính "target" có nền màu vàng:</p>

<a href="https://www.google.com">Google Internasional</a>

<!-- nền màu vàng -->
<a href="https://www.google.co.id" target="_blank">Google Vietnamese</a>
<a href="https://www.google.org" target="_top">Tổ chức Google</a>
<!-- nền màu vàng -->

</body>
</html>
  • Pseudo-Classes là một lớp được áp dụng cho các phần tử dựa trên thông tin không có trong phần đánh dấu, ví dụ: first-child hoặc: last-child. Bạn không thể sử dụng phần article: first-child để chọn lần xuất hiện đầu tiên của bài viết, nếu phần con đầu tiên của phần là h1 chứ không phải là article. Tương tự như vậy với: nth-child và: last-childpseudo-class.
  • Pseudo-Elements Pseudo-element khác với Pseudo-Classes ở chỗ chúng thực sự tạo ra các phần tử trong cây tài liệu. Đây gần như là ví dụ đầu tiên về việc CSS sửa đổi cây tài liệu HTML. Tốt nhất là bạn nên sử dụng phần tử giả với "::" thay vì ":" (nhưng hầu hết các trình duyệt chấp nhận ký hiệu ":" cho phần tử giả CSS 2.1). Các phần tử giả là: ::first-line, ::first-letter, ::before, ::after.
  • Combinators là sự lựa chọn các phần tử dựa trên các sự kiện liên quan đến các phần tử khác (được chọn bởi các tùy chọn tổ hợp: dấu cách,>, +, hoặc ~).

Có bốn tổ hợp khác nhau trong CSS:

  1. Descendant selector (space)
  2. Child selector (>)
  3. Adjacent sibling selector (+)
  4. General sibling selector (~)

Bốn thuật ngữ trên có nghĩa là gì:

  1. Descendant Combinator Đây là cách sử dụng phổ biến nhất, ví dụ: #responsive h1.
  2. Child Combinator là bộ chọn con chọn tất cả các phần tử là con của một phần tử cụ thể. Ví dụ sau chọn tất cả các phần tử < p > là con của các phần tử < div> :
div > p {
  background-color: yellow;
}
  1. Adjacent Sibling Combinator là một Phần tử liền kề trực tiếp với một phần tử khác.
  2. General Sibling Combinator là một Phần tử lân cận, nhưng không trực tiếp với một phần tử khác.
  • At-Rules là các Quy tắc bắt đầu bằng @character, ví dụ: @import, @page, @media và @font-face.
  • Media Features là Với truy vấn phương tiện, bạn có thể nhắm mục tiêu các kiểu tùy thuộc vào các tính năng của phương tiện. Các cách sử dụng phổ biến của tính năng đa phương tiện là chiều rộng tối thiểu và chiều rộng tối đa để phát hiện thiết bị iOS.
  • Vendor-specific Extension là Chính xác những gì nó nói. Chúng cung cấp chức năng cụ thể cho các nhà cung cấp cụ thể (tức là trình duyệt). Chúng không phải lúc nào cũng đại diện cho các tính năng được khai báo trong tiêu chuẩn.
  • Comment atau Statement là một ngôn ngữ giải thích mã CSS được sắp xếp bên dưới nó. Ví dụ: các nhận xét ở đây nói về 4 điều:
    1. Bootstrap v4.3.1 (https://getbootstrap.com/)
    2. Copyright 2011-2019 The Bootstrap Authors
    3. Copyright 2011-2019 Twitter, Inc.
    4. Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
/*!
 * Bootstrap v4.3.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;

Tags: Tài liệu tham khảo trên 15 Tháng chín 2020

Bình luận

Forum Diskusi

Post a reply
3385 views

Trả lời cuộc thảo luận này