Công ty thiết kế website chuẩn SEO Web Mới
Tìm kiếm
Công ty thiết kế website chuẩn SEO Web Mới

CSS3 là gì? Tìm hiểu chi tiết về CSS3

CSS3 là gì? Đó là bản cập nhật lần 3 của CSS, với nhiều tính năng mới như bo tròn góc, tạo độ bóng, gradient, transitions hay animations cũng như các bố cục mới như multiple-column, flexbox hay grid layout.

CSS3 là gì? Tìm hiểu chi tiết về CSS3

CSS3 là gì? Tìm hiểu chi tiết về CSS3

Mục Lục [Ẩn]


CSS3 là gì?

CSS3 là bản cập nhật lần 3 của CSS, với nhiều tính năng mới như bo tròn góc, tạo độ bóng, gradient, transitions hay animations cũng như các bố cục mới như multiple-column, flexbox hay grid layout, đang rất được ưa chuộng trong việc thiết kế website

Để có được CSS3 thì đầu tiên không thể không nhắc đến CSS là gì? Cascading Style Sheets (CSS) là một ngôn ngữ được sử dụng để minh họa giao diện, kiểu và định dạng của tài liệu được viết bằng bất kỳ ngôn ngữ nào. Nói một cách dễ hiểu, được dùng để tạo kiểu và sắp xếp bố cục của các trang web. CSS3 là phiên bản mới nhất của phiên bản CSS, CSS2 trước đó.

Xem thêm bài viết:

CSS là gì?

Bootstrap là gì?

Các tính năng mới của CSS3 là gì?

Bộ chọn (CSS3 selectors)

CSS cấp 1 cho phép kết hợp các phần tử theo loại, lớp hay ID. Đối với CSS3, bạn hoàn toàn có thể nhắm đến mọi yếu tố trên trang với các bộ chọn. Ngoài việc mở rộng dựa trên các bộ chọn thuộc tính đã giới thiệu trong CSS2. CSS3 đã thêm 3 bộ chọn thuộc tính cho phép lựa chọn chuỗi con.

[attribute^=value] Chọn tất cả thành phần với thuộc tính có giá trị bắt đầu bằng “value”.

