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ì? Các tính năng mới của CSS3

CSS3 là gì? Đó là phiên bản thứ 3 của CSS và cũng mới nhất hiện giờ, nó thừa hưởng những gì có trong phiên bản trước và bổ sung thêm nhiều tính năng mới, chi tiết như nào hãy cùng chúng tôi phân tích:

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

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

Mục Lục [Ẩn]


CSS3 là gì?

CSS3 là phiên bản thứ 3 của CSS và cũng mới nhất hiện giờ, nó thừa hưởng tất cả những gì có trong phiên bản trước và bổ sung thêm 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 giúp xây dựng bố cục chuyên nghiệp, hiệu ứng chuyển động mượt mà... từ đó hỗ trợ thiết kế website một cách chuyên nghiệp.

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;

Cách học CSS3 hiệu quả

Để học được CSS3 bạn phải có kiến thức cơ bản về HTML và CSS nên nếu chưa rõ thì bạn nên tìm hiểu về 2 cái này trước. HTML và CSS là nền móng để xây dựng một giao diện website hoặc ứng dụng. Hiện nay HTML đang có phiên bản mới với nhiều tính năng là HTML5 bạn cũng nên tìm học. Để cho giao diện trở nên đẹp, chuyên nghiệp, hiện đại, đẳng cấp hơn thì lúc này bạn bắt đầu học CSS3 được rồi đấy. Bên cạnh đó nên học thêm JavaScriptjQuery, AJax để trang web linh động hơn và giúp kiểm soát giao diện tốt hơn.

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

Nhìn vào các chức năng mới của CSS3 đã trình bày ở trên thì bạn đã thấy những gì mà nó mang lại là: giúp người dùng nhận diện các hành động vào một liên kết, giúp định dạng màu sắc đa dạng hơn, giúp làm nổi bật và cân chỉnh hình dạng của một thuộc tính tốt hơn,... qua đó giúp bạn quản lý được cách làm nổi bật giao diện trình bày và làm giao diện trở nên thân thiện hơn với người dùng.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết CSS3 là gì?

  • 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 website, người viết content, chuyên tư vấn các vấn đề về website và SEO website
  • Zalo
Chia sẻ nội dung đánh giá của bạn về CSS3 là gì? Các tính năng mới của 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
0398.259.259