Tạo bình luận comment trong css ta dụng kí hiểu nào

Question

Comment trong CSS thường được sử dụng để giải thích mã của bạn. Nó rất hữu ích cho người khác hoặc chính bạn đọc lại mã CSS mà bạn viết ra để có thể dễ dàng hiểu chúng.

Comment được các trình duyệt bỏ qua, không hiển thị trên trình duyệt.

Comment được viết ở một hoặc nhiều dòng và được viết trong /*............*/

Ví dụ về comment trong CSS:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p {
  color: blue;
  /* Comment duoc viet tren 1 dong */
  text-align: center;
  font-size: 17px;
}
/* Comment nay 
 * duoc viet tren 
 * nhieu dong 
*/
</style>
</head>
<body>
  <p>Hello CSS</p>
  <p>Ví dụ về comment trong CSS.</p>
  <p>Những dòng comment không được hiển thị lên trình duyệt.</p>
</body>
</html>

Output:

Cafedev chia sẻ về cách comments trong code css như thế nào là hợp lý nhất có thể.

Bình luận(comments) được sử dụng để giải thích code và có thể giúp ích khi bạn chỉnh sửa code nguồn vào một ngày sau đó.

Bình luận bị bỏ qua bởi các trình duyệt.

Bình luận CSS được đặt bên trong phần tử <style> và bắt đầu bằng / * và kết thúc bằng * /:

Ví dụ:

 /* This is a single-line comment */
p {
  color: red;
}

Bạn có thể thêm comments bất cứ nơi nào bạn muốn trong code:

p {
  color: red;  /* Set text color to red */
}

Comments cũng có thể trải dài trên nhiều dòng:

/* This is
a multi-line
comment */

p {
  color: red;
}

2. Comment HTML và CSS

Từ hướng dẫn HTML, bạn đã học được rằng bạn có thể thêm nhận xét(comments) vào code HTML của mình bằng cách sử dụng cú pháp .

Trong ví dụ sau, chúng ta sử dụng kết hợp các nhận xét HTML và CSS:

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: 
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

<!DOCTYPE html>
<html>
<head>
<style>
p {
  color: red; /* Set text color to red */
}
</style>
</head>
<body>

<h2>My Heading</h2>

<!-- These paragraphs will be red -->
<p>Hello Cafedev!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>

</body>
</html>

Copy and chạy code

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:

Group Facebook
Fanpage
Youtube
Instagram
Twitter
Linkedin
Pinterest
Trang chủ

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!

Chúng ta đã biết file CSS của 1 website khá dài vậy phải viết css thế nào để dễ chỉnh sửa tìm kiếm. Đơn giản là thêm vào những dòng comment.

Định nghĩa comment trong Css ( comment in css)

CSS comment là những dòng chú thích được thêm vào để giải thích ý nghĩa của mã lệnh hoặc cũng được dùng để vô hiệu hóa mã lệnh.

Comment trong CSS được bắt đầu bởi /*và kết thúc bởi */.

/* bắt đầu CSS style */
body {
    background: #f2f2f2;
}

Comment in CSS có thể dài nhiều dòng:

/* comment
dài nhiều dòng
*/

Hoặc để vô hiệu hóa mã CSS:

/*
body {
    background: #f2f2f2;
}
*/

Chúng ta có thể đặt comment phía cuối dòng:

body { /* bộ chọn */
   background: #f2f2f2; /* quy luật CSS */
}

Bạn có muốn làm đẹp cho form bình luận WordPress trên trang web của mình hay không? Phần bình luận đóng vai trò quan trọng trong việc xây dựng sự gắn kết của người dùng trên một trang web. Một form bình luận đẹp mắt, thân thiện với người dùng khuyến khích mọi người tham gia thảo luận. Đó là lý do tại sao gần đây chúng tôi đã tạo ra một hướng dẫn giúp bạn dễ dàng tùy biến form bình luận WordPress theo ý thích của mình.

Trước khi bắt đầu

Theme WordPress quyết định sự xuất hiện cho trang web của bạn. Mỗi theme WordPress thường đi kèm với một số tệp bao gồm file template, file chức năng, JavaScripts và các stylesheet.

Stylesheet chứa các quy tắc CSS cho tất cả các thành phần được sử dụng bởi chủ đề WordPress của bạn. Bạn có thể thêm CSS tùy chỉnh của riêng mình để ghi đè lên quy tắc định dạng của chủ đề.

