Bài báo và Bộ sưu tập Mẫu

Trang danh mục này có các bài báo đại diện và bộ sưu tập các mẫu Nickgenom tốt nhất được lấy từ nhiều nguồn thú vị khác nhau trên internet

css.webp
, Tài liệu tham khảo

CSS | Các điều khoản phổ biến trên trang web

Azkiya
15 Tháng chín 2020

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 trang web 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, nền và bóng chỉ là một vài ví dụ có thể được tùy 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 mã hóa trang web.

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 để nó có thể dễ hiểu cho cả những nhà phát triển trang web mới.

CSS như chúng ta đã nghe rất nhiều lần không phải là một thuật ngữ số ít mà chỉ có vậy, nó chỉ đóng vai trò như một trình tạo kiểu trang web và thế là xong. Tuy nhiên, có khá nhiều thuật ngữ mà chúng ta phải biết cùng nhau để đạt được sự hiểu biết nghiêm túc về các thuật ngữ CSS này.

CSS 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 của một số hoặc tất cả các trang web, xác định bố cục, tạo kiểu văn bản bắt đầu từ việc xác định độ dày của văn bản, màu văn bản, kiểu văn bản, độ nghiêng của 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 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 xa thời gian và đã phát triển rất nhiều so với thời kỳ CSS2 trước đó. Nhờ CSS3, có thể làm cho các góc tròn và hiệu ứng đổ bóng hiển thị trong trình duyệt. CSS3 cũng cung cấp một 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 các 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ã 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ế tiêu chuẩn để thao tác các nút. Ví dụ dưới đây là một ý tưởng tương đối đơn giản :

1. div[attrib^="1"] { /* phong cách ở đây */ }

Đ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 attrib thuộc tính này cũng chứa 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ẽ thực hiện cùng một hành động.

1. p[id^="primary"] { /* phong cách */ }
2. p#primary { /* phong cách */ }

CSS ngày nay luôn tự hào là ngôn ngữ thống trị để tạo kiểu cho các trang web giao diện người dùng 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 bạn áp dụng cho bộ chọn. Nói một cách dễ hiểu, thuộc tính là những gì đứng trước dấu hai chấm trong mỗi dòng CSS. Trong ví dụ bên dưới, 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à những gì xuất hiện ngay sau dấu hai chấm trong mỗi dòng CSS. Trong ví dụ bên dưới, 200px là giá trị.

#box
width : 200px; /* sau dấu hai chấm, không có dấu chấm phẩy */
}

Keyword là một 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ụ : red, solid, dotted. Từ khóa là giá trị cho các thuộc tính và phần nào giống như các từ dành riêng 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à từ khóa.

#container {
height: auto; /* "auto" là một từ khóa */
}

Có những ý kiến đồng ý rằng từ: !important đủ tiêu chuẩn là một từ khóa, dựa trên cách phân biệt từ khóa với các giá trị.

Length Units là các 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 chỉ định dưới dạng hàm (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, class, từ khóa valueat-rule. Trong ví dụ, dưới đây là bốn identifiers :

/* "body", "background", "none" và "font-size" là các số nhận dạng */
body {
  background: none;
  font-size: 14px;
}
/* "14px" không phải là số nhận dạng */

Từ 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à một tập hợp các tên và giá trị thuộc tính. Nó thường là một dòng CSS đơn lẻ 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; /* một tuyên bố */
  color: #555; /* một tuyên bố khác */
}

Declaration Block là phần của CSS nơi các cặp property/value xuất hiện. Trong ví dụ bên dưới, tất cả những gì được tìm thấy giữa {} (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 khi đóng dấu ngoặc nhọn */
}

Rule or Rule Set là một Bộ chọn hoặc bộ chọn theo sau là một khối khai báo. Đây là một đoạn CSS bao gồm bộ chọn, cờ {} 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 phần tử nào nên được tạo kiểu. Cụ thể hơn, bộ chọn là một phần của dòng CSS chọn phần tử mục tiêu với cặp property/value. Trong ví dụ dưới đây, #container, #box là một bộ chọn :

/* bộ chọn là tất cả 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à công cụ chọn nhắm mục tiêu các phần tử theo 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 :

/* khớp với một phần tử HTML theo tên */
nav {
font-family: Arial, sans-serif;
color: #555;
font-size: 14px;
}

