• Tin tức
  • Network
    • Mạng cơ bản
    • Hyper-V
    • Linux
    • Windown Server 2012
  • Security
    • Basic Hacking
    • Deface
    • Kali Linux / Parrot
    • SQL Injection
  • Thủ thuật
    • Khóa Học Miễn Phí
    • Code
    • Mẹo Vặt Máy Tính
    • Facebook
    • Windows 7/8/10/11
    • Đồ Họa
    • Video
  • Software
    • Phần mềm máy tính
    • Phần mềm điện thoại
  • Tin học văn phòng
  • Kiến thức
  • MMO
    • Advertisers – Publishers
    • Affiliate Program
    • Kiếm tiền bằng điện thoại
    • Pay Per Click – PPC
AnonyViet
  • Tin tức
  • Network
    • Mạng cơ bản
    • Hyper-V
    • Linux
    • Windown Server 2012
  • Security
    • Basic Hacking
    • Deface
    • Kali Linux / Parrot
    • SQL Injection
  • Thủ thuật
    • Khóa Học Miễn Phí
    • Code
    • Mẹo Vặt Máy Tính
    • Facebook
    • Windows 7/8/10/11
    • Đồ Họa
    • Video
  • Software
    • Phần mềm máy tính
    • Phần mềm điện thoại
  • Tin học văn phòng
  • Kiến thức
  • MMO
    • Advertisers – Publishers
    • Affiliate Program
    • Kiếm tiền bằng điện thoại
    • Pay Per Click – PPC
No Result
View All Result
  • Tin tức
  • Network
    • Mạng cơ bản
    • Hyper-V
    • Linux
    • Windown Server 2012
  • Security
    • Basic Hacking
    • Deface
    • Kali Linux / Parrot
    • SQL Injection
  • Thủ thuật
    • Khóa Học Miễn Phí
    • Code
    • Mẹo Vặt Máy Tính
    • Facebook
    • Windows 7/8/10/11
    • Đồ Họa
    • Video
  • Software
    • Phần mềm máy tính
    • Phần mềm điện thoại
  • Tin học văn phòng
  • Kiến thức
  • MMO
    • Advertisers – Publishers
    • Affiliate Program
    • Kiếm tiền bằng điện thoại
    • Pay Per Click – PPC
No Result
View All Result
AnonyViet
No Result
View All Result

10 ví dụ code CSS dễ học nhất trong 10 phút

Viet Anony by Viet Anony
23/11/2021
in Code
Reading Time: 9 mins read
A A
0

Mục lục bài viết

  1. 10 ví dụ code CSS dễ học nhất trong 10 phút
    1. 1. Định dạng văn bản
    2. 2. Thay đổi thuộc tính chữ
    3. 3. Thay đổi màu liên kiết
    4. 4. Xóa đường gạch dưới của liên kết
    5. 5. Tạo nút liên kết bằng CSS
    6. 6. Tạo hộp văn bản
    7. 7. Căn giữa đối tượng
    8. 8. Điều chỉnh padding
    9. 9. Highlight các hàng trong bảng
    10. 10. Làm trong suốt và làm mờ ảnh

Khi bạn đã bắt đầu tìm hiểu về HTML, có thể bạn sẽ muốn trang trí thêm cho trang web của mình trở nên đẹp hơn. Code CSS chính là thứ bạn đang cần để làm điều đó. CSS cho phép bạn áp dụng các thay đổi trên toàn bộ trang của mình mà không cần dựa vào inline styling.

10 ví dụ code CSS dễ học nhất trong 10 phút

Các bài viết liên quan

top 3 website hoc lap trinh web tot nhat

Top 4 Website học lập trình Web miễn phí tốt nhất trong năm 2022

29/03/2022
godot lap trinh game

Có nên học Godot Engine để lập trình Game không?

15/03/2022 - Updated on 17/03/2022
hoc lap trinh game de khong

Học lập trình Game dễ không? Tiềm năng của ngành lập trình game?

09/03/2022
Nên chọn Flutter và React Native trong năm 2022? 8

Nên chọn Flutter và React Native trong năm 2022?

20/02/2022

Dưới đây là một số ví dụ CSS đơn giản để bạn có thể thực hiện một số thay đổi cơ bản trên trang web.

10 ví dụ code CSS dễ học nhất trong 10 phút

1. Định dạng văn bản

Với CSS, bạn không cần phải thay đổi thuộc tính của từng phần tử HTML. CSS có thể áp dụng thuộc tính cho tất cả các tag trong file HTML.

Giả sử bạn muốn mọi đoạn văn trong thẻ <p> lớn hơn bình thường một chút và thay đổi màu chữ thành màu xám đậm  thì có thể code CSS như thế này:

p { font-size: 120%; color: dimgray; }

Bất cứ khi nào trình duyệt hiển thị một đoạn văn, văn bản đó sẽ có kích thước (lớn hơn 120 phần trăm so với bình thường) và có màu “dimgray”.

Nếu bạn muốn biết mình có thể sử dụng những màu nào trong CSS thì có thể xem danh sách màu của Mozilla tại đây.

2. Thay đổi thuộc tính chữ

Nếu bạn muốn thu nhỏ chữ viết hoa thì có thể sử dụng đoạn code dưới đây để áp dụng cho các tag <p> trong file HTML.

p.smallcaps { font-variant: small-caps; }

Để áp dụng chỉ 1 tag <p> trong file HTML thì bạn có thể dùng thuộc tính class.

<p class="smallcaps">Your paragraph here.</p>

Thêm dấu chấm và tên class vào trong file CSS. Chỉ có phân tử html sử dụng class đó mới áp dụng được thuộc tính bạn viết trong file CSS mà thôi.

Nếu bạn muốn thay đổi một tập hợp văn bản thành một trường hợp cụ thể, hãy sử dụng code CSS sau:

text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;

Thuộc tính cuối cùng sẽ viết hoa chữ cái đầu tiên của mỗi câu.

3. Thay đổi màu liên kiết

Thay đổi thuộc tính không giới hạn ở các đoạn văn. Có 4 màu khác nhau mà bạn có thể áp dụng cho liên kết: màu tiêu chuẩn, màu đã truy cập, màu khi di chuột vào và màu khi bạn nhấn vào liên kết. Bạn có thể thử đoạn code CSS này để hiểu rõ hơn:

a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }

Tùy vào ngữ cảnh cụ thể và thao tác của người dùng mà liên kết sẽ đổi màu theo

4. Xóa đường gạch dưới của liên kết

Các liên kết sẽ trở nên đẹp hơn nếu bạn loại bỏ phần gạch trên dưới liên kết bằng cách sử dụng thuộc tính “text-decoration”. Bạn có thể sử dụng đoạn code CSS dưới đây để loại bỏ dấu gạch chân đó:

a { text-decoration: none; }

Bất kỳ thứ gì có thẻ liên kết (“a”) sẽ không được gạch chân. Bạn muốn thêm dấu gạch dưới khi người dùng di chuột qua liên kết? Chỉ cần sử dụng:

a:hover { text-decoration: underline; }

Bạn cũng có thể áp dụng thuộc tính này vào các liên kết active để đảm bảo gạch chân không biến mất khi bạn nhấp vào liên kết.

5. Tạo nút liên kết bằng CSS

Bạn muốn liên kết của bạn thu hút nhiều sự chú ý hơn? Vậy thì bạn có thể tạo một nút bấm liên kết bằng code CSS dưới đây:

a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }

10 ví dụ code CSS dễ học nhất trong 10 phút 7

Mình sẽ giải thích đoạn code CSS trên.

Đoạn code bao gồm tất cả bốn trạng thái liên kết đảm bảo rằng nút liên kết (button) không biến mất khi người dùng di chuột qua hoặc nhấp vào nó. Bạn cũng có thể đặt các thông số khác nhau cho 4 trạng thái của liên kết, ví dụ: thay đổi màu nút hoặc văn bản.

Màu nền được đặt bằng thuộc tính background-color và màu văn bản là color. Padding xác định kích thước của button.

Text-align đảm bảo rằng văn bản được hiển thị ở trung tâm của button, thay vì lệch sang một bên. Mình cũng loại bỏ dấu gạch dưới của liên kết như đã nói ở trên.

“display: inline-block” phức tạp hơn một chút. Tóm lại, nó cho phép bạn thiết lập chiều cao và chiều rộng của đối tượng. Ngoài ra, các items sẽ được xếp cùng nhau trên một dòng.

6. Tạo hộp văn bản

Một đoạn văn đơn giản sẽ không có gì thú vị. Nếu bạn muốn làm nổi bật một phần tử trên trang, bạn có thể thêm đường viền xung quanh đoạn văn bản đó. Ví dụ đoạn code CSS sau:

p.important { border-style: solid; border-width: 5px; border-color: purple; }

Nó sẽ tạo ra một đường viền màu tím, rộng năm pixel, xung quanh bất kỳ đoạn văn nào có class important. Để tạo một đoạn văn được áp dụng thuộc tính trên, bạn chỉ cần code:

<p class="important">Your important paragraph here.</p>