Nếu bạn chưa từng làm điều đó trước đây, vui lòng xem thêm bài viết về cách thêm CSS trong WordPress cho người mới bắt đầu của chúng tôi.

Ngoài CSS, bạn cũng có thể cần thêm một số chức năng để sửa đổi giao diện mặc định cho form bình luận WordPress của bạn. Nếu bạn chưa làm điều đó trước đây, vui lòng xem bài viết của chúng tôi về cách sao chép và dán code trong WordPress .

Qua trở lại chủ đề của bài viết này, chúng ta hãy tìm hiểu xem làm thế nào để tùy biến form bình luận WordPress.

Vì đây là một hướng dẫn khá toàn diện, chúng tôi đã tạo một bảng nội dung để bạn có thể điều hướng dễ dàng:

Thay đổi form bình luận WordPress bằng các lớp CSS mặc định
Thêm đăng nhập xã hội vào form bình luận WordPress
Thêm văn bản chính sách bình luận trong form bình luận WordPress
Di chuyển trường văn bản bình luận xuống phía dưới
Xóa trường website (URL) khỏi form bình luận WordPress
Thêm Đăng ký vào theo dõi bình luận trong WordPress
Thêm Quicktags vào form bình luận trong WordPress

Trong hầu hết các chủ đề WordPress có một template gọi là Comments.php. Tập tin này được sử dụng để hiển thị bình luận và form nhập bình luận trên các bài đăng trên blog của bạn. Form bình luận WordPress được tạo bằng cách sử dụng chức năng : <?php comment_form(); ?>.

Theo mặc định, chức năng này tạo ra form bình luận của bạn với ba trường cơ bản (Tên, Email và website), một trường để nhập bình luận dưới dạng văn bản, một checkbox tuân thủ GDPR và nút gửi.

Bạn có thể dễ dàng sửa đổi từng trường này bằng cách điều chỉnh các lớp CSS mặc định. Dưới đây là danh sách các lớp CSS mặc định mà WordPress thêm vào mỗi form bình luận.

Hãy tiếp tục theo dõi và cố gắng thay đổi một số điều, để bạn có thể có thêm vài ý tưởng hay về cách thức hoạt động của nó.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18	`#respond { }` `#reply-title { }` `#cancel-comment-reply-link { }` `#commentform { }` `#author { }` `#email { }` `#url` `{ }` `#comment` `#submit` `.comment-notes { }` `.required { }` `.comment-form-author { }` `.comment-form-email { }` `.comment-form-url` `{ }` `.comment-form-comment { }` `.comment-form-cookies-consent { }` `.form-allowed-tags { }` `.form-submit`

Chỉ cần tinh chỉnh các lớp CSS này, bạn hoàn toàn có thể thay đổi giao diện của form bình luận WordPress. Chúng ta sẽ tiếp tục thử thay đổi kiểu văn bản của tên tác giả và các trường URL

Đầu tiên, chúng ta sẽ bắt đầu bằng cách làm nổi bật trường đang hoạt động. Làm nổi bật trường hiện đang hoạt động làm cho form của bạn dễ tiếp cận hơn đối với những người có nhu cầu đặc biệt và nó cũng làm cho form bình luận của bạn trông đẹp hơn trên các thiết bị nhỏ hơn.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

#respond {
background: #fbfbfb;
padding:0 10px 0 10px;
}

/* Highlight active form field */

#respond input[type=text], textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #DDDDDD;
}

#respond input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
margin: 5px 1px 3px 0px;
border: 2px solid rgba(81, 203, 238, 1);
}

Đây là hình ảnh form bình luận của theme Twenty Sixteen của WordPress sau khi thay đổi:

Sử dụng các lớp này, bạn có thể thay đổi cách văn bản xuất hiện bên trong các hộp đầu vào. Chúng ta sẽ tiếp tục và thay đổi kiểu văn bản của tên tác giả và các trường URL.

1
2
3
4
5
6
7
8
9
10
11

#author, #email {
font-family: "Open Sans", "Droid Sans", Arial;
font-style:italic;
color:#1d1d1d;
letter-spacing:.1em;
} #url  {
color: #1d1d1d;
font-family: "Luicida Console", "Courier New", "Courier", monospace;
}