Class Selector là 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ó classname style, pen, mystyle, điều đó. Đ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 phần tử theo tên lớp của nó. Vì vậy, bất kỳ phần tử nào có lớp "điều hướng" 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 điều này một cách tiết kiệm. Bạn không thể sử dụng lại một ID trong cùng một trang và nó chỉ được sử dụng để xác định duy nhất một 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, bất kỳ phần tử nào có ID navigation sẽ nhận được kiểu được đề cập :

/* khớp phần tử HTML với id="navigation" */
#navigation {
  width: 960px;
  margin: 0 auto;
}

Universal Selector Bộ chọn phổ dụng 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à 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 tệp con cháu của phần tử danh sách không có thứ tự bên trong một phần tử có lớp navigation sẽ nhận được kiểu được khai báo. Các bộ chọn đa năng thường không được khuyến nghị vì lý do hiệu suất .

Attribute Selector là nếu bạn sử dụng các 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 thực hiệ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>Links with the "target" attribute receive a yellow background:</p>
<a href="https://www.google.com">Google Internasional</a>
<!-- yellow background -->
<a href="https://www.google.co.id" target="_blank">Google Indonesia</a>
<a href="https://www.google.org" target="_top">Google Organization</a>
<!-- yellow background -->
</body>
</html>

Pseudo-Classesclass đượ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 bài viết :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à bài viết. Tương tự như vậy với :nth-child:last-childpseudo-class.

Pseudo-Elements là các 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. Lý tưởng nhất là bạn nên sử dụng các phần tử giả với :: thay vì : (nhưng hầu hết các trình duyệt đều chấp nhận ký hiệu : cho các phần tử giả CSS 2.1). Các phần tử giả là: ::first-line, ::first-letter, ::before, ::after.

Combinators là việc lựa chọn các phần tử dựa trên sự xuất hiện của chúng trong mối quan hệ với 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 :

  • Descendant selector (space)
  • Child selector (>)
  • Adjacent sibling selector (+)
  • General sibling selector (~)

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

  • Descendant Combinator Đây là cách sử dụng phổ biến nhất, ví dụ: #responsive h1.

  • 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 phần tử <div>:

    div > p {
     background-color: yellow;
    }
  • Adjacent Sibling Combinator là một Phần tử nằm liền kề trực tiếp với một phần tử khác.

  • General Sibling Combinator là một Phần tử liền kề, 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 ký tự @, 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 kiểu tùy thuộc vào tính năng phương tiện. Tính năng đa phương tiện được sử dụng phổ biến là min-widthmax-width để phát hiện thiết bị iOS.

  • Vendor-specific Extension Chính xác như 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 nhất thiết phải đại diện cho các tính năng được khai báo trong tiêu chuẩn.

  • Comment hoặc Statement là ngôn ngữ giải thích mã CSS được biên dịch 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)

Hãy chú ý đến mã này :

/*!
  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;

Để lại một bình luận

Từ của trí tuệ

" Những người siêng năng tắm kém hấp dẫn hơn những người siêng năng mỉm cười. "

Tham khảo Bài báo :

Bộ sưu tập mẫu trang web :

We Build

Thẻ bài đăng: Bootstrap, Sửa đổi, Bản mẫu 04 Tháng tám 2021

Above - Template Pendidikan

Thẻ bài đăng: Bootstrap, Bản mẫu 04 Tháng tám 2021

Coming Sssoon + Mods

Thẻ bài đăng: Bootstrap, Sửa đổi, Bản mẫu 30 Tháng mười 2020

Mobster + Mods

Thẻ bài đăng: Bootstrap, Bản mẫu 29 Tháng mười 2020

Material Kit React + Sửa đổi

Thẻ bài đăng: Sửa đổi, React, Bản mẫu 06 Tháng mười 2020

SB Admin + Sửa đổi

Thẻ bài đăng: Bootstrap, Sửa đổi, Bản mẫu 06 Tháng mười 2020

Space Science + Sửa đổi

Thẻ bài đăng: HTML5, Sửa đổi, Bản mẫu 01 Tháng mười 2020

Moderna + Sửa đổi

Thẻ bài đăng: Bootstrap, Sửa đổi, Bản mẫu 30 Tháng chín 2020