Có nhiều kiểu viền khác nhau mà bạn có thể áp dụng ngoài “solid” như “dotted” hoặc “double”. Trong khi đó, chiều rộng (width) có thể là  “thin”, “medium”, hoặc “thick”. Thậm chí, bạn còn có thể xác định độ dày của từng cạnh đường viền:

border-width: 5px 8px 3px 9px;

Đường viền trên cùng là 5 pixel, đường viền bên phải là 8 pixel, đường viền dưới là 3 pixel và đường viền bên trái là 9 pixel.

7. Căn giữa đối tượng

Đối với các tác vụ thông thường, việc căn giữa các phần tử bằng code CSS sẽ không trực quan. Tuy nhiên, bạn sẽ quen khi thực hiện được một vài lần.

Đối với phần tử khối (block element), thường là hình ảnh, bạn có thể sử dụng thuộc tính margin:

.center { display: block; margin: auto; }

Phần tử được hiển thị dưới dạng một khối (block) và lề (margin) ở mỗi bên được đặt tự động. Nếu bạn muốn căn giữa tất cả các ảnh trên một trang nhất định, bạn chỉ cần thêm “margin: auto” vào thẻ img:

img { margin: auto; }

Nhưng nếu bạn muốn căn giữa văn bản bằng CSS thì sao? Hãy sử dụng đoạn code CSS này:

.centertext { text-align: center; }

Vậy là bạn chỉ cần thêm class “centertext” vào thẻ để căn giữa văn bản.

<p class="centertext">This text will be centered.</p>

8. Điều chỉnh padding

Padding của một phần tử sẽ chỉ định bao nhiêu không gian ở mỗi bên của phần tử. Ví dụ: nếu bạn thêm 25 pixel padding vào cuối phần tử ảnh, văn bản phía dưới ảnh sẽ bị đẩy xuống 25 pixel. Nhiều phần tử có thể thêm padding chứ không chỉ mỗi hình ảnh.

Giả sử bạn muốn mọi hình ảnh có 20 pixel padding ở hai bên trái và phải và 40 pixel ở trên cùng và dưới cùng. Vậy thì chỉ cần bạn code:

img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; }

Tuy nhiên, có một cách code bằng cách gộp tất cả thông tin trong 1 dòng code CSS duy nhất:
img { padding: 40px 25px 40px 25px; }
Thuộc tính padding sẽ hiểu và đặt padding ở trên cùng, bên phải, dưới cùng và bên trái. Nhờ chỉ sử dụng hai giá trị: 40 và 25, bạn hoàn toàn có thể làm cho đoạn code CSS ngắn hơn nữa:
img { padding: 40px 25px }
Khi bạn chỉ sử dụng hai giá trị, giá trị đầu tiên được đặt cho trên cùng và dưới cùng, trong khi giá trị thứ hai sẽ ở bên trái và bên phải.

9. Highlight các hàng trong bảng

CSS làm cho bảng trông đẹp hơn nhiều so với mặc định. Thêm màu, điều chỉnh đường viền và làm cho bảng của bạn tự động điều chỉnh kích thước khi hiển thị trên điện thoại. Ví dụ code CSS đơn giản này sẽ cho bạn thấy cách làm nổi bật các hàng trong bảng khi bạn di chuột qua chúng.