Nếu bạn nhìn kỹ vào ảnh chụp màn hình bên dưới, tên trường và phông chữ trường email sẽ khác với URL trang web.

Bạn cũng có thể thay đổi kiểu của nút gửi form bình luận WordPress. Thay vì sử dụng nút gửi mặc định, chúng ta có thể thêm bóng đổ và các hiệu ứng trong CSS3.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

##submit {
background:-moz-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-webkit-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-o-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-ms-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
background-color:#44c767;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
} #submit:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5cbf2a), color-stop(1, #44c767));
background:-moz-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-webkit-linear-gradient(top, #5cbf2a 5%, #44c767
100%);
background:-o-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-ms-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
background-color:#5cbf2a;
}
#submit:active {
position:relative;
top:1px;
}

Đưa form bình luận WordPress lên cấp độ cao hơn

Bạn có thể nghĩ rằng những điều trên quá cơ bản, nhưng chúng ta cần bắt đầu tại đó để mọi người đền có thể theo kịp.

Bạn có thể đưa form bình luận WordPress của mình lên cấp độ tiếp theo bằng cách sắp xếp lại các trường biểu mẫu, thêm thông tin đăng nhập mạng xã hội, theo dõi bình luận, quicktags …

Hãy bắt đầu với việc thêm thông tin đăng nhập xã hội vào bình luận WordPress.

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Đăng nhập mạng xã hội WordPress. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress .

Sau khi kích hoạt, bạn cần truy cập Settings » WP Social Login để định cấu hình cài đặt plugin.

Plugin sẽ yêu cầu các mã API để kết nối với các nền tảng xã hội. Bạn sẽ thấy các đường liên kết đến các hướng dẫn nhập thông tin cho từng nền tảng.

Sau khi nhập các mã key API, hãy nhấp vào nút lưu cài đặt để lưu các thay đổi của bạn.

Bây giờ bạn có thể truy cập trang web của mình để xem các nút đăng nhập mạng xã hội ở phía trên form bình luận của bạn.

Chúng ta đều thích tất cả người dùng của mình dành ra vài phút để viết vài dòng bình luận trên trang của mình. Tuy nhiên, để tạo ra một môi trường thảo luận lành mạnh, việc phải kiểm duyệt các bình luận là rất quan trọng.

Để mọi thứ trở nên rõ ràng, chúng ta có thể tạo ra trang chính sách bình luận, nhưng bạn không nên đặt liên kết này ở cuối trang.

Chúng tôi muốn làm cho chính sách bình luận trở nên nổi bật và hiển thị cho tất cả người dùng đang để lại bình luận. Đây là lý do tại sao chúng tôi quyết định thêm chính sách bình luận trong form bình luận WordPress của mình.

Nếu bạn muốn tạo thêm một trang chính sách bình luận, điều đầu tiên bạn cần làm là tạo một trang WordPress và xác định chính sách bình luận của bạn (bạn có thể sử dụng lại trang mẫu của chúng tôi và sửa đổi nó để đáp ứng nhu cầu của bạn).

Sau đó, bạn có thể thêm đoạn mã sau vào tập tin functions.php trên theme của bạn hoặc một plugin dành riêng cho trang.

1
2

3
4
5
6

function wpbeginner_comment_text_before($arg) {
$arg['comment_notes_before'] = "<p class='comment-policy'>We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our <a href='http://www.example.com/comment-policy-page/'>comment policy</a>.</p>";
return $arg;
} add_filter('comment_form_defaults', 'wpbeginner_comment_text_before');

Đoạn mã trên sẽ thay thế form bình luận mặc định trước khi ghi chú bằng văn bản. Chúng tôi cũng đã thêm một lớp CSS trong mã, để có thể làm nổi bật thông báo bằng CSS. Đây là CSS mẫu mà chúng tôi đã sử dụng:

1
2
3
4
5
6
7
8
9 p.comment-policy { border: 1px solid #ffd499; background-color: #fff4e5; border-radius: 5px; padding: 10px; margin: 10px 0px 10px 0px; font-size: small; font-style: italic; }

Phía dưới là cách nó hiển thị trên trang web thử nghiệm của chúng tôi:

Nếu bạn muốn hiển thị liên kết sau vùng văn bản bình luận, hãy thử sử dụng đoạn mã sau đây.

1
2

3
4
5
6

function wpbeginner_comment_text_after($arg) {
$arg['comment_notes_after'] = "<p class='comment-policy'>We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our <a href='http://www.example.com/comment-policy-page/'>comment policy</a>.</p>";
return $arg;
} add_filter('comment_form_defaults', 'wpbeginner_comment_text_after');

Đừng quên thay đổi URL cho phù hợp, để nó đi đến trang chính sách bình luận của bạn chứ không phải trang example.com

.

Theo mặc định, form bình luận WordPress hiển thị vùng văn bản bình luậntrước rồi đến tên, email và các trường trang web. Thay đổi này đã được giới thiệu trong phiên bản WordPress 4.4.

Trước đó, các trang web WordPress đã hiển thị các trường tên, email và trang web trước tiên và sau đó là hộp văn bản bình luận. Chúng tôi cảm thấy rằng người dùng đã quen sử dụng form bình luận theo thứ tự đó, vì vậy chúng tôi vẫn sử dụng thứ tự trường cũ trên WPBeginner.

Nếu bạn muốn làm điều đó, bạn chỉ cần thêm đoạn mã sau vào tập tin functions.php trong theme của bạn hoặc một plugin riêng của trang.

1
2
3
4
5
6
7
8

function wpb_move_comment_field_to_bottom( $fields ) {
$comment_field = $fields['comment'];
unset( $fields['comment'] );
$fields['comment'] = $comment_field;
return $fields;
} add_filter( 'comment_form_fields', 'wpb_move_comment_field_to_bottom');

Mã này chỉ đơn giản là di chuyển trường nhập văn bản bình luận xuống dưới cùng.

Xóa trường website (URL) khỏi Form bình luận WordPress

Các trường nhập website trong các form bình luận thu hút rất nhiều spam. Mặc dù loại bỏ nó cũng sẽ không ngăn chặn được những kẻ gửi thư rác hay làm giảm bình luận spam, nhưng nó chắc chắn sẽ giúp bạn tránh vô tình phê duyệt một bình luận với liên kết đến trang web của tác giả xấu.

Nó cũng sẽ giảm một trường từ form bình luận, giúp nó trở nên dễ dàng và thân thiện hơn với người dùng. Để biết thêm về chủ đề này, hãy xem thêm bài viết của chúng tôi về việc xóa trường url website khỏi form bình luận WordPress

Để xóa trường URL khỏi form bình luận, bạn chỉ cần thêm đoạn mã sau vào tệp tin functions.php của bạn hoặc một plugin dành riêng cho trang.

1
2
3
4
5 function wpbeginner_remove_comment_url($arg) { $arg['url'] = ''; return $arg; } add_filter('comment_form_default_fields', 'wpbeginner_remove_comment_url');

Khi người dùng để lại bình luận trên trang web của bạn, họ có thể muốn theo dõi chủ đề đó để xem có ai trả lời bình luận của họ hay không. Bằng cách thêm checkbox đăng ký theo dõi bình luận, bạn cho phép người dùng nhận thông báo tức thì mỗi khi bình luận mới xuất hiện trên bài đăng.

Để thêm hộp checkbox này, điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Đăng ký theo dõi bình luận. Khi kích hoạt, bạn cần truy cập Settings » Subscribe to Comments để định dạng cấu hình cài đặt plugin.

Để biết hướng dẫn chi tiết từng bước, hãy xem bài viết của chúng tôi về cách cho phép người dùng đăng ký theo dõi bình luận trong WordPress .

Quicktags là các nút định dạng cho phép người dùng dễ dàng tùy biến cho bình luận của họ. Chúng bao gồm các nút để in đậm, in nghiêng, thêm liên kết hoặc quote.

Để thêm quicktags, bạn cần cài đặt và kích hoạt plugin Quicktags bình luận cơ bản. Để biết chi tiết, hãy xem bài viết của chúng tôi về cách dễ dàng thêm quicktags trong form bình luận WordPress .

Form bình luận của bạn sau khi thêm quicktags sẽ trông như sau.

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách tùy biến form bình luận trên WordPress để giúp trang của bạn trở nên thú vị hơn với người sử dụng. Bạn cũng có thể muốn xem thêm các mẹo để nhận được nhiều bình luận về bài đăng trên blog WordPress của mình.

Nếu bạn thích bài viết này, vui lòng đăng ký Kênh YouTube của chúng tôi để xem video hướng dẫn. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook .

programming css Comment trong HTML Command trong HTML