Ví dụ: a[href^=https://webmoi.vn'] {color: red;}

[attribute$=value]  Chọn tất cả thành phần với thuộc tính có giá trị kết thúc bằng “value”.

Ví dụ: a[href$='.html'] {color: green;}

[attribute*=value]  Chọn tất cả thành phần với thuộc tính có giá trị đặc biệt bằng “value”.

Ví dụ: img[src*='artwork'] { border-color: #C3B087 #FFF #FFF #C3B087; }

Pseudo-classes

Một vài ví dụ như :link, :visited, :hover, :active, và :focus.

Một vài pseudo-class được thêm vào CSS3. Một là :root, cho phép chỉ đến phần tử gốc của một tài liệu. Trong HTML, đó là thẻ <html>. Vì :root là chung, nên nó cho phép lập trình viên lựa chọn phần tử root của một tài liệu XML mà không cần biết tên của nó. Để cho phép scrollbar khi cần trong tài liệu HTML, ta có:

:root{overflow:auto;}

Như là một bổ sung tới :first-child selector, :last-child đã được thêm vào, với selector này, ta có thể lựa chọn phần tử cuối cùng của phần tử cha. Ví dụ một trang với các bài báo được chứa trong thẻ <div class=’article’></div>, chúng ta muốn style cho phần tử cuối cùng: div.article > p:last-child{font-style: italic;}

Một bộ chọn pseudo-class được thêm vào là :target. Để tăng sự chú ý cho tiêu đề của một cái tab khi được người dùng click, link đó sẽ được in đậm lên, như sau:

span.notice:target{font-size: 2em; font-style: bold;}

Selector phủ định, *:not *có thể ghép với các bộ chọn khác. Ví dụ để đặt thuộc tính border xung quanh img mà chưa có border, chúng ta có thể dùng:

img:not([border]){border: 1;}

Màu trong CSS3

CSS3 hỗ trợ thêm các thuộc tính color như sau:

RGBA color

HSL color

HSLA color

Opacity

CSS3 RGBA là gì?

RGBA là viết tắt của Red Green Blue Alpha. Đây là một sự kế thừa từ CSS2, Alpha xác định độ trong suốt của một màu và số tham số là một số từ 0.0 đến 1.0. Một cú pháp mẫu của RGBA như sau:−

#d1 {background-color: rgba(255, 0, 0, 0.5);} 
#d2 {background-color: rgba(0, 255, 0, 0.5);} 
#d3 {background-color: rgba(0, 0, 255, 0.5);}

CSS3 HSL và HSLA là gì?

HSL là viết tắt cho Huge, Saturation, Lightness. Ở đây, Huge là độ màu, Saturation, Lightness là các giá trị % từ 0 tới 100%. Một cú pháp mẫu của HSL như sau:

#g1 {background-color: hsl(120, 100%, 50%);}  
#g2 {background-color: hsl(120, 100%, 75%);}  
#g3 {background-color: hsl(120, 100%, 25%);}

HSLA là viết tắt cho Huge, Saturation, Lightness và Alpha. Giá trị Alpha giống như trong RGBA. Một cú pháp mẫu của HSLA như sau:

#g1 {background-color: hsla(120, 100%, 50%, 0.3);}  
#g2 {background-color: hsla(120, 100%, 75%, 0.3);}  
#g3 {background-color: hsla(120, 100%, 25%, 0.3);}  

CSS3 Opacity là gì?

opacity là một thuốc màu loãng cần được thêm vào để tăng độ trong suốt. Cú pháp mẫu của Opacity là:

#g1 {background-color:rgb(255,0,0);opacity:0.6;}  
#g2 {background-color:rgb(0,255,0);opacity:0.6;}  
#g3 {background-color:rgb(0,0,255);opacity:0.6;} 

Góc làm tròn: Bán kính đường viền

Bo tròn các góc của box phần tử HTML bằng thuộc tính border-radius trong CSS, bo tròn css có thể áp dụng bo tròn ảnh, tạo ra các hình tròn.

border-radius: 10px;
border-radius: 10px 20px 30px 40px;

Drop Shadows – Hiệu ứng bóng đổ

là một hiệu ứng CSS hiển thị bóng xung quanh một đối tượng được chỉ định. Đây là cú pháp để áp dụng CSS

box-shadow: 2px 5px 0 0 rgba(72,72,72,1);

Text Shadow – Bóng văn bản

Sử dụng thuộc tính text-shadow để tạo ra các bóng đổ cho chữ bằng CSS, công cụ tạo bóng đổ online, một số ví dụ về shadow CSS

.myshadow { color: #151315; text-shadow: 0px 0px 10px #77325a }

Linear Gradients – Độ dốc tuyến tính

Quét màu xuất phát từ 1 phía, có thể theo chiều lên, xuống, trái, phải, đường chéo.

background-image: linear-gradient(#ff8a00, #e52e71);
background-image: linear-gradient(to right, violet, darkred, purple);
background-image: linear-gradient(40deg, rgb(255 0 0) 60%, orange);

Radial Gradients – Độ dốc xuyên tâm

Quét màu xuất phát từ tâm.

background-image: radial-gradient(#ff8a00, #e52e71);
background-image: radial-gradient(circle at top right, #ff8a00, red, #e52e71);

Multiple Background Images – Nhiều hình nền

Thêm background bằng CSS không có gì mới, tính năng này đã có từ khi nó ra đời. Nhưng chúng ta đã giới hạn chỉ thêm một hình ảnh trong một khối khai báo. Bây giờ, CSS3 cho phép tùy chọn thêm nhiều background .

.weather {
  width: 500px;
  height: 280px;
  margin: 50px auto;
  background-image: url("images/overcast.png"),
        url("images/rainbow.png"), 
        url("images/overcast.png"), 
        url("images/sunny.png");
  background-position: 150px 25px, 
        200px 10px, 
        250px 25px, 
        100px 10px;
  background-repeat: no-repeat;

Đối tượng nào phù hợp để học các công nghệ CSS3?

Trước khi cố gắng học CSS3, chúng ta nên làm quen với những điều cơ bản về HTML. Khi chúng ta nắm được các nguyên tắc cơ bản về HTML thì nên học HTML và CSS cùng lúc vì HTML sẽ thú vị hơn nhiều khi chúng ta áp dụng CSS đi cùng với nó. Sau đó, để thêm chức năng động vào các trang web và bạn cần học thêm JavaScript.

Học CSS3 rất dễ dàng và bạn nên học CSS3 nếu như muốn kiểm soát tốt hơn về giao diện trang web của mình. Cùng với HTML, CSS3 hoạt động tuyệt vời để xây dựng các trang và trang web hiện đại, đẳng cấp.

Tại sao CSS3 được ưa chuộng?

Hiện nay, CSS3 và HTML5 được xem là những ngôn ngữ được ưa chuộng nhất trong thiết kế website. Không cần bất kì plugin nào vẫn có thể xem các nội dung media, mang đến trải nghiệm tối ưu về mặt xử lý và tốc độ.

CSS3 sở hữu khả năng tương thích cao với hầu hết mọi trình duyệt phổ biến hiện nay. CSS3 tự động cân chỉnh kích thước phù hợp với các loại thiết bị mà không làm ảnh hưởng nội dung. Hay nói cách khác đó là sự thân thiện của giao diện website đối với các thiết bị di động (Mobile-Friendly). Hiện nay các SERPs đang rất ưu tiên website có sự thân thiện với di động (mobile first-index).

Lởi kết

Cảm ơn các bạn đã tham khảo bài viết về CSS3

  • 0 Bình luận
CEO Bùi Tấn Lực
Bùi Tấn Lực
CEO Bùi Tấn Lực người sáng lập ra Web Mới, là một lập trình viên, người viết content, chuyên tư vấn các vấn đề về website và SEO website, quý khách hãy liên hệ để trao đổi thiết kế website
  • Zalo
Chia sẻ nội dung đánh giá của bạn về CSS3 là gì? Tìm hiểu chi tiết về CSS3
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
Đánh giá của bạn
Tên *
Email
Số điện thoại *
Bình luận, Hỏi đáp
Đăng ký tư vấn miễn phí
Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn
Tỉnh thành
0398.259.259