tr:hover { background-color: #ddd; }

Bây giờ bất cứ khi nào bạn di chuột qua một ô trong bảng, hàng đó sẽ thay đổi màu.

10. Làm trong suốt và làm mờ ảnh

CSS cũng có thể giúp bạn làm những điều thú vị với ảnh. Bạn có thể làm mờ ảnh với đoạn code CSS dưới đây:

img { opacity: 0.5; filter: alpha(opacity=50); }

Thuộc tính “filter” hoạt động tương tự như “opacity”, nhưng Internet Explorer 8 trở về trước không nhận dạng được độ mờ. Vậy nên đối với các trình duyệt cũ hơn, bạn nên thêm thuộc tính “filter”.

Bây giờ hình ảnh đã hơi trong suốt, bạn có thể làm cho chúng mờ hoàn toàn khi di chuột qua:

img:hover { opacity: 1.0; filter: alpha(opacity=100); }

Trên đây là 10 ví dụ code CSS dễ hiểu nhất mà bạn có thể học trong 10 phút. Bạn có thấy dễ hiểu không nào? Ngoài ra, bạn cũng có thể học thêm về 17 ví dụ HTML trong 10 phút tại đây.

Tags: codecsslập trình
Previous Post

Sự khác nhau giữa HTTP và HTTPS

Next Post

Tại sao ổ cứng 1TB nhưng hiển thị chỉ có 931GB

Viet Anony

Viet Anony

Related Posts

Cách đóng gói code Python 9
Code

Cách đóng gói code Python

25/04/2022
Có nên dùng Unity để lập trình game không? 10
Code

Có nên dùng Unity để lập trình game không?

07/04/2022
Sử dụng httpx như một trình duyệt Web của Python 11
Code

Sử dụng httpx như một trình duyệt Web của Python

03/04/2022
top 3 website hoc lap trinh web tot nhat
Code

Top 4 Website học lập trình Web miễn phí tốt nhất trong năm 2022

29/03/2022
tao website cuoi mien phi
Code

Hướng dẫn tạo Website thông báo đám cưới miễn phí

21/03/2022
godot lap trinh game
Godot

Có nên học Godot Engine để lập trình Game không?

15/03/2022 - Updated on 17/03/2022
Next Post
Tại sao ổ cứng 1TB nhưng hiển thị chỉ có 931GB 12

Tại sao ổ cứng 1TB nhưng hiển thị chỉ có 931GB

guest
guest

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.

0 Comments
Inline Feedbacks
View all comments

Liên hệ Quảng Cáo

Lien he AnonyViet

Đối tác —

Fshare

Các bài mới

5 Website giúp bạn tìm chủ tài khoản Email là ai 13

5 Website giúp bạn tìm chủ tài khoản Email là ai

24/05/2022
godeal24

Giá bản quyền Windows 10 chỉ 5.71$, miễn phí nâng cấp lên Windows 11

23/05/2022
Cách thiết lập Shadowsocks với Outline để tạo Proxy cho riêng bạn 14

Cách thiết lập Shadowsocks với Outline để tạo Proxy cho riêng bạn

23/05/2022
coupon dmca

Cách bảo vệ bản quyền Website với DMCA – Coupon nâng cấp Pro giảm 50%

23/05/2022
hosting azdigi

Đánh giá gói Turbo Business Hosting của AZDIGI

22/05/2022

Ads

Giới thiệu

AnonyViet

AnonyViet

Nơi chia sẻ những kiến thức mà bạn chưa từng được học trên ghế nhà trường!

Chúng tôi sẵn sàng đón những ý kiến đóng góp, cũng như bài viết của các bạn gửi đến AnonyViet.

Hãy cùng AnonyViet xây dựng một cộng đồng CNTT lớn mạnh nhất!

Giới thiệu

AnonyViet là Website chia sẻ miễn phí tất cả các kiến thức về công nghệ thông tin. AnonyViet cung cấp mọi giải pháp về mạng máy tính, phần mềm, đồ họa và MMO.

Liên hệ

Email: anonyviet.com[@]gmail.com

1409 Hill Street #01-01A
Old Hill Street Police Station
Singapore 179369

 

Bản quyền: DMCA.com Protection Status

Bài viết mới

  • 5 Website giúp bạn tìm chủ tài khoản Email là ai
  • Giá bản quyền Windows 10 chỉ 5.71$, miễn phí nâng cấp lên Windows 11
  • Cách thiết lập Shadowsocks với Outline để tạo Proxy cho riêng bạn
  • Cách bảo vệ bản quyền Website với DMCA – Coupon nâng cấp Pro giảm 50%
  • Đánh giá gói Turbo Business Hosting của AZDIGI
  • 5 vụ lừa đảo nguy hiểm nhất trên không gian mạng

©2022 AnonyViet - Chúng tôi mang đến cho bạn những kiến thức bổ ích về Công nghệ. Google iwin888 Bing tải game iwin Github tải iwin apk Github tải win456 Youtube ku fun wikipedia 88vin reddit twin 567LIVE MMLive SP666 92lottery sun86 stackoverflow

No Result
View All Result
  • Tin tức
  • Network
    • Mạng cơ bản
    • Hyper-V
    • Linux
    • Windown Server 2012
  • Security
    • Basic Hacking
    • Deface
    • Kali Linux / Parrot
    • SQL Injection
  • Thủ thuật
    • Khóa Học Miễn Phí
    • Code
    • Mẹo Vặt Máy Tính
    • Facebook
    • Windows 7/8/10/11
    • Đồ Họa
    • Video
  • Software
    • Phần mềm máy tính
    • Phần mềm điện thoại
  • Tin học văn phòng
  • Kiến thức
  • MMO
    • Advertisers – Publishers
    • Affiliate Program
    • Kiếm tiền bằng điện thoại
    • Pay Per Click – PPC

©2022 AnonyViet - Chúng tôi mang đến cho bạn những kiến thức bổ ích về Công nghệ. Google iwin888 Bing tải game iwin Github tải iwin apk Github tải win456 Youtube ku fun wikipedia 88vin reddit twin 567LIVE MMLive SP666 92lottery sun86 stackoverflow

wpDiscuz
pixel